/*
 * SongDrop – Live Rangliste Redesign v1
 * Stil: Live-HUD / Cyber-Rankingboard, ohne bestehende Voting-Logik zu ändern.
 */

.sd-live-layout {
    position: relative;
}

.sd-live-ranking {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(22px, 3vw, 38px) !important;
    border: 1px solid rgba(50, 224, 255, .23) !important;
    border-radius: 30px 12px 30px 12px !important;
    background:
        linear-gradient(135deg, rgba(7, 17, 43, .97) 0%, rgba(3, 17, 35, .94) 52%, rgba(3, 38, 47, .91) 100%) !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 0 1px rgba(133, 129, 255, .05) !important;
}

.sd-live-ranking::before,
.sd-live-ranking::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.sd-live-ranking::before {
    top: -135px;
    right: -100px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(94, 226, 255, .16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,.14), transparent 62%);
    box-shadow: -60px 85px 0 -1px rgba(109, 94, 255, .12), -120px 168px 0 -2px rgba(39, 244, 177, .08);
}

.sd-live-ranking::after {
    left: -70px;
    bottom: -110px;
    width: 330px;
    height: 230px;
    background: radial-gradient(ellipse, rgba(127, 93, 255, .16), transparent 68%);
    filter: blur(8px);
}

.sd-ranking-heading-redesign {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px;
    margin-bottom: 22px !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid rgba(94, 226, 255, .16);
}

.sd-ranking-heading-redesign::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: min(36%, 290px);
    height: 2px;
    background: linear-gradient(90deg, transparent, #7c6dff 30%, #00d9ff 70%, #22ff9a);
    box-shadow: 0 0 18px rgba(0,217,255,.45);
}

.sd-ranking-heading-redesign .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #71e8ff !important;
}

.sd-ranking-heading-redesign__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22ff9a;
    box-shadow: 0 0 12px rgba(34,255,154,.88);
    animation: sdRankingPing 1.55s ease-in-out infinite;
}

.sd-ranking-heading-redesign h2 {
    max-width: 620px;
    margin-top: 6px !important;
    color: #f5fbff !important;
    font-size: clamp(2.25rem, 4vw, 4.45rem) !important;
    letter-spacing: -.052em !important;
    line-height: .93 !important;
}

.sd-ranking-heading-redesign h2 span {
    color: #9c87ff !important;
    text-shadow: 0 0 22px rgba(124,109,255,.34);
}

.sd-ranking-heading-redesign__copy > p:last-child {
    max-width: 570px;
    color: #b5ccda !important;
    font-size: 1rem !important;
}

.sd-ranking-heading-redesign__actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px 11px;
}

.sd-ranking-heading-redesign .sd-live-count,
.sd-ranking-live-state {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px !important;
    border: 1px solid rgba(86, 225, 255, .23);
    border-radius: 11px 4px 11px 4px;
    background: rgba(2, 13, 29, .67);
    color: #d9f8ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sd-ranking-heading-redesign .sd-live-count i,
.sd-ranking-live-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22ff9a;
    box-shadow: 0 0 10px rgba(34,255,154,.8);
}

.sd-ranking-heading-redesign .sd-live-count b {
    color: #fff !important;
    font-size: 13px !important;
}

.sd-ranking-heading-redesign .sd-live-count small {
    color: #92aebc !important;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: .08em;
}

.sd-ranking-live-state {
    border-color: rgba(34,255,154,.28);
    color: #baffdf;
}

.sd-ranking-heading-redesign .sd-text-link {
    color: #c1eaff !important;
    border-bottom: 1px solid rgba(0,217,255,.28);
}

.sd-live-ranking__panel--hud {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 15px !important;
    border: 1px solid rgba(99, 230, 255, .2) !important;
    border-radius: 22px 7px 22px 7px !important;
    background:
        linear-gradient(148deg, rgba(5, 15, 37, .93), rgba(1, 12, 27, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 36px rgba(22, 83, 155, .07),
        0 20px 54px rgba(0,0,0,.2) !important;
}

.sd-live-ranking__panel--hud::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(141, 132, 255, .08);
    border-radius: 15px 3px 15px 3px;
}

.sd-ranking-panel__corner {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 84px;
    height: 56px;
    pointer-events: none;
}
.sd-ranking-panel__corner--left {
    left: 0;
    border-top: 2px solid rgba(0,217,255,.7);
    border-left: 2px solid rgba(0,217,255,.7);
    clip-path: polygon(0 0,100% 0,63% 8%,48% 58%,0 100%);
    filter: drop-shadow(0 0 8px rgba(0,217,255,.48));
}
.sd-ranking-panel__corner--right {
    right: 0;
    border-top: 2px solid rgba(34,255,154,.7);
    border-right: 2px solid rgba(34,255,154,.7);
    clip-path: polygon(0 0,100% 0,100% 100%,53% 58%,37% 8%);
    filter: drop-shadow(0 0 8px rgba(34,255,154,.4));
}

.sd-ranking-panel__pulse-line {
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7c6dff, #00d9ff, #22ff9a, transparent);
    box-shadow: 0 0 16px rgba(0,217,255,.75);
    opacity: .7;
}

.sd-live-ranking__panel--hud .sd-ranking-panel__topline {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) 145px;
    gap: 14px;
    align-items: center;
    min-height: 40px;
    padding: 0 14px 11px;
    border-bottom: 1px solid rgba(119, 224, 255, .13);
    color: #7397a8 !important;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.sd-live-ranking__panel--hud .sd-ranking-panel__topline span:last-child { text-align: right; }

.sd-ranking-panel__hud-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr);
    align-items: center;
    gap: 14px;
    min-height: 36px;
    padding: 7px 14px 9px;
    border-bottom: 1px solid rgba(119, 224, 255, .09);
    color: #7e9aa9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.sd-ranking-panel__hud-row > span:last-child { text-align: right; }
.sd-ranking-panel__hud-row b { color: #22ff9a; }

.sd-ranking-panel__meter {
    height: 19px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
.sd-ranking-panel__meter i {
    width: 7px;
    border-radius: 4px;
    background: linear-gradient(180deg,#8f7cff,#00d9ff,#22ff9a);
    box-shadow: 0 0 10px rgba(0,217,255,.35);
    animation: sdRankingMeter 1.45s ease-in-out infinite;
}
.sd-ranking-panel__meter i:nth-child(1){height:34%;animation-delay:-.1s}.sd-ranking-panel__meter i:nth-child(2){height:72%;animation-delay:-.5s}.sd-ranking-panel__meter i:nth-child(3){height:44%;animation-delay:-.25s}.sd-ranking-panel__meter i:nth-child(4){height:100%;animation-delay:-.7s}.sd-ranking-panel__meter i:nth-child(5){height:58%;animation-delay:-.38s}.sd-ranking-panel__meter i:nth-child(6){height:83%;animation-delay:-.92s}.sd-ranking-panel__meter i:nth-child(7){height:42%;animation-delay:-.63s}.sd-ranking-panel__meter i:nth-child(8){height:64%;animation-delay:-1.05s}

.sd-live-ranking__panel--hud .playlist-wrap {
    position: relative;
    z-index: 2;
}

.sd-live-ranking__panel--hud .sd-live-playlist {
    display: grid;
    gap: 9px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none;
}

.sd-live-ranking__panel--hud .sd-live-playlist > li {
    position: relative;
    display: grid !important;
    grid-template-columns: 105px minmax(0, 1fr) auto auto auto;
    gap: 11px;
    align-items: center;
    min-height: 70px;
    overflow: hidden;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(89, 204, 255, .16) !important;
    border-radius: 13px 4px 13px 4px !important;
    background: linear-gradient(100deg, rgba(8, 24, 52, .84), rgba(3, 16, 34, .95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.026);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sd-live-ranking__panel--hud .sd-live-playlist > li::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,#00d9ff,#22ff9a);
    opacity: .44;
}

.sd-live-ranking__panel--hud .sd-live-playlist > li::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 76px;
    top: 50%;
    width: 126px;
    height: 18px;
    transform: translateY(-50%);
    opacity: .2;
    background:
      linear-gradient(90deg, transparent 0 4%, #00d9ff 4% 7%, transparent 7% 11%, #22ff9a 11% 17%, transparent 17% 22%, #7c6dff 22% 28%, transparent 28% 35%, #00d9ff 35% 42%, transparent 42% 48%, #22ff9a 48% 55%, transparent 55% 62%, #00d9ff 62% 70%, transparent 70% 77%, #7c6dff 77% 84%, transparent 84%);
    filter: drop-shadow(0 0 5px rgba(0,217,255,.5));
}

.sd-live-ranking__panel--hud .sd-live-playlist > li:hover {
    z-index: 1;
    border-color: rgba(0, 217, 255, .44) !important;
    background: linear-gradient(100deg, rgba(18, 34, 73, .94), rgba(3, 25, 45, .98)) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 22px rgba(0,217,255,.08), inset 0 1px 0 rgba(255,255,255,.045);
    transform: translateY(-2px);
}

.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(1) {
    border-color: rgba(34,255,154,.44) !important;
    background: linear-gradient(100deg, rgba(6, 45, 58, .91), rgba(4, 20, 39, .98)) !important;
}
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(1)::before { opacity: 1; background: linear-gradient(180deg,#fff06b,#22ff9a); }
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(2)::before { opacity: .85; background: linear-gradient(180deg,#d9e8ff,#00d9ff); }
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(3)::before { opacity: .75; background: linear-gradient(180deg,#ffb47b,#7c6dff); }

.sd-live-ranking__panel--hud .sd-live-playlist > li > * {
    position: relative;
    z-index: 1;
}

.sd-live-ranking__panel--hud .rank {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 82px;
    min-height: 44px;
    padding: 0 !important;
    color: #cfefff !important;
    border: 1px solid rgba(117, 224, 255, .18) !important;
    border-radius: 10px 3px 10px 3px !important;
    background: rgba(0, 13, 30, .58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    font-size: 19px !important;
    font-weight: 950 !important;
    letter-spacing: -.04em;
}
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(1) .rank { color: #ddffe9 !important; border-color: rgba(34,255,154,.38) !important; background: rgba(34,255,154,.10) !important; }
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(2) .rank { color: #e0f6ff !important; }
.sd-live-ranking__panel--hud .sd-live-playlist > li:nth-child(3) .rank { color: #ffd7c4 !important; }

.sd-live-ranking__panel--hud .song-main {
    min-width: 0;
    display: grid !important;
    gap: 5px;
}
.sd-live-ranking__panel--hud .song-title {
    overflow: hidden;
    color: #f7fbff !important;
    font-size: clamp(16px, 1.6vw, 20px) !important;
    font-weight: 930 !important;
    letter-spacing: -.025em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-live-ranking__panel--hud .song-artist {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #8eb0be !important;
    font-size: 11px !important;
}
.sd-live-ranking__panel--hud .song-artist small {
    padding: 3px 6px;
    color: #65ddff !important;
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 999px;
    background: rgba(0,217,255,.055);
    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sd-live-ranking__panel--hud .platform {
    min-width: 69px;
    padding: 6px 8px !important;
    color: #c4deeb !important;
    border: 1px solid rgba(117,224,255,.15);
    border-radius: 999px;
    background: rgba(2,11,24,.72);
    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .075em;
    text-align: center;
    text-transform: uppercase;
}

.sd-live-ranking__panel--hud .vote-btn {
    min-width: 58px;
    min-height: 43px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px !important;
    color: #04221a !important;
    border: 0 !important;
    border-radius: 10px 3px 10px 3px !important;
    background: linear-gradient(135deg, #1ee8ff, #22ff9a) !important;
    box-shadow: 0 8px 18px rgba(0, 217, 255, .14);
    font-weight: 950 !important;
}
.sd-live-ranking__panel--hud .vote-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34,255,154,.24); }
.sd-live-ranking__panel--hud .vote-btn.is-voted,
.sd-live-ranking__panel--hud .vote-btn:disabled { color: #a7c6cf !important; border: 1px solid rgba(117,224,255,.15) !important; background: rgba(8,25,43,.72) !important; box-shadow: none; }
.sd-live-ranking__panel--hud .vote-icon { font-size: 10px; }

.sd-live-ranking__panel--hud .share-btn,
.sd-live-ranking__panel--hud .report-btn {
    min-height: 34px;
    padding: 0 8px !important;
    color: #85a2af !important;
    border: 1px solid rgba(117,224,255,.13) !important;
    border-radius: 8px 3px 8px 3px !important;
    background: rgba(1,10,23,.52) !important;
    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sd-live-ranking__panel--hud .share-btn:hover { color: #d9fbff !important; border-color: rgba(0,217,255,.4) !important; background: rgba(0,217,255,.08) !important; }
.sd-live-ranking__panel--hud .report-btn:hover { color: #ffb6c8 !important; border-color: rgba(255,75,122,.34) !important; background: rgba(255,75,122,.07) !important; }

.sd-live-ranking__panel--hud .empty-state {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
    border-radius: 17px 5px 17px 5px !important;
    background: linear-gradient(140deg, rgba(12,31,58,.8), rgba(2,16,34,.9)) !important;
}

@keyframes sdRankingPing { 0%,100%{transform:scale(.8);opacity:.55} 50%{transform:scale(1.22);opacity:1} }
@keyframes sdRankingMeter { 0%,100%{transform:scaleY(.48);opacity:.56} 50%{transform:scaleY(1);opacity:1} }

@media (max-width: 960px) {
    .sd-ranking-heading-redesign { align-items: flex-start !important; flex-direction: column; }
    .sd-ranking-heading-redesign__actions { justify-content: flex-start; }
    .sd-live-ranking__panel--hud .sd-live-playlist > li { grid-template-columns: 78px minmax(0, 1fr) auto auto; }
    .sd-live-ranking__panel--hud .platform { display: none; }
    .sd-live-ranking__panel--hud .sd-ranking-panel__topline { grid-template-columns: 78px minmax(0,1fr) 120px; }
}

@media (max-width: 640px) {
    .sd-live-ranking { padding: 18px !important; border-radius: 22px 8px 22px 8px !important; }
    .sd-ranking-heading-redesign h2 { font-size: clamp(2rem, 13vw, 3.2rem) !important; }
    .sd-ranking-heading-redesign__actions { width: 100%; }
    .sd-ranking-heading-redesign .sd-text-link { margin-left: auto; }
    .sd-live-ranking__panel--hud { padding: 10px !important; }
    .sd-live-ranking__panel--hud .sd-ranking-panel__topline { grid-template-columns: 64px minmax(0,1fr) 62px; gap: 8px; padding: 0 7px 9px; }
    .sd-live-ranking__panel--hud .sd-ranking-panel__topline span:last-child { text-align: center; }
    .sd-ranking-panel__hud-row { grid-template-columns: 1fr auto; padding: 7px; }
    .sd-ranking-panel__hud-row > span:last-child { display: none; }
    .sd-live-ranking__panel--hud .sd-live-playlist > li { grid-template-columns: 57px minmax(0,1fr) auto; gap: 8px; min-height: 76px; padding: 9px !important; }
    .sd-live-ranking__panel--hud .rank { width: 48px; min-height: 45px; font-size: 16px !important; }
    .sd-live-ranking__panel--hud .platform,
    .sd-live-ranking__panel--hud .share-btn,
    .sd-live-ranking__panel--hud .report-btn { display: none !important; }
    .sd-live-ranking__panel--hud .vote-btn { min-width: 50px; padding: 0 8px !important; }
    .sd-live-ranking__panel--hud .song-title { font-size: 16px !important; }
    .sd-live-ranking__panel--hud .song-artist { font-size: 10px !important; }
    .sd-live-ranking__panel--hud .sd-live-playlist > li::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-live-ranking *, .sd-live-ranking::before, .sd-live-ranking::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   Live Ranking Struktur Hotfix v2
   - Aktionen rechts untereinander: Anhören / Teilen / Melden
   - Vote Button daneben als große durchgehende Fläche
   - Waveform klar mittig im Ranking-Slot
   ====================================================================== */

.sd-live-ranking__panel--hud .sd-ranking-panel__topline {
    grid-template-columns: 105px minmax(0, 1fr) 278px !important;
}

.sd-live-ranking__panel--hud .sd-live-playlist > li {
    grid-template-columns: 105px minmax(180px, 1fr) minmax(130px, 190px) 84px 74px !important;
    grid-template-areas: "rank song wave actions vote" !important;
    align-items: stretch !important;
    min-height: 94px !important;
    gap: 12px !important;
    padding: 10px 12px !important;
}

.sd-live-ranking__panel--hud .rank {
    grid-area: rank !important;
    align-self: stretch !important;
    width: 82px !important;
    min-height: 58px !important;
}

.sd-live-ranking__panel--hud .song-main {
    grid-area: song !important;
    align-self: center !important;
}

.sd-live-ranking__panel--hud .platform {
    display: none !important;
}

.sd-live-ranking__panel--hud .sd-live-row-wave {
    grid-area: wave !important;
    position: relative !important;
    z-index: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid rgba(117, 224, 255, .09);
    border-radius: 13px 4px 13px 4px;
    background:
        linear-gradient(90deg, transparent, rgba(0,217,255,.055) 18%, rgba(34,255,154,.06) 50%, rgba(124,109,255,.055) 82%, transparent),
        rgba(1, 10, 23, .20);
    overflow: hidden;
}

.sd-live-ranking__panel--hud .sd-live-row-wave::before,
.sd-live-ranking__panel--hud .sd-live-row-wave::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,217,255,.4), rgba(34,255,154,.52), rgba(124,109,255,.38), transparent);
    opacity: .55;
}

.sd-live-ranking__panel--hud .sd-live-row-wave::after {
    height: 18px;
    background: radial-gradient(ellipse at center, rgba(0,217,255,.14), transparent 72%);
    filter: blur(5px);
}

.sd-live-ranking__panel--hud .sd-live-row-wave i {
    position: relative;
    z-index: 1;
    width: 6px;
    min-width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8f7cff 0%, #00d9ff 48%, #22ff9a 100%);
    box-shadow: 0 0 10px rgba(0,217,255,.35);
    animation: sdRankingMeter 1.55s ease-in-out infinite;
    transform-origin: center;
}

.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(1){height:20%;animation-delay:-.1s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(2){height:46%;animation-delay:-.42s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(3){height:28%;animation-delay:-.22s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(4){height:72%;animation-delay:-.72s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(5){height:34%;animation-delay:-.34s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(6){height:88%;animation-delay:-.94s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(7){height:40%;animation-delay:-.51s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(8){height:65%;animation-delay:-1.1s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(9){height:30%;animation-delay:-.27s}
.sd-live-ranking__panel--hud .sd-live-row-wave i:nth-child(10){height:54%;animation-delay:-1.28s}

.sd-live-ranking__panel--hud .sd-live-playlist > li::after {
    display: none !important;
}

.sd-live-ranking__panel--hud .sd-live-row-actions {
    grid-area: actions !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-width: 0;
}

.sd-live-ranking__panel--hud .listen-btn,
.sd-live-ranking__panel--hud .share-btn,
.sd-live-ranking__panel--hud .report-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 7px !important;
    color: #91afbd !important;
    border: 1px solid rgba(117,224,255,.13) !important;
    border-radius: 8px 3px 8px 3px !important;
    background: rgba(1,10,23,.54) !important;
    font-size: 8px !important;
    font-weight: 930 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.sd-live-ranking__panel--hud .listen-btn:hover {
    color: #e6fbff !important;
    border-color: rgba(0,217,255,.44) !important;
    background: rgba(0,217,255,.095) !important;
    transform: translateX(1px);
}

.sd-live-ranking__panel--hud .share-btn:hover {
    color: #d9fbff !important;
    border-color: rgba(34,255,154,.36) !important;
    background: rgba(34,255,154,.075) !important;
}

.sd-live-ranking__panel--hud .report-btn:hover {
    color: #ffb6c8 !important;
    border-color: rgba(255,75,122,.34) !important;
    background: rgba(255,75,122,.07) !important;
}

.sd-live-ranking__panel--hud .listen-btn.is-disabled {
    opacity: .46;
    pointer-events: none;
}

.sd-live-ranking__panel--hud .vote-btn {
    grid-area: vote !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    border-radius: 12px 4px 12px 4px !important;
    font-size: 18px !important;
    letter-spacing: -.03em;
}

.sd-live-ranking__panel--hud .vote-btn .vote-icon {
    display: block;
    font-size: 13px !important;
    line-height: 1;
}

.sd-live-ranking__panel--hud .vote-btn [data-vote-count] {
    font-size: 18px !important;
    line-height: 1;
}

@media (max-width: 1040px) {
    .sd-live-ranking__panel--hud .sd-live-playlist > li {
        grid-template-columns: 76px minmax(0, 1fr) 74px !important;
        grid-template-areas:
            "rank song vote"
            "wave wave actions" !important;
        min-height: 118px !important;
    }

    .sd-live-ranking__panel--hud .rank {
        width: 62px !important;
    }

    .sd-live-ranking__panel--hud .sd-live-row-wave {
        height: 36px;
    }

    .sd-live-ranking__panel--hud .sd-live-row-actions {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 34px;
        align-self: center !important;
    }
}

@media (max-width: 640px) {
    .sd-live-ranking__panel--hud .sd-live-playlist > li {
        grid-template-columns: 54px minmax(0, 1fr) 58px !important;
        grid-template-areas:
            "rank song vote"
            "wave wave wave" !important;
        min-height: 104px !important;
    }

    .sd-live-ranking__panel--hud .sd-live-row-actions {
        display: none !important;
    }

    .sd-live-ranking__panel--hud .sd-live-row-wave {
        height: 30px;
        gap: 4px;
    }

    .sd-live-ranking__panel--hud .vote-btn {
        font-size: 14px !important;
    }
}

/* =========================================================
   SongDrop Live Ranking – No Session / Standby State v3
   Sauberer Zustand, wenn keine Live-Session geöffnet ist.
   ========================================================= */
.sd-live-layout.is-session-paused .sd-live-ranking {
    border-color: rgba(124, 109, 255, .28) !important;
    background:
        radial-gradient(circle at 86% 15%, rgba(124, 109, 255, .15), transparent 32%),
        radial-gradient(circle at 18% 86%, rgba(0, 217, 255, .10), transparent 34%),
        linear-gradient(135deg, rgba(6, 15, 39, .97) 0%, rgba(3, 17, 35, .94) 58%, rgba(3, 36, 42, .90) 100%) !important;
}

.sd-ranking-heading-redesign__standby-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9c87ff;
    box-shadow: 0 0 12px rgba(156, 135, 255, .88);
    animation: sdRankingStandbyDot 2.4s ease-in-out infinite;
}

.sd-ranking-live-state.is-standby,
.sd-ranking-heading-redesign .sd-live-count.is-standby {
    border-color: rgba(156, 135, 255, .30) !important;
    color: #dfd9ff !important;
    background: rgba(13, 11, 34, .68) !important;
}

.sd-ranking-live-state.is-standby i,
.sd-ranking-heading-redesign .sd-live-count.is-standby i {
    background: #9c87ff !important;
    box-shadow: 0 0 10px rgba(156, 135, 255, .84) !important;
}

.sd-live-ranking__panel--paused {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(22px, 4vw, 46px) !important;
    border: 1px solid rgba(156, 135, 255, .24) !important;
    border-radius: 22px 7px 22px 7px !important;
    background:
        radial-gradient(circle at 18% 26%, rgba(0, 217, 255, .11), transparent 35%),
        radial-gradient(circle at 84% 70%, rgba(34, 255, 154, .08), transparent 35%),
        linear-gradient(145deg, rgba(5, 16, 38, .94), rgba(1, 11, 25, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        inset 0 0 46px rgba(156, 135, 255, .045),
        0 20px 54px rgba(0, 0, 0, .22) !important;
}

.sd-live-ranking__panel--paused::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(117, 224, 255, .10);
    border-radius: 16px 4px 16px 4px;
    pointer-events: none;
}

.sd-live-ranking__panel--paused::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #9c87ff, #00d9ff, #22ff9a, transparent);
    box-shadow: 0 0 18px rgba(0, 217, 255, .55);
    opacity: .74;
}

.sd-live-paused-orbit {
    position: absolute;
    border: 1px solid rgba(117, 224, 255, .11);
    border-radius: 50%;
    pointer-events: none;
}

.sd-live-paused-orbit--one {
    width: 520px;
    height: 520px;
    right: -235px;
    top: -260px;
    box-shadow: inset 0 0 44px rgba(0, 217, 255, .05);
    animation: sdRankingPausedOrbit 18s linear infinite;
}

.sd-live-paused-orbit--two {
    width: 360px;
    height: 360px;
    left: -180px;
    bottom: -210px;
    border-color: rgba(156, 135, 255, .14);
    animation: sdRankingPausedOrbitReverse 22s linear infinite;
}

.sd-playlist-wrap--paused {
    position: relative;
    z-index: 2;
    width: 100%;
}

.sd-live-paused-state {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 4vw, 48px);
    width: min(930px, 100%);
    margin: 0 auto;
}

.sd-live-paused-state__visual {
    position: relative;
    min-height: 240px;
    display: grid;
    place-items: center;
}

.sd-live-paused-state__halo {
    position: absolute;
    width: min(255px, 90%);
    aspect-ratio: 1;
    border: 1px solid rgba(0, 217, 255, .24);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(0, 217, 255, .17), transparent 62%),
        radial-gradient(circle at 62% 38%, rgba(34, 255, 154, .11), transparent 52%);
    box-shadow:
        0 0 38px rgba(0, 217, 255, .12),
        inset 0 0 45px rgba(156, 135, 255, .08);
    animation: sdRankingPausedPulse 3.8s ease-in-out infinite;
}

.sd-live-paused-state__visual img {
    position: relative;
    z-index: 1;
    width: min(245px, 88%);
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(117, 224, 255, .22);
    border-radius: 36px;
    background: rgba(1, 9, 19, .78);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, .28),
        0 0 34px rgba(0, 217, 255, .10);
    filter: drop-shadow(0 0 18px rgba(34, 255, 154, .12));
}

.sd-live-paused-state__copy {
    min-width: 0;
}

.sd-live-paused-state__copy h3 {
    margin-bottom: 14px;
    color: #f6fbff;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: .94;
    letter-spacing: -.055em;
}

.sd-live-paused-state__copy h3 span {
    color: #9c87ff;
    text-shadow: 0 0 24px rgba(156, 135, 255, .28);
}

.sd-live-paused-state__copy p:not(.eyebrow) {
    max-width: 640px;
    margin-bottom: 0;
    color: #adc6d2;
    line-height: 1.72;
}

.sd-live-paused-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.sd-live-paused-state__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.sd-live-paused-state__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    color: #c5d9e3;
    border: 1px solid rgba(117, 224, 255, .16);
    border-radius: 999px;
    background: rgba(2, 13, 29, .52);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sd-side-card--live-info.is-standby {
    border-color: rgba(156, 135, 255, .20) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(156, 135, 255, .10), transparent 48%),
        linear-gradient(145deg, rgba(12, 13, 36, .92), rgba(2, 10, 20, .90)) !important;
}

.sd-side-card--live-info.is-standby .sd-side-card__topline > span {
    color: #9c87ff !important;
    text-shadow: 0 0 12px rgba(156, 135, 255, .74) !important;
}

@keyframes sdRankingStandbyDot {
    0%, 100% { transform: scale(.72); opacity: .50; }
    50% { transform: scale(1.22); opacity: 1; }
}

@keyframes sdRankingPausedOrbit { to { transform: rotate(360deg); } }
@keyframes sdRankingPausedOrbitReverse { to { transform: rotate(-360deg); } }

@keyframes sdRankingPausedPulse {
    0%, 100% { transform: scale(.96); opacity: .72; }
    50% { transform: scale(1.05); opacity: 1; }
}

@media (max-width: 820px) {
    .sd-live-paused-state {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sd-live-paused-state__visual {
        min-height: 210px;
    }

    .sd-live-paused-state__copy p:not(.eyebrow) {
        margin-left: auto;
        margin-right: auto;
    }

    .sd-live-paused-state__actions,
    .sd-live-paused-state__chips {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .sd-live-ranking__panel--paused {
        min-height: auto;
        padding: 22px 14px 28px !important;
        border-radius: 18px 6px 18px 6px !important;
    }

    .sd-live-paused-state__visual img {
        width: min(210px, 84%);
        border-radius: 28px;
    }

    .sd-live-paused-state__copy h3 {
        font-size: clamp(30px, 10vw, 45px);
    }

    .sd-live-paused-state__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sd-live-paused-state__actions .sd-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-live-ranking__panel--paused *,
    .sd-live-ranking__panel--paused::before,
    .sd-live-ranking__panel--paused::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}