/* QQSTAR fixed bottom dock */
.qqstar-dock{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%) translateY(110%);
  z-index:99999;
  display:flex;
  width:min(560px,100%);
  max-width:100vw;
  height:64px;
  margin:0;
  padding:0;
  list-style:none;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  background:linear-gradient(180deg,#ff4a4a 0%,#e81e2e 18%,#c8102e 48%,#8b0a0a 82%,#5a0202 100%);
  box-shadow:
    0 -6px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.25);
  border:1px solid rgba(255,211,106,.35);
  border-bottom:none;
  animation:qqstarDockIn .55s cubic-bezier(.22,1,.36,1) .15s forwards;
  touch-action:manipulation;
}
.qqstar-dock::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  pointer-events:none;
  animation:qqstarDockShine 3.2s ease-in-out infinite;
}
.qqstar-dock__item{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  text-decoration:none;
  color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition:transform .18s ease, color .18s ease, filter .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.qqstar-dock__item + .qqstar-dock__item{
  border-left:1px solid rgba(255,255,255,.22);
}
.qqstar-dock__item svg{
  width:22px;
  height:22px;
  fill:currentColor;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition:transform .2s ease;
}
.qqstar-dock__item span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 2px;
  line-height:1.1;
}
.qqstar-dock__item:hover,
.qqstar-dock__item:focus-visible{
  color:#ffd36a;
  filter:brightness(1.08);
  outline:none;
}
.qqstar-dock__item:hover svg,
.qqstar-dock__item:focus-visible svg{
  transform:translateY(-2px) scale(1.08);
}
.qqstar-dock__item--active{
  color:#ffd36a;
  animation:qqstarDockPulse 1.8s ease-in-out infinite;
}
.qqstar-dock__item--active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffd36a,transparent);
}
.qqstar-dock__item:active{
  transform:scale(.94);
}
@keyframes qqstarDockIn{
  from{transform:translateX(-50%) translateY(110%);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}
}
@keyframes qqstarDockShine{
  0%,100%{opacity:.55}
  50%{opacity:.95}
}
@keyframes qqstarDockPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,211,106,0))}
  50%{filter:drop-shadow(0 0 8px rgba(255,211,106,.55))}
}
body.qqstar-theme,
body.qqstar-has-dock,
html[⚡] body{
  padding-bottom:78px;
}
@media (min-width:640px){
  .qqstar-dock{
    height:70px;
    border-radius:20px 20px 0 0;
  }
  .qqstar-dock__item{
    font-size:10px;
    gap:4px;
  }
  .qqstar-dock__item svg{
    width:24px;
    height:24px;
  }
}