/* ============================================================
   DECAN MOVIE — Music Pro (additive layer)
   Dedicated music section + mini player + living background.
   ============================================================ */

#music-section { padding-bottom: 30px; }
#music-section[hidden] { display: none; }

.mpro-searchbar {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.mpro-searchbar .mpro-input {
  flex: 1; min-width: 180px; background: #1a1d24; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 12px 14px; color: #fff; outline: none; font-size: 0.88rem; min-height: 46px;
}
.mpro-searchbar .mpro-input:focus { border-color: var(--neon-cyan); }
.mpro-searchbar button {
  background: rgba(0,229,255,.12); border: 1px solid rgba(0,229,255,.35); color: #b9f7ff;
  border-radius: 12px; padding: 0 18px; font-weight: 800; cursor: pointer; min-height: 46px;
}
.mpro-searchbar button:hover { background: rgba(0,229,255,.22); }

.mpro-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.mpro-chip {
  flex: 0 0 auto; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045);
  color: #cfd1dc; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; min-height: 42px; white-space: nowrap;
}
.mpro-chip:hover, .mpro-chip.active { color: #fff; border-color: rgba(0,229,255,.55); background: rgba(0,229,255,.12); }

/* ---------- stage : living background + now playing ---------- */
.mpro-stage {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  margin: 6px 0 18px; min-height: 340px;
  --mpro-hue: 190; --mpro-hue2: 320;
  background:
    radial-gradient(900px 480px at 15% 0%, hsl(var(--mpro-hue) 80% 45% / 0.22), transparent 60%),
    radial-gradient(800px 500px at 95% 100%, hsl(var(--mpro-hue2) 85% 55% / 0.2), transparent 60%),
    #0c0f16;
  transition: background 0.8s ease;
}
.mpro-stage canvas.mpro-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.mpro-stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,.25) 0%, rgba(5,7,12,.72) 100%);
  pointer-events: none;
}
.mpro-now {
  position: relative; z-index: 2; display: grid; grid-template-columns: 240px 1fr 300px;
  gap: 22px; padding: 26px; align-items: center;
}
.mpro-artwrap { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.mpro-art-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from 0deg, hsl(var(--mpro-hue) 90% 60%), hsl(var(--mpro-hue2) 90% 60%), transparent 65%, hsl(var(--mpro-hue) 90% 60%));
  opacity: 0.55; filter: blur(6px);
}
.mpro-stage.is-playing .mpro-art-ring { animation: mproRingSpin 9s linear infinite; }
@keyframes mproRingSpin { to { transform: rotate(360deg); } }
.mpro-art {
  position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #151a24;
}
.mpro-stage.is-playing .mpro-art { animation: mproArtPulse 3.2s ease-in-out infinite; }
@keyframes mproArtPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.mpro-live-dot {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.7); border: 1px solid rgba(0,255,170,.4); color: #aaffd0;
  font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; border-radius: 999px; padding: 6px 10px;
}
.mpro-live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #00ffaa; box-shadow: 0 0 10px #00ffaa; }
.mpro-stage:not(.is-playing) .mpro-live-dot { display: none; }

.mpro-track-meta { min-width: 0; }
.mpro-kicker { color: var(--neon-cyan); font-size: 0.68rem; letter-spacing: 2px; font-weight: 900; }
.mpro-track-title { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; color: #fff; margin: 6px 0 4px;
  text-shadow: 0 3px 18px rgba(0,0,0,.7); }
.mpro-track-artist { color: #cfd5e2; font-size: 0.95rem; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.mpro-track-album { color: #9aa4b5; font-size: 0.78rem; margin-top: 3px; }
.mpro-progress { margin-top: 14px; }
.mpro-progress input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none; height: 22px; background: transparent; cursor: pointer;
}
.mpro-progress input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, #fff var(--fill, 0%), rgba(255,255,255,.22) var(--fill, 0%));
}
.mpro-progress input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; margin-top: -4.5px;
  box-shadow: 0 0 12px rgba(255,255,255,.7);
}
.mpro-progress input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.22); }
.mpro-progress input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: #fff; }
.mpro-progress input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: none; }
.mpro-times { display: flex; justify-content: space-between; font-size: 0.7rem; color: #cfd5e2; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.mpro-controls { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.mpro-btn {
  border: 1px solid transparent; background: rgba(255,255,255,.07); color: #fff;
  min-width: 46px; min-height: 46px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: 0.18s;
  backdrop-filter: blur(6px);
}
.mpro-btn:hover { background: rgba(255,255,255,.15); }
.mpro-btn.main { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: #000; font-size: 1.3rem; }
.mpro-btn.main:hover { background: var(--neon-cyan); }
.mpro-btn.active { color: var(--neon-cyan); border-color: rgba(0,229,255,.4); background: rgba(0,229,255,.12); }
.mpro-btn.tiny { min-width: 40px; min-height: 40px; font-size: 0.85rem; }

/* queue */
.mpro-queue {
  background: rgba(5, 8, 14, 0.62); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; backdrop-filter: blur(10px); overflow: hidden;
  display: flex; flex-direction: column; max-height: 340px; min-width: 0;
}
.mpro-queue-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 13px;
  border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 800; font-size: 0.82rem; color: #fff;
}
.mpro-queue-head button {
  margin-left: auto; background: none; border: none; color: #8b8f9e; cursor: pointer; font-size: 0.72rem; font-weight: 800;
}
.mpro-queue-head button:hover { color: #ff7d9c; }
.mpro-queue-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mpro-qitem {
  display: flex; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent;
}
.mpro-qitem:hover { background: rgba(255,255,255,.05); }
.mpro-qitem.current { border-color: rgba(0,229,255,.35); background: rgba(0,229,255,.08); }
.mpro-qitem img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 40px; background: #1a1f2b; }
.mpro-qitem .t { flex: 1; min-width: 0; }
.mpro-qitem .t b { display: block; font-size: 0.75rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpro-qitem .t span { font-size: 0.68rem; color: #8b8f9e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mpro-qitem .rm { background: none; border: none; color: #6d7484; cursor: pointer; font-size: 0.85rem; padding: 8px; border-radius: 8px; }
.mpro-qitem .rm:hover { color: #ff7d9c; background: rgba(255,0,127,.1); }
.mpro-queue-empty { padding: 22px; text-align: center; color: #8b8f9e; font-size: 0.78rem; line-height: 1.6; }

/* results */
.mpro-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 6px; }
.mpro-card {
  background: var(--card-bg, #1a1d24); border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: 0.2s;
}
.mpro-card:hover { transform: translateY(-3px); border-color: rgba(0,229,255,.4); }
.mpro-card .art { position: relative; aspect-ratio: 1; background: #11141c; }
.mpro-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpro-card .play-ov {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: 0.2s;
}
.mpro-card:hover .play-ov { opacity: 1; }
.mpro-card .play-ov i {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.94); color: #000;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.mpro-card .inf { padding: 10px 11px 12px; }
.mpro-card .inf b { display: block; font-size: 0.79rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpro-card .inf span { font-size: 0.7rem; color: #8b8f9e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 2px; }
.mpro-card .addrow { display: flex; gap: 6px; margin-top: 8px; }
.mpro-card .addrow button {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #dfe3ee;
  border-radius: 8px; padding: 8px 4px; font-size: 0.68rem; font-weight: 800; cursor: pointer; min-height: 36px;
}
.mpro-card .addrow button:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.mpro-skel-card { height: 230px; border-radius: 14px;
  background: linear-gradient(90deg, #1a1d24 25%, #242830 50%, #1a1d24 75%);
  background-size: 200% 100%; animation: mproShimmer 1.5s infinite; }
@keyframes mproShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mpro-state {
  grid-column: 1/-1; text-align: center; color: #8b8f9e; padding: 46px 18px;
  border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; font-size: 0.85rem; line-height: 1.6;
}
.mpro-state i { font-size: 1.8rem; color: var(--neon-cyan); display: block; margin-bottom: 10px; }

/* mini player */
#mpro-mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
  background: rgba(10, 13, 19, 0.94); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform 0.3s ease;
}
#mpro-mini.show { transform: translateY(0); }
#mpro-mini img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #1a1f2b; flex: 0 0 44px; }
#mpro-mini .mt { flex: 1; min-width: 0; cursor: pointer; }
#mpro-mini .mt b { display: block; font-size: 0.78rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mpro-mini .mt span { font-size: 0.68rem; color: #8b8f9e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#mpro-mini button {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #fff;
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer; flex: 0 0 42px; font-size: 0.9rem;
}
#mpro-mini button:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
#mpro-mini button.main { background: #fff; color: #000; border: none; }
#mpro-mini button.main:hover { background: var(--neon-cyan); }
#mpro-mini .mprog { position: absolute; top: -2px; left: 0; height: 3px; background: var(--neon-cyan);
  width: 0%; box-shadow: 0 0 10px rgba(0,229,255,.8); }
body.mpro-has-mini main { padding-bottom: 110px; }

@media (max-width: 1080px) {
  .mpro-now { grid-template-columns: 200px 1fr; }
  .mpro-queue { grid-column: 1 / -1; max-height: 260px; }
  .mpro-artwrap { width: 200px; height: 200px; }
}
@media (max-width: 640px) {
  .mpro-now { grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; }
  .mpro-artwrap { width: 190px; height: 190px; }
  .mpro-results { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mpro-stage, .mpro-card, .mpro-btn, #mpro-mini { transition: none; }
  .mpro-stage.is-playing .mpro-art-ring, .mpro-stage.is-playing .mpro-art { animation: none; }
  .mpro-skel-card { animation: none; }
}

/* ATOM V5 music typography/readability */
.music-pro, #music-section{font-family:'Inter',sans-serif;}
.music-pro h1,.music-pro h2,.music-pro h3{font-family:'Sora','Inter',sans-serif;color:#fff;letter-spacing:-.02em;}
.music-pro button,.music-pro input{font-family:'Inter',sans-serif;}