/* ================================================================
   MEHGA MEDIA — player-styles.css  (Premium v5)
   Dark luxury · Gold accents · Glassmorphism refinado
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --g0          : #C8A84B;
  --g1          : #E2C06B;
  --g2          : #F0D48A;
  --g-glow      : rgba(200,168,75,.28);
  --g-dim       : rgba(200,168,75,.12);
  --bg-base     : #080808;
  --bg-surf     : rgba(13,13,13,.97);
  --bg-glass    : rgba(255,255,255,.04);
  --bg-glass-h  : rgba(255,255,255,.07);
  --border      : rgba(255,255,255,.07);
  --border-h    : rgba(255,255,255,.14);
  --t1          : #F4F0E8;
  --t2          : #7A7870;
  --t3          : #333330;
  --mini-h      : 72px;
  --ease        : cubic-bezier(.4,0,.2,1);
  --spring      : cubic-bezier(.32,1.2,.56,1);
  --font-title  : 'Syne', system-ui, sans-serif;
  --font-body   : 'DM Sans', system-ui, sans-serif;
  --r-sm        : 10px;
  --r-md        : 16px;
  --r-lg        : 22px;
}

/* ── RESET ─────────────────────────────────────────────────── */
.mhg-music-player *, .mhg-music-player *::before, .mhg-music-player *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.mhg-music-player { font-family: var(--font-body); }
.mhg-music-player button {
  cursor: pointer; font-family: inherit;
  border: none; background: none; outline: none;
}
.mhg-music-player img { display: block; }
.mhg-music-player svg {
  fill: currentColor; width: 100%; height: 100%; display: block;
}

/* ══════════════════════════════════════════════════════════════
   MINI PLAYER
══════════════════════════════════════════════════════════════ */
.mhg-mini-player {
  position       : fixed;
  bottom         : 0; left: 0; right: 0;
  height         : var(--mini-h);
  background     : var(--bg-surf);
  border-top     : 1px solid var(--border);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  display        : flex;
  align-items    : center;
  padding        : 0 16px;
  gap            : 12px;
  z-index        : 9990;
  overflow       : hidden;
  transition     : transform .38s var(--ease);
}
.mhg-mini-player.hidden { transform: translateY(100%); }

/* Linha de progresso no fundo */
.mhg-mini-progress-track {
  position  : absolute;
  bottom    : 0; left: 0;
  height    : 2px;
  background: linear-gradient(90deg, var(--g0), var(--g2));
  width     : 0%;
  transition: width .4s linear;
  z-index   : 2;
}

/* Capa mini */
.mhg-mini-cover-wrap {
  position  : relative;
  width     : 48px; height: 48px;
  flex-shrink: 0;
  cursor    : pointer;
}
.mhg-mini-cover {
  width        : 48px; height: 48px;
  border-radius: var(--r-sm);
  object-fit   : cover;
  border       : 1px solid var(--border);
  transition   : border-color .3s;
}
.mhg-mini-player.mhg-playing .mhg-mini-cover { border-color: var(--g0); }

/* EQ animado sobre a capa */
.mhg-mini-eq {
  position       : absolute;
  inset          : 0;
  border-radius  : var(--r-sm);
  background     : rgba(8,8,8,.62);
  display        : flex;
  align-items    : flex-end;
  justify-content: center;
  gap            : 2px;
  padding-bottom : 8px;
  opacity        : 0;
  transition     : opacity .3s;
}
.mhg-mini-player.mhg-playing .mhg-mini-eq { opacity: 1; }
.mhg-mini-eq span {
  display   : block;
  width     : 3px;
  background: var(--g0);
  border-radius: 1px;
  animation : mhg-eq .7s ease-in-out infinite alternate;
}
.mhg-mini-eq span:nth-child(1) { height: 6px;  animation-delay: 0s;    }
.mhg-mini-eq span:nth-child(2) { height: 14px; animation-delay: .12s;  }
.mhg-mini-eq span:nth-child(3) { height: 10px; animation-delay: .25s;  }
.mhg-mini-eq span:nth-child(4) { height: 5px;  animation-delay: .37s;  }
@keyframes mhg-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Info mini */
.mhg-mini-info { flex: 1; min-width: 0; cursor: pointer; }
.mhg-mini-title {
  font-family: var(--font-title);
  font-size  : 13px; font-weight: 600;
  color      : var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mhg-mini-artist {
  font-size  : 11px; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top : 2px;
}

/* Controles mini */
.mhg-mini-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.mhg-mini-btn {
  width        : 36px; height: 36px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  color        : var(--t2);
  padding      : 8px;
  transition   : all .2s;
}
.mhg-mini-btn:hover { color: var(--t1); background: var(--bg-glass-h); }

.mhg-mini-play-btn {
  width     : 44px; height: 44px;
  background: linear-gradient(135deg, var(--g0), var(--g1)) !important;
  color     : #080808 !important;
  box-shadow: 0 4px 18px var(--g-glow);
  padding   : 10px;
}
.mhg-mini-play-btn:hover {
  background: linear-gradient(135deg, var(--g1), var(--g2)) !important;
  transform : scale(1.06);
  box-shadow: 0 6px 24px var(--g-glow);
}

/* ══════════════════════════════════════════════════════════════
   FULL PLAYER
══════════════════════════════════════════════════════════════ */
.mhg-full-player {
  position      : fixed;
  inset         : 0;
  display       : flex;
  flex-direction: column;
  z-index       : 9995;
  overflow      : hidden;
  border-radius : var(--r-lg) var(--r-lg) 0 0;
  transform     : translateY(100%);
  transition    : transform .44s var(--spring);
  will-change   : transform;
}
.mhg-full-player.active { transform: translateY(0); }

/* Backdrop blur dinâmico */
.mhg-fp-backdrop {
  position           : absolute; inset: 0;
  background-size    : cover;
  background-position: center;
  filter             : blur(80px) brightness(.22) saturate(1.8);
  transform          : scale(1.15);
  z-index            : 0;
  transition         : background-image .7s ease;
}
.mhg-fp-overlay {
  position  : absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8,8,8,.4)   0%,
    rgba(8,8,8,.75)  50%,
    rgba(8,8,8,.97) 100%
  );
  z-index: 1;
}
.mhg-full-player > *:not(.mhg-fp-backdrop):not(.mhg-fp-overlay) {
  position: relative; z-index: 2;
}

/* Drag handle */
.mhg-drag-handle {
  display        : flex;
  justify-content: center;
  padding        : 14px 0 4px;
  cursor         : grab;
  touch-action   : none;
}
.mhg-drag-handle:active { cursor: grabbing; }
.mhg-drag-pill {
  width        : 36px; height: 4px;
  border-radius: 2px;
  background   : rgba(255,255,255,.15);
  transition   : all .2s;
}
.mhg-drag-handle:hover .mhg-drag-pill { background: var(--g0); width: 52px; }

/* Header */
.mhg-player-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 2px 16px 10px;
}
.mhg-player-label {
  font-size     : 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color         : var(--t2);
  font-weight   : 500;
}
.mhg-header-btn {
  width        : 40px; height: 40px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  color        : var(--t1);
  padding      : 10px;
  transition   : background .2s;
}
.mhg-header-btn:hover { background: var(--bg-glass-h); }

/* Content scroll */
.mhg-player-content {
  flex          : 1;
  overflow-y    : auto;
  overflow-x    : hidden;
  padding       : 6px 22px 28px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0;
  scrollbar-width: none;
}
.mhg-player-content::-webkit-scrollbar { display: none; }

/* ── Capa ─────────────────────────────────────────────── */
.mhg-cover-stage {
  position     : relative;
  width        : min(268px, 70vw);
  margin       : 0 auto 24px;
}
.mhg-cover-glow {
  position      : absolute;
  inset         : -24px;
  border-radius : 50%;
  background    : radial-gradient(ellipse, var(--g-glow) 0%, transparent 68%);
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .5s;
  filter        : blur(8px);
}
.mhg-full-player.mhg-playing .mhg-cover-glow {
  opacity  : 1;
  animation: mhg-glow-breathe 3.5s ease-in-out infinite;
}
@keyframes mhg-glow-breathe { 0%,100%{opacity:.5} 50%{opacity:1} }

.mhg-cover-frame {
  width        : 100%;
  aspect-ratio : 1;
  border-radius: var(--r-md);
  overflow     : hidden;
  box-shadow   : 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  transition   : transform .38s var(--ease), box-shadow .38s;
}
.mhg-full-player.mhg-playing .mhg-cover-frame {
  transform : scale(1.03);
  box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 1px var(--g-dim);
}
.mhg-cover-art { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Track info ───────────────────────────────────────── */
.mhg-track-info {
  width        : 100%;
  margin-bottom: 20px;
  text-align   : center;
}
.mhg-track-title {
  font-family  : var(--font-title);
  font-size    : 22px;
  font-weight  : 700;
  color        : var(--t1);
  line-height  : 1.2;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.mhg-track-artist {
  font-size    : 14px;
  color        : var(--t2);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}
.mhg-track-feat {
  font-size  : 12px;
  color      : var(--g0);
  margin-top : 3px;
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}

/* ── Progress ─────────────────────────────────────────── */
.mhg-progress-area {
  width        : 100%;
  margin-bottom: 16px;
}
.mhg-progress-bar {
  width        : 100%;
  height       : 4px;
  background   : rgba(255,255,255,.08);
  border-radius: 2px;
  cursor       : pointer;
  position     : relative;
  margin-bottom: 8px;
  transition   : height .18s;
}
.mhg-progress-bar:hover { height: 6px; }
.mhg-progress-fill {
  height       : 100%;
  background   : linear-gradient(90deg, var(--g0), var(--g2));
  border-radius: 2px;
  width        : 0%;
  position     : relative;
  transition   : width .15s linear;
}
.mhg-progress-thumb {
  width        : 14px; height: 14px;
  background   : var(--t1);
  border-radius: 50%;
  position     : absolute;
  right        : -7px; top: 50%;
  transform    : translateY(-50%);
  opacity      : 0;
  box-shadow   : 0 0 0 3px var(--g-glow);
  transition   : opacity .2s;
}
.mhg-progress-bar:hover .mhg-progress-thumb { opacity: 1; }
.mhg-progress-times {
  display        : flex;
  justify-content: space-between;
  font-size      : 11px;
  color          : var(--t3);
  letter-spacing : .3px;
}

/* ── Controlos principais ─────────────────────────────── */
.mhg-controls {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  width          : 100%;
  padding        : 0 2px;
  margin-bottom  : 24px;
}

.mhg-ctrl-side {
  width        : 44px; height: 44px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  color        : var(--t2);
  padding      : 11px;
  transition   : all .2s;
}
.mhg-ctrl-side:hover { color: var(--t1); background: var(--bg-glass); }
.mhg-ctrl-side.active { color: var(--g0); }

.mhg-ctrl-prev,
.mhg-ctrl-next {
  width        : 52px; height: 52px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  color        : var(--t1);
  padding      : 12px;
  background   : var(--bg-glass);
  transition   : all .2s;
}
.mhg-ctrl-prev:hover,
.mhg-ctrl-next:hover {
  background: var(--bg-glass-h);
  transform : scale(1.06);
}
.mhg-ctrl-prev:active,
.mhg-ctrl-next:active { transform: scale(.93); }

.mhg-ctrl-play {
  width        : 70px; height: 70px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  background   : linear-gradient(135deg, var(--g0), var(--g1));
  color        : #080808;
  padding      : 16px;
  position     : relative;
  box-shadow   : 0 8px 30px var(--g-glow);
  transition   : all .22s;
}
.mhg-ctrl-play:hover {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  transform : scale(1.06);
  box-shadow: 0 12px 40px var(--g-glow);
}
.mhg-ctrl-play:active { transform: scale(.95); }

.mhg-play-ring {
  position     : absolute;
  inset        : -7px;
  border-radius: 50%;
  border       : 2px solid var(--g0);
  opacity      : 0;
  pointer-events: none;
}
.mhg-full-player.mhg-playing .mhg-play-ring {
  animation: mhg-ring-pulse 2.2s ease-out infinite;
}
@keyframes mhg-ring-pulse {
  0%   { opacity: .65; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.28); }
}

/* ── Acções secundárias ───────────────────────────────── */
.mhg-actions {
  display        : flex;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
}
.mhg-action-btn {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 5px;
  color         : var(--t2);
  padding       : 10px 16px;
  border-radius : var(--r-sm);
  border        : 1px solid var(--border);
  background    : var(--bg-glass);
  font-size     : 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight   : 500;
  transition    : all .2s;
  min-width     : 70px;
}
.mhg-action-btn svg { width: 20px; height: 20px; margin: 0 auto; }
.mhg-action-btn:hover {
  color     : var(--t1);
  background: var(--bg-glass-h);
  border-color: var(--border-h);
}

/* ══════════════════════════════════════════════════════════════
   MODAIS
══════════════════════════════════════════════════════════════ */
.mhg-modal {
  position      : fixed;
  inset         : 0;
  background    : rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  z-index       : 10001;
  display       : flex;
  align-items   : flex-end;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .25s ease;
}
.mhg-modal.active {
  opacity       : 1;
  pointer-events: all;
}

.mhg-modal-sheet {
  background   : #0e0e0e;
  border       : 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width        : 100%;
  max-height   : 86vh;
  overflow-y   : auto;
  transform    : translateY(48px);
  transition   : transform .32s var(--spring);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.mhg-modal.active .mhg-modal-sheet { transform: translateY(0); }

.mhg-modal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 20px 20px 16px;
  border-bottom  : 1px solid var(--border);
  position       : sticky; top: 0;
  background     : #0e0e0e;
  z-index        : 1;
}
.mhg-modal-title {
  font-family: var(--font-title);
  font-size  : 15px;
  font-weight: 600;
  color      : var(--t1);
}
.mhg-modal-close {
  width        : 32px; height: 32px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  color        : var(--t2);
  padding      : 7px;
  transition   : all .2s;
}
.mhg-modal-close:hover { background: var(--bg-glass-h); color: var(--t1); transform: rotate(90deg); }

/* ── Playlist ─────────────────────────────────────────── */
.mhg-playlist-body { padding: 8px 0 16px; }

.mhg-playlist-item {
  display    : flex;
  align-items: center;
  gap        : 12px;
  padding    : 10px 18px;
  cursor     : pointer;
  transition : background .15s;
}
.mhg-playlist-item:hover { background: var(--bg-glass); }
.mhg-playlist-item.active { background: var(--g-dim); }
.mhg-playlist-item.active .mhg-pl-title { color: var(--g0); }

.mhg-pl-cover {
  width        : 48px; height: 48px;
  border-radius: 8px;
  object-fit   : cover;
  flex-shrink  : 0;
  background   : #1a1a1a;
  border       : 1px solid var(--border);
}
.mhg-pl-info { flex: 1; min-width: 0; }
.mhg-pl-title {
  font-size    : 13px; font-weight: 500; color: var(--t1);
  white-space  : nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mhg-pl-artist { font-size: 11px; color: var(--t2); margin-top: 2px; }

.mhg-pl-eq-badge { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex-shrink: 0; }
.mhg-pl-eq-badge span { display: block; width: 3px; background: var(--g0); border-radius: 1px; animation: mhg-eq .7s ease-in-out infinite alternate; }
.mhg-pl-eq-badge span:nth-child(1) { height: 7px;  animation-delay: 0s; }
.mhg-pl-eq-badge span:nth-child(2) { height: 13px; animation-delay: .14s; }
.mhg-pl-eq-badge span:nth-child(3) { height: 5px;  animation-delay: .28s; }

.mhg-pl-num { font-size: 11px; color: var(--t3); flex-shrink: 0; min-width: 18px; text-align: right; }
.mhg-pl-empty { text-align: center; padding: 32px 20px; color: var(--t2); font-size: 13px; }

/* ── Info modal ───────────────────────────────────────── */
.mhg-info-body { padding: 16px 20px 24px; }
.mhg-info-hero {
  display    : flex;
  align-items: center;
  gap        : 14px;
  padding-bottom: 16px;
  border-bottom : 1px solid rgba(255,255,255,.04);
  margin-bottom : 4px;
}
.mhg-info-hero img {
  width        : 60px; height: 60px;
  border-radius: 10px;
  object-fit   : cover;
  flex-shrink  : 0;
  border       : 1px solid var(--border);
}
.mhg-info-main-title  { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--t1); }
.mhg-info-main-artist { font-size: 12px; color: var(--t2); margin-top: 3px; }

.mhg-info-rows { margin: 0; }
.mhg-info-row {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  gap            : 12px;
  padding        : 10px 0;
  border-bottom  : 1px solid rgba(255,255,255,.04);
  font-size      : 13px;
}
.mhg-info-row > span:first-child { color: var(--t2); flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.mhg-info-row > span:last-child  { color: var(--t1); text-align: right; word-break: break-word; }

.mhg-info-share-row {
  display  : flex;
  gap      : 8px;
  margin   : 16px 0 0;
}
.mhg-info-share-row input {
  flex        : 1;
  background  : var(--bg-glass);
  border      : 1px solid var(--border);
  border-radius: var(--r-sm);
  padding     : 9px 12px;
  font-size   : 12px;
  color       : var(--t2);
  font-family : var(--font-body);
  outline     : none;
  min-width   : 0;
}
.mhg-info-share-row button,
.mhg-share-link-row button {
  padding      : 9px 16px;
  background   : var(--g-dim);
  border       : 1px solid var(--g0);
  border-radius: var(--r-sm);
  color        : var(--g0);
  font-size    : 12px; font-weight: 600;
  font-family  : var(--font-body);
  cursor       : pointer;
  transition   : all .2s;
  white-space  : nowrap;
}
.mhg-info-share-row button:hover,
.mhg-share-link-row button:hover { background: var(--g0); color: #080808; }

.mhg-dl-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  width          : 100%;
  margin-top     : 16px;
  padding        : 14px;
  background     : linear-gradient(135deg, var(--g0), var(--g1));
  color          : #080808;
  border-radius  : var(--r-md);
  font-size      : 14px; font-weight: 700;
  font-family    : var(--font-title);
  cursor         : pointer;
  border         : none;
  box-shadow     : 0 6px 22px var(--g-glow);
  transition     : all .2s;
}
.mhg-dl-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mhg-dl-btn:hover { background: linear-gradient(135deg, var(--g1), var(--g2)); transform: translateY(-1px); }

/* ── Modal Partilha ───────────────────────────────────── */
.mhg-share-sheet { max-height: 80vh; }
.mhg-share-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 10px;
  padding              : 20px;
}
.mhg-share-item {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 7px;
  padding       : 14px 10px;
  border-radius : var(--r-md);
  border        : 1px solid var(--border);
  background    : var(--bg-glass);
  cursor        : pointer;
  transition    : all .2s;
  text-decoration: none;
  color         : var(--t1);
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: .3px;
}
.mhg-share-item:hover { background: var(--bg-glass-h); border-color: var(--border-h); transform: translateY(-2px); }
.mhg-share-item svg { width: 26px; height: 26px; }
.mhg-share-item.sh-wa  { color: #25D366; }
.mhg-share-item.sh-fb  { color: #1877F2; }
.mhg-share-item.sh-tw  { color: var(--t1); }
.mhg-share-item.sh-tg  { color: #26A5E4; }
.mhg-share-item.sh-em  { color: var(--t2); }
.mhg-share-item.sh-cp  { color: var(--g0); }

.mhg-share-link-row {
  display : flex;
  gap     : 8px;
  padding : 0 20px 24px;
}
.mhg-share-link-row input {
  flex        : 1;
  background  : var(--bg-glass);
  border      : 1px solid var(--border);
  border-radius: var(--r-sm);
  padding     : 9px 12px;
  font-size   : 12px;
  color       : var(--t2);
  font-family : var(--font-body);
  outline     : none;
  min-width   : 0;
}

/* ── Toast ────────────────────────────────────────────── */
.mhg-toast-container {
  position      : fixed;
  bottom        : calc(var(--mini-h) + 16px);
  left          : 50%;
  transform     : translateX(-50%);
  z-index       : 10010;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 6px;
  pointer-events: none;
}
.mhg-toast {
  background     : rgba(20,20,20,.96);
  border         : 1px solid var(--border);
  color          : var(--t1);
  font-family    : var(--font-body);
  font-size      : 13px;
  padding        : 10px 20px;
  border-radius  : 30px;
  white-space    : nowrap;
  opacity        : 0;
  transform      : translateY(10px);
  transition     : all .22s ease;
  backdrop-filter: blur(16px);
}
.mhg-toast.show    { opacity: 1; transform: translateY(0); }
.mhg-toast.error   { border-color: rgba(230,60,60,.4); background: rgba(36,8,8,.97); }
.mhg-toast.success { border-color: rgba(60,180,60,.3); }

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥ 600px
══════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .mhg-full-player {
    max-width    : 430px;
    left         : 50%; right: auto;
    transform    : translateX(-50%) translateY(100%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .mhg-full-player.active { transform: translateX(-50%) translateY(0); }

  .mhg-modal { justify-content: center; align-items: flex-end; }
  .mhg-modal-sheet { max-width: 430px; }

  .mhg-mini-player {
    max-width    : 580px;
    left         : 50%; right: auto;
    transform    : translateX(-50%);
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .mhg-mini-player.hidden { transform: translateX(-50%) translateY(100%); }
}

/* ══════════════════════════════════════════════════════════════
   TELAS BAIXAS
══════════════════════════════════════════════════════════════ */
@media (max-height: 680px) {
  .mhg-cover-stage { width: min(180px, 50vw); margin-bottom: 14px; }
  .mhg-track-title { font-size: 18px; }
  .mhg-actions     { display: none; }
}

/* ── Variável da altura do footer mobile ────────────────────── */
:root {
  --footer-h : 64px;   /* altura do .mhg-footer  */
  --mini-h   : 72px;   /* sobrescreve o valor base — deve bater com o original */
}
 
/* ── FOOTER MOBILE ──────────────────────────────────────────── */
.mhg-footer {
  position      : fixed;
  bottom        : 0;
  left          : 0;
  right         : 0;
  height        : var(--footer-h); /* abaixo do mini player (9990) */
}
 
/* ── MINI PLAYER — fica logo acima do footer ────────────────── */
.mhg-mini-player {
  bottom : var(--footer-h);   /* empurra para cima do footer */
  z-index: 9990;              /* acima do footer */
}
 
/* Desktop ≥ 600px — footer some ou fica fixo sem interferir */
@media (min-width: 600px) {
  .mhg-mini-player {
    bottom        : var(--footer-h);
    border-radius : var(--r-md) var(--r-md) 0 0;
  }
  /* Se o footer não aparecer em desktop, podes mudar para bottom:0 */
}
 
/* ── PADDING DO CONTEÚDO DA PÁGINA ─────────────────────────── */
/*
   Quando o mini player está visível, o body precisa de espaço extra
   para o conteúdo não ficar escondido atrás do mini player + footer.
   O player.js já controla display:none/block no container,
   mas usamos uma classe CSS para ser mais limpo.
*/
body.mhg-player-visible {
  padding-bottom: calc(var(--mini-h) + var(--footer-h)) !important;
}
 
/* Fallback: aplica sempre para páginas que incluem o player */
body {
  padding-bottom: calc(var(--mini-h) + var(--footer-h));
}
 
/* ── TOAST — ajusta posição base ────────────────────────────── */
.mhg-toast-container {
  bottom: calc(var(--mini-h) + var(--footer-h) + 12px);
}
 
/* ── Badge "1" no botão repeat-one ─────────────────────────── */
.mhg-ctrl-side {
  position: relative;
}
.mhg-repeat-one-badge {
  position       : absolute;
  bottom         : 4px;
  right          : 4px;
  width          : 13px;
  height         : 13px;
  background     : var(--g0);
  color          : #080808;
  border-radius  : 50%;
  font-size      : 8px;
  font-weight    : 700;
  display        : flex;
  align-items    : center;
  justify-content: center;
  pointer-events : none;
  line-height    : 1;
}
/* ══════════════════════════════════════════════════════════════
   PERSISTÊNCIA CROSS-PAGE — Indicadores de restauração
══════════════════════════════════════════════════════════════ */

/* Pill de "A retomar..." que aparece no mini player ao restaurar */
.mhg-mini-player::after {
  content        : 'A retomar...';
  position       : absolute;
  top            : 50%;
  right          : 16px;
  transform      : translateY(-50%);
  font-size      : 10px;
  letter-spacing : 1px;
  text-transform : uppercase;
  color          : var(--g0);
  background     : var(--g-dim);
  border         : 1px solid rgba(200,168,75,.2);
  border-radius  : 20px;
  padding        : 3px 10px;
  pointer-events : none;
  opacity        : 0;
  transition     : opacity .3s;
}
.mhg-mini-player.mhg-restoring::after { opacity: 1; }

/* Animação suave de entrada do mini player ao restaurar */
@keyframes mhg-slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mhg-mini-player.mhg-restored-entry {
  animation: mhg-slide-in-bottom .42s cubic-bezier(.32,1.2,.56,1) both;
}

/* Desktop: ajuste do slide-in para a versão centralizada */
@media (min-width: 600px) {
  @keyframes mhg-slide-in-bottom-desktop {
    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
  }
  .mhg-mini-player.mhg-restored-entry {
    animation: mhg-slide-in-bottom-desktop .42s cubic-bezier(.32,1.2,.56,1) both;
  }
}