/* RFReference compact music player.
   Loaded after the legacy stylesheet so the old music block can remain untouched. */

#audioBox.musicPlayer{
  position:absolute;
  left:28px;
  top:82px;
  z-index:50;
  width:350px;
  height:74px;
  padding:9px 10px;
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) 36px;
  align-items:center;
  gap:10px;

  border:1px solid rgba(91,170,255,.30);
  border-radius:18px;
  background:
    radial-gradient(circle at 16% 0%, rgba(50,150,255,.16), transparent 42%),
    linear-gradient(135deg, rgba(11,21,46,.92), rgba(7,12,29,.86));
  box-shadow:
    0 16px 42px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(25,105,220,.05);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  overflow:hidden;
  isolation:isolate;
}

#audioBox.musicPlayer::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-2;
  border-radius:inherit;
  background:linear-gradient(110deg,
    transparent 8%,
    rgba(35,153,255,.16) 35%,
    rgba(255,123,55,.13) 59%,
    transparent 88%);
  opacity:.72;
  transform:translateX(-38%);
  transition:opacity .25s ease;
}

#audioBox.musicPlayer::after{
  content:"";
  position:absolute;
  left:72px;
  right:45px;
  bottom:0;
  height:1px;
  z-index:3;
  background:linear-gradient(90deg, transparent, rgba(34,181,255,.65), transparent);
  opacity:.42;
}

#audioBox.musicPlayer:hover{
  border-color:rgba(84,186,255,.48);
  box-shadow:
    0 18px 48px rgba(0,0,0,.44),
    0 0 24px rgba(24,131,255,.10),
    inset 0 1px 0 rgba(255,255,255,.09);
}

#audioBox.musicPlayer:hover::before{
  opacity:1;
}

#audioBox.musicPlayer.playing{
  border-color:rgba(39,184,255,.52);
  box-shadow:
    0 18px 48px rgba(0,0,0,.44),
    0 0 26px rgba(0,151,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

#audioBox.musicPlayer.playing::before{
  animation:musicPanelGlow 7s ease-in-out infinite alternate;
}

#audioBox.musicPlayer .musicToggle{
  position:relative;
  width:54px;
  height:54px;
  min-width:54px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.17);
  border-radius:16px;
  cursor:pointer;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(145deg, #167be3, #0a3d8e 70%);
  box-shadow:
    0 9px 24px rgba(0,78,190,.34),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -8px 16px rgba(0,20,70,.24);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  overflow:hidden;
}

#audioBox.musicPlayer .musicToggle::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(120,221,255,.18);
  border-radius:12px;
  pointer-events:none;
}

#audioBox.musicPlayer .musicToggle:hover:not(:disabled){
  transform:translateY(-1px) scale(1.025);
  filter:brightness(1.08);
  box-shadow:
    0 11px 27px rgba(0,104,225,.42),
    0 0 16px rgba(23,175,255,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
}

#audioBox.musicPlayer .musicToggle:active:not(:disabled){
  transform:translateY(1px) scale(.97);
}

#audioBox.musicPlayer .musicToggle:disabled{
  opacity:.58;
  cursor:wait;
}

#audioBox.musicPlayer .musicLegacyIcon{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

#audioBox.musicPlayer .musicToggleGlyph{
  position:relative;
  display:block;
  width:18px;
  height:20px;
  filter:drop-shadow(0 0 8px rgba(185,235,255,.40));
}

#audioBox.musicPlayer .musicToggleGlyph::before,
#audioBox.musicPlayer .musicToggleGlyph::after{
  content:"";
  position:absolute;
  transition:all .18s ease;
}

#audioBox.musicPlayer:not(.playing) .musicToggleGlyph::before{
  left:4px;
  top:2px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid #f5fbff;
  border-radius:2px;
}

#audioBox.musicPlayer:not(.playing) .musicToggleGlyph::after{
  display:none;
}

#audioBox.musicPlayer.playing .musicToggleGlyph::before,
#audioBox.musicPlayer.playing .musicToggleGlyph::after{
  top:2px;
  width:5px;
  height:16px;
  border-radius:2px;
  background:#f5fbff;
  box-shadow:0 0 9px rgba(198,241,255,.28);
}

#audioBox.musicPlayer.playing .musicToggleGlyph::before{ left:2px; }
#audioBox.musicPlayer.playing .musicToggleGlyph::after{ right:2px; }

#audioBox.musicPlayer .musicMain{
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

#audioBox.musicPlayer .musicHead{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

#audioBox.musicPlayer .musicLabel{
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.15px;
  text-transform:uppercase;
  color:rgba(114,197,255,.80);
  white-space:nowrap;
}

#audioBox.musicPlayer .musicLiveDot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(103,152,190,.70);
  box-shadow:0 0 0 rgba(66,205,255,0);
  transition:background .2s ease, box-shadow .2s ease;
}

#audioBox.musicPlayer.playing .musicLiveDot{
  background:#55ddff;
  box-shadow:0 0 9px rgba(68,213,255,.80);
  animation:musicDot 2s ease-in-out infinite;
}

#audioBox.musicPlayer .musicTrackRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

#audioBox.musicPlayer .musicText{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  text-align:left;
}

#audioBox.musicPlayer .musicText strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.2;
  color:rgba(244,249,255,.96);
  letter-spacing:.05px;
}

#audioBox.musicPlayer .audioHint{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  line-height:1.2;
  color:rgba(196,210,231,.66);
}

#audioBox.musicPlayer.playing .audioHint{
  color:rgba(118,214,255,.82);
}

#audioBox.musicPlayer .audioViz{
  flex:0 0 42px;
  width:42px;
  height:25px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:3px;
  margin:0;
  opacity:.75;
  filter:drop-shadow(0 0 8px rgba(0,169,255,.16));
}

#audioBox.musicPlayer .audioViz span{
  width:3px;
  height:4px;
  min-height:4px;
  border:0;
  border-radius:4px;
  background:linear-gradient(180deg, #8ee8ff, #1986db);
  box-shadow:0 0 5px rgba(54,189,255,.16);
  transform-origin:center bottom;
}

#audioBox.musicPlayer.playing .audioViz span{
  animation:musicBars .9s ease-in-out infinite alternate;
}

#audioBox.musicPlayer.playing .audioViz span:nth-child(1){ animation-delay:-.22s; }
#audioBox.musicPlayer.playing .audioViz span:nth-child(2){ animation-delay:-.46s; }
#audioBox.musicPlayer.playing .audioViz span:nth-child(3){ animation-delay:-.10s; }
#audioBox.musicPlayer.playing .audioViz span:nth-child(4){ animation-delay:-.58s; }
#audioBox.musicPlayer.playing .audioViz span:nth-child(5){ animation-delay:-.32s; }

#audioBox.musicPlayer .musicTimeline{
  position:relative;
  width:100%;
  height:2px;
  margin-top:2px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

#audioBox.musicPlayer .musicTimeline > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #188ee7, #69e1ff 70%, #ff9a54);
  box-shadow:0 0 9px rgba(39,184,255,.45);
  transition:width .35s linear;
}

#audioBox.musicPlayer .musicMute{
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:rgba(210,230,248,.72);
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

#audioBox.musicPlayer .musicMute:hover{
  color:#e9f8ff;
  border-color:rgba(88,191,255,.28);
  background:rgba(45,139,218,.12);
  transform:translateY(-1px);
}

#audioBox.musicPlayer .musicMute:active{
  transform:translateY(1px);
}

#audioBox.musicPlayer .musicSpeaker{
  width:18px;
  height:18px;
  overflow:visible;
}

#audioBox.musicPlayer .speakerBody{
  fill:currentColor;
}

#audioBox.musicPlayer .speakerWave,
#audioBox.musicPlayer .speakerMuteLine{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}

#audioBox.musicPlayer .speakerMuteLine{
  display:none;
}

#audioBox.musicPlayer.muted .speakerWave{
  display:none;
}

#audioBox.musicPlayer.muted .speakerMuteLine{
  display:block;
}

#audioBox.musicPlayer.muted .musicMute{
  color:#ff9d9d;
  border-color:rgba(255,100,100,.22);
  background:rgba(170,32,55,.11);
}

#audioBox.musicPlayer[data-audio-state="error"]{
  border-color:rgba(255,105,105,.32);
}

#audioBox.musicPlayer[data-audio-state="error"] .musicLiveDot{
  background:#ff7474;
  box-shadow:0 0 8px rgba(255,80,80,.38);
}

@keyframes musicBars{
  0%{ height:4px; opacity:.55; }
  35%{ height:13px; opacity:.92; }
  68%{ height:7px; opacity:.72; }
  100%{ height:23px; opacity:1; }
}

@keyframes musicDot{
  0%,100%{ transform:scale(.9); opacity:.72; }
  50%{ transform:scale(1.15); opacity:1; }
}

@keyframes musicPanelGlow{
  0%{ transform:translateX(-38%); opacity:.72; }
  100%{ transform:translateX(36%); opacity:1; }
}

@media (max-width:900px){
  #audioBox.musicPlayer{
    left:16px;
    top:78px;
    width:min(330px, calc(100vw - 32px));
  }
}

@media (max-width:560px){
  #audioBox.musicPlayer{
    top:78px;
    grid-template-columns:50px minmax(0, 1fr) 32px;
    width:min(310px, calc(100vw - 24px));
    height:68px;
    padding:7px 8px;
    gap:8px;
  }

  #audioBox.musicPlayer .musicToggle{
    width:50px;
    height:50px;
    min-width:50px;
  }

  #audioBox.musicPlayer .musicMute{
    width:32px;
    height:32px;
  }
}

@media (max-width:390px){
  #audioBox.musicPlayer{
    width:270px;
  }

  #audioBox.musicPlayer .musicLabel{
    display:none;
  }

  #audioBox.musicPlayer .audioViz{
    flex-basis:32px;
    width:32px;
    gap:2px;
  }
}

@media (prefers-reduced-motion:reduce){
  #audioBox.musicPlayer::before,
  #audioBox.musicPlayer .musicLiveDot,
  #audioBox.musicPlayer .audioViz span{
    animation:none !important;
  }
}


/* ===== v2: compact integration under REGISTER ACCOUNT ===== */
.topLeft .btnRegister{
  width:210px;
  min-width:210px;
}

#audioBox.musicPlayer{
  left:28px;
  top:78px;
  width:210px;
  height:58px;
  padding:7px 8px;
  grid-template-columns:42px minmax(0, 1fr) 30px;
  gap:8px;
  border-radius:15px;
}

#audioBox.musicPlayer::after{
  display:none;
}

#audioBox.musicPlayer .musicToggle{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:12px;
  box-shadow:
    0 7px 18px rgba(0,78,190,.30),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -6px 12px rgba(0,20,70,.22);
}

#audioBox.musicPlayer .musicToggle::after{
  inset:4px;
  border-radius:9px;
}

#audioBox.musicPlayer .musicToggleGlyph{
  width:15px;
  height:17px;
}

#audioBox.musicPlayer:not(.playing) .musicToggleGlyph::before{
  left:3px;
  top:1px;
  border-top-width:7px;
  border-bottom-width:7px;
  border-left-width:11px;
}

#audioBox.musicPlayer.playing .musicToggleGlyph::before,
#audioBox.musicPlayer.playing .musicToggleGlyph::after{
  top:1px;
  width:4px;
  height:14px;
}

#audioBox.musicPlayer .musicMain{
  gap:0;
}

#audioBox.musicPlayer .musicHead,
#audioBox.musicPlayer .musicTimeline{
  display:none;
}

#audioBox.musicPlayer .musicTrackRow{
  gap:5px;
}

#audioBox.musicPlayer .musicText{
  gap:2px;
}

#audioBox.musicPlayer .musicText strong{
  font-size:11.5px;
  line-height:1.1;
}

#audioBox.musicPlayer .audioHint{
  font-size:9px;
  line-height:1.1;
}

#audioBox.musicPlayer .audioViz{
  flex:0 0 24px;
  width:24px;
  height:18px;
  gap:2px;
  opacity:.72;
}

#audioBox.musicPlayer .audioViz span{
  width:2px;
  height:3px;
  min-height:3px;
}

#audioBox.musicPlayer .musicMute{
  width:30px;
  height:30px;
  border-radius:9px;
}

#audioBox.musicPlayer .musicSpeaker{
  width:16px;
  height:16px;
}

@keyframes musicBars{
  0%{ height:3px; opacity:.55; }
  35%{ height:10px; opacity:.92; }
  68%{ height:6px; opacity:.72; }
  100%{ height:17px; opacity:1; }
}

@media (max-width:900px){
  .topLeft .btnRegister{
    width:210px;
    min-width:210px;
  }

  #audioBox.musicPlayer{
    left:16px;
    top:76px;
    width:210px;
  }
}

@media (max-width:560px){
  #audioBox.musicPlayer{
    top:76px;
    width:210px;
    height:56px;
    padding:7px 8px;
    grid-template-columns:40px minmax(0, 1fr) 30px;
    gap:7px;
  }

  #audioBox.musicPlayer .musicToggle{
    width:40px;
    height:40px;
    min-width:40px;
  }
}

@media (max-width:390px){
  .topLeft .btnRegister{
    width:196px;
    min-width:196px;
  }

  #audioBox.musicPlayer{
    width:196px;
  }

  #audioBox.musicPlayer .audioViz{
    display:none;
  }
}

/* Muting/pausing music must stop decoration as well as the JS visualizer. */
#audioBox.musicPlayer:not(.visualizer-active)::before,
#audioBox.musicPlayer:not(.visualizer-active) .musicLiveDot,
#audioBox.musicPlayer:not(.visualizer-active) .audioViz span {
  animation: none !important;
}