.app-window {
  border-color: #ffffff33;
  background:
    linear-gradient(135deg, #09090f 0%, #0d0b13 44%, #050506 100%),
    radial-gradient(circle at 22% 0%, #00f0ff24, transparent 30%),
    radial-gradient(circle at 88% 12%, #ffe50018, transparent 28%);
}

.app-window:before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid #00f0ff26;
  box-shadow: 0 0 44px #00f0ff18, inset 0 0 38px #ffe50010;
}

.app-topbar {
  background: linear-gradient(90deg, #050506, #101018 55%, #171104);
}

.app-body aside {
  background: linear-gradient(180deg, #07070b, #0f0f16);
}

.app-body aside button {
  border-radius: 4px;
  margin-bottom: 4px;
}

.app-body aside button:hover {
  color: var(--cyan);
  background: #00f0ff10;
}

.now-playing {
  padding: 12px;
  border: 1px solid #ffffff16;
  background: linear-gradient(90deg, #101018, #09090e);
}

.tag {
  min-width: 58px;
  text-align: center;
  background: #050506;
  box-shadow: inset 0 0 18px #ffffff08;
}

.app-wave {
  background:
    linear-gradient(180deg, #040407, #0a0a11),
    repeating-linear-gradient(90deg, #05e9ff 0 3px, transparent 3px 8px, #ffe500 8px 10px, transparent 10px 18px, #ff0b72 18px 21px, transparent 21px 30px);
  opacity: 1;
}

.app-wave:before {
  content: "";
  position: absolute;
  inset: 18px 0;
  background: repeating-linear-gradient(90deg, #00f0ff 0 4px, #00f0ff22 4px 9px, #ffe500cc 9px 13px, #ff0b72bb 13px 17px, transparent 17px 26px);
  clip-path: polygon(0 48%, 4% 20%, 8% 58%, 13% 32%, 18% 66%, 24% 22%, 31% 70%, 38% 28%, 45% 56%, 52% 18%, 59% 74%, 66% 36%, 73% 63%, 81% 26%, 90% 60%, 100% 42%, 100% 60%, 90% 78%, 81% 42%, 73% 80%, 66% 48%, 59% 92%, 52% 36%, 45% 74%, 38% 46%, 31% 88%, 24% 40%, 18% 84%, 13% 50%, 8% 76%, 4% 38%, 0 58%);
  filter: drop-shadow(0 0 14px #00f0ff66);
}

.analysis-strip {
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #ffffff17;
  background: #ffffff20;
}

.analysis-strip span {
  background: linear-gradient(180deg, #101018, #09090e);
}

.track-table {
  border: 1px solid #ffffff14;
  background: #060609;
}

.table-row {
  grid-template-columns: 2.4fr repeat(5, 1fr);
}

.table-row.selected {
  background: linear-gradient(90deg, #00f0ff10, #ffe5000c);
}

.intelligence-deck {
  max-width: 1180px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #ffffff24;
  border: 1px solid #ffffff22;
}

.intelligence-deck article {
  position: relative;
  overflow: hidden;
  padding: 22px;
  min-height: 150px;
  background: linear-gradient(135deg, #0c0c12, #070708);
}

.intelligence-deck article:before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -44px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, #00f0ff30, transparent 68%);
}

.intelligence-deck article:nth-child(2):before {
  background: radial-gradient(circle, #ff0b7230, transparent 68%);
}

.intelligence-deck article:nth-child(3):before {
  background: radial-gradient(circle, #ffe50030, transparent 68%);
}

.intelligence-deck span {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.intelligence-deck h3 {
  margin: 18px 0 8px;
  text-transform: uppercase;
  font-size: 24px;
}

.intelligence-deck p {
  color: #b7b7c0;
  line-height: 1.55;
  margin: 0;
}

.product-signal-grid {
  max-width: 1180px;
  margin: 1px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ffffff22;
  border: 1px solid #ffffff18;
}

.product-signal-grid article {
  padding: 20px;
  min-height: 132px;
  background: #09090e;
}

.product-signal-grid article b {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .16em;
}

.product-signal-grid article strong,
.product-signal-grid article span {
  display: block;
}

.product-signal-grid article strong {
  margin: 14px 0 8px;
  text-transform: uppercase;
}

.product-signal-grid article span {
  color: #aaaab2;
  font-size: 13px;
  line-height: 1.45;
}

.prep-console {
  box-shadow: 0 26px 80px #0008;
}

.story-interface {
  position: absolute;
  z-index: 2;
  width: min(430px, 40vw);
  border: 1px solid #ffffff26;
  background:
    linear-gradient(135deg, #08080d 0%, #111017 62%, #070707 100%),
    radial-gradient(circle at 20% 0%, #00f0ff24, transparent 34%);
  box-shadow: 0 24px 85px #000c, 0 0 38px #00f0ff16;
  backdrop-filter: blur(16px);
}

.analysis-console {
  left: 6vw;
  top: 22vh;
}

.cue-console {
  right: 6vw;
  top: 22vh;
}

.mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #ffffff17;
  color: #a4a4ad;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.mini-top b {
  color: var(--yellow);
}

.mini-track {
  padding: 18px 18px 8px;
}

.mini-track strong,
.mini-track span {
  display: block;
}

.mini-track strong {
  font-size: 24px;
  text-transform: uppercase;
}

.mini-track span {
  margin-top: 4px;
  color: #8d8d97;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 10px 18px 16px;
  background: #ffffff1d;
}

.mini-metrics div {
  padding: 13px 10px;
  background: #060609;
}

.mini-metrics small,
.mini-metrics b {
  display: block;
}

.mini-metrics small {
  color: #85858e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.mini-metrics b {
  margin-top: 7px;
  color: var(--cyan);
  font-size: 20px;
}

.mini-metrics div:nth-child(3) b {
  color: var(--pink);
}

.mini-metrics div:nth-child(4) b {
  color: var(--yellow);
}

.mini-quality {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: #a9a9b2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.mini-quality i {
  position: relative;
  height: 6px;
  background: #ffffff18;
  overflow: hidden;
}

.mini-quality i:before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--pink));
}

.mini-quality b {
  color: #f6f4ef;
  text-align: right;
}

.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 18px 18px;
}

.mini-tags em {
  border: 1px solid #ffffff22;
  padding: 6px 8px;
  color: #d8d8dd;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.cue-screen {
  position: relative;
  height: 210px;
  margin: 18px;
  border: 1px solid #ffffff1f;
  background:
    linear-gradient(180deg, #050508, #0d0d13),
    repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 34px);
  overflow: hidden;
}

.cue-screen:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #ffffff2c;
}

.cue-wave {
  position: absolute;
  inset: 42px 0;
  background: repeating-linear-gradient(90deg, #00f0ff 0 5px, #00f0ff35 5px 10px, #ffe500d5 10px 14px, #ff0b72d0 14px 18px, transparent 18px 28px);
  clip-path: polygon(0 50%, 4% 25%, 8% 64%, 13% 30%, 18% 70%, 24% 20%, 31% 78%, 38% 32%, 45% 58%, 52% 18%, 59% 82%, 66% 34%, 73% 68%, 81% 24%, 90% 62%, 100% 42%, 100% 60%, 90% 80%, 81% 44%, 73% 86%, 66% 50%, 59% 96%, 52% 35%, 45% 74%, 38% 46%, 31% 91%, 24% 38%, 18% 86%, 13% 48%, 8% 78%, 4% 38%, 0 60%);
  filter: drop-shadow(0 0 14px #00f0ff70);
}

.marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 2px solid var(--yellow);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 8px 0 0 7px;
  text-shadow: 0 0 10px #000;
}

.marker b {
  color: var(--cyan);
}

.m1 { left: 11%; }
.m2 { left: 34%; border-color: var(--pink); }
.m3 { left: 62%; border-color: var(--cyan); }
.m4 { left: 84%; }

.cue-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px 18px;
  color: #9f9fa8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.cue-actions strong {
  color: var(--yellow);
}

@media (max-width: 900px) {
  .analysis-strip,
  .intelligence-deck,
  .product-signal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .table-row {
    grid-template-columns: 1.8fr repeat(5, .7fr);
  }

  .story-interface {
    width: min(420px, 88vw);
    opacity: .9;
  }

  .analysis-console,
  .cue-console {
    left: 6vw;
    right: auto;
    top: auto;
    bottom: 12vh;
  }
}

@media (max-width: 620px) {
  .analysis-strip,
  .intelligence-deck,
  .product-signal-grid {
    grid-template-columns: 1fr;
  }

  .track-table {
    overflow-x: auto;
  }

  .table-row {
    min-width: 620px;
  }

  .story-interface {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 92vw;
    margin: 18px auto 0;
  }

  .story-beat.floor,
  .story-beat.cue-room {
    display: block;
    padding-top: 18vh;
  }

  .story-beat.floor .chapter-copy,
  .story-beat.cue-room .chapter-copy {
    margin-left: 0;
  }

  .mini-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}