/* ---- Music video --------------------------------------------------------------
   A lip-synced music video of a whole song. The home panel reuses the Multicam
   panel's frame (.multicam-panel, .multicam-intro); only what is particular to it
   is styled here: the story box first and biggest, the song as one clear row,
   people/places/things as a small grid of cards, then the camera slider. */
.mv-story { display: grid; gap: 8px; }
.mv-story > span, .mv-camera > span:first-child, .mv-shape > span { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: #9391ac; font-weight: 650; }
.mv-story textarea { width: 100%; min-height: 96px; resize: vertical; border: 1px solid #bfb2dd3d; border-radius: 14px;
  background: linear-gradient(115deg, #222331, #1b202d); color: #ede7f9; font-size: 14px; line-height: 1.7; padding: 16px 18px; outline: 0; }
.mv-story textarea:focus { border-color: #cab4f684; box-shadow: 0 0 0 3px #a58bd00a; }
.mv-song { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed #c9b6ff40; border-radius: 14px; background: #ffffff04; }
.mv-song.is-set { border-style: solid; background: rgba(201, 182, 255, .06); }
.mv-song-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #c9b6ff1a; color: #d9c8ff; font-size: 18px; flex: none; }
.mv-song-words { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.mv-song-words strong { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.mv-song-words span { font-size: 11px; color: var(--muted, #9b9bab); }
.mv-cast { display: grid; gap: 10px; }
.mv-cast-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.mv-cast-head strong { font-size: 13px; font-weight: 550; }
.mv-cast-head span { font-size: 11px; color: var(--muted, #9b9bab); }
.mv-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.mv-item { display: grid; gap: 6px; padding: 6px; border: 1px solid #ffffff12; border-radius: 12px; background: #171c28; min-width: 0; }
.mv-item-media { position: relative; }
.mv-item-media img, .mv-item-media video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #10141e; display: block; }
.mv-item-badge { position: absolute; left: 6px; bottom: 6px; font-size: 9px; letter-spacing: .4px; padding: 2px 6px; border-radius: 4px; background: #111a; color: #ddd3ed; }
.mv-item-remove { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; padding: 0; background: #1d1a28e6; border: 1px solid #ffffff25; color: #e8e2f5; font-size: 14px; line-height: 1; }
.mv-item-name, .mv-item-role { width: 100%; border: 1px solid #ffffff10; background: #10151f; border-radius: 7px; padding: 6px 8px; color: #d5d3e3; font-size: 11px; min-width: 0; }
.mv-item-role { appearance: auto; }
.mv-item-role.is-fixed { display: block; color: #8f95ab; border-style: dashed; }
.mv-add { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 150px; border: 1px dashed #c9b6ff40; border-radius: 12px; background: #ffffff04; color: #d9c8ff; }
.mv-add > span { font-size: 26px; line-height: 1; }
.mv-add strong { font-size: 12px; font-weight: 550; }
.mv-add small { font-size: 10px; color: #8f95ab; }
.mv-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.mv-camera { display: grid; gap: 8px; }
.mv-camera input[type="range"] { width: 100%; accent-color: #bca4e0; }
.mv-camera-stops { display: flex; justify-content: space-between; font-size: 10px; color: #8f95ab; }
.mv-camera-stops i { font-style: normal; }
.mv-camera small { font-size: 12px; color: #b8b4cb; }
.mv-camera small strong { color: #e6dcff; font-weight: 550; }
.mv-shape { display: grid; gap: 8px; }
.mv-shape > div { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-create { justify-self: start; padding: 12px 22px; font-size: 13px; }
.mv-create:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 620px) {
  .mv-controls { grid-template-columns: 1fr; }
  .mv-cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-create { justify-self: stretch; }
}