.music-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 28px;
  border-radius: 40px;
  background: linear-gradient(140deg, rgba(255,255,255,.86), rgba(239,241,242,.82));
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: 0 24px 65px -28px #385f6950, 0 2px 5px #ffffff80 inset;
  color: #2c2f30;
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}
.music-card [hidden] { display: none !important; }
.music-heading, .music-title, .music-service, .music-now, .music-transport, .music-volume, .music-footer, .music-device {
  display: flex;
  align-items: center;
}
.music-heading { justify-content: space-between; gap: 12px; flex-shrink: 0; }
.music-title { gap: 12px; }
.music-title h2 { font: 800 26px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.8px; margin: 0; }
.music-note { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: #296654; background: #acead355; }
.music-service { font-size: 13px; font-weight: 600; color: #296654; }
.music-service img { box-sizing: content-box; width: 24px; height: 24px; padding: 12px; flex: none; }
.music-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: 0 -4px; }
.music-now { gap: 20px; margin: 12px 0 18px; }
.music-art { width: 88px; height: 88px; flex: none; display: grid; place-items: center; }
.music-art img { width: 100%; height: 100%; object-fit: contain; }
.music-art-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #e2e7e5; border-radius: 16px; color: #296654; font-size: 40px; }
.music-details { min-width: 0; }
.music-status { font-size: 11px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: #296654; margin: 0 0 7px; }
.music-details h3 { font: 800 23px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.65px; margin: 0 0 6px; }
.music-details h3, .music-artist, .music-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-artist { font-size: 14px; color: #595c5d; margin: 0; }
.music-context { font-size: 12px; color: #697572; margin: 7px 0 0; }
.music-card a[href]:hover { text-decoration: underline; }
.music-field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #596866; margin-bottom: 8px; }
.music-card select { width: 100%; min-width: 0; height: 44px; border: 1px solid #b5c8c0; background: #ffffffb3; border-radius: 14px; padding: 0 12px; font: 600 14px Inter, sans-serif; color: #244d40; cursor: pointer; text-overflow: ellipsis; }
.music-card :is(select, button, input, a):focus-visible { outline: 3px solid #296654; outline-offset: 2px; }
.music-transport { gap: 12px; margin-top: 14px; }
.music-card button { font: 600 14px Inter, sans-serif; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 16px; padding: 0 20px; transition: background .15s, transform .15s; }
.music-card button:active { transform: scale(.97); }
.music-primary { background: #296654; color: white; min-width: 118px; box-shadow: 0 6px 14px #29665420; }
.music-secondary { background: #e2e7e5; color: #335c4e; }
.music-card :disabled { opacity: .45; cursor: not-allowed; }
.music-volume { width: 100%; margin-top: 12px; gap: 12px; min-height: 40px; color: #5e6d67; }
.music-volume label { display: flex; }
.music-volume input { flex: 1; min-width: 0; height: 30px; accent-color: #296654; cursor: pointer; }
.music-volume output { width: 42px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.music-footer { border-top: 1px solid #b8c6c452; margin-top: auto; padding-top: 12px; justify-content: space-between; gap: 12px; font-size: 12px; color: #5f7169; flex-shrink: 0; }
.music-device { gap: 8px; min-width: 0; }
.music-device > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-device .material-symbols-outlined { font-size: 18px; }
.music-footer > span:last-child { white-space: nowrap; }
.music-message { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 8px 10px; background: #f4e8d8; border-radius: 12px; color: #79572f; font-size: 12px; }
.music-message > span { flex: 1 1 144px; }
.music-message button { min-height: 44px; padding: 10px 12px; background: #e2d4be; color: #654723; border-radius: 10px; font-size: 12px; }
.music-recovery { min-height: 32px; padding: 6px 9px; background: #e2d4be; color: #654723; border-radius: 8px; font-size: 11px; }
.music-receiver-choice { margin-top: 8px; }
.music-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-height: 850px), (max-width: 1100px) {
  .music-card { padding: 18px 22px; }
  .music-title h2 { font-size: 24px; }
  .music-now { gap: 16px; margin: 6px 0 10px; }
  .music-art { width: 80px; height: 80px; }
  .music-details h3 { font-size: 22px; line-height: 26px; margin-bottom: 6px; }
  .music-status { font-size: 11px; line-height: 14px; margin-bottom: 6px; }
  .music-artist { font-size: 14px; line-height: 18px; }
  .music-context { font-size: 12px; line-height: 16px; margin-top: 6px; }
  .music-content > .music-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .music-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  .music-transport { margin-top: 0; gap: 8px; flex: none; }
  .music-card button { padding: 0 14px; }
  .music-primary { min-width: 104px; }
  .music-volume { width: 100%; min-width: 0; gap: 8px; }
  .music-volume input { width: 60px; }
  .music-footer { padding-top: 8px; font-size: 11px; line-height: 14px; }
}