.player {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  height:calc(var(--player) + env(safe-area-inset-bottom));
  padding:1rem 2rem calc(1rem + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:1.5rem;
  background:var(--player-bg);
  border-top:1px solid var(--border)
}
.player-station {
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0
}
.player-copy {
  min-width:0
}
.player-copy strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem
}
.player-copy span {
  display:block;
  color:var(--muted);
  font-size:.65rem;
  margin-top:.3rem;
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.player[data-state=error] #player-status {
  color:var(--danger)
}
.transport {
  display:grid;
  grid-template-columns:6.5rem 44px 46px 44px 6.5rem;
  align-items:center;
  justify-content:center;
  gap:.6rem
}
.play-main {
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:var(--accent);
  color:var(--bg);
  width:46px;
  height:46px;
  flex:0 0 auto;
  aspect-ratio:1;
  padding:0;
  border-radius:50%
}
.play-main:hover {
  background:var(--accent-hover)
}
.player .transport svg { stroke-width:2.3; }
.player .play-main svg { width:24px; height:24px; }
.live-badge,.stream-info {
  font-size:.55rem;
  letter-spacing:.12em;
  color:var(--muted);
  min-width:0;
  white-space:nowrap
}
.live-badge { overflow:hidden; text-overflow:ellipsis; }
.live-badge:empty { visibility:hidden; }
.stream-info { text-align:right; overflow:hidden; text-overflow:ellipsis; }
.stream-info:empty { visibility:hidden; }
.player-copy .stream-info-mobile { display:none; }
.player-extras {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.3rem
}
.player-right {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-5);
  min-width:0;
}
.player-extras input {
  width:90px
}
.station-homepage-slot {
  display:flex;
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  height:44px;
}
.player-expand {
  display:none
}
.player-visualizer {
  position:relative;
  min-width:0;
  align-self:center;
  justify-self:center;
  width:min(100%,220px);
}
.visualizer-toggle {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:10px 28px 10px;
  align-content:center;
  gap:4px;
  width:100%;
  height:60px;
  padding:1px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-small);
  text-align:left;
}
.visualizer-toggle:hover,.visualizer-toggle[aria-expanded=true] {
  background:var(--card);
  border-color:var(--border);
}
.visualizer-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  color:var(--muted);
  font-size:.52rem;
  line-height:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.visualizer-menu-dot { letter-spacing:2px; }
.visualizer-toggle canvas { display:block; width:100%; min-width:0; max-width:100%; height:28px; }
.visualizer-status { font-size:.52rem; line-height:10px; color:var(--muted); }
.player-visualizer[data-signal=live] .visualizer-status { color:var(--accent); }
.visualizer-picker {
  position:fixed;
  bottom:var(--visualizer-bottom, 110px);
  left:var(--visualizer-left, 1rem);
  width:350px;
  max-width:calc(100vw - 2rem);
  max-height:min(70dvh, calc(100dvh - var(--visualizer-bottom, 110px) - 1rem));
  overflow:auto;
  padding:1.25rem;
  border:1px solid var(--border);
  border-radius:1.1rem;
  background:var(--panel);
  box-shadow:var(--toast-shadow);
}
.visualizer-picker-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem; }
.visualizer-picker-head .eyebrow { font-size:.55rem; }
.visualizer-picker-head h2 { font-size:1.05rem; margin-top:.3rem; }
.visualizer-options { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
.visualizer-option {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  padding:.8rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--card);
  text-align:left;
}
.visualizer-option:hover { border-color:var(--card-hover-border); }
.visualizer-option[aria-pressed=true] { border-color:var(--accent); background:var(--nav-active); }
.visualizer-option strong { font-size:.78rem; }
.visualizer-description { font-size:.6rem; line-height:1.5; color:var(--muted); }
.visualizer-preview { width:100%; height:25px; display:flex; align-items:flex-end; gap:3px; margin:.2rem 0 .35rem; }
.visualizer-preview i { display:block; flex:1; height:var(--preview-size); border-radius:2px; background:var(--accent); opacity:.75; }
.visualizer-preview--vu { align-items:center; }
.visualizer-preview--vu i { height:15px; }
.visualizer-preview--vu i:nth-last-child(-n+3) { background:var(--meter-high); }
.visualizer-preview--waveform { align-items:center; }
.visualizer-preview--waveform i { border-radius:50%; }
.visualizer-preview--off { align-items:center; gap:0; }
.visualizer-preview--off i { height:2px; background:var(--meter-track); }
.visualizer-picker>.button { width:100%; }
.visualizer-note { font-size:.66rem; line-height:1.7; margin-top:.8rem; }
.visualizer-motion { margin-top:1rem; }
.visualizer-motion select { width:100%; font-size:.75rem; }
.visualizer-performance { margin-top:.65rem; color:var(--muted); font-size:.6rem; line-height:1.6; }
.player-visualizer[data-mode=analog] .visualizer-toggle { grid-template-rows:8px 40px 8px; gap:0; }
.player-visualizer[data-mode=analog] canvas { height:40px; border-radius:.3rem; }
.player-visualizer[data-mode=analog] :is(.visualizer-heading,.visualizer-status) { font-size:.48rem; line-height:8px; }
.player-visualizer:is([data-mode=spectrum],[data-mode=rainbow]) .visualizer-toggle { grid-template-rows:10px 30px 10px; gap:3px; }
.player-visualizer:is([data-mode=spectrum],[data-mode=rainbow]) canvas { height:30px; }
.visualizer-preview--analog,.visualizer-preview--rainbow { height:52px; }
.visualizer-preview--analog svg { width:100%; height:100%; }
.visualizer-preview--rainbow i { border-radius:0; opacity:1; background:repeating-linear-gradient(to top,transparent 0 1px,hsl(var(--preview-hue) var(--rainbow-saturation) var(--rainbow-lightness)) 1px 4px); }