/* ═══════════════════════════════════════════════════════════════════════════
   Phase 118 — Music Video Studio  ·  v3 — Documentary-pattern design
   CorkBoard Studio  ·  Copyright © 2025 Jack Allen. All Rights Reserved.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hidden state — never override display:none (mirrors documentary pattern) */
#musicvideo-app.mv118-app.hidden {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── App container — stamped with mv118-app class by JS on render ─────────── */
#musicvideo-app.mv118-app {
  /* Design tokens */
  --mv-ink:       #21140d;
  --mv-muted:     #765a44;
  --mv-muted-lt:  #a8927c;
  --mv-surface:   rgba(255,252,244,.94);
  --mv-line:      rgba(92,62,31,.18);
  --mv-line-lt:   rgba(92,62,31,.09);
  --mv-accent:    #c47a2b;
  --mv-accent-dk: #9e5f18;
  --mv-gold-a:    #ffd085;
  --mv-gold-b:    #c47a2b;
  --mv-green:     #12a070;
  --mv-shadow:    0 24px 60px rgba(43,28,14,.18);

  /* Layout — matches documentary */
  min-height: calc(100vh - 72px);
  height: calc(100dvh - 68px) !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 24px clamp(14px, 2.2vw, 34px) 120px;

  /* Warm amber background — richer than plain cream */
  background:
    radial-gradient(circle at 8%  0%,  rgba(196,122,43,.13), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(6,182,212,.12),  transparent 30%),
    linear-gradient(135deg, #fbf0e0 0%, #eeddc0 46%, #e0c89a 100%);

  color: var(--mv-ink);
  font-family: "Aptos", "Segoe UI", ui-sans-serif, sans-serif;
}

/* ── Hide companion shells when active ──────────────────────────────────── */
#musicvideo-app.mv118-app > .ss78-flow-shell,
#musicvideo-app.mv118-app > .sxn-shell,
#musicvideo-app.mv118-app > [data-sxu],
#musicvideo-app.mv118-app > .mv118-legacy-hidden {
  display: none !important;
}

/* ── Box sizing ─────────────────────────────────────────────────────────── */
#musicvideo-app.mv118-app * {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL — max-width wrapper, mirrors doc101-shell
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-shell {
  width: min(1400px, 100%);
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO HEADER — large rounded dark card, matches podcast / documentary
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-header {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: end;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  background:
    radial-gradient(circle at 76% 10%, rgba(6,182,212,.22),  transparent 30%),
    radial-gradient(circle at 12% 72%, rgba(196,122,43,.24), transparent 36%),
    linear-gradient(135deg, #0d1c2c 0%, #19304a 44%, #122030 100%);
  box-shadow: 0 28px 80px rgba(10,20,32,.32);
  margin-bottom: 16px;
}

/* Grid overlay */
.mv118-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none; z-index: 0;
}
/* Decorative waveform accent panel — top right, mirrors podcast */
.mv118-header::after {
  content: '';
  position: absolute;
  inset: 18px 18px auto auto;
  width: min(360px, 42%);
  height: 170px;
  pointer-events: none; opacity: .38;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(196,122,43,.7) 6% 7%, transparent 7% 14%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.08) 0 2px, transparent 2px 16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  transform: rotate(-2deg);
}

/* All header children above overlays */
.mv118-header > * { position: relative; z-index: 1; }

.mv118-header-main {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0;
}
.mv118-header-icon {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; margin-top: 2px;
  background: rgba(196,122,43,.28); border: 1px solid rgba(196,122,43,.44);
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.mv118-title-block { min-width: 0; }
.mv118-title-block h1 {
  margin: 0 0 6px;
  font-size: .7rem; font-weight: 900;
  color: rgba(255,215,120,.72);
  text-transform: uppercase; letter-spacing: .15em;
}
.mv118-title-block p {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  font-weight: 900; line-height: .9;
  letter-spacing: -.055em;
  color: #fff8ec;
  text-shadow: 0 18px 44px rgba(0,0,0,.28);
  overflow-wrap: anywhere; text-wrap: balance;
}

/* Actions side */
.mv118-header-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: start; padding-top: 4px;
}

/* KPI strip — inside hero, matches podcast pod113-stats */
.mv118-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: 10px;
  margin-top: clamp(16px, 2.2vw, 28px);
  max-width: 820px;
}
.mv118-kpi {
  padding: 14px 16px; border-radius: 22px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff8ec; backdrop-filter: blur(14px);
}
.mv118-kpi-val   { display: block; font-size: 1.45rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.02em; margin-bottom: 4px; }
.mv118-kpi-label { display: block; font-size: .57rem; font-weight: 700; color: rgba(255,215,120,.65); text-transform: uppercase; letter-spacing: .09em; }

/* Status chip */
.mv118-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; font-family: inherit;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12); color: #fff8ec;
  backdrop-filter: blur(10px); cursor: pointer; transition: background .15s; white-space: nowrap;
}
.mv118-status-chip:hover { background: rgba(255,255,255,.22); }
.mv118-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.mv118-status-chip[data-status="treatment"]      .mv118-dot { background: #c4b5fd; }
.mv118-status-chip[data-status="pre-production"] .mv118-dot { background: #93c5fd; }
.mv118-status-chip[data-status="in-production"]  .mv118-dot { background: #fcd34d; }
.mv118-status-chip[data-status="post"]           .mv118-dot { background: #6ee7b7; }
.mv118-status-chip[data-status="delivered"]      .mv118-dot { background: #4ade80; }

/* ═══════════════════════════════════════════════════════════════════════════
   TAB NAV — frosted-glass rounded pill, mirrors pod113-tabs exactly
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-tab-nav {
  display: flex; gap: 6px; flex-wrap: nowrap;
  position: sticky; top: 0; z-index: 20;
  padding: 9px;
  margin: 14px 0 0;
  border-radius: 25px;
  border: 1px solid rgba(20,24,36,.16);
  background: rgba(13,28,44,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(10,20,32,.22);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mv118-tab-nav::-webkit-scrollbar { display: none; }

.mv118-tab {
  border-radius: 18px; padding: 10px 16px; min-height: 40px;
  font-size: .8rem; font-weight: 700; font-family: inherit; letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.07);
  color: rgba(255,248,236,.75);
  cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s; appearance: none; box-shadow: none;
}
.mv118-tab:hover   { color: rgba(255,248,236,.95); background: rgba(255,255,255,.14); }
.mv118-tab.active  {
  background: linear-gradient(135deg, #ffd085, #c47a2b);
  color: #21140d; font-weight: 900;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(196,122,43,.38);
}

/* Rainbow stripe below nav */
.mv118-tab-body { margin-top: 14px; }
.mv118-tab-body::before {
  content: ''; display: block; height: 3px; border-radius: 2px; margin-bottom: 16px;
  background: linear-gradient(90deg, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-card {
  background: var(--mv-surface);
  border: 1px solid var(--mv-line);
  border-radius: 28px;
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--mv-shadow);
}
.mv118-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.mv118-card-head h2 {
  margin: 0; font-size: .72rem; font-weight: 900;
  color: var(--mv-muted); text-transform: uppercase; letter-spacing: .1em;
}
.mv118-eyebrow { font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; color: var(--mv-muted); margin: 0 0 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 18px; font-size: .8rem; font-weight: 900;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(78,52,27,.16);
  background: rgba(255,255,255,.82); color: #29170b;
  box-shadow: 0 12px 25px rgba(77,47,18,.08);
  transition: transform .16s ease, box-shadow .16s ease;
  line-height: 1; white-space: nowrap; appearance: none;
}
.mv118-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(77,47,18,.13); }
.mv118-btn.primary {
  background: linear-gradient(135deg, #ffd085, #c47a2b); color: #21140d;
  border-color: transparent; box-shadow: 0 12px 24px rgba(196,122,43,.22);
}
.mv118-btn.primary:hover { box-shadow: 0 16px 32px rgba(196,122,43,.32); }
.mv118-btn.sm { padding: 6px 14px; font-size: .73rem; }
.mv118-btn.danger { background: #fef2f2; color: #dc2626; border-color: #fecaca; border-radius: 10px; }
.mv118-btn.danger:hover { background: #fee2e2; }

/* Buttons on dark hero */
.mv118-header .mv118-btn,
.mv118-hero-edit {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.1); color: #fff8ec;
  backdrop-filter: blur(12px); box-shadow: none;
}
.mv118-header .mv118-btn:hover,
.mv118-hero-edit:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.mv118-hero-edit {
  position: absolute; top: 16px; right: 16px;
  padding: 7px 16px; font-size: .72rem; font-weight: 700;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  cursor: pointer; z-index: 2; font-family: inherit; transition: background .12s, transform .12s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-field { display: flex; flex-direction: column; gap: 5px; }
.mv118-field.wide { grid-column: 1 / -1; }
.mv118-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mv-muted); }
.mv118-field input, .mv118-field textarea, .mv118-field select {
  width: 100%; padding: 9px 12px; font-size: .85rem;
  border: 1px solid var(--mv-line); border-radius: 14px;
  background: rgba(255,255,255,.75); color: var(--mv-ink); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mv118-field input:focus, .mv118-field textarea:focus, .mv118-field select:focus {
  outline: none; border-color: var(--mv-accent);
  box-shadow: 0 0 0 3px rgba(196,122,43,.14); background: #fff;
}
.mv118-field textarea { resize: vertical; min-height: 80px; }
.mv118-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv118-grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mv118-grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.mv118-form-group { display: flex; flex-direction: column; gap: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK TAB — song info hero banner
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-hero {
  position: relative; overflow: hidden;
  padding: clamp(22px, 3vw, 36px); border-radius: 28px; margin-bottom: 14px;
  background:
    radial-gradient(circle at 80% 10%, rgba(6,182,212,.22), transparent 35%),
    radial-gradient(circle at 8%  80%, rgba(196,122,43,.28), transparent 40%),
    linear-gradient(135deg, #101827 0%, #1d2535 44%, #2d1d16 100%);
  box-shadow: 0 20px 60px rgba(10,20,32,.26);
  color: #fff8ec;
  border: 1px solid rgba(255,255,255,.1);
}
.mv118-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.mv118-hero-artist  { font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,215,120,.65); margin: 0 0 4px; position: relative; z-index: 1; }
.mv118-hero-title   { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 0 0 18px; position: relative; z-index: 1; font-style: italic; }
.mv118-hero-pills   { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; position: relative; z-index: 1; }
.mv118-pill         { display: flex; flex-direction: column; background: rgba(255,255,255,.11); border-radius: 13px; padding: 8px 14px; min-width: 68px; border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px); }
.mv118-pill-label   { font-size: .52rem; font-weight: 700; opacity: .6; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1px; }
.mv118-pill-val     { font-size: .9rem; font-weight: 900; }
.mv118-hero-tags    { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; z-index: 1; }
.mv118-genre-badge  { font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; background: rgba(255,255,255,.15); border-radius: 999px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.22); }
.mv118-isrc-badge   { font-size: .63rem; font-weight: 600; opacity: .5; font-family: monospace; }

/* Track metadata grid */
.mv118-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 1px; background: var(--mv-line); border: 1px solid var(--mv-line); border-radius: 16px; overflow: hidden; }
.mv118-meta-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--mv-surface); }
.mv118-meta-label { font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mv-muted-lt); }
.mv118-meta-val   { font-size: .87rem; font-weight: 600; color: var(--mv-ink); }
.mv118-meta-val.empty { color: var(--mv-muted-lt); font-style: italic; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════════
   TREATMENT TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-style-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; }
.mv118-style-opt   { position: relative; cursor: pointer; }
.mv118-style-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mv118-style-card  { padding: 14px; border: 2px solid var(--mv-line); border-radius: 16px; background: rgba(255,255,255,.75); transition: all .15s; display: flex; flex-direction: column; gap: 4px; }
.mv118-style-opt:hover .mv118-style-card { border-color: var(--mv-accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(196,122,43,.14); }
.mv118-style-opt input:checked + .mv118-style-card { border-color: var(--mv-accent); background: #fffbf0; box-shadow: 0 0 0 3px rgba(196,122,43,.13); }
.mv118-style-card-icon { font-size: 1.5rem; line-height: 1; }
.mv118-style-card-name { font-size: .79rem; font-weight: 700; color: var(--mv-ink); margin-top: 4px; }
.mv118-style-card-sub  { font-size: .64rem; color: var(--mv-muted); line-height: 1.35; }

.mv118-palette-wrap  { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 6px; }
.mv118-swatch        { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; position: relative; }
.mv118-swatch-circle { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: transform .15s; }
.mv118-swatch:hover .mv118-swatch-circle { transform: scale(1.1); }
.mv118-swatch-hex    { font-size: .58rem; font-family: monospace; color: var(--mv-muted); }
.mv118-swatch-del    { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #dc2626; color: #fff; font-size: .6rem; font-weight: 700; display: none; align-items: center; justify-content: center; cursor: pointer; border: 1.5px solid #fff; }
.mv118-swatch:hover .mv118-swatch-del { display: flex; }
.mv118-add-swatch    { width: 38px; height: 38px; border-radius: 50%; border: 2px dashed var(--mv-line); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--mv-muted); transition: all .15s; }
.mv118-add-swatch:hover { border-color: var(--mv-accent); color: var(--mv-accent); }

.mv118-chip-input-wrap  { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--mv-line); border-radius: 14px; background: rgba(255,255,255,.75); min-height: 42px; cursor: text; transition: border-color .15s; }
.mv118-chip-input-wrap:focus-within { border-color: var(--mv-accent); box-shadow: 0 0 0 3px rgba(196,122,43,.11); background: #fff; }
.mv118-chip            { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: #fff8ed; color: var(--mv-accent-dk); border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid rgba(196,122,43,.25); white-space: nowrap; }
.mv118-chip-x          { cursor: pointer; font-size: .8rem; opacity: .6; line-height: 1; padding: 0 1px; }
.mv118-chip-x:hover    { opacity: 1; }
.mv118-chip-input      { border: none; background: none; outline: none; font-size: .83rem; color: var(--mv-ink); min-width: 120px; flex: 1; font-family: inherit; padding: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS / BEAT MAP TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-beatmap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.mv118-runtime-tally  { font-size: .75rem; color: var(--mv-muted); font-weight: 600; }
.mv118-runtime-tally span { color: var(--mv-ink); font-weight: 900; }

.mv118-beatmap-track  { display: flex; gap: 3px; height: 46px; border-radius: 12px; overflow: hidden; margin-bottom: 20px; background: rgba(92,62,31,.1); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); }
.mv118-beatmap-block  { height: 100%; min-width: 6px; transition: opacity .15s, filter .15s; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv118-beatmap-block:hover { opacity: .82; filter: brightness(1.1); }
.mv118-beatmap-block-label { font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.9); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

.mv118-sections-list { display: flex; flex-direction: column; gap: 8px; }
.mv118-sec-card      { border: 1px solid var(--mv-line); border-radius: 18px; background: var(--mv-surface); overflow: hidden; transition: box-shadow .15s; box-shadow: 0 4px 16px rgba(61,38,16,.07); }
.mv118-sec-card:hover { box-shadow: 0 8px 28px rgba(61,38,16,.14); }
.mv118-sec-card[data-type="intro"]        { border-left: 3px solid #0891B2; }
.mv118-sec-card[data-type="verse"]        { border-left: 3px solid #2563EB; }
.mv118-sec-card[data-type="prechorus"]    { border-left: 3px solid #7C3AED; }
.mv118-sec-card[data-type="chorus"]       { border-left: 3px solid #D97706; }
.mv118-sec-card[data-type="bridge"]       { border-left: 3px solid #16A34A; }
.mv118-sec-card[data-type="hook"]         { border-left: 3px solid #059669; }
.mv118-sec-card[data-type="breakdown"]    { border-left: 3px solid #DC2626; }
.mv118-sec-card[data-type="instrumental"] { border-left: 3px solid #DB2777; }
.mv118-sec-card[data-type="outro"]        { border-left: 3px solid #6B7280; }
.mv118-sec-card:not([data-type])          { border-left: 3px solid #9CA3AF; }

/* Row wrapper: toggle area + always-visible delete button */
.mv118-sec-row {
  display: flex;
  align-items: stretch;
}
.mv118-sec-head { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; transition: background .12s; min-width: 0; }
.mv118-sec-head:hover { background: rgba(92,62,31,.04); }

/* Standalone delete button — always visible, right side of card */
.mv118-sec-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--mv-line-lt);
  color: var(--mv-muted-lt);
  font-size: .78rem;
  cursor: pointer;
  border-radius: 0 12px 0 0;
  transition: background .12s, color .14s;
  padding: 0;
}
.mv118-sec-del-btn:hover {
  background: rgba(220,38,38,.07);
  color: #dc2626;
  border-left-color: #fecaca;
}
.mv118-sec-type-badge { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 9px; flex-shrink: 0; white-space: nowrap; }
.mv118-sec-title { font-size: .87rem; font-weight: 700; color: var(--mv-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv118-sec-time  { font-size: .7rem; font-weight: 700; color: var(--mv-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; background: rgba(92,62,31,.07); padding: 2px 7px; border-radius: 6px; }
.mv118-sec-dur   { font-size: .67rem; color: var(--mv-muted-lt); white-space: nowrap; flex-shrink: 0; }
.mv118-sec-actions { display: flex; gap: 5px; flex-shrink: 0; }
.mv118-sec-action-btn { background: none; border: 1px solid var(--mv-line); border-radius: 8px; padding: 3px 9px; font-size: .7rem; color: var(--mv-muted); cursor: pointer; transition: background .12s, color .12s; font-family: inherit; font-weight: 600; }
.mv118-sec-action-btn:hover { background: rgba(0,0,0,.04); color: var(--mv-ink); }
.mv118-sec-action-btn.del:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.mv118-sec-chevron { font-size: .62rem; color: var(--mv-muted-lt); transition: transform .2s; flex-shrink: 0; }
.mv118-sec-card.open .mv118-sec-chevron { transform: rotate(180deg); }
.mv118-sec-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--mv-line-lt); background: rgba(255,252,244,.6); }
.mv118-sec-card.open .mv118-sec-body { display: block; }
.mv118-sec-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mv118-sec-body-grid .mv118-field.wide { grid-column: 1 / -1; }
.mv118-note-block { padding: 10px 12px; background: #fff; border: 1px solid var(--mv-line-lt); border-radius: 10px; margin-top: 10px; }
.mv118-note-label { font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mv-muted-lt); margin-bottom: 5px; }
.mv118-note-text  { font-size: .82rem; color: var(--mv-ink); line-height: 1.55; white-space: pre-wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-empty { text-align: center; padding: 80px 20px; color: var(--mv-muted); }
.mv118-empty-icon { font-size: 3rem; margin-bottom: 14px; display: block; }
.mv118-empty h3   { margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; color: var(--mv-ink); }
.mv118-empty p    { margin: 0 0 20px; font-size: .85rem; line-height: 1.65; max-width: 360px; margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   DELIVER TAB
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-deliver-layout   { display: grid; grid-template-columns: 1fr 256px; gap: 16px; align-items: start; }
.mv118-progress-ring-wrap { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fffbf0; border: 1px solid rgba(196,122,43,.22); border-radius: 28px; margin-bottom: 14px; box-shadow: var(--mv-shadow); }
.mv118-ring-label { display: flex; flex-direction: column; gap: 3px; }
.mv118-ring-pct   { font-size: 1.55rem; font-weight: 900; color: var(--mv-ink); line-height: 1; letter-spacing: -.02em; }
.mv118-ring-sub   { font-size: .71rem; color: var(--mv-muted); font-weight: 600; }
.mv118-ring svg   { display: block; transform: rotate(-90deg); }
.mv118-ring svg circle:last-child { stroke: var(--mv-accent) !important; }

.mv118-del-list { display: flex; flex-direction: column; }
.mv118-del-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--mv-line-lt); transition: background .12s; user-select: none; }
.mv118-del-list .mv118-del-item:first-child { border-radius: 18px 18px 0 0; }
.mv118-del-list .mv118-del-item:last-child  { border-radius: 0 0 18px 18px; border-bottom: none; }
.mv118-del-item:hover { background: rgba(92,62,31,.04); }
.mv118-del-check { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--mv-line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.8); transition: all .15s; }
.mv118-del-item.done .mv118-del-check { background: linear-gradient(135deg, #ffd085, #c47a2b); border-color: transparent; }
.mv118-del-check-mark { display: none; color: #21140d; font-size: .75rem; font-weight: 900; }
.mv118-del-item.done .mv118-del-check-mark { display: block; }
.mv118-del-text  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mv118-del-label { font-size: .84rem; font-weight: 600; color: var(--mv-ink); transition: opacity .12s; }
.mv118-del-item.done .mv118-del-label { opacity: .4; text-decoration: line-through; }
.mv118-del-spec  { font-size: .66rem; color: var(--mv-muted-lt); font-weight: 500; }
.mv118-del-status { font-size: .63rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.mv118-del-status.ns  { background: #f3f4f6; color: #6b7280; }
.mv118-del-status.ip  { background: #fffbeb; color: #92400e; }
.mv118-del-status.rdy { background: #ecfdf5; color: #065f46; }
.mv118-del-status.dlv { background: #dcfce7; color: #15803d; }
.mv118-del-sidebar    { position: sticky; top: 72px; }
.mv118-export-card    { background: var(--mv-surface); border: 1px solid var(--mv-line); border-radius: 28px; padding: 20px; box-shadow: var(--mv-shadow); }
.mv118-export-card h3 { margin: 0 0 6px; font-size: .84rem; font-weight: 900; color: var(--mv-ink); }
.mv118-export-card p  { font-size: .75rem; color: var(--mv-muted); margin: 0 0 16px; line-height: 1.55; }
.mv118-export-btn     { width: 100%; padding: 11px 14px; font-size: .8rem; font-weight: 900; border-radius: 999px; border: none; background: linear-gradient(135deg, #ffd085, #c47a2b); color: #21140d; cursor: pointer; transition: all .15s; box-shadow: 0 8px 20px rgba(196,122,43,.26); font-family: inherit; }
.mv118-export-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(196,122,43,.36); }
.mv118-export-divider { height: 1px; background: var(--mv-line); margin: 16px 0; }
.mv118-del-summary    { display: flex; flex-direction: column; gap: 8px; }
.mv118-del-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; }
.mv118-del-summary-row span:first-child { color: var(--mv-muted); }
.mv118-del-summary-row span:last-child  { font-weight: 900; color: var(--mv-ink); background: rgba(92,62,31,.07); padding: 1px 7px; border-radius: 6px; min-width: 22px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
   ═══════════════════════════════════════════════════════════════════════════ */
.mv118-wz-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 40px 20px;
}
.mv118-wz {
  background: var(--mv-surface); border: 1px solid var(--mv-line);
  border-radius: 28px; padding: 44px; max-width: 580px; width: 100%;
  box-shadow: 0 28px 80px rgba(43,28,14,.14), inset 0 1px 0 rgba(255,255,255,.8);
  position: relative; overflow: hidden;
}
.mv118-wz::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 120px;
  background: radial-gradient(ellipse, rgba(196,122,43,.18), transparent 70%);
  pointer-events: none;
}
.mv118-wz-steps { display: flex; align-items: center; margin-bottom: 36px; justify-content: center; position: relative; z-index: 1; }
.mv118-wz-step  { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mv118-wz-dot   { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--mv-line); display: flex; align-items: center; justify-content: center; font-size: .95rem; background: rgba(255,255,255,.7); color: var(--mv-muted); font-weight: 700; transition: all .22s; }
.mv118-wz-step.active .mv118-wz-dot { border-color: var(--mv-accent); background: linear-gradient(135deg, #ffd085, #c47a2b); color: #21140d; box-shadow: 0 6px 18px rgba(196,122,43,.38); }
.mv118-wz-step.done   .mv118-wz-dot { border-color: var(--mv-green); background: var(--mv-green); color: #fff; }
.mv118-wz-step span   { font-size: .64rem; font-weight: 700; color: var(--mv-muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.mv118-wz-step.active span { color: var(--mv-accent); }
.mv118-wz-connector   { height: 2px; width: 52px; background: var(--mv-line); margin: 0 8px; margin-bottom: 28px; }
.mv118-wz-intro       { margin-bottom: 28px; position: relative; z-index: 1; }
.mv118-wz-intro h2    { margin: 0 0 8px; font-size: 1.35rem; font-weight: 900; color: var(--mv-ink); letter-spacing: -.025em; }
.mv118-wz-intro p     { margin: 0; font-size: .86rem; color: var(--mv-muted); line-height: 1.65; }
.mv118-wz-fields      { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; position: relative; z-index: 1; }
.mv118-wz-footer      { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; position: relative; z-index: 1; }
.mv118-wz-skip        { background: none; border: none; font-size: .73rem; color: var(--mv-muted); cursor: pointer; text-align: center; width: 100%; padding: 6px; text-decoration: underline; font-family: inherit; transition: color .14s; }
.mv118-wz-skip:hover  { color: var(--mv-ink); }
.mv118-approach-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.mv118-approach-opt   { position: relative; cursor: pointer; }
.mv118-approach-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mv118-approach-card  { padding: 18px; border: 2px solid var(--mv-line); border-radius: 16px; background: rgba(255,255,255,.75); transition: all .15s; }
.mv118-approach-opt:hover .mv118-approach-card { border-color: var(--mv-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196,122,43,.14); }
.mv118-approach-opt input:checked + .mv118-approach-card { border-color: var(--mv-accent); background: #fffbf0; box-shadow: 0 0 0 3px rgba(196,122,43,.13); }
.mv118-approach-icon  { font-size: 1.7rem; margin-bottom: 9px; }
.mv118-approach-name  { font-size: .84rem; font-weight: 700; color: var(--mv-ink); margin-bottom: 4px; }
.mv118-approach-desc  { font-size: .68rem; color: var(--mv-muted); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRACK TAB — Song tracks list
   ═══════════════════════════════════════════════════════════════════════════ */

.mv118-trk-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}
.mv118-trk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,252,244,.75);
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  transition: border-color .14s;
}
.mv118-trk-row.primary {
  border-color: rgba(196,122,43,.3);
  background: rgba(255,248,230,.8);
}
.mv118-trk-row-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.mv118-trk-row-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: linear-gradient(135deg, #ffd085, #c47a2b);
  border-radius: 99px;
  font-size: .58rem;
  font-weight: 800;
  color: #21140d;
  letter-spacing: .07em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mv118-trk-row-title {
  font-size: .86rem;
  font-weight: 700;
  color: var(--mv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv118-trk-row-artist {
  font-size: .76rem;
  color: var(--mv-muted);
  white-space: nowrap;
}
.mv118-trk-row-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(92,62,31,.08);
  border-radius: 99px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--mv-muted);
  white-space: nowrap;
}

/* Danger ghost button variant */
.mv118-btn.ghost.danger {
  color: #dc2626;
  border-color: rgba(220,38,38,.25);
}
.mv118-btn.ghost.danger:hover {
  background: rgba(220,38,38,.08);
  border-color: #fca5a5;
}

/* Add track form (track tab) */
.mv118-trk-add-form {
  border-top: 1px solid var(--mv-line-lt);
  padding-top: 16px;
  margin-top: 4px;
}
.mv118-trk-add-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SONG PULSE  —  SVG Waveform visualizer
   ═══════════════════════════════════════════════════════════════════════════ */

.mv118-pulse-card {
  position: relative;
  overflow: hidden;
}
.mv118-pulse-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196,122,43,.04) 0%, rgba(6,182,212,.04) 100%);
  pointer-events: none;
}

/* Total bars chip */
.mv118-pulse-total-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(196,122,43,.16), rgba(196,122,43,.08));
  border: 1px solid rgba(196,122,43,.3);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--mv-accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Waveform track — horizontal flex row */
.mv118-pulse-track {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(13,28,44,.05);
  border: 1px solid var(--mv-line);
  padding: 6px 6px 0;
  cursor: pointer;
  user-select: none;
  margin-bottom: 6px;
}

/* Individual section block */
.mv118-pulse-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  transition: transform .14s, box-shadow .14s;
  cursor: pointer;
  min-width: 18px;
  position: relative;
}
.mv118-pulse-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 2;
}

/* SVG waveform fills the block's remaining height */
.mv118-pulse-svg {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

/* Label strip at the bottom of each block */
.mv118-pulse-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 5px 3px;
  gap: 0;
  min-height: 28px;
}
.mv118-pulse-section-name {
  font-size: .58rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.15;
}
.mv118-pulse-beats {
  font-size: .52rem;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  line-height: 1.1;
}

/* Energy dot editor row */
.mv118-pulse-energy-row {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}
.mv118-pulse-energy-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
}
.mv118-energy-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.mv118-energy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(196,122,43,.35);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .12s, border-color .12s, transform .1s;
  flex-shrink: 0;
}
.mv118-energy-dot:hover {
  border-color: var(--mv-accent);
  transform: scale(1.25);
}
.mv118-energy-dot.on {
  background: var(--mv-accent);
  border-color: var(--mv-accent);
}

/* Hint text */
.mv118-pulse-hint {
  margin: 0 0 12px;
  font-size: .72rem;
  color: var(--mv-muted);
  line-height: 1.55;
}

/* Legend strip */
.mv118-pulse-legend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}
.mv118-pulse-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--mv-muted);
  font-weight: 600;
}
.mv118-pulse-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-TRACK TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.mv118-mt-card {
  position: relative;
}

.mv118-mt-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(6,182,212,.15), rgba(6,182,212,.07));
  border: 1px solid rgba(6,182,212,.28);
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  color: #0891b2;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

.mv118-mt-preview-text {
  margin: 0;
  font-size: .82rem;
  color: var(--mv-muted);
  padding: 4px 0 2px;
}

.mv118-mt-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Timeline: stack of lanes */
.mv118-mt-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual track lane */
.mv118-mt-lane {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--mv-line);
  background: rgba(255,252,244,.7);
  position: relative;
  min-height: 52px;
}
.mv118-mt-lane.primary {
  border-color: rgba(196,122,43,.3);
  background: rgba(255,248,230,.8);
}

/* Lane info sidebar */
.mv118-mt-lane-info {
  width: 140px;
  flex-shrink: 0;
  padding: 10px 14px;
  background: rgba(13,28,44,.05);
  border-right: 1px solid var(--mv-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.mv118-mt-lane-title {
  font-size: .78rem;
  font-weight: 800;
  color: var(--mv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv118-mt-primary-badge {
  display: inline-block;
  padding: 1px 7px;
  background: linear-gradient(135deg, #ffd085, #c47a2b);
  border-radius: 99px;
  font-size: .54rem;
  font-weight: 800;
  color: #21140d;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
}
.mv118-mt-lane-meta {
  font-size: .64rem;
  color: var(--mv-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lane track area — proportional colored blocks */
.mv118-mt-lane-track {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
  overflow: hidden;
}

/* Section block in timeline lane */
.mv118-mt-block {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  opacity: .88;
  cursor: pointer;
  transition: opacity .12s, transform .12s;
  min-height: 34px;
}
.mv118-mt-block:hover {
  opacity: 1;
  transform: scaleY(1.05);
}
.mv118-mt-block-label {
  font-size: .56rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* Empty lane placeholder */
.mv118-mt-empty-lane {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: var(--mv-muted-lt);
  font-style: italic;
  border: 1.5px dashed var(--mv-line);
  border-radius: 8px;
  padding: 8px 12px;
}

/* Remove track button */
.mv118-mt-remove-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mv-line);
  background: rgba(220,38,38,.08);
  color: #dc2626;
  cursor: pointer;
  font-size: .68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .1s;
  padding: 0;
  line-height: 1;
}
.mv118-mt-remove-btn:hover {
  background: rgba(220,38,38,.18);
  transform: scale(1.1);
}

/* Add track form */
.mv118-mt-add-form {
  background: rgba(255,252,244,.7);
  border: 1.5px dashed var(--mv-line);
  border-radius: 14px;
  padding: 18px 20px;
}
.mv118-mt-add-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.mv118-mt-input {
  flex: 1 1 140px;
  height: 38px;
  padding: 0 13px;
  border: 1.5px solid var(--mv-line);
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  font-size: .82rem;
  color: var(--mv-ink);
  font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.mv118-mt-input:focus {
  outline: none;
  border-color: var(--mv-accent);
  box-shadow: 0 0 0 3px rgba(196,122,43,.12);
}
.mv118-mt-input::placeholder {
  color: var(--mv-muted-lt);
}

/* Section → track assignment strip */
.mv118-mt-assign-strip {
  border-top: 1px solid var(--mv-line-lt);
  padding-top: 14px;
}
.mv118-mt-assign-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
}
.mv118-mt-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,252,244,.7);
  border: 1px solid var(--mv-line-lt);
  border-radius: 9px;
}
.mv118-mt-assign-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mv118-mt-assign-name {
  flex: 1;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mv-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv118-mt-track-sel {
  padding: 4px 10px;
  border: 1.5px solid var(--mv-line);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  font-size: .75rem;
  color: var(--mv-ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s;
}
.mv118-mt-track-sel:focus {
  outline: none;
  border-color: var(--mv-accent);
}

/* Track chip on section cards */
.mv118-sec-track-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.22);
  border-radius: 99px;
  font-size: .62rem;
  font-weight: 700;
  color: #0891b2;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Change 3: Section reorder move buttons ─────────────────────────────── */
.mv118-sec-move-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; flex-shrink: 0; background: none; border: none;
  color: var(--mv-muted-lt); font-size: .8rem; cursor: pointer;
  padding: 0; transition: color .12s; border-right: 1px solid var(--mv-line-lt);
  flex-direction: column; gap: 0;
}
.mv118-sec-move-btn:hover { color: var(--mv-accent); }
.mv118-sec-move-btn[data-mv118-disabled="1"] { opacity: .25; pointer-events: none; }

/* ── Change 5: Note progress chip ───────────────────────────────────────── */
.mv118-note-chip {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: rgba(18,160,112,.1); border: 1px solid rgba(18,160,112,.22);
  border-radius: 99px; font-size: .62rem; font-weight: 700; color: #12a070;
  white-space: nowrap;
}

/* ── Change 7: Deliverable note input ───────────────────────────────────── */
.mv118-del-note-input {
  flex: 1; min-width: 80px; max-width: 200px;
  height: 28px; padding: 0 10px; border: 1px solid var(--mv-line);
  border-radius: 7px; background: rgba(255,255,255,.7); font-size: .72rem;
  color: var(--mv-muted); font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.mv118-del-note-input:focus { outline: none; border-color: var(--mv-accent); box-shadow: 0 0 0 2px rgba(196,122,43,.12); color: var(--mv-ink); }
.mv118-del-note-input::placeholder { color: var(--mv-muted-lt); }

/* ── Change 8: ISRC copy button ─────────────────────────────────────────── */
.mv118-copy-btn {
  background: none; border: none; cursor: pointer; font-size: .85rem;
  padding: 1px 3px; border-radius: 4px; transition: opacity .12s;
  opacity: .55;
}
.mv118-copy-btn:hover { opacity: 1; }

/* ── Change 9: BPM Tap Tempo ────────────────────────────────────────────── */
.mv118-tap-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mv118-tap-btn {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd085, #c47a2b);
  border: none; cursor: pointer; font-size: .9rem; font-weight: 800;
  color: #21140d; box-shadow: 0 8px 24px rgba(196,122,43,.35);
  transition: transform .08s, box-shadow .08s; user-select: none;
}
.mv118-tap-btn:active { transform: scale(.94); box-shadow: 0 4px 12px rgba(196,122,43,.25); }
.mv118-tap-result { font-size: 1.5rem; font-weight: 900; color: var(--mv-ink); min-width: 120px; }

/* ── Change 10: Color palette swatches ──────────────────────────────────── */
.mv118-palette-swatches { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mv118-palette-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 6px rgba(0,0,0,.18); display: inline-block; flex-shrink: 0;
}

/* ── Change 11: Section preset buttons ──────────────────────────────────── */
.mv118-sec-presets { margin-top: 18px; }
.mv118-sec-preset-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mv118-sec-preset-btn {
  padding: 7px 16px; border: 2px solid var(--mv-line); border-radius: 99px;
  background: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .14s; font-family: inherit; color: var(--mv-ink);
}
.mv118-sec-preset-btn:hover { border-color: var(--mv-accent); background: rgba(196,122,43,.08); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mv118-deliver-layout { grid-template-columns: 1fr; }
  .mv118-del-sidebar    { position: static; }
}
@media (max-width: 680px) {
  #musicvideo-app.mv118-app { padding: 16px 12px 100px; }
  .mv118-header { border-radius: 22px; }
  .mv118-title-block p { font-size: 1.8rem; }
  .mv118-kpis { grid-template-columns: repeat(3,1fr); }
  .mv118-grid-2 { grid-template-columns: 1fr; }
  .mv118-grid-3 { grid-template-columns: 1fr 1fr; }
  .mv118-grid-4 { grid-template-columns: 1fr 1fr; }
  .mv118-sec-body-grid { grid-template-columns: 1fr; }
  .mv118-approach-grid { grid-template-columns: 1fr; }
  .mv118-wz  { padding: 28px 20px; }
  .mv118-hero { padding: 22px 18px; }
  .mv118-hero-title { font-size: 1.5rem; }
  .mv118-meta-grid  { grid-template-columns: 1fr 1fr; }
  .mv118-style-grid { grid-template-columns: 1fr 1fr; }
  /* Multi-track responsive */
  .mv118-mt-lane-info  { width: 80px; padding: 6px 8px; }
  .mv118-mt-lane-info .mv118-mt-lane-title { font-size: .68rem; }
  .mv118-mt-add-fields { flex-direction: column; }
  .mv118-mt-input      { flex: 1 1 100%; max-width: 100% !important; }
  /* Pulse responsive — allow horizontal scroll instead of clipping */
  .mv118-pulse-track   { height: 72px; overflow-x: auto; }
  .mv118-pulse-block   { min-width: 44px; }
  /* Tap tempo — stack vertically so result text has room */
  .mv118-tap-wrap      { flex-direction: column; align-items: flex-start; }
  .mv118-tap-result    { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  /* Section row — tighten move/delete buttons at very narrow widths */
  .mv118-sec-move-btn { width: 20px; }
  .mv118-sec-del-btn  { width: 32px; }
}

/* ── Copy-to-clipboard hover on meta values ──────────────────────────────── */
.mv118-meta-item:hover .mv118-meta-val {
  position: relative;
}
.mv118-meta-item { position: relative; }
.mv118-meta-item:not(:has(.empty)):hover::after {
  content: '📋';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  cursor: pointer;
  opacity: .45;
  pointer-events: none; /* just visual hint — actual copy is via JS */
}