:root {
  --mtx-board-bg: url('../assets/ui/corkboard-background.png');
  --mtx-ink: #f6efe4;
  --mtx-muted: rgba(255,244,228,.72);
  --mtx-card: linear-gradient(180deg, rgba(42,27,18,.92), rgba(18,16,18,.92));
  --mtx-card-soft: linear-gradient(180deg, rgba(52,37,24,.82), rgba(17,16,18,.88));
  --mtx-border: rgba(255,205,144,.18);
  --mtx-glow: 0 18px 45px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
  --mtx-cyan: #48d9de;
  --mtx-orange: #ffac55;
  --mtx-gold: #e8cf86;
  --mtx-green: #4be39d;
  --mtx-pink: #ff7eb8;
}

#musicvideo-app,
#podcast-app {
  background:
    radial-gradient(circle at top, rgba(56,224,255,.08), transparent 28%),
    radial-gradient(circle at right top, rgba(255,166,76,.08), transparent 32%),
    linear-gradient(180deg, #041116 0%, #0d1720 34%, #111216 100%);
  color: var(--mtx-ink);
}

.mtx-shell {
  min-height: 100%;
  padding: 18px 18px 100px;
  color: var(--mtx-ink);
}

.mtx-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mtx-titleblock { min-width: 0; }
.mtx-kicker {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,245,227,.78);
  margin-bottom: 8px;
}
.mtx-showtitle {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  line-height: 1.03;
  letter-spacing: .01em;
  color: #fff8ef;
}
.mtx-subline {
  margin-top: 8px;
  color: var(--mtx-muted);
  font-size: .96rem;
}
.mtx-actions { display:flex; gap:10px; flex-wrap:wrap; }
.mtx-actions .btn,
.mtx-actions button,
.mtx-card .btn,
.mtx-card button {
  border-radius: 12px;
  border:1px solid rgba(255,210,160,.18);
  background: linear-gradient(180deg, rgba(78,56,36,.95), rgba(46,32,21,.95));
  color: #fff4e7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.22);
}
.mtx-actions .btn.ghost,
.mtx-card .btn.ghost,
.mtx-card button.ghost { background: linear-gradient(180deg, rgba(34,30,30,.92), rgba(21,20,22,.92)); }
.mtx-actions .btn:hover,
.mtx-card .btn:hover,
.mtx-card button:hover { filter: brightness(1.06); }

.mtx-board {
  position: relative;
  background-image: linear-gradient(180deg, rgba(25,18,11,.14), rgba(16,12,10,.18)), var(--mtx-board-bg);
  background-size: cover;
  background-position: center;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 26px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,226,188,.16);
  overflow: hidden;
}
.mtx-board::before,
.mtx-board::after {
  content:"";
  position:absolute;
  inset: 10px;
  pointer-events:none;
}
.mtx-board::before {
  background:
    linear-gradient(145deg, transparent 0 34%, rgba(255,140,80,.35) 34.4%, transparent 35.2% 61%, rgba(84,229,217,.28) 61.4%, transparent 62.1%),
    linear-gradient(210deg, transparent 0 20%, rgba(255,210,122,.2) 20.3%, transparent 21.2% 76%, rgba(255,116,150,.18) 76.4%, transparent 77.2%);
  opacity:.55;
}
.mtx-board::after {
  background:
    radial-gradient(circle at 22% 6%, rgba(255,255,255,.45) 0 4px, rgba(0,0,0,.22) 4px 9px, transparent 9px),
    radial-gradient(circle at 51% 4%, rgba(255,255,255,.45) 0 4px, rgba(0,0,0,.22) 4px 9px, transparent 9px),
    radial-gradient(circle at 80% 14%, rgba(255,255,255,.45) 0 4px, rgba(0,0,0,.22) 4px 9px, transparent 9px),
    radial-gradient(circle at 11% 62%, rgba(255,255,255,.42) 0 4px, rgba(0,0,0,.2) 4px 9px, transparent 9px),
    radial-gradient(circle at 71% 76%, rgba(255,255,255,.42) 0 4px, rgba(0,0,0,.2) 4px 9px, transparent 9px);
  opacity: .7;
}

.mtx-grid {
  position: relative;
  z-index: 1;
  display:grid;
  gap:16px;
}
.mtx-card {
  position:relative;
  border-radius: 20px;
  padding: 14px;
  background: var(--mtx-card);
  border:1px solid var(--mtx-border);
  box-shadow: var(--mtx-glow);
  backdrop-filter: blur(8px);
  min-width:0;
}
.mtx-card.soft { background: var(--mtx-card-soft); }
.mtx-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.mtx-card-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing:.02em;
  color:#fff7ea;
}
.mtx-card-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mtx-chip,
.mtx-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-size:.76rem;
  font-weight:800;
  color:#fff3df;
}
.mtx-chip.accent-cyan { box-shadow: inset 0 0 0 1px rgba(72,217,222,.3); color: var(--mtx-cyan); }
.mtx-chip.accent-orange { box-shadow: inset 0 0 0 1px rgba(255,172,85,.34); color: var(--mtx-orange); }
.mtx-chip.accent-green { box-shadow: inset 0 0 0 1px rgba(75,227,157,.3); color: var(--mtx-green); }
.mtx-chip.accent-pink { box-shadow: inset 0 0 0 1px rgba(255,126,184,.28); color: var(--mtx-pink); }
.mtx-muted { color: var(--mtx-muted); }
.mtx-empty {
  border:1px dashed rgba(255,225,190,.18);
  border-radius: 16px;
  padding: 18px;
  color: var(--mtx-muted);
  text-align:center;
}

/* MUSIC VIDEO */
.mvx-board-grid {
  grid-template-columns: minmax(220px, .95fr) minmax(330px, 1.45fr) minmax(260px, .9fr);
  grid-template-areas:
    'pins story side'
    'timeline timeline side'
    'release release side';
}
.mvx-card-pins { grid-area:pins; }
.mvx-card-story { grid-area:story; }
.mvx-card-side { grid-area:side; display:grid; gap:16px; align-content:start; }
.mvx-card-timeline { grid-area:timeline; }
.mvx-card-release { grid-area:release; }
.mtx-pin-list,
.mtx-stack-list { display:grid; gap:10px; }
.mtx-pin-item {
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:10px;
  align-items:start;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.mtx-pin-icon {
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,184,114,.22), rgba(255,118,94,.14));
  font-size: 1rem;
}
.mtx-pin-title { font-weight:800; color:#fff6eb; }
.mtx-pin-sub { font-size:.84rem; color:var(--mtx-muted); margin-top:3px; }

.mvx-story-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.mvx-shot-card {
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  min-height: 132px;
  border:1px solid rgba(255,255,255,.09);
  background: linear-gradient(135deg, rgba(20,24,33,.92), rgba(8,11,16,.96));
  cursor:pointer;
}
.mvx-shot-visual {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%, rgba(0,0,0,.28)),
    radial-gradient(circle at 70% 24%, rgba(255,255,255,.24), transparent 16%),
    var(--shot-grad, linear-gradient(135deg, rgba(64,217,235,.55), rgba(20,24,33,.4), rgba(255,168,84,.4)));
  filter:saturate(1.08);
}
.mvx-shot-badge {
  position:absolute; left:10px; top:10px; z-index:1;
}
.mvx-shot-copy {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding: 48px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.58));
}
.mvx-shot-title { font-weight:800; }
.mvx-shot-note { color:rgba(255,241,221,.8); font-size:.83rem; margin-top:6px; }
.mvx-wide-story-actions { display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap; }

.mvx-overlay-meter { display:grid; gap:10px; }
.mvx-metric {
  display:grid; gap:6px;
}
.mvx-metric-head { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; color:var(--mtx-muted); }
.mvx-metric-bar {
  height: 8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden;
}
.mvx-metric-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--mtx-cyan), var(--mtx-orange)); }
.mvx-toggle-list { display:grid; gap:10px; }
.mvx-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06);
}
.mvx-toggle span { font-weight:700; color:#fff5e6; }
.mvx-toggle small { display:block; color:var(--mtx-muted); font-size:.77rem; margin-top:2px; }
.mvx-toggle input { width:16px; height:16px; accent-color: #28d0c2; }

.mvx-timeline-wrap { display:grid; gap:12px; }
.mvx-timeline-track {
  display:flex;
  min-height: 54px;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
}
.mvx-timeline-block {
  min-width: 82px;
  padding: 10px 12px;
  border-right:1px solid rgba(0,0,0,.18);
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff8ef;
}
.mvx-timeline-block:last-child { border-right:0; }
.mvx-timeline-name { font-weight:800; font-size:.88rem; }
.mvx-timeline-time { font-size:.75rem; color:rgba(255,249,237,.78); }
.mvx-lanes { display:grid; gap:10px; }
.mvx-lane {
  display:grid; grid-template-columns: 88px 1fr; gap:10px; align-items:center;
}
.mvx-lane-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mtx-muted); font-weight:800; }
.mvx-lane-bar {
  display:flex; gap:4px; min-height: 16px;
}
.mvx-lane-seg {
  border-radius:999px; min-width:14px; opacity:.95;
}
.mvx-release-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.mvx-release-chip {
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:14px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); font-weight:700; min-width:0;
}
.mvx-release-chip input { margin-top:3px; width:16px; height:16px; accent-color: #49d9de; }
.mvx-release-chip small { display:block; font-size:.76rem; color:var(--mtx-muted); margin-top:4px; }
.mvx-release-chip.on { box-shadow: inset 0 0 0 1px rgba(72,217,222,.26); }

/* PODCAST */
.pdx-board-grid {
  grid-template-columns: minmax(260px,.8fr) minmax(360px,1.2fr) minmax(300px,.95fr);
  grid-template-areas:
    'guests script timeline'
    'feed feed toolkit'
    'planner profile setup';
}
.pdx-card-guests { grid-area:guests; }
.pdx-card-script { grid-area:script; }
.pdx-card-timeline { grid-area:timeline; }
.pdx-card-toolkit { grid-area:toolkit; }
.pdx-card-feed { grid-area:feed; }
.pdx-card-planner { grid-area:planner; }
.pdx-card-profile { grid-area:profile; }
.pdx-card-setup { grid-area:setup; }
.pdx-guest-list,
.pdx-feed-list,
.pdx-episode-list { display:grid; gap:10px; }
.pdx-guest-card,
.pdx-note-card,
.pdx-episode-card {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.pdx-guest-top,
.pdx-episode-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.pdx-avatar {
  width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.24), transparent 35%), linear-gradient(135deg, rgba(255,188,122,.42), rgba(72,217,222,.3));
  display:grid; place-items:center; font-weight:900; color:#fff;
}
.pdx-guest-row { display:grid; grid-template-columns: 42px 1fr; gap:10px; align-items:start; }
.pdx-card-title { font-weight:800; color:#fff7eb; }
.pdx-card-sub { color:var(--mtx-muted); font-size:.84rem; margin-top:3px; }
.pdx-segment-script { display:grid; gap:10px; }
.pdx-script-field { display:grid; gap:6px; }
.pdx-script-field span,
.pdx-mini-form label,
.pdx-form-grid label span {
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mtx-muted); font-weight:900;
}
.pdx-script-field textarea,
.pdx-script-field input,
.pdx-mini-form input,
.pdx-mini-form textarea,
.pdx-mini-form select,
.pdx-form-grid input,
.pdx-form-grid textarea,
.pdx-form-grid select {
  width:100%; min-height:42px; font: inherit; color:#fff7ee;
  padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background: rgba(11,18,21,.58);
}
.pdx-script-field textarea,
.pdx-mini-form textarea,
.pdx-form-grid textarea { resize:vertical; }
.pdx-mini-form { display:grid; gap:10px; }
.pdx-form-grid { display:grid; gap:10px; }
.pdx-form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }

.pdx-wave {
  border-radius: 16px;
  min-height: 176px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(24,26,33,.96), rgba(7,10,16,.96));
  border:1px solid rgba(255,255,255,.08);
}
.pdx-wave-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/48px 100%,
    linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/100% 36px;
  opacity:.35;
}
.pdx-wave-track {
  position:absolute; inset:16px 12px 24px;
  display:flex; align-items:stretch; gap:2px;
}
.pdx-wave-seg {
  flex: var(--dur, 1) 1 0;
  position:relative;
  border-radius: 10px;
  overflow:hidden;
  background: var(--seg-color, linear-gradient(180deg, rgba(72,217,222,.75), rgba(32,85,108,.8)));
}
.pdx-wave-seg::before,
.pdx-wave-seg::after {
  content:"";
  position:absolute; left:0; right:0; top:50%; height: 60%; transform: translateY(-50%);
  background:
    radial-gradient(circle at 6px 50%, rgba(255,255,255,.55) 0 1px, transparent 1.4px) 0 0/12px 100%,
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  clip-path: polygon(0 50%, 5% 8%, 10% 74%, 15% 20%, 20% 84%, 25% 14%, 30% 64%, 35% 18%, 40% 82%, 45% 32%, 50% 68%, 55% 8%, 60% 78%, 65% 22%, 70% 88%, 75% 20%, 80% 75%, 85% 30%, 90% 82%, 95% 24%, 100% 50%, 100% 100%, 0 100%);
  opacity:.52;
}
.pdx-wave-label {
  position:absolute; top:10px; left:10px; font-size:.74rem; font-weight:800; color:#fdf2dd;
}
.pdx-wave-foot {
  display:flex; justify-content:space-between; gap:10px; margin-top: 10px; color:var(--mtx-muted); font-size:.8rem;
}
.pdx-tools-grid { display:grid; gap:10px; }
.pdx-check {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); font-weight:700;
}
.pdx-check input { width:16px; height:16px; accent-color: #48d9de; }
.pdx-check.on { box-shadow: inset 0 0 0 1px rgba(72,217,222,.24); }
.pdx-tool-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pdx-note-card {
  display:grid; gap:8px;
}
.pdx-note-head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.pdx-note-body { color:#fff5e7; }
.pdx-note-body.small { font-size:.88rem; color:var(--mtx-muted); }
.pdx-episode-card.active { box-shadow: inset 0 0 0 1px rgba(72,217,222,.28); }
.pdx-episode-card .progress {
  margin-top:10px; height:8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden;
}
.pdx-episode-card .progress > div { height:100%; background: linear-gradient(90deg, var(--mtx-cyan), var(--mtx-orange)); }

.mtx-inline-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mtx-inline-actions .mini,
.mtx-card .mini { padding: 7px 10px; min-height: 34px; font-size: .82rem; }
.mtx-rail { display:flex; gap:8px; flex-wrap:wrap; }
.mtx-divider { height:1px; background: rgba(255,255,255,.08); margin: 12px 0; }
.mtx-small { font-size:.83rem; color:var(--mtx-muted); }
.mtx-right { margin-left:auto; }

@media (max-width: 1220px) {
  .mvx-board-grid,
  .pdx-board-grid { grid-template-columns: 1fr 1fr; }
  .mvx-board-grid {
    grid-template-areas:
      'story story'
      'pins side'
      'timeline timeline'
      'release release';
  }
  .pdx-board-grid {
    grid-template-areas:
      'guests timeline'
      'script script'
      'feed toolkit'
      'planner profile'
      'setup setup';
  }
}
@media (max-width: 860px) {
  .mtx-shell { padding: 12px 12px 90px; }
  .mtx-board { padding: 12px; border-radius: 22px; }
  .mvx-board-grid,
  .pdx-board-grid,
  .pdx-form-grid.two,
  .mvx-release-grid,
  .mvx-story-grid { grid-template-columns: 1fr; }
  .mvx-board-grid {
    grid-template-areas:
      'story'
      'pins'
      'side'
      'timeline'
      'release';
  }
  .pdx-board-grid {
    grid-template-areas:
      'guests'
      'script'
      'timeline'
      'toolkit'
      'feed'
      'planner'
      'profile'
      'setup';
  }
}
@media (max-width: 520px) {
  .mtx-shell { padding: 10px 10px 92px; }
  .mtx-topbar { align-items:flex-start; }
  .mtx-showtitle { font-size: 1.28rem; }
  .mtx-card, .mtx-board { border-radius: 18px; }
  .pdx-script-field textarea,
  .pdx-script-field input,
  .pdx-mini-form input,
  .pdx-mini-form textarea,
  .pdx-mini-form select,
  .pdx-form-grid input,
  .pdx-form-grid textarea,
  .pdx-form-grid select { font-size:16px; }
}