.rdp-player-container.rdp-theme-dark {
--rdp-bg:           #1a1a2e;
--rdp-surface:      #16213e;
--rdp-border:       #0f3460;
--rdp-accent:       #e94560;
--rdp-accent-hover: #c73652;
--rdp-text:         #e0e0e0;
--rdp-text-muted:   #888;
--rdp-btn-bg:       #0f3460;
--rdp-btn-hover:    #1a4d8c;
--rdp-shadow:       0 4px 24px rgba(0,0,0,.45);
--rdp-radius:       12px;
}
.rdp-player-container.rdp-theme-light {
--rdp-bg:           #f5f7fa;
--rdp-surface:      #ffffff;
--rdp-border:       #d0d7e3;
--rdp-accent:       #e94560;
--rdp-accent-hover: #c73652;
--rdp-text:         #1a1a2e;
--rdp-text-muted:   #666;
--rdp-btn-bg:       #e9ecf3;
--rdp-btn-hover:    #d3d9e8;
--rdp-shadow:       0 4px 24px rgba(0,0,0,.12);
--rdp-radius:       12px;
} .rdp-player-container {
display:         flex;
flex-direction:  column;
align-items:     stretch;
gap:             12px;
background:      var(--rdp-bg);
border:          1px solid var(--rdp-border);
border-radius:   var(--rdp-radius);
padding:         20px 24px;
box-shadow:      var(--rdp-shadow);
font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width:       480px;
width:           100%;
box-sizing:      border-box;
color:           var(--rdp-text); -webkit-user-select: none;
user-select:         none;
} .rdp-track-info {
overflow: hidden;
}
.rdp-marquee-wrapper {
overflow:    hidden;
white-space: nowrap;
position:    relative;
}
.rdp-marquee-text {
display:        inline-block;
font-size:      1rem;
font-weight:    600;
color:          var(--rdp-text);
letter-spacing: .01em;
} @keyframes rdp-marquee {
0%   { transform: translateX(0); }
10%  { transform: translateX(0); }
90%  { transform: translateX(-100%); }
100% { transform: translateX(-100%); }
}
.rdp-marquee-text.rdp-animate {
animation: rdp-marquee 12s linear infinite;
} .rdp-controls {
display:     flex;
align-items: center;
gap:         12px;
flex-wrap:   wrap;
} .rdp-btn {
display:         inline-flex;
align-items:     center;
justify-content: center;
width:           44px;
height:          44px;
border:          none;
border-radius:   50%;
background:      var(--rdp-btn-bg);
color:           var(--rdp-text);
cursor:          pointer;
transition:      background .18s ease, transform .12s ease;
flex-shrink:     0;
padding:         0; -webkit-tap-highlight-color: transparent;
touch-action:                manipulation;
}
.rdp-btn:hover {
background: var(--rdp-btn-hover);
transform:  scale(1.06);
}
.rdp-btn:active {
transform: scale(.96);
}
.rdp-btn-play {
width:      56px;
height:     56px;
background: var(--rdp-accent);
color:      #fff;
}
.rdp-btn-play:hover {
background: var(--rdp-accent-hover);
} .rdp-icon {
width:   20px;
height:  20px;
fill:    currentColor;
stroke:  none;
display: block;
}
.rdp-btn-play .rdp-icon {
width:  22px;
height: 22px;
} .rdp-icon-pause {
display: none;
} .rdp-volume-wrap {
display:     flex;
align-items: center;
gap:         8px;
flex:        1;
min-width:   120px;
}
.rdp-volume-wrap .rdp-icon {
width:       18px;
height:      18px;
color:       var(--rdp-text-muted);
flex-shrink: 0;
}
.rdp-volume {
-webkit-appearance: none;
appearance:         none;
width:              100%;
height:             4px;
border-radius:      2px;
background:         var(--rdp-border);
outline:            none;
cursor:             pointer; touch-action:       manipulation;
} .rdp-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance:         none;
width:              22px;
height:             22px;
border-radius:      50%;
background:         var(--rdp-accent);
cursor:             pointer;
transition:         transform .12s;
}
.rdp-volume::-webkit-slider-thumb:hover {
transform: scale(1.2);
} .rdp-volume::-webkit-slider-runnable-track {
height:       4px;
border-radius: 2px;
background:   var(--rdp-border);
} .rdp-volume::-moz-range-thumb {
width:        22px;
height:       22px;
border:       none;
border-radius: 50%;
background:   var(--rdp-accent);
cursor:       pointer;
}
.rdp-volume::-moz-range-track {
height:        4px;
border-radius: 2px;
background:    var(--rdp-border);
} .rdp-status {
font-size:      0.75rem;
color:          var(--rdp-text-muted);
min-height:     1em;
text-align:     right;
letter-spacing: .02em;
} .rdp-error {
color:        #e94560;
font-size:    .875rem;
padding:      8px 12px;
border-left:  3px solid #e94560;
background:   rgba(233,69,96,.08);
border-radius: 4px;
margin:       0;
} @media ( max-width: 360px ) {
.rdp-player-container {
padding: 14px 16px;
}
.rdp-btn-play {
width:  48px;
height: 48px;
}
.rdp-btn {
width:  38px;
height: 38px;
}
} @media ( prefers-reduced-motion: reduce ) {
.rdp-marquee-text.rdp-animate {
animation: none;
}
.rdp-btn,
.rdp-volume::-webkit-slider-thumb {
transition: none;
}
}