.mbx-engage{
  --mbx-accent:var(--profile-accent,#d7b24a);
  --mbx-accent-soft:color-mix(in srgb,var(--mbx-accent) 14%,transparent);
  --mbx-accent-soft-2:color-mix(in srgb,var(--mbx-accent) 22%,transparent);
  --mbx-accent-line:color-mix(in srgb,var(--mbx-accent) 38%,rgba(255,255,255,.08));
  --mbx-accent-bright:color-mix(in srgb,var(--mbx-accent) 84%,white 16%);
  margin-top:10px;
  padding:12px;
  border:1px solid var(--mbx-accent-line);
  border-radius:18px;
  background:
    radial-gradient(circle at top center,var(--mbx-accent-soft),transparent 42%),
    linear-gradient(180deg,rgba(12,12,14,.98),rgba(18,18,20,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 26px rgba(0,0,0,.14),0 0 22px color-mix(in srgb,var(--mbx-accent) 7%,transparent);
  color:#f7f7f4;
}
.mbx-engage-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.mbx-engage-kicker,.mbx-review-kicker,.mbx-panel-kicker{
  font-family:'Space Mono',monospace;
  font-size:.54rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--mbx-accent-bright)
}
.mbx-engage-copy h3,.mbx-review-head h4,.mbx-panel-head h4{margin:4px 0 4px;font-size:.98rem;line-height:1.08;color:#fff}
.mbx-engage-copy p,.mbx-panel-head p{margin:0;color:rgba(255,255,255,.68);font-size:.73rem;line-height:1.45;max-width:36rem}

/* One compact stats rail: one box, one row. */
.mbx-engage-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-bottom:9px;
  border:1px solid var(--mbx-accent-line);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mbx-accent) 7%,rgba(255,255,255,.035)),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
.mbx-stat-card{
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 6px;
  border-right:1px solid color-mix(in srgb,var(--mbx-accent) 24%,rgba(255,255,255,.07));
  background:transparent
}
.mbx-stat-card:last-child{border-right:0}
.mbx-stat-icon{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--mbx-accent-soft-2);border:1px solid color-mix(in srgb,var(--mbx-accent) 35%,transparent);color:var(--mbx-accent-bright);font-size:.72rem
}
.mbx-stat-copy{display:flex;flex-direction:column;min-width:0;line-height:1}
.mbx-stat-copy strong{font-size:.74rem;color:#fff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-stat-copy span{margin-top:4px;font:700 .44rem/1 'Space Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--mbx-accent-bright) 60%,white 40%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-loading-pill{grid-column:1/-1;padding:10px 12px;font:700 .56rem 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.72)}

/* Four compact actions in one row. */
.mbx-engage-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mbx-engage-btn{
  appearance:none;
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  border-radius:13px;
  border:1px solid var(--mbx-accent-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mbx-accent) 7%,rgba(255,255,255,.04)),rgba(255,255,255,.018));
  color:#f7f7f4;
  font-family:'Space Mono',monospace;
  font-size:.54rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.045)
}
.mbx-engage-btn:hover,.mbx-engage-btn:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--mbx-accent) 72%,white 28%);box-shadow:0 10px 20px rgba(0,0,0,.2),0 0 18px color-mix(in srgb,var(--mbx-accent) 14%,transparent);outline:none}
.mbx-engage-btn:active{transform:translateY(0)}
.mbx-engage-btn .mbx-btn-icon{font-size:.8rem;line-height:1;color:var(--mbx-accent-bright);flex:0 0 auto}
.mbx-engage-btn .mbx-btn-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-engage-btn.on,.mbx-engage-btn.is-primary{
  background:linear-gradient(180deg,var(--mbx-accent-bright),var(--mbx-accent));
  border-color:color-mix(in srgb,var(--mbx-accent) 72%,white 28%);
  color:var(--mbx-accent-ink);
  box-shadow:0 8px 18px color-mix(in srgb,var(--mbx-accent) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.24)
}
.mbx-engage-btn.on .mbx-btn-icon,.mbx-engage-btn.is-primary .mbx-btn-icon{color:var(--mbx-accent-ink)}
.mbx-engage-btn.is-danger{background:linear-gradient(180deg,rgba(124,22,22,.95),rgba(87,12,12,.96));border-color:rgba(232,101,101,.45);color:#fff}
.mbx-engage-btn.is-danger .mbx-btn-icon{color:#fff}
.mbx-engage-btn-wide{grid-column:1/-1;min-height:42px;margin-top:0}

.mbx-panel-host{margin-top:9px}
.mbx-rate-panel,.mbx-review-panel,.mbx-inline-note{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--mbx-accent-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mbx-accent) 7%,rgba(255,255,255,.035)),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.mbx-inline-note{font:700 .54rem 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.mbx-inline-note.success{border-color:color-mix(in srgb,var(--mbx-accent) 60%,#56c77a 40%);color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--mbx-accent) 12%,rgba(40,105,61,.24)),rgba(26,63,39,.2))}
.mbx-panel-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.mbx-stars{display:flex;flex-wrap:wrap;gap:7px}
.mbx-star{width:42px;height:42px;border-radius:12px;border:1px solid var(--mbx-accent-line);background:rgba(255,255,255,.025);color:rgba(255,255,255,.38);font-size:1.3rem;cursor:pointer;transition:transform .15s ease,color .15s ease,border-color .15s ease,background .15s ease}
.mbx-star:hover,.mbx-star:focus-visible,.mbx-star.on{color:var(--mbx-accent-bright);border-color:color-mix(in srgb,var(--mbx-accent) 70%,white 30%);background:var(--mbx-accent-soft);transform:translateY(-1px);outline:none}
.mbx-review-panel textarea{width:100%;min-height:88px;resize:vertical;border:1px solid var(--mbx-accent-line);border-radius:12px;padding:10px 11px;background:rgba(255,255,255,.025);color:#fff;font:500 .82rem/1.5 'DM Sans',sans-serif}
.mbx-review-panel textarea::placeholder{color:rgba(255,255,255,.42)}
.mbx-review-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}

/* Reviews are contained: roughly three cards visible, then scroll. */
.mbx-review-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--mbx-accent-line)}
.mbx-review-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-end;margin-bottom:8px}
.mbx-mini-link{appearance:none;border:0;background:none;padding:0;color:var(--mbx-accent-bright);cursor:pointer;font:700 .69rem 'DM Sans',sans-serif;letter-spacing:.03em}
.mbx-mini-link:hover,.mbx-mini-link:focus-visible{filter:brightness(1.15);outline:none}
.mbx-review-list{
  display:grid;
  gap:7px;
  max-height:286px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--mbx-accent) rgba(255,255,255,.04)
}
.mbx-review-list::-webkit-scrollbar{width:5px}
.mbx-review-list::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:999px}
.mbx-review-list::-webkit-scrollbar-thumb{background:var(--mbx-accent);border-radius:999px}
.mbx-review{
  padding:10px 11px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--mbx-accent) 26%,rgba(255,255,255,.06));
  background:linear-gradient(180deg,color-mix(in srgb,var(--mbx-accent) 5%,rgba(255,255,255,.028)),rgba(255,255,255,.014))
}
.mbx-review-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.mbx-review strong{font-size:.78rem;color:#fff}
.mbx-review-rating{display:inline-flex;align-items:center;gap:3px;color:var(--mbx-accent-bright);font:700 .64rem 'Space Mono',monospace;letter-spacing:.04em}
.mbx-review p{font-size:.78rem;margin:5px 0 6px;line-height:1.46;color:rgba(255,255,255,.79)}
.mbx-review small{font-size:.58rem;color:rgba(255,255,255,.5);font-family:'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.mbx-review-empty{padding:12px;border-radius:13px;border:1px dashed var(--mbx-accent-line);background:rgba(255,255,255,.015);color:rgba(255,255,255,.7);display:flex;flex-direction:column;gap:4px}
.mbx-review-empty strong{color:#fff}

/* Engagement follows the profile owner's selected accent color. */
#profile-musicbox-engagement{--mbx-accent-ink:#111;--musicbox-accent:var(--profile-accent,#d7b24a);--musicbox-text:#fff;--musicbox-muted:rgba(255,255,255,.62);--musicbox-border:var(--mbx-accent-line);--musicbox-control:rgba(255,255,255,.025);--musicbox-bg:#0f0f11;--musicbox-panel:#0f0f11}
#profile-musicbox-engagement [data-addbox]:not([hidden]){grid-column:1/-1}
.mbx-rate-panel:empty,.mbx-review-panel:empty{display:none}

@media(max-width:560px){
  .mbx-engage{padding:10px;border-radius:16px}
  .mbx-engage-copy h3,.mbx-review-head h4,.mbx-panel-head h4{font-size:.9rem}
  .mbx-engage-copy p,.mbx-panel-head p{font-size:.68rem}
  .mbx-stat-card{gap:4px;padding:6px 3px;min-height:44px;flex-direction:column;text-align:center}
  .mbx-stat-icon{width:19px;height:19px;border-radius:6px;font-size:.58rem}
  .mbx-stat-copy strong{font-size:.66rem}
  .mbx-stat-copy span{font-size:.39rem;letter-spacing:.055em}
  .mbx-engage-btn{min-height:41px;font-size:.47rem;letter-spacing:.055em;padding:0 5px;border-radius:11px;gap:4px}
  .mbx-engage-btn .mbx-btn-icon{font-size:.7rem}
  .mbx-engage-btn-wide{min-height:40px}
  .mbx-review-list{max-height:264px}
}
@media(max-width:390px){
  .mbx-engage{padding:9px}
  .mbx-stat-icon{display:none}
  .mbx-stat-card{min-height:40px;padding:6px 2px}
  .mbx-stat-copy strong{font-size:.63rem}
  .mbx-stat-copy span{font-size:.36rem}
  .mbx-engage-btn{font-size:.43rem;letter-spacing:.04em}
}
