html { scroll-padding-top: 0; }
body[data-page="radio-embed"] {
  padding: 0;
  background: #090b10;
  font-size: 14px;
  --font-title: "Segoe UI", system-ui, sans-serif;
}
.embed-shell {
  position: relative;
  padding: clamp(16px, 3.5vw, 28px);
  background: radial-gradient(ellipse at 12% 0, #7d17332e, transparent 65%), #0c0e15;
  border: 1px solid #ffffff14;
  border-radius: 20px;
  display: grid;
  gap: 22px;
  overflow: hidden;
}
.embed-header, .embed-brand, .embed-footer { display: flex; align-items: center; }
.embed-header { justify-content: space-between; gap: 12px; }
.embed-brand { gap: 12px; min-width: 0; }
.embed-brand img { border-radius: 12px; background: #181920; }
.embed-brand span { display: grid; gap: 2px; }
.embed-brand strong { font-size: 16px; letter-spacing: -.03em; color: #f5f5f8; }
.embed-brand small { font-size: 9px; letter-spacing: .16em; color: #a6a4b7; }
.embed-header .lang { flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid #ffffff12; border-radius: 10px; }
.embed-header .lang-btn { min-width: 30px; min-height: 32px; padding: 4px; font-size: 10px; border: 0; border-radius: 7px; background: transparent; }
.embed-header .lang-btn[aria-pressed="true"] { background: #ffffff12; color: #fff; }
.embed-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.embed-player { min-width: 0; }
.embed-ad:has([hidden]) { display: none; }
.embed-ad { display: grid; align-content: center; justify-items: center; }
.embed-player .rc-full {
  grid-template-columns: 152px minmax(0, 1fr);
  grid-template-areas: "cover info" "cover spec" "bar bar" "time time" "row row";
  gap: 12px 24px;
}
.embed-player .rc-full:has(.rc-cover[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "info" "spec" "bar" "time" "row";
}
.embed-player .rc-cover { width: 152px; border-radius: 16px; box-shadow: 0 16px 40px #0006; }
.embed-player .rc-info { align-content: start; gap: 6px; }
.embed-player .rc-title { font-size: clamp(19px, 3.4vw, 29px); letter-spacing: -.04em; font-weight: 750; line-height: 1.25; }
.embed-player .rc-artist-btn { font-size: 14px; }
.embed-player .live-badge { letter-spacing: .13em; color: #fb718b; font-size: 10px; }
.embed-player .live-badge::before { background: #fb718b; }
.embed-player .rc-status { font-size: 12px; color: #aaa6bb; }
.embed-player .spectrum { height: 35px; gap: 3px; opacity: .8; }
.embed-player .spectrum i { background: linear-gradient(0deg, #a91548, #ff819c); border-radius: 3px; }
.embed-player .progress { height: 5px; background: #ffffff0d; margin-top: 10px; }
.embed-player .progress-fill { background: linear-gradient(90deg, #b52355, #ff819c); }
.embed-player .time { font-size: 11px; color: #9997ad; font-variant-numeric: tabular-nums; }
.embed-player .rc-row { justify-content: space-between; }
.embed-player .btn-metal { width: 56px; height: 56px; border: 1px solid #ff99b044; background: #ed4772; color: #fff; box-shadow: 0 7px 25px #ed477238; }
.embed-player .btn-metal:disabled { opacity: .55; cursor: wait; }
.embed-player .rc-vol { margin-left: auto; }
.embed-player .rc-vol input { accent-color: #ed4772; width: clamp(76px, 18vw, 150px); }
.embed-player .rc-links { position: fixed; top: auto; bottom: 12px; left: 16px; right: 16px; max-width: none; min-width: 0; max-height: 65vh; overflow-y: auto; }
.embed-player .rc-links a { overflow-wrap: anywhere; }
.embed-footer { flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; border-top: 1px solid #ffffff10; padding-top: 15px; }
.embed-footer a, .embed-footer button { color: #b6b2c7; font: inherit; font-size: 11px; }
.embed-footer button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.embed-footer a:hover, .embed-footer button:hover { color: #ff91ac; }
.embed-promo { width: min(540px, calc(100% - 24px)); max-height: 85vh; overflow-y: auto; padding: 24px; border: 1px solid #ffffff20; border-radius: 18px; background: #13131e; color: #d9dce1; }
.embed-promo::backdrop { background: #05050acf; }
.embed-promo > * + * { margin-top: 16px; }
.embed-promo h2 { font-size: 23px; letter-spacing: -.03em; background: none; color: #fff; }
.embed-promo p:not(.eyebrow) { font-size: 14px; color: #b6b2c7; }
.embed-promo > button { display: block; margin-left: auto; background: none; color: #c4bfd3; border: 0; cursor: pointer; font-size: 11px; }
.embed-error { color: #ff91ac; }
.embed-shell > .ad-slot { margin-inline: auto; }
@media (min-width: 940px) {
  .embed-stage:has(.has-ad) { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 480px) {
  .embed-shell { gap: 18px; border-radius: 14px; }
  .embed-brand img { width: 36px; height: 36px; }
  .embed-brand { gap: 8px; }
  .embed-brand strong { font-size: 14px; }
  .embed-brand small { font-size: 7px; }
  .embed-player .rc-full { grid-template-columns: 80px minmax(0, 1fr); gap: 10px 14px; }
  .embed-player .rc-cover { width: 80px; border-radius: 10px; }
  .embed-player .spectrum { height: 22px; }
  .embed-player .rc-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .embed-shell *, .embed-shell *::before { animation: none !important; transition: none !important; }
}