/* BestMom Audio v9 — Mobile-App Style UI */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ── Root ── */
#bma-app {
  --p:       #4F6EF7;
  --p-d:     #3451D1;
  --p-l:     #EEF1FF;
  --rose:    #F25C8B;
  --gold:    #F5A623;
  --bg:      #F7F8FC;
  --card:    #FFFFFF;
  --text:    #1A1D2E;
  --sub:     #7B82A3;
  --border:  rgba(0,0,0,0.06);
  --r:       20px;
  --font:    'Nunito', system-ui, sans-serif;
  --serif:   'Playfair Display', Georgia, serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 80px rgba(79,110,247,.15);
}
#bma-app * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Screens ── */
.bma-screen {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 90px;
  scrollbar-width: none;
}
.bma-screen::-webkit-scrollbar { display: none; }
.bma-screen--active { display: flex; }

/* ════════════════════════════════
   HOME SCREEN
════════════════════════════════ */

/* Top bar */
.bma-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.bma-topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--sub);
}
.bma-topbar-search input {
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: none;
  width: 100%;
}
.bma-topbar-search input::placeholder { color: var(--sub); }

.bma-topbar-fav-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--p);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .18s;
}
.bma-topbar-fav-btn:hover { transform: scale(1.08); }
.bma-fav-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--rose);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 100px;
  min-width: 16px;
  text-align: center;
  display: none;
  border: 2px solid var(--bg);
}
.bma-fav-badge.show { display: block; }

/* Featured banner */
.bma-featured-banner {
  position: relative;
  margin: 0 20px 20px;
  border-radius: var(--r);
  overflow: hidden;
  height: 200px;
  cursor: pointer;
  flex-shrink: 0;
}
.bma-featured-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,#4F6EF7,#A78BFA);
  background-size: cover; background-position: center;
  transition: transform .4s ease;
}
.bma-featured-banner:hover .bma-featured-bg { transform: scale(1.04); }
.bma-featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,35,.82) 0%, rgba(15,15,35,.1) 60%, transparent 100%);
}
.bma-featured-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px;
}
.bma-featured-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px;
}
.bma-featured-title {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: #fff; line-height: 1.2;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.bma-featured-sub { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.bma-featured-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.95);
  color: var(--p-d);
  border: none; border-radius: 100px;
  padding: 9px 20px; font-family: var(--font); font-size: 13px; font-weight: 800;
  cursor: pointer; transition: all .18s;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.bma-featured-play-btn:hover { transform: scale(1.04); }

/* Category pills */
.bma-section { padding: 0 20px; margin-bottom: 6px; }
.bma-filter-strip {
  display: flex !important; gap: 12px !important;
  overflow-x: auto !important; scrollbar-width: none !important;
  padding: 4px 2px 14px !important; margin-bottom: 16px !important;
}
.bma-filter-strip::-webkit-scrollbar { display: none; }

.bma-pill {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 11px 22px !important; border-radius: 100px !important;
  border: 2px solid #E5E7EB !important;
  background: #ffffff !important;
  color: #7B82A3 !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important;
  transition: all .2s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  margin: 0 !important; line-height: 1 !important;
}
.bma-pill:hover { border-color: var(--p); color: var(--p); transform: translateY(-2px); }
.bma-pill--active { background: var(--p); border-color: var(--p); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(59,130,246,.3); }

/* Section header */
.bma-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.bma-section-title { font-size: 18px; font-weight: 800; color: var(--text); }
.bma-section-count { font-size: 12px; color: var(--sub); }

/* Horizontal cards scroll */
.bma-cards-scroll {
  display: flex; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-bottom: 20px;
}
.bma-cards-scroll::-webkit-scrollbar { display: none; }
.bma-card {
  flex-shrink: 0;
  width: 150px;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.bma-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.bma-card-img {
  width: 100%; height: 100px;
  background: linear-gradient(135deg, var(--p), #A78BFA);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background-size: cover; background-position: center;
  overflow: hidden; position: relative;
}
.bma-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bma-card-body { padding: 10px 12px 12px; }
.bma-card-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bma-card-sub   { font-size: 11px; color: var(--sub); }

/* Track list rows */
.bma-tracklist { display: flex; flex-direction: column; gap: 6px; }
.bma-trackrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px;
  cursor: pointer; transition: background .15s;
}
.bma-trackrow:hover { background: var(--card); }
.bma-trackrow.is-active { background: var(--p-l); }
.bma-trackrow.is-hidden { display: none; }

.bma-trackrow-num {
  width: 22px; text-align: center; flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--sub);
}
.bma-trackrow.is-active .bma-trackrow-num { color: var(--p); }

.bma-trackrow-thumb {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--p-l); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.bma-trackrow-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bma-trackrow-info { flex: 1; min-width: 0; }
.bma-trackrow-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bma-trackrow.is-active .bma-trackrow-title { color: var(--p); }
.bma-trackrow-sub   { font-size: 11px; color: var(--sub); margin-top: 2px; }

.bma-trackrow-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bma-trackrow-dur   { font-size: 12px; color: var(--sub); font-weight: 600; }

.bma-trackrow-heart {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border); background: none; color: var(--sub);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .16s; flex-shrink: 0;
}
.bma-trackrow-heart:hover, .bma-trackrow-heart.is-fav { border-color: var(--rose); color: var(--rose); background: #FFF0F4; }

/* ── Bottom Nav ── */
.bma-bottomnav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 10px 0 14px;
  z-index: 50;
}
.bma-bottomnav-btn {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 6px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: #7B82A3 !important; transition: color .15s !important;
  padding: 6px 10px !important; margin: 0 !important;
  min-width: 0 !important;
}
.bma-bottomnav-btn.is-active { color: var(--p); }
.bma-bottomnav-btn svg { transition: transform .2s; }
.bma-bottomnav-btn.is-active svg { transform: scale(1.15); }

/* ════════════════════════════════
   PLAYER SCREEN
════════════════════════════════ */
#bma-player-screen {
  background: #fff;
  padding-bottom: 0;
}

.bma-player-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.bma-back-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); transition: all .18s;
}
.bma-back-btn:hover { background: var(--p-l); color: var(--p); }

.bma-player-topbar-center { text-align: center; }
.bma-player-nowplaying { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); margin-bottom: 2px; }
.bma-player-playlist   { font-size: 13px; font-weight: 700; color: var(--text); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bma-player-heart-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: #FFF0F4; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #ddd; transition: all .18s;
}
.bma-player-heart-btn.is-fav { color: var(--rose); }

/* Artwork */
.bma-artwork-wrap {
  position: relative;
  width: 260px; height: 260px;
  margin: 36px auto 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bma-artwork-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(79,110,247,.12);
}
.bma-artwork-ring--outer { width: 260px; height: 260px; }
.bma-artwork-ring--inner { width: 220px; height: 220px; }

.bma-artwork {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p), #A78BFA);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  box-shadow: 0 20px 60px rgba(79,110,247,.35);
  transition: box-shadow .3s;
  flex-shrink: 0;
}
.bma-artwork.is-playing {
  animation: bmaSpin 18s linear infinite;
  box-shadow: 0 24px 72px rgba(79,110,247,.45);
}
@keyframes bmaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.bma-artwork img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.bma-artwork-emoji { font-size: 72px; line-height: 1; }

/* Player info */
.bma-player-info { text-align: center; padding: 0 28px; margin-bottom: 32px; flex-shrink: 0; }
.bma-player-title  { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.2; }
.bma-player-artist { font-size: 15px; color: var(--sub); font-weight: 600; }

/* Progress bar */
.bma-waveform-wrap { padding: 0 28px; margin-bottom: 28px; flex-shrink: 0; }
.bma-progress-bar { cursor: pointer; padding: 8px 0; }
.bma-progress-bar-track {
  position: relative; height: 4px; background: #EBEBF0; border-radius: 100px;
}
.bma-progress-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--p), #A78BFA);
  border-radius: 100px; width: 0%; transition: width .1s linear;
}
.bma-progress-bar-thumb {
  position: absolute; top: 50%; right: calc(100% - 0%);
  transform: translate(50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%; background: var(--p);
  box-shadow: 0 0 0 3px rgba(79,110,247,.2);
  transition: left .1s linear;
}
.bma-time-labels { display: flex; justify-content: space-between; margin-top: 6px; }
.bma-time-labels span { font-size: 12px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }

/* Controls */
.bma-player-controls {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  padding: 0 28px 40px; flex-shrink: 0;
}
.bma-ctrl-btn { background: none; border: none; cursor: pointer; color: var(--text); transition: all .18s; border-radius: 50%; }
.bma-ctrl-btn:hover { color: var(--p); transform: scale(1.1); }
.bma-ctrl-prev, .bma-ctrl-next { color: var(--sub); }
.bma-ctrl-play {
  width: 72px; height: 72px;
  background: var(--p);
  color: #fff; border-radius: 50%;
  box-shadow: 0 8px 28px rgba(79,110,247,.5);
  display: flex; align-items: center; justify-content: center;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.bma-ctrl-play:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(79,110,247,.6); }
.bma-ctrl-play.is-playing { background: var(--p-d); }

/* ════════════════════════════════
   MINI PLAYER
════════════════════════════════ */
.bma-miniplayer {
  position: fixed;
  bottom: 64px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 448px;
  background: rgba(26,29,46,.97);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 49;
  animation: miniSlideUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes miniSlideUp { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

.bma-miniplayer-bar { height: 3px; background: rgba(255,255,255,.08); }
.bma-miniplayer-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--p), #A78BFA); transition: width .1s linear; }

.bma-miniplayer > div:not(.bma-miniplayer-bar) {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 8px;
}

.bma-miniplayer-thumb {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--p),#A78BFA);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  overflow: hidden; position: relative;
}
.bma-miniplayer-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bma-miniplayer-info { flex: 1; min-width: 0; }
.bma-miniplayer-title { display: block; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bma-miniplayer-sub   { display: block; font-size: 11px; color: rgba(255,255,255,.45); }

.bma-miniplayer-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bma-miniplayer-play, .bma-miniplayer-next {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .18s;
}
.bma-miniplayer-play { background: var(--p); color: #fff; box-shadow: 0 4px 14px rgba(79,110,247,.4); }
.bma-miniplayer-next { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.bma-miniplayer-play:hover { transform: scale(1.08); }

/* Heart burst */
@keyframes bma-burst { 0%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(1.8) translateY(-50px)} }
.bma-burst-el { position:fixed; pointer-events:none; z-index:999999; font-size:24px; animation:bma-burst .65s ease forwards; }

/* No results */
.bma-no-results { text-align:center; padding:40px 20px; color:var(--sub); font-size:14px; }
.bma-empty-block { text-align:center; padding:50px 20px; color:var(--sub); }
.bma-empty-block .icon { font-size:52px; margin-bottom:14px; opacity:.4; }
.bma-empty-block h3 { font-size:18px; color:var(--text); margin-bottom:6px; }
.bma-empty-block p  { font-size:13px; line-height:1.6; }

/* Favs view */
#bma-favs-view { display: none; }

/* Responsive */
@media (max-width: 520px) {
  #bma-app { border-radius: 0; box-shadow: none; max-width: 100%; }
  .bma-bottomnav { border-radius: 0; }
  .bma-miniplayer { bottom: 64px; width: calc(100% - 24px); }
}

/* ── Screen visibility (controlled by JS) ── */
#bma-home           { display: flex !important; flex-direction: column; }
#bma-player-screen  { display: none; }
#bma-favs-view      { display: none; }
#bma-main-view      { display: block; }

/* ════════════════════════════════
   FEATURE 1 — SHARE BUTTON
════════════════════════════════ */
.bma-share-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: #E7F5E9; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #25D366; transition: all .18s;
}
.bma-share-btn:hover { background: #25D366; color: #fff; transform: scale(1.08); }

/* ════════════════════════════════
   FEATURE 2 — SLEEP TIMER
════════════════════════════════ */
.bma-sleep-timer-bar {
  margin: 0 20px 28px;
  background: #F4F5FA;
  border-radius: 16px;
  padding: 14px 16px;
  flex-shrink: 0;
}
.bma-sleep-timer-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #7B82A3;
  margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.bma-sleep-timer-btns {
  display: flex; gap: 8px;
}
.bma-timer-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 12px;
  border: 2px solid #E5E7EB;
  background: #fff;
  color: #7B82A3;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.bma-timer-btn:hover {
  border-color: #4F6EF7; color: #4F6EF7;
  transform: translateY(-2px);
}
.bma-timer-btn.is-active-timer {
  background: #4F6EF7; border-color: #4F6EF7;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79,110,247,.4);
  transform: translateY(-2px);
}

@keyframes bmaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(1.4); }
}

/* ════════════════════════════════
   FEATURE 3 — MOOD BAR
════════════════════════════════ */
.bma-mood-bar {
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  margin-bottom: 4px;
}
.bma-mood-bar-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800;
  color: #9CA3AF;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.bma-mood-btns {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.bma-mood-btns::-webkit-scrollbar { display: none; }

.bma-mood-btn {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 5px;
  padding: 10px 14px;
  border-radius: 14px;
  border: none;
  background: var(--mood-bg, #EDE9FF);
  color: var(--mood-clr, #6B4EFF);
  cursor: pointer; flex-shrink: 0;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  min-width: 64px;
}
.bma-mood-btn:hover {
  background: var(--mood-clr, #6B4EFF);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.bma-mood-emoji { font-size: 22px; line-height: 1; }
.bma-mood-label { font-size: 10px; font-weight: 800; white-space: nowrap; }

/* ════════════════════════════════
   TOAST NOTIFICATION
════════════════════════════════ */
.bma-toast {
  position: fixed;
  bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(26,29,46,.95);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 12px 22px;
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  z-index: 999999;
  opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  pointer-events: none;
}
.bma-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════
   PROGRESS WIDGET
════════════════════════════════ */
.bma-progress-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px 16px;
  background: linear-gradient(135deg, #4F6EF7 0%, #7C3AED 100%);
  border-radius: 20px;
  padding: 16px 18px;
  color: #fff;
  flex-shrink: 0;
}

.bma-progress-widget-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.bma-progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bma-progress-stat-num {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}

.bma-progress-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  text-align: center;
  line-height: 1.2;
}

.bma-progress-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

.bma-progress-widget-ring {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
}

.bma-ring-label {
  position: absolute;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
}

/* ════════════════════════════════
   STAR RATING MODAL
════════════════════════════════ */
.bma-rating-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.bma-rating-modal--show {
  opacity: 1;
  pointer-events: all;
}

.bma-rating-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,8,30,.6);
  backdrop-filter: blur(4px);
}

.bma-rating-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 32px 28px 40px;
  text-align: center;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
}

.bma-rating-modal--show .bma-rating-card {
  transform: translateY(0);
}

.bma-rating-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.bma-rating-title {
  font-size: 20px;
  font-weight: 800;
  color: #1A1D2E;
  margin-bottom: 6px;
}

.bma-rating-sub {
  font-size: 13px;
  color: #9CA3AF;
  margin-bottom: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bma-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.bma-star {
  background: none;
  border: none;
  font-size: 38px;
  color: #E5E7EB;
  cursor: pointer;
  transition: all .15s cubic-bezier(.34,1.56,.64,1);
  line-height: 1;
  padding: 2px;
}

.bma-star:hover,
.bma-star.is-active {
  color: #F5A623;
  transform: scale(1.2);
}

.bma-rating-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9CA3AF;
  margin-bottom: 24px;
  padding: 0 4px;
}

.bma-rating-skip {
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 100px;
  transition: background .15s;
}

.bma-rating-skip:hover {
  background: #F4F5FA;
  color: #7B82A3;
}

/* ════════════════════════════════
   TRACK ROW — ENHANCED v12
════════════════════════════════ */

/* Wrap inner content so quote sits outside the flex row */
.bma-trackrow-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.bma-trackrow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Stars inside track row */
.bma-track-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.bma-star-icon {
  font-size: 12px;
  line-height: 1;
}
.bma-star-icon.full  { color: #F5A623; }
.bma-star-icon.half  { color: #F5A623; opacity: .6; }
.bma-star-icon.empty { color: #E5E7EB; }

.bma-track-ratingcount {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  margin-left: 3px;
}

/* Play count badge */
.bma-play-count {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
}

/* Quote snippet */
.bma-track-quote {
  font-size: 12px;
  color: #7B82A3;
  font-style: italic;
  line-height: 1.5;
  padding: 6px 14px 8px 50px; /* indent past the number */
  border-left: 2px solid #E8E9F5;
  margin: 4px 0 6px 36px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #F7F8FF, transparent);
}

/* Most Played badge */
.bma-trackrow--top {
  background: linear-gradient(135deg, #FFF8E7, #FFF3D0) !important;
  border: 1px solid #FDE68A;
}

.bma-mostplayed-badge {
  font-size: 10px;
  font-weight: 800;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 6px;
  display: inline-block;
  letter-spacing: .04em;
}