/* ============================================================
   Maammaa Music v1 styles — motherhood aesthetic
   blush/cream/rose/gold, arch frames echoing the homepage hero
   ============================================================ */

/* ---------- notice banner ---------- */
.mm-notice{display:flex;gap:12px;align-items:flex-start;background:#FFF6EC;border:1px dashed #EBC9AE;
  border-radius:16px;padding:14px 18px;margin:18px 0;font-size:.93rem;color:#7A5B4A}
.mm-notice .mm-nicon{font-size:1.4rem;flex:none}

/* ---------- player ---------- */
.mm-player{background:linear-gradient(160deg,#FFFDF9 0%,#FDEFD F 100%);background:linear-gradient(160deg,#FFFDF9,#FDF1E4);
  border:1px solid #F3E4D8;border-radius:26px;padding:26px;box-shadow:0 18px 50px rgba(184,92,120,.10);margin:22px 0}
.mm-now{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.mm-arch{position:relative;flex:none;width:210px}
.mm-arch-art{border-radius:110px 110px 22px 22px;overflow:hidden;border:6px solid #fff;
  box-shadow:0 14px 34px rgba(184,92,120,.18);aspect-ratio:3/3.6;background:#FDEBD9}
.mm-arch-art svg{width:100%;height:100%;display:block}
.mm-petals{position:absolute;inset:-6px;pointer-events:none}
.mm-petals span{position:absolute;width:14px;height:14px;background:#F6B98A;border-radius:60% 40% 60% 40%;
  opacity:.55;animation:mmfloat 7s ease-in-out infinite}
.mm-petals span:nth-child(1){top:6%;left:8%}.mm-petals span:nth-child(2){top:22%;right:4%;animation-delay:1.4s;background:#F5C86E}
.mm-petals span:nth-child(3){bottom:14%;left:2%;animation-delay:2.6s}.mm-petals span:nth-child(4){bottom:6%;right:10%;animation-delay:4s;background:#FBD9C4}
.mm-petals span:nth-child(5){top:48%;left:-4%;animation-delay:5.2s}
@keyframes mmfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(24deg)}}
@media (prefers-reduced-motion:reduce){.mm-petals span{animation:none}}
.mm-meta{flex:1;min-width:240px}
.mm-np{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#C9A184;margin-bottom:6px}
.mm-title{font-family:Georgia,'Cormorant Garamond',serif;font-size:1.9rem;color:#B85C78;margin:0 0 2px}
.mm-artist{color:#9A7B68;font-size:.95rem;margin-bottom:16px}
.mm-controls{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.mm-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid #EBC9AE;background:#fff;color:#B85C78;
  font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.mm-btn:hover{border-color:#EA9350;transform:translateY(-2px)}
.mm-btn.mm-play{width:66px;height:66px;font-size:1.5rem;background:linear-gradient(135deg,#EA9350,#E07B39);color:#fff;border:none;
  box-shadow:0 10px 26px rgba(234,147,80,.4)}
.mm-btn.mm-sharebtn{margin-left:6px}
.mm-progress{display:flex;gap:10px;align-items:center;color:#9A7B68;font-size:.82rem}
.mm-progress input[type=range]{flex:1;accent-color:#EA9350;cursor:pointer}

/* ---------- playlist ---------- */
.mm-list{margin-top:20px;border-top:1px solid #F3E4D8;padding-top:8px;display:flex;flex-direction:column;gap:8px}
.mm-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:16px;cursor:pointer;
  border:1px solid transparent;transition:.18s}
.mm-row:hover{background:#FFF6EC;border-color:#F3E4D8}
.mm-row.active{background:#FDEBD9;border-color:#EBC9AE}
.mm-row-art{width:52px;height:52px;flex:none;border-radius:14px;overflow:hidden;border:2px solid #fff;
  box-shadow:0 4px 12px rgba(184,92,120,.14)}
.mm-row-art svg{width:100%;height:100%;display:block}
.mm-row-art.sm{width:44px;height:44px}
.mm-row-meta{flex:1;min-width:0}
.mm-row-title{font-weight:600;color:#5A3B32;font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-row-by{color:#9A7B68;font-size:.82rem}
.mm-row-play,.mm-row-share{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid #EBC9AE;
  background:#fff;color:#B85C78;cursor:pointer;font-size:.95rem}
.mm-row-play:hover,.mm-row-share:hover{border-color:#EA9350}
.mm-empty{padding:26px;text-align:center;color:#9A7B68}

/* ---------- upload CTA ---------- */
.mm-cta{margin:20px 0;text-align:center}
.mm-cta .btn{margin:0 6px}

/* ---------- share modal ---------- */
.mm-share-ov{position:fixed;inset:0;z-index:9999;background:rgba(63,36,32,.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.mm-share-card{position:relative;background:#FFFBF5;border:1px solid #F3E4D8;border-radius:24px;
  box-shadow:0 24px 60px rgba(120,60,30,.3);padding:30px 26px 22px;width:min(380px,100%);text-align:center}
.mm-share-card .mm-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:26px;color:#C9A184;cursor:pointer}
.mm-share-art{width:120px;height:120px;margin:0 auto 12px;border-radius:110px 110px 20px 20px;overflow:hidden;
  border:4px solid #fff;box-shadow:0 10px 26px rgba(184,92,120,.2)}
.mm-share-art svg{width:100%;height:100%;display:block}
.mm-share-title{font-family:Georgia,serif;font-size:1.35rem;color:#B85C78}
.mm-share-by{color:#9A7B68;font-size:.88rem;margin-bottom:8px}
.mm-share-brand{display:inline-block;background:linear-gradient(135deg,#EA9350,#E07B39);color:#fff;font-size:.82rem;
  border-radius:20px;padding:5px 16px;margin-bottom:16px;letter-spacing:.04em}
.mm-share-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mm-sbtn{border:1.5px solid #EBC9AE;background:#fff;color:#5A3B32;border-radius:20px;padding:9px 16px;
  font-size:.88rem;cursor:pointer;text-decoration:none;font-family:inherit}
.mm-sbtn:hover{border-color:#EA9350}
.mm-sbtn.wa{background:#E7F6EC;border-color:#BFE3C9}.mm-sbtn.em{background:#FFF6EC}.mm-sbtn.sm{background:#F3E9FF;border-color:#D9C9F2}
.mm-sbtn.cp{background:#FDEBD9}.mm-sbtn.nt{background:#5A3B32;color:#fff;border-color:#5A3B32}
.mm-share-note{margin-top:12px;font-size:.76rem;color:#B79B87}

/* ---------- admin ---------- */
.mm-admin h3{font-family:Georgia,serif;color:#B85C78;margin:18px 0 6px}
.mm-admin h4{color:#5A3B32;margin:22px 0 8px;font-size:1rem}
.mm-note{font-size:.88rem;color:#7A5B4A;background:#FFF6EC;border:1px solid #F3E4D8;border-radius:12px;padding:10px 14px}
.mm-note code{background:#F7EFE6;border-radius:6px;padding:1px 7px;font-size:.82rem}
.mm-form{display:grid;gap:12px;max-width:560px;margin-top:12px}
.mm-form label{display:grid;gap:6px;font-size:.88rem;color:#7A5B4A;font-weight:600}
.mm-form input[type=text],.mm-form input[type=url],.mm-form input:not([type]){padding:11px 14px;border:1.5px solid #EBC9AE;
  border-radius:12px;font-size:.95rem;font-family:inherit;background:#fff;color:#3F3F3F}
.mm-form input[type=file]{font-size:.9rem}
.mm-form small{font-weight:400;color:#B79B87}
.mm-thlabel{font-size:.88rem;color:#7A5B4A;font-weight:600}
.mm-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mm-thumb{border:2px solid #F3E4D8;border-radius:14px;background:#fff;padding:6px;cursor:pointer;text-align:center;transition:.15s}
.mm-thumb svg{width:100%;height:auto;display:block;border-radius:8px}
.mm-thumb span{display:block;font-size:.72rem;color:#9A7B68;margin-top:4px}
.mm-thumb.sel{border-color:#EA9350;box-shadow:0 0 0 3px rgba(234,147,80,.25)}
.mm-msg{font-size:.9rem;min-height:1.4em}
.mm-msg.ok{color:#2E7D4F}.mm-msg.err{color:#B3261E}
.mm-arow{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #F3E4D8;border-radius:14px;margin-bottom:8px;background:#fff}
.mm-mini{border:1.5px solid #EBC9AE;background:#fff;border-radius:18px;padding:6px 12px;cursor:pointer;font-size:.82rem;color:#5A3B32}
.mm-mini.ok{background:#E7F6EC;border-color:#BFE3C9}.mm-mini.no{background:#FBE3E1;border-color:#F0C4C0}
.mm-tag{font-size:.72rem;background:#F3E4D8;color:#7A5B4A;border-radius:10px;padding:3px 10px}
.mm-none{color:#9A7B68;font-size:.9rem;padding:8px 0}

/* ---------- profile dropzone ---------- */
.mm-drop{border:2px dashed #EBC9AE;border-radius:20px;padding:30px 20px;text-align:center;background:#FFFDF9;transition:.2s}
.mm-drop.over{border-color:#EA9350;background:#FDEBD9;transform:scale(1.01)}
.mm-drop.locked{border-style:solid;color:#9A7B68}
.mm-drop-icon{font-size:2.2rem}
.mm-drop-t{font-weight:700;color:#5A3B32;margin:8px 0 4px}
.mm-drop-s{font-size:.85rem;color:#9A7B68;margin-bottom:12px}

@media (max-width:640px){
  .mm-now{gap:16px}.mm-arch{width:150px;margin:0 auto}
  .mm-title{font-size:1.5rem}.mm-player{padding:18px}
}