#navbar {
  position: fixed; top: 10px; left: 12px; right: 12px; z-index: 1000;
  background: linear-gradient(140deg, rgba(255, 247, 238, 0.86) 0%, rgba(255, 235, 214, 0.78) 100%);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 173, 102, 0.45);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(174, 100, 38, 0.16), inset 0 1px 0 rgba(255,255,255,0.64);
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  padding: 8px 18px;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
#navbar.visible { transform: translateY(0); }
.navbar-left, .navbar-right { display: flex; align-items: center; gap: 20px; }
.navbar-left { justify-content: flex-start; }
.navbar-right { justify-content: flex-end; }
.navbar-center { text-align: center; }
.nav-link { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s; display: flex; align-items: center; gap: 4px; }
.nav-link:hover { color: var(--primary); }
.nav-countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-countdown-title { font-size: 0.72rem; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }
.nav-countdown-line {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  min-width: 170px;
}
.nav-countdown-line .nav-countdown-value {
  display: inline-block;
  min-width: 2ch;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-rise {
  animation: navCountdownRise .44s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-flip {
  animation: navCountdownFlip .42s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-flash {
  animation: navCountdownFlash .36s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-pop {
  animation: navCountdownPop .36s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-slide {
  animation: navCountdownSlide .32s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-swing {
  animation: navCountdownSwing .42s ease;
}
.nav-countdown-line .nav-countdown-value.nav-countdown-blur {
  animation: navCountdownBlur .36s ease;
}
.nav-countdown-line .sep { color: var(--primary); margin: 0 2px; }

@keyframes navCountdownRise {
  0% { transform: translateY(10px); opacity: 0; }
  60% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes navCountdownFlip {
  0% { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

@keyframes navCountdownFlash {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes navCountdownPop {
  0% { transform: scale(0.72); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes navCountdownSlide {
  0% { transform: translateX(6px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes navCountdownSwing {
  0% { transform: rotate(-9deg); opacity: 0.3; }
  100% { transform: rotate(0deg); opacity: 1; }
}

@keyframes navCountdownBlur {
  0% { filter: blur(4px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}
.nav-player-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255, 173, 102, 0.45);
  border-radius: 20px; padding: 4px 12px; font-size: 0.8rem;
}
.nav-player-pill .track-info { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.nav-player-pill button { background: none; border: none; cursor: pointer; color: var(--text); font-size: 14px; padding: 2px; line-height: 1; transition: color 0.2s; }
.nav-player-pill button:hover { color: var(--primary); }
@media (max-width: 768px) {
  #navbar {
    top: 8px;
    left: 8px;
    right: 8px;
    grid-template-columns: 1fr;
    height: auto;
    padding: 10px 12px;
    gap: 10px;
  }
  .navbar-left,
  .navbar-right,
  .navbar-center {
    justify-content: center;
  }
  .navbar-left { gap: 14px; }
  .navbar-right { gap: 12px; }
  .nav-player-pill .track-info { display: none; }
  .nav-link { font-size: 0.82rem; }
  .nav-link i { font-size: 1rem; }
  .nav-countdown-title { font-size: 0.66rem; }
  .nav-countdown-line { font-size: 0.96rem; min-width: 150px; }
}