/* KSR Live Radio Player — premium spectrum skin (scoped to .rkp) */
.ksr-radio-mount{ width:100%; }
.rkp{ --bg:#002D50; --fg:#ffffff; --mut:#9fb6cc; --play:#e7bd54; --accent:#e7bd54; --radius:20px;
      color:var(--fg); font-family:inherit; width:100%; display:flex; justify-content:center; }
.rkp *{ box-sizing:border-box; }

/* shared bits */
.rkp-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.08em; color:#ff8585; text-transform:uppercase; }
.rkp-live .d{ width:7px; height:7px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 0 0 rgba(255,90,90,.6); animation:rkpulse 1.4s infinite; }
@keyframes rkpulse{ 0%{box-shadow:0 0 0 0 rgba(255,90,90,.55)} 70%{box-shadow:0 0 0 8px rgba(255,90,90,0)} 100%{box-shadow:0 0 0 0 rgba(255,90,90,0)} }
.rkp-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rkp-artist{ color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.rkp-play{ border:none; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.42), transparent 55%), var(--play); color:#04243f; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0; box-shadow:0 14px 30px -13px var(--play); transition:transform .15s; }
.rkp-play:hover{ transform:scale(1.05); }
.rkp-play svg{ width:46%; height:46%; fill:currentColor; }
.rkp-ic{ background:none; border:none; color:var(--mut); cursor:pointer; display:flex; padding:0; }
.rkp-ic svg{ width:18px; height:18px; fill:currentColor; }
.rkp-ic:hover{ color:var(--fg); }
.rkp-ic.on{ color:#ff5a5a; }

/* volume slider */
.rkp-vol{ -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:rgba(255,255,255,.22); accent-color:var(--accent); cursor:pointer; }
.rkp-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--fg); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.rkp-vol::-moz-range-thumb{ width:13px; height:13px; border:none; border-radius:50%; background:var(--fg); cursor:pointer; }

/* equalizer (full-spectrum) */
.eq{ display:flex; align-items:flex-end; gap:2px; width:100%; }
.eq i{ flex:1 1 0; height:100%; transform-origin:bottom; transform:scaleY(.15); border-radius:2px; animation:eqa ease-in-out infinite alternate; }
@keyframes eqa{ from{transform:scaleY(.1)} to{transform:scaleY(1)} }
.eq.paused i{ animation-play-state:paused; transform:scaleY(.14); opacity:.4; }
.eq.reactive i{ animation:none; }

/* ===== HERO (premium glass + gold) ===== */
.rkp-hero{ position:relative; background:linear-gradient(165deg, var(--bg), rgba(0,0,0,.4)); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); padding:22px; width:470px; max-width:100%;
           backdrop-filter:blur(8px); box-shadow:0 40px 80px -36px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.rkp-hero .rkp-ring{ position:absolute; inset:-1px; border-radius:var(--radius); padding:1px; background:linear-gradient(140deg, var(--accent), transparent 42%);
                     -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.65; }
.rkp-hero .top{ position:relative; display:flex; gap:16px; align-items:center; }
.rkp-hero .cover{ width:88px; height:88px; border-radius:15px; object-fit:cover; flex:none; background:rgba(255,255,255,.06); box-shadow:0 14px 30px -14px rgba(0,0,0,.8); }
.rkp-hero .rkp-title{ font-size:18px; margin:6px 0 2px; }
.rkp-hero .rkp-artist{ font-size:13px; }
.rkp-hero .next{ position:relative; font-size:12.5px; color:var(--mut); margin-top:16px; border-top:1px solid rgba(255,255,255,.12); padding-top:13px; display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rkp-hero .next .ndot{ color:var(--accent); }
.rkp-hero .rkp-play{ width:54px; height:54px; }
.rkp-hero .side{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.rkp-hero .rkp-controls{ position:relative; display:flex; align-items:center; gap:14px; margin-top:18px; }
.rkp-hero .eq{ height:34px; }
.rkp-hero .rkp-vol{ width:86px; flex:none; }

/* ===== PILL (compact) ===== */
.rkp-pill{ position:relative; background:linear-gradient(165deg, var(--bg), rgba(0,0,0,.35)); border:1px solid rgba(231,189,84,.2); border-radius:44px; padding:8px 18px 8px 8px; display:flex; align-items:center; gap:13px; width:360px; max-width:100%; box-shadow:0 20px 44px -28px rgba(0,0,0,.8); }
.rkp-pill .cover{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; background:rgba(255,255,255,.06); }
.rkp-pill .rkp-play{ width:38px; height:38px; }
.rkp-pill .col{ display:flex; flex-direction:column; min-width:0; flex:1; gap:3px; }
.rkp-pill .rkp-title{ font-size:13px; }
.rkp-pill .eq{ height:16px; }

/* recently played */
.rkp-list{ width:470px; max-width:100%; margin-top:14px; }
.rkp-list-h{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin-bottom:8px; opacity:.85; }
.rkp-track{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.rkp-track img{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex:none; background:rgba(255,255,255,.08); }
.rkp-track .tt{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rkp-track .ta{ font-size:11px; color:var(--mut); }