/* ═══════════════════════════════════════════════════════════════════════════
   SPARK M!NDS — MUSIC HUB (the real Projects/MUSIC panel).
   NOW PLAYING across Spotify / YouTube / SoundCloud + real DISCOGRAPHY.
   Rebuilt faithfully from index.html #musicPanel. Opened by the PROJECTS card.
═══════════════════════════════════════════════════════════════════════════ */
:root{ --smh-gold:#f5c542; --smh-gold-warm:#ffe066; --smh-ink:#f4f1e8; --smh-muted:#9aa0aa;
  --smh-line:rgba(255,255,255,.12); --smh-glow:rgba(245,197,66,.3); }

#smMusicHub{ position:fixed; inset:0; z-index:1550; display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:radial-gradient(1100px 700px at 50% -8%, rgba(245,197,66,.08), transparent 60%), rgba(3,4,7,.86);
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s, visibility .35s;
  font-family:var(--font-body,'Space Grotesk','Inter',sans-serif); color:var(--smh-ink); cursor:auto; }
#smMusicHub.open{ opacity:1; visibility:visible; pointer-events:auto; }
#smMusicHub *{ cursor:auto; }
#smMusicHub a, #smMusicHub button{ cursor:pointer; }
.smh-backdrop{ position:absolute; inset:0; }
.smh-shell{ position:relative; z-index:1; width:min(1120px,100%); max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column; border:1px solid rgba(245,197,66,.22); border-radius:18px;
  background:linear-gradient(180deg, rgba(11,13,18,.98), rgba(6,8,12,.99));
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(16px) scale(.99); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
#smMusicHub.open .smh-shell{ transform:none; }

.smh-header{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--smh-line); }
.smh-title{ flex:1; font-family:var(--font-mark,'Orbitron',sans-serif); font-weight:900; font-size:20px; letter-spacing:.16em;
  background:linear-gradient(90deg,#39ff14,#f5c542,#ff5db1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.smh-hbtn{ font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--smh-muted); background:rgba(255,255,255,.03); border:1px solid var(--smh-line); border-radius:999px; padding:8px 14px; transition:.2s; }
.smh-hbtn:hover{ color:#fff; border-color:var(--smh-gold); background:rgba(245,197,66,.08); }
.smh-hbtn.on{ color:var(--smh-gold-warm); border-color:rgba(245,197,66,.55); }

.smh-body{ display:flex; gap:16px; padding:18px 20px; overflow-y:auto; }
.smh-card{ border:1px solid var(--smh-line); border-radius:14px; background:rgba(255,255,255,.02); padding:16px; }
.smh-left{ flex:1 1 60%; min-width:0; }
.smh-right{ flex:1 1 40%; min-width:0; }
.smh-ctitle{ font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.24em; color:var(--smh-gold); text-transform:uppercase; margin-bottom:12px; }

.smh-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.smh-tab{ position:relative; font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--smh-muted); background:rgba(255,255,255,.03); border:1px solid var(--smh-line); border-radius:8px; padding:8px 13px; transition:.2s; }
.smh-tab:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.smh-tab.active{ color:#1a1204; background:linear-gradient(135deg,var(--smh-gold-warm),var(--smh-gold)); border-color:transparent; }
.smh-tab-badge{ margin-left:6px; font-size:7px; padding:2px 4px; border-radius:4px; background:var(--smh-gold); color:#1a1204; vertical-align:top; }

.smh-embed{ position:relative; width:100%; border-radius:12px; overflow:hidden; background:#05070a; }
.smh-pane{ display:none; }
.smh-pane.active{ display:block; }
.smh-pane iframe{ width:100%; border:0; display:block; background:#05070a; }
.smh-pane[data-pane="spotify"] iframe{ height:420px; }
.smh-pane[data-pane="youtube"] iframe{ height:320px; aspect-ratio:16/9; }
.smh-pane[data-pane="soundcloud"] iframe{ height:420px; }
.smh-sc iframe{ width:100%; height:400px; border:0; border-radius:10px; display:block; }
.smh-sc-card{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 18px; text-align:center; color:var(--smh-muted); }
.smh-sc-card svg{ width:56px; height:auto; opacity:.7; }
.smh-linkbtn{ display:inline-block; font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:#1a1204; background:linear-gradient(135deg,var(--smh-gold-warm),var(--smh-gold)); border-radius:999px; padding:10px 20px; text-decoration:none; transition:.2s; }
.smh-linkbtn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.smh-apple-note{ padding:24px 18px; text-align:center; color:var(--smh-muted); font-size:13px; line-height:1.6; }

.smh-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.smh-links a{ font-family:var(--font-mark,'Orbitron',sans-serif); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--smh-ink);
  text-decoration:none; padding:8px 14px; border-radius:999px; border:1px solid var(--smh-line); background:rgba(255,255,255,.02); transition:.2s; }
.smh-links a:hover{ border-color:var(--smh-gold); color:#fff; background:rgba(245,197,66,.07); }

.smh-disco{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.smh-album{ display:block; text-decoration:none; border:1px solid var(--smh-line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02); transition:.25s; }
.smh-album:hover{ border-color:var(--smh-gold); transform:translateY(-2px); box-shadow:0 12px 28px -14px var(--smh-glow); }
.smh-album-art{ aspect-ratio:1; display:grid; place-items:center; position:relative; overflow:hidden;
  background:radial-gradient(circle at 40% 35%, rgba(245,197,66,.18), rgba(6,8,12,.7) 70%); }
.smh-album-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.smh-album-art b{ position:relative; z-index:0; }
.smh-album-art b{ font-family:var(--font-mark,'Orbitron',sans-serif); font-weight:900; font-size:15px; letter-spacing:.04em; color:var(--smh-gold-warm); text-align:center; padding:0 8px; text-shadow:0 0 14px var(--smh-glow); }
.smh-album-meta{ padding:9px 11px; }
.smh-album-title{ font-weight:700; font-size:12.5px; color:var(--smh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.smh-album-sub{ font-size:10px; letter-spacing:.08em; color:var(--smh-muted); text-transform:uppercase; margin-top:2px; }
.smh-footer{ text-align:center; padding:12px; font-family:var(--font-mark,'Orbitron',sans-serif); font-size:10px; letter-spacing:.3em; color:var(--smh-muted); border-top:1px solid var(--smh-line); }

@media (max-width:820px){ .smh-body{ flex-direction:column; } .smh-pane[data-pane="spotify"] iframe{ height:360px; } }
@media (prefers-reduced-motion:reduce){ .smh-shell{ transition:none; } }