.tune-radio-card[hidden],
.tune-radio-room[hidden],
.tune-radio-orb[hidden],
.tune-player-live-badge[hidden] { display: none !important; }
body.tune-radio-room-open { overflow: hidden; }

.tune-radio-card,
.tune-radio-room,
.tune-radio-orb {
  --radio-color: #185a96;
  --radio-deep: #103657;
  --radio-soft: rgba(255,255,255,.18);
  --radio-on: #fff;
}

.tune-radio-card {
  position: fixed;
  z-index: 820;
  top: 78px;
  right: calc(var(--player-width, 240px) + 34px);
  width: min(418px, calc(100vw - 40px));
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--radio-color) 80%, #fff) 0, transparent 38%),
    linear-gradient(145deg, var(--radio-color), var(--radio-deep));
  color: var(--radio-on);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  transition: --radio-color .55s ease, background .55s ease;
  animation: tune-radio-card-in .42s cubic-bezier(.2,.8,.2,1) both;
}

.tune-radio-card.is-leaving { pointer-events: none; animation: tune-radio-card-out .28s ease both; }
.tune-radio-card__close { position: absolute; z-index: 2; top: 12px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.18); color: inherit; font-size: 20px; line-height: 1; }
.tune-radio-card__close:hover { background: rgba(0,0,0,.3); }
.tune-radio-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.tune-radio-brand > img { width: 42px; height: 42px; object-fit: contain; filter: brightness(0) invert(1); }
.tune-radio-brand > strong { font-family: var(--font-black); font-size: 40px; line-height: 1; letter-spacing: -.045em; }
.tune-radio-brand > span { display: inline-flex; align-items: center; gap: 6px; margin: 0 23px 0 auto; padding: 7px 10px; border-radius: 999px; background: rgba(195,37,47,.92); font: 9px/1 var(--font-black); letter-spacing: .08em; }
.tune-radio-brand i,.tune-radio-room__host b i,.tune-radio-room__meta>span i,.tune-player-live-badge i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: tune-radio-live-pulse 1.5s infinite; }
.tune-radio-host { display: flex; align-items: center; gap: 8px; margin: 12px 0 17px; color: rgba(255,255,255,.82); font: 13px/1.2 var(--font-medium); }
.tune-radio-host img,.tune-radio-room__host>img { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; object-fit: cover; }
.tune-radio-host strong { color: #fff; font-family: var(--font-bold); }
.tune-radio-card__tracks { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: hidden; padding: 14px 14px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.16); backdrop-filter: blur(14px); }
.tune-radio-card__tracks>article { min-width: 0; }
.tune-radio-card__tracks>article>small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.76); font: 8px/1 var(--font-black); letter-spacing: .08em; }
.tune-radio-card__tracks>article>div { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 9px; }
.tune-radio-card__tracks img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.tune-radio-card__tracks span { min-width: 0; }
.tune-radio-card__tracks strong,.tune-radio-card__tracks span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tune-radio-card__tracks strong { font: 11px/1.2 var(--font-bold); }
.tune-radio-card__tracks span small { margin-top: 4px; color: rgba(255,255,255,.68); font-size: 9px; }
.tune-radio-card__tracks .is-next { opacity: .62; }
.tune-radio-card__tracks>i { position: absolute; inset: auto 0 0; width: 0; height: 4px; border-radius: 99px; background: #fff; box-shadow: 0 0 16px rgba(255,255,255,.46); transition: width .45s linear; }
.tune-radio-card>footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; }
.tune-radio-card>footer>button { min-height: 46px; display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.9); color: #111; font: 13px/1 var(--font-black); box-shadow: 0 9px 25px rgba(0,0,0,.16); }
.tune-radio-card>footer>button:hover { transform: translateY(-2px); background: #fff; }
.tune-radio-card>footer>button img { width: 20px; height: 20px; filter: brightness(0); }

.tune-radio-listener-stack { min-width: 28px; display: flex; align-items: center; }
.tune-radio-listener-stack>img,.tune-radio-listener-stack>span { width: 29px; height: 29px; display: grid; place-items: center; margin-left: -7px; border: 2px solid color-mix(in srgb, var(--radio-color) 72%, #111); border-radius: 50%; background: #222; object-fit: cover; color: #fff; font: 8px/1 var(--font-black); }
.tune-radio-listener-stack>:first-child { margin-left: 0; }

.tune-radio-orb { position: relative; width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(145deg,var(--radio-color),var(--radio-deep)); box-shadow: 0 10px 28px rgba(0,0,0,.32); transition: transform .2s ease, background .45s ease; }
.tune-radio-orb:hover { transform: scale(1.06); }
.tune-radio-orb>img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.tune-radio-orb>i { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border: 2px solid #111; border-radius: 50%; background: #ef404a; animation: tune-radio-live-pulse 1.5s infinite; }

.tune-radio-room { position: fixed; z-index: 970; inset: 0; display: grid; place-items: center; padding: 22px; }
.tune-radio-room__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(14px); animation: tune-radio-fade-in .32s ease both; }
.tune-radio-room__panel { position: relative; width: min(640px,100%); max-height: min(880px,calc(100dvh - 44px)); overflow: auto; scrollbar-width: none; padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 34px; background:
  radial-gradient(circle at 82% -5%, color-mix(in srgb, var(--radio-color) 80%, #fff) 0, transparent 34%),
  linear-gradient(155deg,var(--radio-color),var(--radio-deep) 62%,color-mix(in srgb,var(--radio-deep) 80%,#050505));
  color: var(--radio-on); box-shadow: 0 35px 100px rgba(0,0,0,.58); animation: tune-radio-room-in .42s cubic-bezier(.2,.8,.2,1) both; transition: background .55s ease; }
.tune-radio-room__panel::-webkit-scrollbar { display: none; }
.tune-radio-room.is-leaving .tune-radio-room__backdrop { animation: tune-radio-fade-out .27s ease both; }
.tune-radio-room.is-leaving .tune-radio-room__panel { animation: tune-radio-card-out .27s ease both; }
.tune-radio-room__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tune-radio-room__header .tune-radio-brand>img { width: 38px; height: 38px; }
.tune-radio-room__header .tune-radio-brand>strong { font-size: 37px; }
.tune-radio-room__header>button { min-height: 38px; padding: 0 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.17); color: inherit; font: 11px/1 var(--font-bold); }
.tune-radio-room__header>button:hover { background: rgba(255,255,255,.27); }
.tune-radio-room__host { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: rgba(255,255,255,.75); font-size: 11px; }
.tune-radio-room__host>strong { color: #fff; }
.tune-radio-room__host>b { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 9px; border-radius: 99px; background: #c63640; font: 8px/1 var(--font-black); letter-spacing: .08em; }
.tune-radio-now { display: grid; grid-template-columns: 108px minmax(0,1fr) 52px; align-items: center; gap: 17px; margin-top: 24px; padding: 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(255,255,255,.13); backdrop-filter: blur(16px); }
.tune-radio-now>img { width: 108px; height: 108px; border-radius: 18px; object-fit: cover; box-shadow: 0 15px 35px rgba(0,0,0,.3); }
.tune-radio-now>div { min-width: 0; }
.tune-radio-now small { color: rgba(255,255,255,.67); font: 8px/1 var(--font-black); letter-spacing: .13em; }
.tune-radio-now h2,.tune-radio-now p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tune-radio-now h2 { margin: 9px 0 5px; font: 24px/1.05 var(--font-black); letter-spacing: -.025em; }
.tune-radio-now p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
.tune-radio-now>button { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.tune-radio-now>button img { width: 100%; height: 100%; filter: brightness(0); }
.tune-radio-timeline { margin-top: 15px; }
.tune-radio-timeline>div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.69); font-size: 9px; }
.tune-radio-timeline>div>b { font-size: 7px; letter-spacing: .09em; }
.tune-radio-timeline>i { display: block; height: 5px; overflow: hidden; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.2); }
.tune-radio-timeline>i>b { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width .45s linear; }
.tune-radio-room__meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tune-radio-room__meta>strong { color: rgba(255,255,255,.76); font-size: 9px; }
.tune-radio-room__meta>span { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 9px; border-radius: 99px; background: rgba(0,0,0,.18); font: 8px/1 var(--font-black); }
.tune-radio-up-next,.tune-radio-chat { margin-top: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 23px; background: rgba(0,0,0,.15); }
.tune-radio-up-next>header,.tune-radio-chat>header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px 11px; }
.tune-radio-up-next header small,.tune-radio-chat header small { color: rgba(255,255,255,.58); font: 7px/1 var(--font-black); letter-spacing: .13em; }
.tune-radio-up-next h3,.tune-radio-chat h3 { margin: 4px 0 0; font: 14px/1.1 var(--font-black); }
.tune-radio-up-next>header>span { color: rgba(255,255,255,.6); font-size: 9px; }
.tune-radio-up-next>div { display: grid; gap: 2px; padding: 0 8px 9px; }
.tune-radio-next-row { display: grid; grid-template-columns: 34px 45px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 14px; transition: background .18s ease; }
.tune-radio-next-row:hover { background: rgba(255,255,255,.08); }
.tune-radio-next-row>em { color: rgba(255,255,255,.54); font: 10px/1 var(--font-bold); font-style: normal; text-align: center; }
.tune-radio-next-row>img { width: 45px; height: 45px; border-radius: 10px; object-fit: cover; }
.tune-radio-next-row>span { min-width: 0; }
.tune-radio-next-row strong,.tune-radio-next-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tune-radio-next-row strong { font-size: 10px; }.tune-radio-next-row small { margin-top: 3px; color: rgba(255,255,255,.57); font-size: 8px; }
.tune-radio-next-row>b { color: rgba(255,255,255,.58); font-size: 8px; }
.tune-radio-empty-queue { margin: 8px 10px 12px; color: rgba(255,255,255,.58); font-size: 9px; text-align: center; }
.tune-radio-chat>header>img { width: 21px; height: 21px; filter: brightness(0) invert(1); opacity: .7; }
.tune-radio-comments { max-height: 210px; display: grid; gap: 7px; overflow: auto; padding: 4px 13px 12px; scrollbar-width: thin; }
.tune-radio-comments>p { margin: 15px; color: rgba(255,255,255,.58); font-size: 10px; text-align: center; }
.tune-radio-comment { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding: 10px; border-radius: 15px; background: rgba(255,255,255,.11); }
.tune-radio-comment>img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tune-radio-comment>div { min-width: 0; }.tune-radio-comment header { display: flex; align-items: baseline; gap: 7px; }.tune-radio-comment strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.tune-radio-comment time { color: rgba(255,255,255,.45); font-size: 7px; }.tune-radio-comment p { margin: 5px 0 0; font-size: 10px; line-height: 1.38; overflow-wrap: anywhere; }
.tune-radio-chat>form { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.tune-radio-chat input { min-width: 0; height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); outline: 0; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; font-size: 11px; }
.tune-radio-chat input::placeholder { color: rgba(255,255,255,.5); }.tune-radio-chat input:focus { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.17); }
.tune-radio-chat form>button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 14px; background: #fff; }.tune-radio-chat form>button img { width: 18px; height: 18px; filter: brightness(0); }

.tune-player-live-badge { width: max-content; display: inline-flex; align-items: center; gap: 5px; color: #fff; font: 7px/1 var(--font-black); font-style: normal; letter-spacing: .11em; }
.tune-mini-copy>.tune-player-live-badge { margin-bottom: 7px; }
.tune-mini-player.is-radio-live { --player-accent: var(--radio-color,#185a96); background: linear-gradient(145deg,color-mix(in srgb,var(--radio-color,#185a96) 86%,#111),color-mix(in srgb,var(--radio-color,#185a96) 38%,#090909)); box-shadow: 0 17px 42px color-mix(in srgb,var(--radio-color,#185a96) 26%,transparent); }
.tune-mini-player.is-radio-live .tune-mini-cover { box-shadow: 0 0 0 2px rgba(255,255,255,.28),0 9px 22px rgba(0,0,0,.32); }
.tune-mini-player.is-radio-live .tune-mini-progress,.tune-full-player.is-radio-live .tune-full-progress input { cursor: default; }
.tune-mini-player.is-radio-live [data-player-prev],.tune-mini-player.is-radio-live [data-player-next],.tune-full-player.is-radio-live [data-player-prev],.tune-full-player.is-radio-live [data-player-next],.tune-full-player.is-radio-live [data-player-shuffle],.tune-full-player.is-radio-live [data-player-repeat] { opacity: .24; cursor: not-allowed; }
.tune-full-player.is-radio-live { --player-accent: var(--radio-color,#185a96); }
.tune-full-player.is-radio-live .tune-full-cover { box-shadow: 0 0 0 2px rgba(255,255,255,.26),0 25px 60px rgba(0,0,0,.34); animation: tune-radio-cover-breathe 3.2s ease-in-out infinite; }
.tune-full-player.is-radio-live #tune-player-label { display: none; }
.tune-full-player.is-radio-live .tune-player-live-badge { margin: 0 auto 4px; }
.tune-player-queue.is-radio-live .tune-queue-item { cursor: default; }
.tune-player-queue.is-radio-live .tune-queue-item__remove { display: none; }

@property --radio-color { syntax: "<color>"; inherits: true; initial-value: #185a96; }
@keyframes tune-radio-card-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes tune-radio-card-out { to { opacity: 0; transform: translateY(-13px) scale(.97); } }
@keyframes tune-radio-room-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes tune-radio-fade-in { from { opacity: 0; } }
@keyframes tune-radio-fade-out { to { opacity: 0; } }
@keyframes tune-radio-live-pulse { 55% { box-shadow: 0 0 0 6px transparent; } }
@keyframes tune-radio-cover-breathe { 50% { transform: scale(1.012); box-shadow: 0 0 0 3px rgba(255,255,255,.18),0 30px 68px rgba(0,0,0,.38); } }

@media(max-width:900px) { .tune-radio-card { right: 20px; } }
@media(max-width:720px) {
  .tune-radio-card { top: auto; right: 12px; bottom: 91px; width: calc(100vw - 24px); padding: 20px; border-radius: 26px; }
  .tune-radio-brand>img { width: 34px; height: 34px; }.tune-radio-brand>strong { font-size: 32px; }.tune-radio-brand>span { margin-right: 20px; }
  .tune-radio-card__tracks { grid-template-columns: 1.15fr .85fr; padding: 12px 12px 16px; }.tune-radio-card__tracks>article>div { grid-template-columns: 43px minmax(0,1fr); }.tune-radio-card__tracks img { width: 43px; height: 43px; }
  .tune-radio-room { align-items: end; padding: 0; }.tune-radio-room__panel { width: 100%; max-height: 94dvh; padding: 22px 16px max(25px,env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; }
  .tune-radio-now { grid-template-columns: 82px minmax(0,1fr) 46px; gap: 12px; padding: 13px; }.tune-radio-now>img { width: 82px; height: 82px; border-radius: 15px; }.tune-radio-now h2 { font-size: 19px; }.tune-radio-now>button { width: 46px; height: 46px; }
  .tune-radio-next-row { grid-template-columns: 24px 42px minmax(0,1fr) auto; gap: 8px; }.tune-radio-next-row>img { width: 42px; height: 42px; }
  .tune-radio-orb { width: 34px; height: 34px; flex-basis: 34px; }.tune-radio-orb>img { width: 16px; height: 16px; }
  .tune-radio-chat input { font-size: 16px; }
}

@media(max-width:390px) {
  .tune-radio-card .is-next { display: none; }.tune-radio-card__tracks { grid-template-columns: 1fr; }.tune-radio-card>footer { margin-top: 13px; }
  .tune-radio-room__host>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tune-radio-room__meta>strong { display: none; }
}

@media(prefers-reduced-motion:reduce) {
  .tune-radio-card,.tune-radio-card.is-leaving,.tune-radio-room__backdrop,.tune-radio-room__panel,.tune-radio-room.is-leaving .tune-radio-room__panel,.tune-radio-brand i,.tune-radio-room__host b i,.tune-radio-room__meta>span i,.tune-player-live-badge i,.tune-full-player.is-radio-live .tune-full-cover { animation: none !important; }
}