/* MMN Unified Video Engine v2.2.0 */
:root{
  --mmn-red:#ca2027;
  --mmn-white:#ffffff;
  --mmn-line:rgba(255,255,255,.10);
  --mmn-bg:rgba(0,0,0,.18);
  --mmn-bg2:rgba(0,0,0,.30);
}
*{ box-sizing:border-box; }
.mmn-player{ max-width:980px; margin:0 auto; color:#fff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; position:relative; }
.mmn-hero{ border-radius:28px; padding:26px 18px 18px; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); border:1px solid var(--mmn-line); text-align:center; }
.mmn-art{ width:min(420px,78vw); aspect-ratio:1/1; object-fit:cover; border-radius:26px; box-shadow:0 18px 40px rgba(0,0,0,.55); margin:0 auto 18px; display:block; }
.mmn-album{ font-weight:900; letter-spacing:.08em; font-size:clamp(30px,5vw,54px); margin-top:4px; }
.mmn-artist{ font-weight:800; letter-spacing:.06em; opacity:.9; font-size:clamp(16px,2.4vw,22px); margin-top:6px; }
.mmn-controls{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.mmn-btn{ width:88px; height:66px; border-radius:16px; border:2px solid #fff; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mmn-ico{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--mmn-red); }
.mmn-ico svg{ width:100%; height:100%; fill:currentColor; display:block; }
.mmn-pill{ height:66px; padding:0 18px; border-radius:16px; border:2px solid #fff; background:rgba(0,0,0,.35); color:var(--mmn-red); font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; font-size:14px; }
.mmn-pill.is-on{ color:#fff; border-color:#fff; }
.mmn-pill--share{ color:var(--mmn-red)!important; }
.mmn-pill--share:hover{ color:#fff!important; }
.mmn-video-wrap{ margin-top:14px; border-radius:24px; overflow:hidden; border:1px solid var(--mmn-line); background:rgba(0,0,0,.35); }
.vjs-big-play-button{ display:none!important; }
.mmn-progress{ margin-top:14px; padding:12px 14px 14px; border-radius:18px; border:1px solid var(--mmn-line); background:var(--mmn-bg2); }
.mmn-progress-top{ display:grid; grid-template-columns:64px 1fr 64px; align-items:center; gap:10px; margin-bottom:10px; }
.mmn-time{ font-weight:900; opacity:.9; font-size:15px; }
.mmn-seek{ width:100%; accent-color:var(--mmn-red); }
.mmn-tracklist{ margin-top:12px; display:grid; gap:12px; }
.mmn-row{ width:100%; border-radius:28px; padding:14px 18px; border:1px solid var(--mmn-line); background:var(--mmn-bg); display:flex; align-items:center; gap:14px; cursor:pointer; position:relative; overflow:hidden; margin:0; -webkit-tap-highlight-color:transparent; }
.mmn-num{ flex:0 0 46px; font-weight:900; font-size:16px; color:var(--mmn-red); letter-spacing:.02em; }
.mmn-title{ flex:1 1 auto; min-width:0; font-weight:800; font-size:18px; color:var(--mmn-red); text-align:left; line-height:1.2; }
.mmn-row:hover{ background:rgba(255,255,255,.06); }
.mmn-row.is-active::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid #fff; pointer-events:none; }
.mmn-row.is-active .mmn-num{ color:#fff; }
.mmn-row.is-active .mmn-title{ color:#ffffff !important; }
.mmn-mini{ position:fixed; left:12px; right:12px; bottom:12px; z-index:9999; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.72); backdrop-filter:blur(10px); box-shadow:0 18px 44px rgba(0,0,0,.55); }
.mmn-mini-art{ width:40px; height:40px; border-radius:12px; object-fit:cover; flex:0 0 auto; }
.mmn-mini-meta{ flex:1; min-width:0; }
.mmn-mini-title{ font-weight:900; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mmn-mini-artist{ opacity:.75; font-weight:800; margin-top:2px; font-size:11px; letter-spacing:.02em; }
.mmn-mini-controls{ display:flex; gap:8px; align-items:center; }
.mmn-mini-controls .mmn-btn{ width:36px!important; height:32px!important; border-radius:12px!important; }
.mmn-mini-controls .mmn-ico{ width:14px!important; height:14px!important; }
@media (min-width:860px){ .mmn-mini{ display:none; } }
.mmn-share-overlay{ position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.62) !important; backdrop-filter: blur(6px) !important; z-index: 10001 !important; display: none !important; padding: 18px !important; }
.mmn-share-overlay.is-open{ display: flex !important; align-items: center !important; justify-content: center !important; }
.mmn-share-card{ width: min(520px, 100%) !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.16) !important; background: rgba(0,0,0,.88) !important; box-shadow: 0 30px 80px rgba(0,0,0,.60) !important; padding: 16px !important; }
.mmn-share-head{ display:flex !important; align-items:center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 8px !important; }
.mmn-share-title{ font-weight: 900 !important; font-size: 16px !important; letter-spacing: .02em !important; }
.mmn-share-close{ width: 40px !important; height: 40px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 900 !important; cursor: pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; padding: 0 !important; }
.mmn-share-sub{ color: rgba(255,255,255,.75) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
.mmn-share-copy{ display:flex !important; gap: 10px !important; align-items:center !important; margin-bottom: 12px !important; }
.mmn-share-input{ flex: 1 !important; height: 44px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.16) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; padding: 0 12px !important; font-weight: 700 !important; font-size: 12px !important; outline: none !important; }
.mmn-share-copybtn{ height: 44px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(202, 32, 39, .20) !important; color: #fff !important; font-weight: 900 !important; cursor: pointer !important; white-space: nowrap !important; }
.mmn-share-grid{ display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.mmn-share-btn{ display:flex !important; align-items:center !important; justify-content:center !important; height: 44px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 900 !important; text-decoration: none !important; }
.mmn-share-foot{ margin-top: 12px !important; color: rgba(255,255,255,.55) !important; font-size: 12px !important; font-weight: 700 !important; }
@media (max-width: 520px){ .mmn-share-grid{ grid-template-columns: 1fr !important; } }

/* ============================================================
   MMN v2.3.1 CONTROL HARDENING
   Prevent theme/button CSS from overriding MMN player controls.
   ============================================================ */
.mmn-player button.mmn-btn,
.mmn-player .mmn-controls button.mmn-btn,
.mmn-player .mmn-mini button.mmn-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:2px solid #fff !important;
  background:rgba(0,0,0,.35) !important;
  box-shadow:none !important;
  color:var(--mmn-red) !important;
  opacity:1 !important;
  outline:0 !important;
}

.mmn-player button.mmn-btn:hover,
.mmn-player button.mmn-btn:focus,
.mmn-player button.mmn-btn:active{
  border-color:#fff !important;
  background:rgba(255,255,255,.06) !important;
  color:var(--mmn-red) !important;
}

.mmn-player .mmn-ico,
.mmn-player .mmn-mini .mmn-ico{
  color:var(--mmn-red) !important;
  opacity:1 !important;
  visibility:visible !important;
}

.mmn-player .mmn-ico svg,
.mmn-player .mmn-ico svg path,
.mmn-player .mmn-mini .mmn-ico svg,
.mmn-player .mmn-mini .mmn-ico svg path{
  display:block !important;
  fill:currentColor !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

.mmn-player .mmn-mini-controls button.mmn-btn{
  width:36px !important;
  min-width:36px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border:2px solid #fff !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.mmn-player .mmn-mini-controls .mmn-ico{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

@media (max-width:859px){
  .mmn-player .mmn-mini{
    border:1px solid rgba(255,255,255,.22) !important;
  }
  .mmn-player .mmn-mini-controls button.mmn-btn{
    border:2px solid #fff !important;
  }
}