/* R47 — precision polish for the R46 MUSIC hierarchy. Visual-only; no routing/player logic. */
@media (min-width:761px){
  .navMusicGroup{isolation:isolate}

  /* Compact, integrated dropdown — sized for exactly two child routes. */
  .navMusicSub{
    top:calc(100% + 5px)!important;
    width:176px!important;
    padding:5px!important;
    border-radius:12px!important;
    border-color:rgba(91,231,255,.16)!important;
    background:
      radial-gradient(120% 130% at 12% -10%,rgba(48,218,255,.085),transparent 48%),
      radial-gradient(90% 130% at 100% 100%,rgba(185,72,255,.055),transparent 55%),
      linear-gradient(180deg,rgba(4,12,22,.965),rgba(3,8,15,.975))!important;
    box-shadow:
      0 14px 34px rgba(0,0,0,.44),
      0 0 24px rgba(43,215,255,.045),
      inset 0 1px 0 rgba(255,255,255,.045)!important;
    backdrop-filter:blur(15px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.12)!important;
    transform:translate(-50%,-5px) scale(.992)!important;
    transition:opacity .15s ease,transform .18s cubic-bezier(.22,.8,.28,1),visibility .15s!important;
  }
  .navMusicSub::before{
    left:14px!important;right:14px!important;
    background:linear-gradient(90deg,transparent,rgba(69,239,255,.92) 34%,rgba(164,102,255,.64) 72%,transparent)!important;
    box-shadow:0 0 10px rgba(67,235,255,.30)!important;
  }
  .navMusicSub::after{
    content:"";position:absolute;left:50%;top:-5px;width:34px;height:5px;transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(75,234,255,.35),transparent);
    clip-path:polygon(15% 100%,30% 0,70% 0,85% 100%);opacity:.75;pointer-events:none
  }
  .navMusicGroup:hover .navMusicSub,.navMusicGroup:focus-within .navMusicSub,.navMusicGroup.subOpen .navMusicSub{
    transform:translate(-50%,0) scale(1)!important;
  }
  .navMusicSub button{
    min-height:36px!important;
    padding:8px 10px!important;
    border-radius:8px!important;
    font-size:12px!important;
    font-weight:700!important;
    letter-spacing:.012em!important;
    color:#b8c4d2!important;
    transition:color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease!important;
  }
  .navMusicSub button+button{margin-top:2px!important}
  .navMusicSub button:hover,.navMusicSub button:focus-visible{
    color:#fff!important;
    background:linear-gradient(90deg,rgba(62,226,255,.085),rgba(143,88,255,.045))!important;
    box-shadow:inset 1px 0 rgba(83,238,255,.55)!important;
    transform:translateX(1px)!important;
  }
  .navMusicSub button.active{
    background:linear-gradient(90deg,rgba(59,232,255,.12),rgba(255,83,185,.055))!important;
    box-shadow:inset 2px 0 0 rgba(88,245,255,.9)!important;
  }

  /* Replace the text glyph with a clean HUD chevron. */
  .navChevron{
    position:relative;width:10px;height:8px;font-size:0!important;opacity:.56!important;
    transform:none!important;transition:opacity .16s ease,transform .18s ease!important;
  }
  .navChevron::before,.navChevron::after{
    content:"";position:absolute;top:3px;width:6px;height:1px;border-radius:2px;background:currentColor;
    box-shadow:0 0 7px rgba(91,239,255,.28)
  }
  .navChevron::before{left:0;transform:rotate(38deg)}
  .navChevron::after{right:0;transform:rotate(-38deg)}
  .navMusicGroup:hover>.navMusicMain .navChevron,
  .navMusicGroup:focus-within>.navMusicMain .navChevron{
    opacity:.95!important;color:#63f3ff;transform:rotate(180deg)!important
  }
}

@media(max-width:760px){
  /* Keep the hierarchy explicit on touch, but remove visual bulk. */
  .mobileMusicGroup{gap:4px!important}
  .mobileMusicChildren{gap:4px!important;margin-left:13px!important;padding-left:9px!important;border-left-color:rgba(83,240,255,.17)!important}
  .mobileMusicChildren button{padding:9px 11px!important;font-size:12.5px!important;border-radius:10px!important}
  .mobileMusicMark{position:relative;width:11px;height:8px;font-size:0!important;opacity:.65!important}
  .mobileMusicMark::before,.mobileMusicMark::after{content:"";position:absolute;top:3px;width:6px;height:1px;background:#68f7ff;border-radius:2px}
  .mobileMusicMark::before{left:0;transform:rotate(38deg)}
  .mobileMusicMark::after{right:0;transform:rotate(-38deg)}
}