/* ─── Global Music Player Bar ─────────────────────────────────────── */
#music-player-bar {
  position:fixed; bottom:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(3,6,12,.18), rgba(3,6,12,.88));
  backdrop-filter:blur(24px);
  border-top:1px solid rgba(120,160,220,.08); z-index:200;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:.9rem 1rem 1rem;
}
#music-player-bar.visible { transform:translateY(0); }

.player-inner {
  max-width:none; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1.35rem; min-height:92px;
  padding:1rem 1.15rem;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(8,14,24,.96), rgba(5,9,18,.92)),
    radial-gradient(circle at top, rgba(30,144,255,.08), transparent 42%);
  border:1px solid rgba(120,160,220,.14);
  box-shadow:
    0 24px 60px -38px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.player-track { display:flex; align-items:center; gap:.95rem; min-width:0; }
.player-thumb-wrap {
  position:relative; flex-shrink:0;
  width:58px; height:58px; border-radius:16px; padding:1px;
  background:linear-gradient(145deg, rgba(77,168,255,.5), rgba(255,255,255,.08));
  box-shadow:0 18px 30px -22px rgba(30,144,255,.7);
}
.player-thumb-wrap::after {
  content:"";
  position:absolute; inset:auto 10px -8px;
  height:12px; border-radius:999px;
  background:radial-gradient(circle, rgba(30,144,255,.35), transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}
.player-thumb {
  width:100%; height:100%; border-radius:15px; object-fit:cover; display:block;
  background:#111A2E; border:1px solid rgba(255,255,255,.04);
}
.player-info { min-width:0; }
.player-kicker {
  display:inline-flex; align-items:center; gap:.38rem;
  margin-bottom:.3rem; padding:.22rem .5rem;
  border-radius:999px; background:rgba(30,144,255,.12);
  color:#69B4FF; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid rgba(30,144,255,.16);
}
.player-kicker-dot {
  width:6px; height:6px; border-radius:50%;
  background:#1E90FF; box-shadow:0 0 10px rgba(30,144,255,.85);
}
.player-title { font-size:.93rem; font-weight:700; color:#F3F7FD; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.player-author { font-size:.75rem; color:#90A0BA; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.18rem; }

.player-controls { display:flex; flex-direction:column; align-items:center; gap:.62rem; min-width:min(36vw, 460px); }
.player-btns { display:flex; align-items:center; gap:.55rem; }
.player-btn {
  width:38px; height:38px; border-radius:999px; border:1px solid rgba(120,160,220,.12);
  background:rgba(255,255,255,.025);
  color:#9AA8BF; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s, border-color .15s, transform .15s;
}
.player-btn:hover { color:#E6EDF7; background:rgba(255,255,255,.06); border-color:rgba(120,160,220,.22); transform:translateY(-1px); }
.player-btn.play-pause {
  width:52px; height:52px; background:linear-gradient(180deg, #2F98FF, #1E90FF);
  color:#fff; border-color:rgba(107,177,255,.4);
  box-shadow:0 18px 34px -22px rgba(30,144,255,.95), inset 0 1px 0 rgba(255,255,255,.2);
}
.player-btn.play-pause:hover { background:linear-gradient(180deg, #45A5FF, #2496FF); }
.player-btn.stop-btn { color:#EF4444; border-color:rgba(239,68,68,.2); }
.player-btn.stop-btn:hover { color:#F87171; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.35); }
.player-btn svg { width:15px; height:15px; }
.player-btn.play-pause svg { width:18px; height:18px; }

.player-progress-wrap { display:flex; align-items:center; gap:.7rem; width:min(100%, 430px); }
.player-time {
  font-size:.7rem; color:#8A96AC; width:34px; flex-shrink:0; font-variant-numeric:tabular-nums;
  font-family:'JetBrains Mono', monospace;
}
.player-time.end { text-align:right; }
.player-progress {
  position:relative; flex:1; height:8px; background:rgba(255,255,255,.08);
  border-radius:999px; cursor:pointer; overflow:hidden;
  border:1px solid rgba(120,160,220,.08);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.28);
}
.player-progress-fill {
  position:relative; height:100%;
  background:linear-gradient(90deg, #1E90FF, #56BBFF);
  border-radius:999px; width:0%; transition:width .25s linear; pointer-events:none;
  box-shadow:0 0 16px rgba(30,144,255,.38);
}
.player-progress-fill::after {
  content:"";
  position:absolute; top:50%; right:-8px; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background:#EAF4FF; box-shadow:0 0 0 4px rgba(30,144,255,.18);
}

.player-right {
  display:flex; align-items:center; justify-content:flex-end; gap:.8rem;
  min-width:0;
}
.player-vol-wrap {
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .72rem; border-radius:999px;
  background:rgba(255,255,255,.025); border:1px solid rgba(120,160,220,.1);
}
.player-vol-wrap svg { width:14px; height:14px; color:#8A96AC; flex-shrink:0; }
.player-volume {
  width:96px; height:20px; appearance:none; background:transparent;
  cursor:pointer; outline:none; padding:0; margin:0;
}
.player-volume::-webkit-slider-runnable-track {
  height:5px; background:rgba(255,255,255,.12); border-radius:999px;
}
.player-volume::-webkit-slider-thumb {
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:#53B8FF; cursor:pointer; margin-top:-5px;
  box-shadow:0 0 0 3px rgba(30,144,255,.18);
  transition:transform .1s;
}
.player-volume::-webkit-slider-thumb:hover { transform:scale(1.2); }
.player-volume::-moz-range-track { height:5px; background:rgba(255,255,255,.12); border-radius:999px; }
.player-volume::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%; background:#53B8FF;
  border:none; cursor:pointer; box-shadow:0 0 0 3px rgba(30,144,255,.18);
}

.player-action-btn {
  display:flex; align-items:center; gap:6px; padding:0 .8rem; height:36px;
  background:rgba(255,255,255,.025); border:1px solid rgba(120,160,220,.14); border-radius:999px;
  color:#A0AEC4; font-size:.74rem; font-weight:700; cursor:pointer; text-decoration:none;
  transition:all .15s; white-space:nowrap;
}
.player-action-btn:hover { color:#E6EDF7; border-color:rgba(30,144,255,.35); background:rgba(30,144,255,.08); }
.player-action-btn svg { width:12px; height:12px; flex-shrink:0; }

.spin { width:17px; height:17px; border:2px solid rgba(255,255,255,.1); border-top-color:#1E90FF; border-radius:50%; animation:player-spin .7s linear infinite; display:none; }
.spin.active { display:block; }
@keyframes player-spin { to{transform:rotate(360deg)} }

@media (max-width:768px) {
  #music-player-bar { padding:.75rem .7rem .85rem; }
  .player-inner { grid-template-columns:1fr auto; height:auto; padding:.9rem; gap:.9rem; border-radius:20px; }
  .player-right { display:none; }
  .player-thumb-wrap { width:52px; height:52px; }
  .player-controls { min-width:0; }
  .player-progress-wrap { width:200px; }
}
@media (max-width:480px) {
  .player-inner { grid-template-columns:1fr; }
  .player-track { width:100%; }
  .player-controls { width:100%; }
  .player-progress-wrap { width:100%; }
}
body {
  --music-player-offset: 0px;
  transition: padding-bottom .3s cubic-bezier(.4,0,.2,1);
}

body.music-player-visible {
  padding-bottom: var(--music-player-offset);
}