.mf-media-panel {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
  background: #172033;
  color: #fff;
  text-align: center;
  pointer-events: none;
  border-radius: inherit;
}
.mf-media-panel .mf-media-label { color: #fff; font: 600 13px/1.4 Arial, sans-serif; }
.mf-media-spinner {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mf-media-spin .8s linear infinite;
}
.mf-media-failed .mf-media-spinner { display: none; }
.mf-media-retry {
  min-height: 44px;
  min-width: 44px;
  padding: 7px 14px;
  border: 1px solid #fff;
  border-radius: 6px;
  background: #b91c1c;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  font: 600 13px/1.4 Arial, sans-serif;
  touch-action: manipulation;
}
.mf-media-retry[hidden] { display: none !important; }
.mf-media-retry:hover { background: #991b1b; }
.mf-media-retry:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mf-media-compact { gap: 0; padding: 2px; }
.mf-media-compact .mf-media-label { display: none; }
.mf-media-compact .mf-media-spinner { width: 16px; height: 16px; flex-basis: 16px; border-width: 2px; }
.mf-media-compact .mf-media-retry { min-height: 24px; min-width: 24px; padding: 2px; font-size: 10px; }
@keyframes mf-media-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-media-spinner { animation: none; } }