.stationcast-player,
.stationcast-history {
  --stationcast-accent: #d46ad3;
  --stationcast-bg: #080808;
  --stationcast-card: #171717;
  --stationcast-text: #fff;
  --stationcast-muted: #c5c5c5;
  --stationcast-heading: Anton, sans-serif;
  --stationcast-body: Poppins, sans-serif;
  --stationcast-blur: 24px;
  --stationcast-overlay: .72;
  box-sizing: border-box;
  width: 100%;
  color: var(--stationcast-text);
  font-family: var(--stationcast-body);
}
.stationcast-player *, .stationcast-history * { box-sizing: border-box; }
.stationcast-combined { display: grid; gap: var(--stationcast-combined-gap, 24px); }
.stationcast-player-main {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--stationcast-accent) 32%, #333);
  border-radius: 8px;
  background: var(--stationcast-bg);
  padding: clamp(22px, 5vw, 64px);
  width: 100%;
}
.stationcast-backdrop {
  position: absolute;
  inset: calc(var(--stationcast-blur) * -1.5);
  z-index: -2;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: blur(var(--stationcast-blur));
  transform: scale(1.08);
  transition: background-image .35s ease, opacity .35s ease;
}
.stationcast-art-bg .stationcast-backdrop { opacity: 1; }
.stationcast-player-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, var(--stationcast-overlay));
}
.stationcast-player-content { width: min(850px, 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr); gap: clamp(24px, 5vw, 58px); align-items: center; }
.stationcast-layout-stacked .stationcast-player-content { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; width: min(620px, 100%); }
.stationcast-layout-stacked .stationcast-cover-wrap { width: min(100%, 360px); }
.stationcast-layout-stacked .stationcast-player-info { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; }
.stationcast-layout-stacked .stationcast-controls { justify-content: center; }
.stationcast-cover-wrap { aspect-ratio: 1; position: relative; overflow: hidden; background: #111; box-shadow: 0 18px 50px rgba(0,0,0,.42); }
.stationcast-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.stationcast-cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--stationcast-accent); font-size: 70px; background: linear-gradient(145deg, #171717, #050505); }
.stationcast-cover-placeholder[hidden] { display: none; }
.stationcast-live { display: inline-flex; align-items: center; gap: 7px; color: var(--stationcast-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.stationcast-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d64; box-shadow: 0 0 0 5px rgba(255,77,100,.12); }
.stationcast-station { display: block; margin-top: 16px; color: var(--stationcast-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.stationcast-title { margin: 8px 0 4px; color: var(--stationcast-text); font-family: var(--stationcast-heading); font-size: clamp(28px, 5vw, 54px); font-weight: 400; line-height: 1.05; text-transform: uppercase; }
.stationcast-artist { margin: 0; color: var(--stationcast-text); font-size: clamp(15px, 2vw, 20px); }
.stationcast-controls { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.stationcast-play, .stationcast-sticky-play, .stationcast-sticky-close { border: 0; cursor: pointer; color: var(--stationcast-accent); background: transparent; }
.stationcast-play { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; }
.stationcast-play svg { display: block; width: 40px; height: 40px; fill: currentColor; }
.stationcast-sticky-play svg { display: block; width: 27px; height: 27px; fill: currentColor; }
.stationcast-play .stationcast-icon-pause, .stationcast-sticky-play .stationcast-icon-pause { display: none; }
.stationcast-play.is-playing .stationcast-icon-play, .stationcast-sticky-play.is-playing .stationcast-icon-play { display: none; }
.stationcast-play.is-playing .stationcast-icon-pause, .stationcast-sticky-play.is-playing .stationcast-icon-pause { display: block; }
.stationcast-play:hover, .stationcast-sticky-play:hover { filter: brightness(1.18) drop-shadow(0 0 7px color-mix(in srgb, var(--stationcast-accent) 55%, transparent)); transform: translateY(-1px); }
.stationcast-play:focus-visible, .stationcast-sticky button:focus-visible, .stationcast-volume:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stationcast-volume-label { display: flex; gap: 10px; align-items: center; min-width: 160px; }
.stationcast-volume-icon { flex: 0 0 auto; width: 21px; height: 21px; fill: var(--stationcast-text); }
.stationcast-volume { -webkit-appearance: none; appearance: none; width: min(220px, 32vw); height: 22px; border: 0; border-radius: 0; outline: 0; background: transparent; accent-color: var(--stationcast-accent); cursor: pointer; }
.stationcast-volume::-webkit-slider-runnable-track { width: 100%; height: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--stationcast-text) 42%, transparent); }
.stationcast-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--stationcast-text); border-radius: 50%; background: var(--stationcast-accent); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.stationcast-volume::-moz-range-track { height: 5px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--stationcast-text) 35%, transparent); }
.stationcast-volume::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--stationcast-text); border-radius: 50%; background: var(--stationcast-accent); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.stationcast-message { min-height: 1.4em; margin: 14px 0 0; color: var(--stationcast-muted); font-size: 12px; }
.stationcast-sticky { position: fixed; left: 50%; bottom: 16px; z-index: 99999; width: min(680px, calc(100vw - 24px)); display: grid; grid-template-columns: 52px minmax(0,1fr) 44px 34px; gap: 12px; align-items: center; padding: 10px; color: var(--stationcast-text); background: rgba(8,8,8,.96); border: 1px solid color-mix(in srgb, var(--stationcast-accent) 55%, #333); box-shadow: 0 18px 60px rgba(0,0,0,.55); transform: translate(-50%, calc(100% + 36px)); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.stationcast-sticky.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.stationcast-sticky-full .stationcast-sticky { left: 0; bottom: 0; width: 100vw; grid-template-columns: 52px minmax(0,1fr) 44px 34px; padding: 10px max(14px, calc((100vw - 1160px) / 2)); border-width: 1px 0 0; transform: translateY(calc(100% + 36px)); }
.stationcast-sticky-full .stationcast-sticky.is-visible { transform: translateY(0); }
.stationcast-sticky-cover { width: 52px; height: 52px; object-fit: cover; background: #222; }
.stationcast-sticky-info { min-width: 0; }
.stationcast-sticky-info strong, .stationcast-sticky-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stationcast-sticky-info strong { font-family: var(--stationcast-heading); font-size: 17px; font-weight: 400; text-transform: uppercase; }
.stationcast-sticky-info span { color: var(--stationcast-muted); font-size: 12px; }
.stationcast-sticky-play { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.stationcast-sticky-close { width: 30px; height: 30px; color: var(--stationcast-muted); background: transparent; font-size: 24px; }
.stationcast-history-status { color: var(--stationcast-muted); font-size: 13px; }
.stationcast-history-list { display: grid; gap: 8px; }
.stationcast-history-item { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 54px minmax(0,1fr) minmax(70px,auto); gap: 14px; align-items: center; min-height: 72px; padding: 9px 14px 9px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: var(--stationcast-card); }
.stationcast-history-item.is-now-playing { border-color: color-mix(in srgb, var(--stationcast-accent) 72%, transparent); box-shadow: inset 3px 0 0 var(--stationcast-accent); }
.stationcast-history-item.is-entering { animation: stationcast-card-in .48s ease both; animation-delay: var(--stationcast-enter-delay, 0ms); }
.stationcast-history-art-bg .stationcast-history-item::before { content: ""; position: absolute; inset: calc(var(--stationcast-blur) * -1.5); z-index: -2; background-image: var(--stationcast-item-art); background-position: center; background-size: cover; filter: blur(var(--stationcast-blur)); transform: scale(1.12); }
.stationcast-history-art-bg .stationcast-history-item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,var(--stationcast-overlay)); }
.stationcast-history-cover { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.stationcast-history-info { min-width: 0; }
.stationcast-history-info strong, .stationcast-history-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stationcast-history-info strong { color: var(--stationcast-text); font-size: 15px; }
.stationcast-history-info span { margin-top: 3px; color: var(--stationcast-muted); font-size: 12px; }
.stationcast-history-meta { display: grid; justify-items: end; align-items: center; line-height: 1; }
.stationcast-history-time { color: var(--stationcast-muted); font-size: 11px; white-space: nowrap; text-align: right; }
.stationcast-history-item.is-now-playing .stationcast-history-time { color: var(--stationcast-accent); }
.stationcast-track-change .stationcast-cover-wrap, .stationcast-track-change .stationcast-player-info { animation: stationcast-track-in .5s ease both; }
@keyframes stationcast-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stationcast-track-in { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .stationcast-player-main { min-height: 0; padding: 20px; }
  .stationcast-player-content { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; }
  .stationcast-cover-wrap { width: min(82vw, 330px); justify-self: center; }
  .stationcast-player-info { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
  .stationcast-controls { width: 100%; justify-content: center; flex-wrap: wrap; }
  .stationcast-title { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(30px, 11vw, 46px); }
  .stationcast-volume-label { min-width: 130px; }
  .stationcast-volume { width: min(48vw, 210px); }
  .stationcast-sticky { bottom: 8px; grid-template-columns: 44px minmax(0,1fr) 40px 28px; gap: 8px; }
  .stationcast-sticky-full .stationcast-sticky { bottom: 0; grid-template-columns: 44px minmax(0,1fr) 40px 28px; padding: 8px 12px; }
  .stationcast-sticky-cover { width: 44px; height: 44px; }
  .stationcast-history-item { grid-template-columns: 48px minmax(0,1fr) minmax(62px,auto); gap: 10px; }
  .stationcast-history-cover { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .stationcast-player *, .stationcast-history * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}