/* SIIK Demo Player: glass bar with play button, title, time and a seekable waveform. Scoped to .sdp */
.sdp {
  --sdp-accent: #8B5CF6;
  --sdp-wave-on: #B197FF;
  --sdp-wave: rgba(244, 244, 248, 0.32);
  --sdp-panel: rgba(16, 16, 28, 0.55);
  --sdp-text: #F4F4F8;
  --sdp-muted: rgba(244, 244, 248, 0.72);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px 12px;
  border-radius: 18px;
  color: var(--sdp-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)), var(--sdp-panel);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.35);
  line-height: 1.3;
  text-align: left;
}
.sdp *, .sdp *::before, .sdp *::after { box-sizing: border-box; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sdp { --sdp-panel: rgba(22, 22, 34, 0.94); }
}

.sdp .sdp-play {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--sdp-accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .12s ease, filter .15s ease;
}
.sdp .sdp-play:hover { filter: brightness(1.12); transform: scale(1.05); }
.sdp .sdp-play:active { transform: scale(0.95); }
.sdp .sdp-play:focus-visible { outline: 2px solid var(--sdp-wave-on); outline-offset: 3px; }
.sdp .sdp-play svg { width: 15px; height: 15px; display: block; }
.sdp .sdp-play .sdp-i-pause { display: none; }
.sdp.is-playing .sdp-play .sdp-i-play { display: none; }
.sdp.is-playing .sdp-play .sdp-i-pause { display: block; }
.sdp.is-loading .sdp-play { animation: sdp-pulse 1s ease-in-out infinite; }
@keyframes sdp-pulse { 50% { filter: brightness(0.8); } }

.sdp-ttl { min-width: 0; }
.sdp-ttl b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--sdp-text); }
.sdp-ttl span { display: block; font-size: 13px; color: var(--sdp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdp-time { font-size: 13px; color: var(--sdp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sdp-dur:not(:empty)::before { content: " / "; }

.sdp .sdp-wave { grid-column: 1 / -1; display: block; width: 100%; height: 40px; max-width: none; cursor: pointer; border-radius: 4px; touch-action: none; }
.sdp .sdp-wave:focus-visible { outline: 2px solid var(--sdp-wave-on); outline-offset: 3px; }

.sdp.has-error .sdp-ttl span::after { content: " · could not load"; color: #f09090; }
.sdp-empty { display: block; font-size: 13px; color: var(--sdp-muted); }

@media (prefers-reduced-motion: reduce) {
  .sdp * { transition: none !important; animation: none !important; }
}