/* VNLIKE Music 2026-11-09: premium icon, compact header placement and customer volume. */
.vnl-music-dock{position:relative;z-index:50;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;margin-left:auto;margin-right:9px;isolation:isolate}
.vnl-music-toggle{position:relative;display:grid;place-items:center;width:39px;height:39px;flex:0 0 auto;border:1px solid rgba(126,155,255,.42);border-radius:13px;cursor:pointer;color:#e8edff;background:linear-gradient(145deg,rgba(86,102,234,.31),rgba(35,44,94,.77));box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 3px 15px rgba(64,88,219,.13);transition:transform .18s,border-color .18s,box-shadow .18s}
.vnl-music-toggle:hover{transform:translateY(-1px);border-color:#a9b5ff;box-shadow:0 0 18px rgba(108,123,255,.32)}
.vnl-music-toggle:focus-visible,.vnl-music-sound:focus-visible{outline:2px solid #9ec5ff;outline-offset:3px}
.vnl-music-note-svg{position:relative;z-index:1;display:block;width:27px;height:27px;overflow:visible;filter:drop-shadow(0 2px 4px rgba(26,40,126,.55))}
.vnl-music-toggle.is-playing{border-color:rgba(145,207,255,.8);background:linear-gradient(145deg,rgba(101,100,249,.48),rgba(31,83,142,.7));box-shadow:0 0 0 3px rgba(105,144,255,.10),0 0 20px rgba(88,129,255,.35)}
.vnl-music-toggle.is-playing .vnl-music-note-svg{animation:vnlMusicNotePulse 1.95s ease-in-out infinite}
.vnl-music-notes{position:absolute;inset:0;pointer-events:none;overflow:visible}
.vnl-music-notes i{position:absolute;bottom:12px;left:12px;opacity:0;font-size:13px;font-style:normal;line-height:1;color:#92e4ff;text-shadow:0 0 8px rgba(140,189,255,.35)}
.vnl-music-toggle.is-playing .vnl-music-notes i{animation:vnlNotesFloat 2.4s ease-out infinite}
.vnl-music-toggle.is-playing .vnl-music-notes i:nth-child(2){animation-delay:.8s;left:21px;color:#f6b4ff}
.vnl-music-toggle.is-playing .vnl-music-notes i:nth-child(3){animation-delay:1.6s;left:5px;color:#c5c0ff}
.vnl-music-sound{width:29px;height:29px;flex:0 0 auto;display:grid;place-items:center;padding:5px;border:1px solid rgba(133,149,199,.23);border-radius:10px;color:#a9b8ee;background:rgba(101,117,189,.12);cursor:pointer;transition:.17s}
.vnl-music-sound svg{width:19px;height:19px;display:block;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vnl-music-sound:hover,.vnl-music-sound[aria-expanded="true"]{color:#fff;border-color:rgba(138,158,255,.65);background:rgba(103,118,239,.25)}
.vnl-music-sound.is-muted .vnl-music-volume-wave{display:none}
.vnl-music-sound:not(.is-muted) .vnl-music-volume-muted{display:none}
.vnl-music-volume-popover{position:fixed;z-index:1200;width:232px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:14px 15px 15px;border:1px solid rgba(140,163,255,.38);border-radius:15px;background:linear-gradient(155deg,#16223d,#0b1326 83%);box-shadow:0 15px 45px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.07);color:#e8edff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.vnl-music-volume-popover[hidden]{display:none!important}
.vnl-music-volume-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;font-size:12px;font-weight:800}
.vnl-music-volume-heading span{font-size:11px;font-weight:850;color:#aabaff;font-variant-numeric:tabular-nums}
.vnl-music-volume-range{display:block;width:100%;height:22px;margin:0;accent-color:#8e8aff;cursor:pointer;touch-action:pan-x}
.vnl-music-volume-hint{display:block;color:#7f90b1;font-size:10px;margin-top:9px;line-height:1.35}
@keyframes vnlNotesFloat{0%{opacity:0;transform:translate(0,1px) rotate(-12deg) scale(.75)}17%{opacity:1}72%{opacity:.88}100%{opacity:0;transform:translate(12px,-29px) rotate(17deg) scale(1.14)}}
@keyframes vnlMusicNotePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
/* Language UI is injected asynchronously. Explicit grid cells keep music beside it, never before logo. */
@media(max-width:760px){
 header .nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:7px!important;row-gap:7px!important;align-items:center}
 header .nav>.logo{grid-column:1;grid-row:1;order:0!important;min-width:0!important;max-width:100%}
 header .nav>.logo img{max-width:100%!important;object-fit:contain}
 header .nav>.vnlang-wrap{grid-column:2;grid-row:1;order:0!important;margin-left:0!important;min-width:0}
 header .nav>.vnl-music-dock{grid-column:3;grid-row:1;order:0!important;margin:0 2px 0 0;width:37px;height:39px;justify-self:center}
 header .nav>.userbox{grid-column:4;grid-row:1;order:0!important;margin-left:0;min-width:0;justify-self:end}
 header .nav>#guestButtons{grid-column:1/-1;grid-row:2;justify-self:end;justify-content:flex-end}
 .vnl-music-toggle{width:36px;height:36px;border-radius:12px}
 .vnl-music-note-svg{width:24px;height:24px}
 .vnl-music-sound{position:absolute;z-index:3;right:-3px;bottom:-7px;width:20px;height:20px;padding:3px;border-radius:7px;border-color:rgba(149,161,255,.52);background:#182346;box-shadow:0 2px 7px rgba(0,0,0,.4)}
 .vnl-music-sound svg{width:14px;height:14px}
}
@media(max-width:370px){header .nav{column-gap:5px!important}header .nav>.vnl-music-dock{margin-right:0}header .nav>.logo img{max-height:36px!important}}
@media(max-width:350px){
 header .nav{grid-template-columns:minmax(0,1fr) auto auto!important}
 header .nav>.userbox{grid-column:1/-1;grid-row:2;justify-self:end}
 header .nav>.vnlang-wrap{grid-column:2}
 header .nav>.vnl-music-dock{grid-column:3}
}
@media(prefers-reduced-motion:reduce){.vnl-music-toggle.is-playing .vnl-music-note-svg,.vnl-music-toggle.is-playing .vnl-music-notes i{animation:none}}
