:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #a7b4cc;
  --muted-strong: #d2dbeb;
  --night: #000000;
  --panel: rgba(4, 20, 42, 0.96);
  --panel-strong: #071a35;
  --line: rgba(114, 171, 224, 0.2);
  --line-bright: rgba(40, 220, 255, 0.5);
  --blue: #28dcff;
  --blue-deep: #006fbf;
  --gold: #ffb629;
  --gold-hot: #ffe08a;
  --pink: #ff3ba7;
  --green: #65f2bd;
  --danger: #ff6a75;
  --radius: 22px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mix-flow-window { margin: 0 0 26px; border: 1px solid var(--gold); border-radius: 18px; background: var(--panel-strong); }
.mix-flow-window summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; cursor: pointer; list-style: none; }
.mix-flow-window summary::-webkit-details-marker { display: none; }
.mix-flow-window summary strong { display: block; color: var(--gold-hot); font-size: 22px; }
.mix-flow-window summary small { display: block; margin-top: 6px; font-size: 16px; color: var(--muted-strong); }
.mix-flow-window summary b { font-size: 12px; letter-spacing: .06em; color: var(--gold); }
.mix-flow-body { padding: 0 22px 22px; }
.mix-flow-body label { display: block; font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.mix-flow-body p { font-size: 16px; line-height: 1.55; color: var(--muted-strong); }
.mix-flow-body textarea { display: block; width: 100%; min-height: 160px; resize: vertical; padding: 16px; font: inherit; font-size: 18px; line-height: 1.6; color: var(--ink); background: #030b18; border: 1px solid var(--line-bright); border-radius: 12px; }
.mix-flow-body textarea:focus-visible, .mix-flow-window summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.mix-flow-examples, .mix-flow-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mix-flow-examples button { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #132741; font: inherit; font-size: 15px; cursor: pointer; }
.mix-flow-actions button { min-height: 48px; }
.mix-flow-actions button:disabled { opacity: .45; cursor: default; }
.mix-flow-timeline { padding: 0; list-style: none; display: grid; gap: 10px; }
.mix-flow-timeline li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; background: #071226; line-height: 1.5; font-size: 17px; }
.mix-flow-timeline button { min-width: 65px; min-height: 44px; padding: 8px; color: var(--gold-hot); background: transparent; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-weight: 700; cursor: pointer; }
.mix-flow-issues { color: #ffb6bd; line-height: 1.6; font-size: 17px; padding-left: 22px; }
.mix-flow-issues:empty { display: none; }
@media (max-width: 600px) { .mix-flow-window summary { align-items: flex-start; flex-direction: column; padding: 18px; } .mix-flow-body { padding: 0 16px 18px; } .mix-flow-actions .secondary-button { flex: 1 1 100%; } .mix-flow-timeline li { align-items: flex-start; } }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: #000;
  overflow-x: hidden;
}

.site-header,
.studio-shell,
footer {
  position: relative;
  z-index: 1;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="range"] {
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

button {
  color: inherit;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(100px);
  display: none;
  pointer-events: none;
}

.ambient-one {
  top: 8rem;
  left: -16rem;
  background: var(--pink);
}

.ambient-two {
  right: -18rem;
  bottom: 8rem;
  background: var(--blue);
}

.site-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 182, 41, 0.24);
  background: linear-gradient(90deg, rgba(1, 8, 18, 0.99), rgba(5, 24, 48, 0.97), rgba(1, 8, 18, 0.99));
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -65% 0 -95% 48%;
  background: linear-gradient(90deg, transparent, rgba(1, 8, 18, 0.28)), url("./doc-in-the-mix-brown.jpg") center 23% / cover no-repeat;
  opacity: 0.3;
  filter: grayscale(0.25) contrast(1.08);
  pointer-events: none;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--gold-hot), var(--gold) 42%, #a56600 100%);
  box-shadow: 0 0 0 4px rgba(255, 182, 41, 0.1), 0 0 28px rgba(255, 59, 167, 0.3);
}

.brand-mark span {
  width: 22px;
  height: 22px;
  border: 6px solid #07101f;
  border-radius: 50%;
  position: relative;
}

.brand-mark span::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  color: var(--gold);
  font-size: 1.08rem;
  letter-spacing: 0.13em;
}

.brand small {
  margin-top: 0.1rem;
  color: var(--muted-strong);
  font-size: 0.88rem;
  font-weight: 650;
}

.device-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted-strong);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

.device-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(103, 231, 180, 0.72);
}

.studio-shell {
  width: min(1380px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.4rem, 3.5vw, 3rem) 0 4rem;
}

.intro {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  max-width: none;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(255, 182, 41, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(40, 220, 255, 0.08), transparent 24rem),
    linear-gradient(145deg, rgba(6, 26, 52, 0.97), rgba(1, 9, 22, 0.99));
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 12, 28, 0.48), rgba(2, 12, 28, 0.08)), url("./doc-in-the-mix-cream.jpg") 76% 18% / cover no-repeat;
  opacity: 0.32;
  filter: saturate(0.74) contrast(1.06) brightness(0.96);
  pointer-events: none;
}

.intro > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.19em;
}

.intro h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(2.35rem, 5.3vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.intro h1 span {
  display: block;
  color: var(--gold-hot);
  font-size: 0.43em;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-copy > p:last-of-type {
  max-width: 730px;
  margin: 1.2rem 0 0;
  color: var(--muted-strong);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.hero-features span {
  padding: 0.58rem 0.78rem;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 999px;
  color: #e5faff;
  background: rgba(40, 220, 255, 0.07);
  font-size: 0.82rem;
  font-weight: 800;
}

.doc-hero {
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto;
}

.doc-photo-wrap {
  position: relative;
  height: 290px;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 41, 0.55);
  border-radius: 28px 28px 76px 28px;
  background: #06152c;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.52), 0 0 44px rgba(255, 59, 167, 0.16);
}

.doc-photo-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.96;
  filter: saturate(1.04) contrast(1.03);
}

.doc-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(1, 8, 18, 0.9));
}

.photo-glow {
  position: absolute;
  inset: auto 12% 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--blue));
  box-shadow: 0 0 24px rgba(255, 59, 167, 0.7);
}

.doc-hero figcaption {
  position: absolute;
  right: -0.35rem;
  bottom: 1rem;
  z-index: 1;
  min-width: 76%;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 14, 30, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

.doc-hero figcaption strong,
.doc-hero figcaption span {
  display: block;
}

.doc-hero figcaption strong {
  color: var(--gold-hot);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.doc-hero figcaption span {
  margin-top: 0.18rem;
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, 0.8fr);
  gap: 1.25rem;
  align-items: start;
}

.deck-panel,
.control-panel,
.progress-panel,
.result-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(91, 167, 232, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(40, 220, 255, 0.07), transparent 22rem),
    linear-gradient(145deg, rgba(5, 25, 50, 0.97), rgba(1, 8, 20, 0.99));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.deck-panel::after,
.control-panel::after,
.progress-panel::after,
.result-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center 16%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.38;
  filter: saturate(0.78) contrast(1.06) brightness(0.94);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.7) 48%, transparent 90%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.7) 48%, transparent 90%);
  pointer-events: none;
}

.deck-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.04), rgba(2, 14, 30, 0.2)), url("./doc-in-the-mix-party.jpg");
}

.control-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.04), rgba(2, 14, 30, 0.22)), url("./doc-in-the-mix-brown.jpg");
  background-position: 58% 15%;
}

.progress-panel::after,
.result-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.02), rgba(2, 14, 30, 0.2)), url("./doc-in-the-mix-cream.jpg");
  background-position: center 12%;
}

.deck-panel > *,
.control-panel > *,
.progress-panel > *,
.result-panel > * {
  position: relative;
  z-index: 1;
}

.deck-panel,
.control-panel {
  border-radius: var(--radius);
}

.deck-panel {
  position: relative;
}

.deck-panel::before,
.control-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 1.2rem;
  left: 1.2rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--blue));
  box-shadow: 0 0 18px rgba(255, 59, 167, 0.46);
}

.upload-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.upload-target {
  width: 100%;
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 2rem;
  border: 1.5px dashed rgba(40, 220, 255, 0.5);
  border-radius: 17px;
  color: var(--ink);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 59, 167, 0.14), transparent 42%),
    radial-gradient(circle at 68% 72%, rgba(40, 220, 255, 0.12), transparent 46%),
    rgba(1, 10, 24, 0.5);
  cursor: pointer;
  transition: 180ms ease;
}

.upload-target:hover,
.upload-panel.dragging .upload-target {
  border-color: var(--gold);
  background:
    radial-gradient(circle at center, rgba(255, 182, 41, 0.16), transparent 58%),
    rgba(2, 17, 36, 0.9);
  transform: translateY(-2px);
}

.upload-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(135deg, var(--gold-hot), var(--gold) 48%, #ff6b4a);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(245, 184, 46, 0.24);
}

.upload-copy strong,
.upload-copy small {
  display: block;
  text-align: center;
}

.upload-copy strong {
  font-size: 1.3rem;
}

.upload-copy small {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.93rem;
}

.track-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.instrumental-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 0 50%, rgba(103, 231, 180, 0.08), transparent 34%),
    rgba(4, 11, 19, 0.34);
}

.instrumental-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.lock-mark {
  min-width: 48px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(103, 231, 180, 0.42);
  border-radius: 999px;
  color: var(--green);
  background: rgba(103, 231, 180, 0.08);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.instrumental-kicker {
  margin: 0 0 0.3rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.instrumental-heading h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.instrumental-heading > div > p:last-child {
  max-width: 650px;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.instrumental-empty {
  margin-top: 1rem;
}

.beat-vault {
  margin-top: 1rem;
  border: 1px solid rgba(226, 231, 238, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(232, 236, 242, 0.08), rgba(77, 85, 98, 0.07) 48%, rgba(244, 247, 250, 0.06)),
    rgba(2, 8, 16, 0.58);
  overflow: hidden;
}

.beat-vault summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid transparent;
  color: #f2f5f8;
  cursor: pointer;
  list-style: none;
}

.beat-vault[open] summary {
  border-bottom-color: rgba(226, 231, 238, 0.18);
}

.beat-vault summary::-webkit-details-marker {
  display: none;
}

.beat-vault summary b,
.beat-vault summary small {
  display: block;
}

.beat-vault summary b {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
}

.beat-vault summary small {
  margin-top: 0.22rem;
  color: #aeb8c5;
  font-size: 0.76rem;
  line-height: 1.35;
}

.vault-count {
  flex: 0 0 auto;
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(246, 248, 251, 0.38);
  border-radius: 999px;
  color: #10151d;
  background: linear-gradient(135deg, #777f8b, #f7f9fb 46%, #aab1bc 70%, #eef1f5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 16px rgba(0, 0, 0, 0.28);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.beat-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
}

.beat-vault-button {
  position: relative;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.18rem 0.65rem;
  padding: 0.72rem;
  border: 1px solid #f5f7fa;
  border-radius: 12px;
  color: #080c12;
  background:
    linear-gradient(112deg, transparent 0 29%, rgba(255, 255, 255, 0.78) 40%, transparent 53%),
    linear-gradient(145deg, #606873 0%, #d9dee5 25%, #f8fafc 46%, #a4acb7 67%, #eef1f5 84%, #707883 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.92),
    inset 0 -1px 1px rgba(31, 37, 45, 0.36),
    0 7px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.beat-vault-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.3) 38%, transparent 60%);
  transform: translateX(-115%);
  transition: transform 420ms ease;
}

.beat-vault-button:hover {
  transform: translateY(-2px);
  border-color: #ffffff;
  box-shadow: inset 0 1px 1px #fff, 0 10px 24px rgba(0, 0, 0, 0.4);
}

.beat-vault-button:hover::after {
  transform: translateX(115%);
}

.beat-vault-button:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.82);
  outline-offset: 3px;
}

.beat-vault-button.active {
  border-color: #67e7b4;
  box-shadow:
    inset 0 1px 1px #fff,
    0 0 0 2px rgba(103, 231, 180, 0.3),
    0 10px 26px rgba(0, 0, 0, 0.42);
}

.beat-vault-button.loading {
  animation: platinum-pulse 900ms ease-in-out infinite alternate;
}

.beat-vault-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.beat-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  grid-row: 1 / -1;
  border: 1px solid rgba(0, 0, 0, 0.26);
  border-radius: 50%;
  color: #f8fafc;
  background: linear-gradient(145deg, #05070a, #323944);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  font-weight: 950;
}

.beat-vault-copy {
  min-width: 0;
}

.beat-vault-copy strong,
.beat-vault-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beat-vault-copy strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.beat-vault-copy small {
  margin-top: 0.18rem;
  color: #3f4854;
  font-size: 0.69rem;
  font-weight: 750;
}

.beat-vault-action {
  color: #18212b;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.beat-vault-button.active .beat-vault-action {
  color: #07553d;
}

.beat-vault-status {
  display: block;
  padding: 0 0.95rem 0.95rem;
  color: #c6ced8;
  font-size: 0.76rem;
  line-height: 1.45;
}

@keyframes platinum-pulse {
  from { filter: brightness(0.86); }
  to { filter: brightness(1.16); }
}

.instrumental-upload {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px dashed rgba(103, 231, 180, 0.38);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(103, 231, 180, 0.04);
  cursor: pointer;
}

.instrumental-upload:hover {
  border-color: var(--green);
  background: rgba(103, 231, 180, 0.08);
}

.instrumental-upload > span:first-child {
  color: var(--green);
  font-size: 1.35rem;
}

.instrumental-upload strong,
.instrumental-upload small {
  display: block;
  text-align: left;
}

.instrumental-upload strong {
  font-size: 0.9rem;
}

.instrumental-upload small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.instrumental-loaded {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(103, 231, 180, 0.26);
  border-radius: 14px;
  background: rgba(3, 14, 18, 0.62);
}

.instrumental-play {
  border-color: rgba(103, 231, 180, 0.48);
  color: var(--green);
  background: rgba(103, 231, 180, 0.07);
}

.instrumental-copy {
  min-width: 0;
}

.instrumental-copy strong,
.instrumental-copy small {
  display: block;
}

.locked-badge {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.instrumental-copy strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instrumental-copy small {
  margin-top: 0.22rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instrumental-bpm {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.2rem 0.45rem;
}

.instrumental-bpm label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.instrumental-bpm input {
  width: 64px;
  grid-row: span 2;
  padding: 0.45rem 0.35rem;
  border: 1px solid rgba(103, 231, 180, 0.28);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: 800;
}

.instrumental-bpm span {
  color: var(--green);
  font-size: 0.75rem;
}

.instrumental-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.instrumental-volume {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(103, 231, 180, 0.18);
}

.instrumental-volume label {
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.instrumental-volume output {
  min-width: 42px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.instrumental-volume small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.acapella-panel {
  background:
    radial-gradient(circle at 0 50%, rgba(71, 215, 255, 0.1), transparent 36%),
    rgba(4, 10, 22, 0.42);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-loaded {
  border-color: rgba(71, 215, 255, 0.4);
}

.acapella-panel .instrumental-loaded {
  background: rgba(3, 10, 22, 0.68);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-kicker,
.acapella-panel .instrumental-bpm span,
.acapella-panel .locked-badge,
.acapella-panel .instrumental-volume output {
  color: var(--blue);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-upload,
.acapella-panel .instrumental-play {
  background: rgba(71, 215, 255, 0.07);
}

.acapella-panel .instrumental-upload {
  border-color: rgba(71, 215, 255, 0.42);
}

.acapella-panel .instrumental-upload:hover {
  border-color: var(--blue);
  background: rgba(71, 215, 255, 0.11);
}

.acapella-panel .instrumental-upload > span:first-child,
.acapella-panel .instrumental-play {
  color: var(--blue);
}

.acapella-panel .instrumental-bpm input {
  border-color: rgba(71, 215, 255, 0.34);
}

.acapella-panel .instrumental-bpm.clock-locked input {
  border-color: rgba(71, 215, 255, 0.7);
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(71, 215, 255, 0.08);
  cursor: not-allowed;
}

.acapella-panel .instrumental-bpm.clock-locked span {
  font-weight: 850;
}

.acapella-panel .instrumental-volume {
  border-top-color: rgba(71, 215, 255, 0.2);
}

.vocal-arrangement-sync {
  display: grid;
  grid-column: 2 / -1;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.phrase-sync-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(71, 215, 255, 0.42);
  border-radius: 13px;
  color: var(--ink);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.1), rgba(245, 184, 46, 0.05));
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.phrase-sync-button:hover {
  border-color: rgba(71, 215, 255, 0.8);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.15), rgba(245, 184, 46, 0.08));
  transform: translateY(-1px);
}

.phrase-sync-button:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.34);
  outline-offset: 2px;
}

.phrase-sync-button.active {
  border-color: var(--gold);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.16), rgba(245, 184, 46, 0.15));
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.12), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.phrase-sync-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(71, 215, 255, 0.5);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.09);
  font-size: 0.78rem;
  font-weight: 950;
}

.phrase-sync-button.active .phrase-sync-icon {
  border-color: rgba(245, 184, 46, 0.68);
  color: var(--gold);
  background: rgba(245, 184, 46, 0.1);
}

.phrase-sync-button strong,
.phrase-sync-button small {
  display: block;
}

.phrase-sync-button strong {
  font-size: 0.86rem;
}

.phrase-sync-button small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.phrase-sync-button b {
  min-width: 42px;
  padding: 0.3rem 0.42rem;
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(147, 166, 191, 0.1);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.phrase-sync-button.active b {
  color: #171005;
  background: var(--gold);
}

.vocal-arrangement-sync p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.vocal-beat-nudge {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding: 0.78rem;
  border: 1px solid rgba(245, 184, 46, 0.28);
  border-radius: 12px;
  background: rgba(245, 184, 46, 0.045);
}

.vocal-beat-nudge > span {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.vocal-nudge-controls {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(125px, auto) minmax(112px, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.vocal-nudge-controls button,
.vocal-nudge-reset {
  min-height: 40px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(71, 215, 255, 0.34);
  border-radius: 9px;
  color: var(--ink);
  background: rgba(71, 215, 255, 0.07);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
}

.vocal-nudge-controls button:hover,
.vocal-nudge-reset:hover {
  border-color: var(--blue);
  background: rgba(71, 215, 255, 0.12);
}

.vocal-nudge-controls button:focus-visible,
.vocal-nudge-reset:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.3);
  outline-offset: 2px;
}

.vocal-nudge-controls button:disabled,
.vocal-nudge-reset:disabled {
  opacity: 0.42;
  cursor: default;
}

.vocal-nudge-controls output {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vocal-nudge-reset {
  justify-self: start;
  min-height: 34px;
  border-color: rgba(245, 184, 46, 0.28);
  color: var(--gold);
  background: transparent;
}

.vocal-beat-nudge small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.track-heading,
.deck-overview,
.track-actions,
.transport-row,
.result-topline,
.result-track-line,
.control-label,
.section-heading,
.switch-row,
.download-row {
  display: flex;
  align-items: center;
}

.track-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.deck-overview {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.deck-overview h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.25;
}

.deck-overview p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.track-actions {
  flex: 0 0 auto;
  gap: 0.9rem;
}

.text-button.muted {
  color: var(--muted-strong);
}

.text-button:disabled {
  color: #667082;
  cursor: default;
}

.track-decks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.2rem;
}

.track-deck {
  min-width: 0;
  min-height: 92px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(3, 8, 17, 0.5);
}

.track-deck.loaded.active {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(245, 184, 46, 0.13), rgba(7, 14, 26, 0.8));
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.08);
}

.deck-select,
.track-deck.empty {
  width: 100%;
  min-height: 90px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.deck-select {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.9rem 0.8rem 0.7rem;
  text-align: left;
}

.deck-letter {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(71, 215, 255, 0.35);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  font-size: 0.76rem;
  font-weight: 900;
}

.track-deck.active .deck-letter {
  border-color: rgba(245, 184, 46, 0.48);
  color: var(--gold);
  background: rgba(245, 184, 46, 0.09);
}

.deck-copy {
  min-width: 0;
}

.deck-copy strong,
.deck-copy small {
  display: block;
}

.deck-copy strong {
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-copy small {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.69rem;
  white-space: nowrap;
}

.deck-remove {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(3, 8, 17, 0.82);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.deck-remove:hover {
  color: white;
  background: rgba(255, 106, 117, 0.22);
}

.track-deck.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  border: 1px dashed rgba(147, 166, 191, 0.24);
  color: var(--muted);
}

.track-deck.empty:hover {
  border-color: rgba(71, 215, 255, 0.48);
  color: var(--blue);
  background: rgba(71, 215, 255, 0.05);
}

.track-deck.empty .deck-letter {
  width: 27px;
  height: 27px;
  opacity: 0.72;
}

.deck-empty-copy {
  font-size: 0.72rem;
  font-weight: 750;
}

.active-track-heading {
  align-items: flex-end;
  margin: 0 0 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.preview-note {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.track-panel.dragging {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(245, 184, 46, 0.14);
}

.track-label {
  display: block;
  margin-bottom: 0.26rem;
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.track-heading h2 {
  max-width: min(58vw, 560px);
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-heading p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.text-button,
.icon-button {
  border: 0;
  cursor: pointer;
}

.text-button {
  padding: 0.7rem 0;
  color: var(--gold);
  background: none;
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.waveform-shell {
  position: relative;
  height: 155px;
  overflow: hidden;
  border: 1px solid rgba(71, 215, 255, 0.2);
  border-radius: 14px;
  background: #040a14;
}

#waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wave-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--blue) 12.5%);
  pointer-events: none;
}

.playhead {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(245, 184, 46, 0.7);
  transform: translateX(-2px);
  pointer-events: none;
}

.transport-row {
  gap: 0.9rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.round-button {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  cursor: pointer;
}

.round-button span {
  transform: translateX(1px);
}

.transport-time {
  display: flex;
  gap: 0.42rem;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}

.bpm-readout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.bpm-readout label {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.bpm-readout input {
  width: 76px;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: 800;
}

.bpm-readout span {
  color: var(--green);
  font-size: 0.875rem;
}

.master-bpm-readout {
  margin-left: 0;
}

.song-bpm-readout {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(71, 215, 255, 0.2);
  border-radius: 10px;
  background: rgba(71, 215, 255, 0.045);
}

.song-bpm-readout span {
  color: var(--blue);
  font-weight: 800;
}

.preset-section {
  padding: clamp(1.1rem, 3vw, 1.7rem);
}

.section-heading {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-heading > span {
  max-width: 330px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: right;
}

.step-number {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin: 0 0 0.45rem;
  border: 1px solid rgba(245, 184, 46, 0.44);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.07);
  font-size: 0.75rem;
  font-weight: 900;
}

.section-heading h2,
.result-panel h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}

.preset-card {
  min-height: 150px;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(155deg, rgba(7, 29, 58, 0.76), rgba(1, 8, 19, 0.78));
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.preset-card:hover {
  transform: translateY(-2px);
  border-color: rgba(40, 220, 255, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 22px rgba(40, 220, 255, 0.08);
}

.preset-card.active {
  border-color: var(--gold);
  background: linear-gradient(150deg, rgba(255, 59, 167, 0.15), rgba(255, 182, 41, 0.1) 48%, rgba(8, 8, 25, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 182, 41, 0.11), 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 24px rgba(255, 59, 167, 0.09);
}

.preset-card strong,
.preset-card small {
  display: block;
}

.preset-card strong {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.25;
}

.preset-card small {
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.preset-art {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0.15rem;
}

.preset-art i {
  display: block;
  flex: 1;
  max-width: 18px;
  border-radius: 20px;
  background: linear-gradient(to top, var(--blue-deep), var(--blue));
  box-shadow: 0 0 12px rgba(71, 215, 255, 0.2);
}

.preset-card.active .preset-art i {
  background: linear-gradient(to top, #a56600, var(--gold-hot));
  box-shadow: 0 0 12px rgba(245, 184, 46, 0.28);
}

.slowride-art i:nth-child(1) { height: 20px; }
.slowride-art i:nth-child(2) { height: 45px; }
.slowride-art i:nth-child(3) { height: 29px; }
.scratch-art i:nth-child(1) { height: 42px; transform: rotate(16deg); }
.scratch-art i:nth-child(2) { height: 25px; transform: rotate(-13deg); }
.scratch-art i:nth-child(3) { height: 39px; transform: rotate(18deg); }
.coast-art i:nth-child(1) { height: 24px; border-radius: 60% 30%; }
.coast-art i:nth-child(2) { height: 39px; border-radius: 35% 60%; }
.coast-art i:nth-child(3) { height: 27px; border-radius: 60% 35%; }
.total-art i:nth-child(1) { height: 46px; }
.total-art i:nth-child(2) { height: 34px; }
.total-art i:nth-child(3) { height: 47px; }
.soul-art i:nth-child(1) { height: 19px; border-radius: 50% 50% 20% 20%; }
.soul-art i:nth-child(2) { height: 32px; border-radius: 55% 55% 25% 25%; }
.soul-art i:nth-child(3) { height: 24px; border-radius: 50% 50% 20% 20%; }
.twerk-art i:nth-child(1) { height: 47px; transform: skewX(-10deg); }
.twerk-art i:nth-child(2) { height: 18px; transform: skewX(12deg); }
.twerk-art i:nth-child(3) { height: 44px; transform: skewX(-8deg); }
.funk-art i:nth-child(1) { height: 29px; transform: translateY(7px) rotate(-12deg); }
.funk-art i:nth-child(2) { height: 44px; transform: rotate(9deg); }
.funk-art i:nth-child(3) { height: 22px; transform: translateY(-5px) rotate(-9deg); }
.rnb-art i:nth-child(1) { height: 18px; border-radius: 50%; }
.rnb-art i:nth-child(2) { height: 27px; border-radius: 50%; }
.rnb-art i:nth-child(3) { height: 20px; border-radius: 50%; }
.edm-art i:nth-child(1) { height: 16px; clip-path: polygon(0 100%, 100% 100%, 100% 62%); }
.edm-art i:nth-child(2) { height: 31px; clip-path: polygon(0 100%, 100% 100%, 100% 34%); }
.edm-art i:nth-child(3) { height: 48px; clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.gospel-art i:nth-child(1) { height: 34px; border-radius: 50% 50% 8px 8px; }
.gospel-art i:nth-child(2) { height: 47px; border-radius: 50% 50% 8px 8px; }
.gospel-art i:nth-child(3) { height: 38px; border-radius: 50% 50% 8px 8px; }

.control-panel {
  position: sticky;
  top: 1rem;
  padding: clamp(1.15rem, 3vw, 1.7rem);
}

.section-heading.compact {
  align-items: center;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
  font-size: 1.2rem;
}

.control-list {
  display: grid;
  gap: 1.2rem;
}

.control-group {
  padding-bottom: 0.1rem;
}

.control-label {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.control-label label,
.select-group label {
  color: var(--muted-strong);
  font-size: 0.86rem;
  font-weight: 700;
}

.control-label output {
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  border-radius: 99px;
  background: linear-gradient(to right, var(--gold) 0 var(--fill, 50%), rgba(145, 166, 191, 0.2) var(--fill, 50%) 100%);
  cursor: pointer;
}

input[type="range"]:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.control-group.tempo-locked .control-label output,
.control-group.tempo-locked .control-help {
  color: var(--green);
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  appearance: none;
  border: 3px solid #07101f;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.42), 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #07101f;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.42);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.44rem;
  color: #6f829d;
  font-size: 0.69rem;
}

.control-help {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.fx-preview-button {
  width: 100%;
  min-height: 42px;
  margin-top: 0.65rem;
  border: 1px solid rgba(245, 184, 46, 0.4);
  border-radius: 10px;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.07);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.fx-preview-button:hover {
  background: rgba(245, 184, 46, 0.13);
}

.fx-preview-button:focus-visible {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.dj-tag-tool {
  display: grid;
  gap: 0.55rem;
}

.dj-tag-launch-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 74px;
  padding: 0.75rem;
  border: 1px solid rgba(210, 224, 240, 0.48);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 27%, rgba(255, 59, 167, 0.09) 72%, transparent),
    linear-gradient(145deg, #516176, #101b2c 42%, #070d17 76%, #27364a);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.34), 0 13px 30px rgba(0, 0, 0, 0.28);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dj-tag-launch-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.46), 0 16px 34px rgba(0, 0, 0, 0.34);
}

.dj-tag-launch-button.open,
.dj-tag-launch-button.ready {
  border-color: rgba(40, 220, 255, 0.56);
}

.dj-tag-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(145deg, #fff, #9eacbe 48%, #f6bd49);
  box-shadow: 0 0 18px rgba(40, 220, 255, 0.2);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.dj-tag-launch-button > span:nth-child(2) {
  min-width: 0;
}

.dj-tag-launch-button strong,
.dj-tag-launch-button small {
  display: block;
}

.dj-tag-launch-button strong {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.035em;
}

.dj-tag-launch-button small {
  margin-top: 0.22rem;
  overflow: hidden;
  color: #bfcbdc;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-tag-launch-button > b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgba(0, 0, 0, 0.24);
  font-size: 1.15rem;
  transition: transform 160ms ease;
}

.dj-tag-launch-button.open > b {
  transform: rotate(45deg);
}

.dj-tag-panel {
  display: grid;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px solid rgba(40, 220, 255, 0.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(12, 28, 48, 0.94), rgba(2, 7, 14, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.dj-tag-empty {
  display: grid;
  gap: 0.7rem;
}

.dj-tag-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.48;
}

.dj-tag-upload-button {
  min-height: 46px;
  border: 1px solid rgba(255, 182, 41, 0.52);
  border-radius: 11px;
  color: #07101f;
  cursor: pointer;
  background: linear-gradient(145deg, var(--gold-hot), var(--gold));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  font-weight: 900;
}

.dj-tag-upload-button > span {
  margin-right: 0.28rem;
  font-size: 1rem;
}

.dj-tag-loaded {
  display: grid;
  gap: 0.7rem;
}

.dj-tag-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(101, 242, 189, 0.28);
  border-radius: 11px;
  background: rgba(101, 242, 189, 0.055);
}

.dj-tag-wave {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--green);
  background: rgba(101, 242, 189, 0.1);
  font-size: 1.2rem;
}

.dj-tag-file > span:last-child {
  min-width: 0;
}

.dj-tag-file strong,
.dj-tag-file small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-tag-file strong {
  font-size: 0.82rem;
}

.dj-tag-file small {
  margin-top: 0.18rem;
  color: var(--green);
  font-size: 0.68rem;
}

.dj-tag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dj-tag-actions .text-button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.72rem;
}

.dj-tag-placement {
  display: grid;
  gap: 0.4rem;
}

.dj-tag-placement > span {
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.dj-tag-placement select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #091321;
}

.dj-tag-placement select:disabled {
  opacity: 0.5;
}

.dj-tag-volume {
  margin: 0;
}

.select-group {
  display: grid;
  gap: 0.55rem;
}

.select-group select {
  width: 100%;
  min-height: 46px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #0a1423;
  cursor: pointer;
}

.scratch-pattern-grid {
  display: grid;
  gap: 0.55rem;
}

.scratch-pattern-grid > label {
  display: grid;
  gap: 0.32rem;
}

.scratch-pattern-grid > label > span {
  color: #8191a7;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.scratch-pattern-grid select:disabled,
.scratch-pattern-grid option:disabled {
  color: #667082;
}

.switch-row {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(3, 8, 17, 0.42);
  cursor: pointer;
}

.switch-row.dance-lock {
  border-color: rgba(103, 231, 180, 0.32);
  background: rgba(103, 231, 180, 0.055);
}

.switch-row.dance-lock strong {
  color: var(--green);
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row strong {
  font-size: 0.85rem;
}

.switch-row small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-row i {
  width: 46px;
  height: 26px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 20px;
  background: #334058;
  transition: 160ms ease;
}

.switch-row i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d8e0ea;
  transition: 160ms ease;
}

.switch-row input:focus-visible + i {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.switch-row input:checked + i {
  background: var(--gold);
}

.switch-row input:checked + i::after {
  left: 24px;
  background: #07101f;
}

.mix-success-card {
  padding: 1rem;
  border: 1px solid rgba(71, 215, 255, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(71, 215, 255, 0.08), rgba(3, 8, 17, 0.62));
}

.mix-success-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.mix-success-heading span,
.mix-success-heading strong {
  display: block;
}

.mix-success-heading span {
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.mix-success-heading strong {
  margin-top: 0.15rem;
  color: var(--gold);
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mix-success-heading b {
  max-width: 145px;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(145, 166, 191, 0.22);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(3, 8, 17, 0.42);
  font-size: 0.76rem;
  line-height: 1.25;
  text-align: center;
}

.mix-success-meter {
  height: 9px;
  margin-top: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(145, 166, 191, 0.16);
}

.mix-success-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7d61, var(--gold), var(--green));
  transition: width 220ms ease;
}

.mix-success-card p {
  margin: 0.72rem 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.mix-success-card small {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.mix-success-card.excellent {
  border-color: rgba(103, 231, 180, 0.42);
  background: linear-gradient(145deg, rgba(103, 231, 180, 0.1), rgba(3, 8, 17, 0.62));
}

.mix-success-card.excellent .mix-success-heading strong,
.mix-success-card.strong .mix-success-heading strong {
  color: var(--green);
}

.mix-success-card.good .mix-success-heading strong {
  color: var(--gold);
}

.mix-success-card.workable .mix-success-heading strong,
.mix-success-card.risky .mix-success-heading strong {
  color: #ff9a72;
}

.make-section {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.primary-button {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 14px;
  color: #13091d;
  background: linear-gradient(115deg, var(--gold-hot), var(--gold) 42%, #ff7554 72%, var(--pink));
  box-shadow: 0 14px 38px rgba(255, 59, 167, 0.22), 0 8px 28px rgba(255, 182, 41, 0.18);
  cursor: pointer;
  transition: 160ms ease;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255, 59, 167, 0.3), 0 10px 34px rgba(255, 182, 41, 0.24);
}

.primary-button:disabled {
  color: #667082;
  background: #242e3e;
  box-shadow: none;
  cursor: not-allowed;
}

.primary-button strong,
.primary-button small {
  display: block;
  text-align: left;
}

.primary-button strong {
  font-size: 1.08rem;
}

.primary-button small {
  margin-top: 0.16rem;
  font-size: 0.73rem;
  opacity: 0.75;
}

.button-icon {
  font-size: 1.55rem;
}

.rights-note {
  margin: 0.72rem 0 0;
  color: #73839a;
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
}

.progress-panel,
.result-panel {
  margin-top: 1.25rem;
  border-radius: var(--radius);
}

.progress-panel {
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

.progress-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.progress-copy strong {
  display: block;
  font-size: 1rem;
}

.progress-copy p {
  margin: 0.22rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.progress-copy > span:last-child {
  color: var(--gold);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.spinner {
  width: 33px;
  height: 33px;
  border: 3px solid rgba(71, 215, 255, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.progress-track {
  height: 7px;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(147, 166, 191, 0.14);
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  box-shadow: 0 0 20px rgba(71, 215, 255, 0.35);
  transition: width 180ms ease;
}

.result-panel {
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border-color: rgba(245, 184, 46, 0.32);
  background:
    radial-gradient(circle at 12% 0, rgba(255, 182, 41, 0.13), transparent 36%),
    radial-gradient(circle at 90% 20%, rgba(255, 59, 167, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(7, 29, 58, 0.96), rgba(1, 8, 20, 0.99));
}

.result-topline {
  justify-content: space-between;
  gap: 1rem;
}

.result-badge {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(245, 184, 46, 0.32);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.06);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.result-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(3, 8, 17, 0.6);
}

.large-play {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #07101f;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 184, 46, 0.22);
}

.result-track-line {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.result-track-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-track-line span {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.result-seek {
  --fill: 0%;
}

.download-row {
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.download-button,
.secondary-button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.download-button {
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: #101d31;
}

.download-button.gold {
  border-color: var(--gold);
  color: #07101f;
  background: var(--gold);
}

.download-button > span:first-child {
  font-size: 1.3rem;
  font-weight: 900;
}

.download-button strong,
.download-button small {
  display: block;
  text-align: left;
}

.download-button strong {
  font-size: 0.88rem;
}

.download-button small {
  margin-top: 0.1rem;
  font-size: 0.69rem;
  opacity: 0.7;
}

.download-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.secondary-button {
  margin-left: auto;
  padding: 0 1rem;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
}

.broadcast-launcher {
  position: relative;
  margin-top: 1.25rem;
}

.broadcast-launch-button {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  width: 100%;
  min-height: 118px;
  padding: clamp(1.05rem, 3vw, 1.55rem) clamp(1rem, 4vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(231, 240, 251, 0.72);
  border-radius: var(--radius);
  color: #fff;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.19), transparent 25%, rgba(255, 255, 255, 0.08) 52%, transparent 70%),
    linear-gradient(145deg, #8c99aa 0%, #26364c 22%, #0a1526 48%, #53667d 72%, #111c2c 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.46),
    0 0 28px rgba(40, 220, 255, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px rgba(0, 0, 0, 0.65);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.broadcast-launch-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 8% 50%, rgba(40, 220, 255, 0.24), transparent 26%),
    radial-gradient(circle at 88% 40%, rgba(255, 59, 167, 0.2), transparent 25%),
    linear-gradient(90deg, transparent, rgba(255, 182, 41, 0.12), transparent);
  pointer-events: none;
}

.broadcast-launch-button::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  left: 1.5rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--blue), #fff, var(--gold), var(--pink));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
}

.broadcast-launch-button:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(40, 220, 255, 0.2),
    inset 0 1px #fff;
}

.broadcast-launch-button.open {
  border-color: rgba(40, 220, 255, 0.72);
  border-radius: var(--radius) var(--radius) 14px 14px;
}

.broadcast-launch-icon {
  display: grid;
  place-items: center;
  width: clamp(54px, 8vw, 72px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: var(--gold-hot);
  background: radial-gradient(circle, #23354c 0 24%, #050b14 26% 48%, #aebdce 50% 52%, #1b2a3c 55% 100%);
  box-shadow: 0 0 24px rgba(40, 220, 255, 0.28), inset 0 0 16px rgba(255, 255, 255, 0.15);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.broadcast-launch-copy {
  min-width: 0;
}

.broadcast-launch-copy > span,
.broadcast-launch-copy strong,
.broadcast-launch-copy small {
  display: block;
}

.broadcast-launch-copy > span {
  margin-bottom: 0.28rem;
  color: var(--blue);
  font-size: clamp(0.62rem, 1.5vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.broadcast-launch-copy strong {
  font-size: clamp(1.25rem, 4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.broadcast-launch-copy small {
  margin-top: 0.42rem;
  color: #d7e0ed;
  font-size: clamp(0.72rem, 1.7vw, 0.88rem);
  line-height: 1.45;
}

.broadcast-launch-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  font-size: 1.7rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.broadcast-launch-button.open .broadcast-launch-arrow {
  transform: rotate(180deg);
}

.radio-set-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0.75rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid rgba(205, 220, 237, 0.35);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, 0.1), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(40, 220, 255, 0.09), transparent 28rem),
    linear-gradient(145deg, rgba(8, 21, 39, 0.98), rgba(0, 0, 0, 0.99));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.08);
}

.radio-set-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 8, 18, 0.72)), url("./doc-in-the-mix-party.jpg") center 20% / cover no-repeat;
  opacity: 0.25;
  filter: grayscale(0.18) contrast(1.12);
  -webkit-mask-image: linear-gradient(115deg, #000, rgba(0, 0, 0, 0.48) 50%, transparent 88%);
  mask-image: linear-gradient(115deg, #000, rgba(0, 0, 0, 0.48) 50%, transparent 88%);
  pointer-events: none;
}

.radio-set-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 1.5rem;
  left: 1.5rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #8995a8, #fff, #8d9eb4, var(--blue));
  box-shadow: 0 0 20px rgba(200, 225, 255, 0.42);
  pointer-events: none;
}

.radio-set-panel > * {
  position: relative;
  z-index: 1;
}

.radio-set-heading,
.radio-subheading,
.radio-set-summary,
.radio-set-progress > div,
.radio-set-result {
  display: flex;
  align-items: center;
}

.radio-set-heading {
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(205, 220, 237, 0.18);
}

.radio-set-heading h2 {
  margin: 0.08rem 0 0.45rem;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  letter-spacing: -0.035em;
}

.radio-set-heading > div > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.6;
}

.broadcast-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(205, 220, 237, 0.45);
  border-radius: 999px;
  color: #eaf5ff;
  background: linear-gradient(145deg, rgba(196, 214, 234, 0.17), rgba(60, 77, 100, 0.14));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.broadcast-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(101, 242, 189, 0.75);
}

.radio-set-console {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 1rem;
  margin-top: 1.15rem;
}

.radio-source-panel,
.talkin-recorder,
.radio-running-order,
.radio-output-settings,
.radio-set-progress,
.radio-set-result {
  border: 1px solid rgba(205, 220, 237, 0.2);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(11, 28, 51, 0.88), rgba(2, 8, 17, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.radio-source-panel,
.talkin-recorder,
.radio-running-order,
.radio-output-settings {
  padding: 1rem;
}

.radio-subheading {
  align-items: flex-start;
  gap: 0.75rem;
}

.radio-subheading h3,
.radio-set-result h3 {
  margin: 0;
  font-size: 1rem;
}

.radio-subheading p {
  margin: 0.24rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.pro-radio-mic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(101, 242, 189, 0.34);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(101, 242, 189, 0.1), rgba(40, 220, 255, 0.045)),
    rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 0 22px rgba(101, 242, 189, 0.035);
}

.pro-radio-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 237, 250, 0.6);
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(145deg, #fff, #91a4b9 48%, #dce9f4);
  box-shadow: inset 0 1px #fff, 0 0 14px rgba(101, 242, 189, 0.16);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.pro-radio-mic strong,
.pro-radio-mic small {
  display: block;
}

.pro-radio-mic strong {
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.055em;
}

.pro-radio-mic small {
  margin-top: 0.14rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.pro-radio-mic > b {
  padding: 0.32rem 0.45rem;
  border: 1px solid rgba(40, 220, 255, 0.24);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.05);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.radio-step {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(205, 220, 237, 0.42);
  border-radius: 50%;
  color: #edf7ff;
  background: linear-gradient(145deg, #53657b, #1a2637);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.radio-upload-button,
.radio-build-button,
.record-button,
.platinum-action {
  border: 1px solid rgba(205, 220, 237, 0.48);
  color: #07101f;
  background: linear-gradient(135deg, #f7fbff 0%, #a7b6c8 28%, #edf5fb 49%, #718399 75%, #dce9f4 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.radio-upload-button {
  width: 100%;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  border-style: dashed;
  border-radius: 13px;
}

.radio-upload-button > span:first-child {
  font-size: 1.75rem;
  line-height: 1;
}

.radio-upload-button strong,
.radio-upload-button small,
.radio-build-button strong,
.radio-build-button small {
  display: block;
  text-align: left;
}

.radio-upload-button small,
.radio-build-button small {
  margin-top: 0.14rem;
  font-size: 0.76rem;
  opacity: 0.7;
}

.talkin-name-label {
  display: block;
  margin: 0.82rem 0 0.35rem;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.talkin-name {
  width: 100%;
  min-height: 43px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(205, 220, 237, 0.22);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.38);
}

.talkin-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.record-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 0.9rem;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #ff5364, #a50e28);
  border-color: rgba(255, 127, 138, 0.72);
}

.record-button i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.58);
}

.record-button.recording i {
  animation: record-pulse 1s ease-in-out infinite;
}

@keyframes record-pulse {
  50% { opacity: 0.35; transform: scale(0.78); }
}

.secondary-button.compact {
  min-height: 48px;
  margin-left: 0;
}

.secondary-button:disabled,
.record-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.talkin-controls output {
  min-width: 3.1rem;
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.talkin-review {
  margin-top: 0.7rem;
  padding: 0.7rem;
  border: 1px solid rgba(101, 242, 189, 0.3);
  border-radius: 11px;
  background: rgba(101, 242, 189, 0.045);
}

.talkin-review audio {
  width: 100%;
  height: 38px;
}

.talkin-review > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.platinum-action {
  min-height: 38px;
  padding: 0 0.75rem;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 900;
}

.talkin-status {
  margin: 0.58rem 0 0;
  color: #788da8;
  font-size: 0.75rem;
  line-height: 1.4;
}

.radio-running-order,
.radio-output-settings {
  margin-top: 1rem;
}

.running-order-heading > div {
  flex: 1;
}

.running-order-heading > button {
  flex: 0 0 auto;
}

.radio-set-empty {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px dashed rgba(205, 220, 237, 0.23);
  border-radius: 12px;
  color: #7f91aa;
  font-size: 0.85rem;
  text-align: center;
}

.radio-set-tracks {
  display: grid;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: radio-track;
}

.radio-set-item {
  counter-increment: radio-track;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 62px;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(205, 220, 237, 0.16);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.32);
}

.radio-set-item::before {
  content: counter(radio-track, decimal-leading-zero);
  color: #7f91a9;
  font-size: 0.75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.radio-item-kind {
  min-width: 62px;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.055);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}

.radio-set-item.talkin .radio-item-kind {
  border-color: rgba(255, 106, 117, 0.38);
  color: #ff9ca6;
  background: rgba(255, 106, 117, 0.065);
}

.radio-item-copy {
  min-width: 0;
}

.radio-item-copy strong,
.radio-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-item-copy strong {
  font-size: 0.88rem;
}

.radio-item-copy small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.radio-item-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.radio-item-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 220, 237, 0.18);
  border-radius: 8px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.radio-item-actions button:hover:not(:disabled) {
  border-color: rgba(40, 220, 255, 0.55);
  color: #fff;
}

.radio-item-actions button:disabled {
  opacity: 0.28;
  cursor: default;
}

.radio-setting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
  gap: 1rem;
  margin-top: 0.9rem;
}

.duration-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.duration-picker legend,
.crossfade-picker > span {
  margin-bottom: 0.45rem;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.duration-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.duration-picker label {
  cursor: pointer;
}

.duration-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.duration-picker label > span {
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(205, 220, 237, 0.22);
  border-radius: 11px;
  color: #dbe8f6;
  background: rgba(0, 0, 0, 0.32);
  font-size: 1rem;
  font-weight: 950;
  transition: 150ms ease;
}

.duration-picker label > span small {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
}

.duration-picker input:checked + span {
  border-color: #dbe8f6;
  color: #07101f;
  background: linear-gradient(135deg, #fff, #9eafc2 45%, #edf5fb);
  box-shadow: 0 0 22px rgba(198, 223, 249, 0.16);
}

.duration-picker input:focus-visible + span {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.crossfade-picker {
  display: flex;
  flex-direction: column;
}

.crossfade-picker select {
  min-height: 56px;
  padding: 0 0.75rem;
  border: 1px solid rgba(205, 220, 237, 0.25);
  border-radius: 11px;
  color: var(--ink);
  background: #101d31;
}

.crossfade-picker small {
  margin-top: 0.35rem;
  color: #788da8;
  font-size: 0.75rem;
}

.radio-set-summary {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.7rem;
  border: 1px solid rgba(205, 220, 237, 0.15);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
}

.radio-set-summary span {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.radio-set-summary span strong {
  color: #fff;
}

.radio-set-summary b {
  margin-left: auto;
  color: var(--green);
  font-size: 0.8rem;
}

.radio-build-button {
  width: 100%;
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 13px;
}

.radio-build-button:disabled {
  border-color: rgba(205, 220, 237, 0.15);
  color: #64758a;
  background: #202b39;
  box-shadow: none;
  cursor: not-allowed;
}

.broadcast-icon {
  font-size: 1.5rem;
}

.radio-set-progress {
  margin-top: 1rem;
  padding: 1rem;
}

.radio-set-progress > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.radio-set-progress p {
  margin: 0;
}

.radio-set-progress p strong,
.radio-set-progress p small {
  display: block;
}

.radio-set-progress p small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.radio-set-progress output {
  color: #ddecfa;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.radio-set-result {
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border-color: rgba(101, 242, 189, 0.34);
  background: linear-gradient(145deg, rgba(13, 54, 56, 0.58), rgba(1, 10, 17, 0.95));
}

.radio-set-result > div {
  min-width: 180px;
}

.radio-set-result > div p:last-child {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.radio-set-result audio {
  width: min(440px, 100%);
}

.download-button.platinum {
  flex: 0 0 auto;
  border-color: rgba(223, 237, 250, 0.55);
  color: #07101f;
  background: linear-gradient(135deg, #fff, #9aabba 35%, #edf5fb 58%, #7a8a9f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
}

.radio-rights-note {
  margin: 0.85rem 0 0;
  color: #73839a;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

.remix-faq-launcher {
  margin-top: 1.1rem;
}

.remix-faq-launcher a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 112px;
  padding: 1.15rem 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(219, 235, 249, 0.48);
  border-radius: 20px;
  color: #ffffff;
  text-decoration: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(71, 215, 255, 0.28), transparent 36%),
    radial-gradient(circle at 82% 86%, rgba(255, 39, 146, 0.22), transparent 35%),
    linear-gradient(135deg, rgba(20, 37, 61, 0.98), rgba(5, 9, 18, 0.98) 58%, rgba(23, 18, 43, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 18px 42px rgba(0, 0, 0, 0.32);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.remix-faq-launcher a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.11) 45%, transparent 63%);
  transform: translateX(-100%);
  transition: transform 450ms ease;
}

.remix-faq-launcher a:hover,
.remix-faq-launcher a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(71, 215, 255, 0.85);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 20px 50px rgba(31, 170, 226, 0.2);
}

.remix-faq-launcher a:hover::before,
.remix-faq-launcher a:focus-visible::before {
  transform: translateX(100%);
}

.remix-faq-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #08111f;
  background: linear-gradient(145deg, #ffffff, #8ea0b2 42%, #eff7fd 65%, #73879b);
  box-shadow: inset 0 1px #ffffff, 0 0 28px rgba(71, 215, 255, 0.2);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.9rem;
}

.remix-faq-launcher a > span:nth-child(2) {
  display: grid;
  gap: 0.23rem;
}

.remix-faq-launcher small {
  color: #92eaff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.remix-faq-launcher strong {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.12rem, 2.6vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.035em;
}

.remix-faq-launcher b {
  color: #9caabe;
  font-size: 0.76rem;
  font-weight: 700;
}

.remix-faq-launcher i {
  color: #f1c75b;
  font-size: 1.75rem;
  font-style: normal;
}

.toast {
  position: fixed;
  z-index: 10;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: min(390px, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  border: 1px solid rgba(71, 215, 255, 0.34);
  border-radius: 12px;
  color: var(--ink);
  background: #101d31;
  box-shadow: var(--shadow);
  font-size: 0.84rem;
  line-height: 1.45;
}

.toast.error {
  border-color: rgba(255, 106, 117, 0.58);
}

footer {
  width: min(1380px, calc(100% - 2rem));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 0 0 2.5rem;
  color: #6f829d;
  font-size: 0.75rem;
}

footer p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .intro {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .doc-photo-wrap {
    height: 260px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .control-panel {
    position: static;
  }

  .preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-decks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preset-card {
    min-height: 128px;
  }

  .radio-set-console {
    grid-template-columns: 1fr;
  }

  .radio-set-result {
    align-items: stretch;
    flex-direction: column;
  }

  .radio-set-result audio {
    width: 100%;
  }

  .radio-set-result .download-button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .site-header {
    min-height: 70px;
    padding: 0.8rem 1rem;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand small {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .device-badge {
    width: 10px;
    overflow: hidden;
    color: transparent;
    gap: 0;
  }

  .studio-shell {
    width: min(100% - 1rem, 1380px);
    padding-top: 2rem;
  }

  .intro {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.1rem;
    border-radius: 22px;
  }

  .intro h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .intro-copy > p:last-of-type {
    font-size: 1rem;
  }

  .hero-features {
    gap: 0.45rem;
  }

  .hero-features span {
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
  }

  .doc-hero {
    width: 100%;
    max-width: none;
  }

  .doc-photo-wrap {
    height: 185px;
    border-radius: 20px 20px 52px 20px;
  }

  .doc-photo-wrap img {
    object-position: 50% 20%;
  }

  .doc-hero figcaption {
    right: 0.6rem;
    bottom: 0.65rem;
    min-width: 58%;
  }

  .deck-panel,
  .control-panel,
  .progress-panel,
  .result-panel {
    border-radius: 17px;
  }

  .upload-target {
    min-height: 220px;
  }

  .waveform-shell {
    height: 125px;
  }

  .track-heading {
    align-items: flex-start;
  }

  .deck-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .track-actions {
    width: 100%;
    justify-content: space-between;
  }

  .preview-note {
    display: none;
  }

  .instrumental-loaded {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .beat-vault summary {
    align-items: flex-start;
  }

  .beat-vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .beat-vault-button {
    min-height: 94px;
    padding: 0.62rem;
  }

  .instrumental-bpm {
    grid-column: 2;
    justify-self: start;
  }

  .instrumental-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
  }

  .instrumental-volume {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
  }

  .instrumental-volume input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .instrumental-volume small {
    grid-row: 3;
  }

  .vocal-arrangement-sync {
    grid-column: 1 / -1;
  }

  .phrase-sync-button {
    gap: 0.65rem;
    padding: 0.72rem;
  }

  .vocal-nudge-controls {
    grid-template-columns: 1fr 1fr;
  }

  .vocal-nudge-controls output {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .scratch-pattern-grid {
    gap: 0.7rem;
  }

  .dj-tag-launch-button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dj-tag-launch-button > b {
    display: none;
  }

  .dj-tag-launch-button small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .track-heading h2 {
    max-width: 64vw;
  }

  .section-heading > span {
    display: none;
  }

  .preset-grid {
    gap: 0.55rem;
  }

  .preset-card {
    min-height: 124px;
    padding: 0.75rem;
  }

  .preset-card strong {
    font-size: 0.84rem;
  }

  .preset-art {
    height: 42px;
  }

  .result-topline,
  .download-row,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .download-button,
  .secondary-button {
    width: 100%;
    margin-left: 0;
  }

  .result-player {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .broadcast-launch-button {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 104px;
  }

  .broadcast-launch-arrow {
    display: none;
  }

  .broadcast-launch-copy > span {
    letter-spacing: 0.08em;
  }

  .remix-faq-launcher a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 98px;
    padding: 0.95rem;
  }

  .remix-faq-icon {
    width: 52px;
    height: 52px;
    font-size: 1.55rem;
  }

  .remix-faq-launcher i {
    display: none;
  }

  .radio-set-panel {
    padding: 1rem;
    border-radius: 17px;
  }

  .radio-set-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .radio-set-heading > div > p:last-child {
    font-size: 0.86rem;
  }

  .radio-source-panel,
  .talkin-recorder,
  .radio-running-order,
  .radio-output-settings {
    padding: 0.8rem;
  }

  .talkin-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .talkin-controls output {
    grid-column: 1 / -1;
    text-align: left;
  }

  .running-order-heading {
    flex-wrap: wrap;
  }

  .running-order-heading > button {
    margin-left: 2.45rem;
  }

  .radio-set-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .radio-set-item::before {
    display: none;
  }

  .radio-item-kind {
    min-width: 54px;
  }

  .radio-item-actions {
    display: grid;
    grid-template-columns: repeat(2, 32px);
  }

  .radio-item-actions button {
    width: 32px;
    height: 30px;
  }

  .radio-setting-grid {
    grid-template-columns: 1fr;
  }

  .radio-set-summary b {
    width: 100%;
    margin-left: 0;
  }

  .radio-set-progress > div:first-child {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  footer {
    line-height: 1.45;
  }
}

/* Production Studio */

body {
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.app-view[hidden] {
  display: none !important;
}

.production-studio {
  display: grid;
  gap: 1.1rem;
}

.production-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  min-height: 300px;
  padding: clamp(1.4rem, 4vw, 2.7rem);
  overflow: hidden;
  border: 1px solid rgba(216, 232, 245, 0.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0, rgba(40, 220, 255, 0.2), transparent 34rem),
    linear-gradient(135deg, rgba(7, 26, 50, 0.98), rgba(0, 3, 9, 0.99) 58%, rgba(23, 7, 25, 0.98));
  box-shadow: var(--shadow);
}

.production-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 4, 11, 0.86), rgba(0, 5, 14, 0.44) 58%, rgba(0, 3, 8, 0.75)),
    url("./doc-in-the-mix-party.jpg") 82% 24% / cover no-repeat;
  opacity: 0.42;
  filter: saturate(0.75) contrast(1.08);
}

.production-hero h1 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.production-hero h1 span {
  color: transparent;
  background: linear-gradient(120deg, #ffffff 5%, #92a8ba 32%, #ffffff 52%, #778b9f 78%, #dce9f3);
  -webkit-background-clip: text;
  background-clip: text;
}

.production-hero > div:first-child > p:last-child {
  max-width: 760px;
  margin: 1.15rem 0 0;
  color: #c6d1df;
  font-size: 1rem;
  line-height: 1.65;
}

.production-signal {
  display: grid;
  gap: 0.36rem;
  min-width: 190px;
  padding: 1rem;
  border: 1px solid rgba(216, 232, 245, 0.28);
  border-radius: 15px;
  background: rgba(0, 3, 9, 0.76);
  backdrop-filter: blur(12px);
}

.production-signal span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.production-signal i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(101, 242, 189, 0.72);
}

.production-signal b {
  color: #ffffff;
  font-size: 1.05rem;
}

.production-signal small {
  color: #889aaf;
  font-size: 0.76rem;
}

.production-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(216, 232, 245, 0.22);
  border-radius: 18px;
  background: rgba(2, 10, 21, 0.94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.production-mode-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 82px;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #91a2b8;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.production-mode-tabs button > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(216, 232, 245, 0.25);
  border-radius: 50%;
  color: #9aabbd;
  font-size: 1.15rem;
}

.production-mode-tabs button > span:last-child {
  display: grid;
  gap: 0.16rem;
}

.production-mode-tabs strong {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.production-mode-tabs small {
  font-size: 0.76rem;
}

.production-mode-tabs button.active {
  border-color: rgba(40, 220, 255, 0.55);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(16, 68, 98, 0.72), rgba(11, 20, 37, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(40, 220, 255, 0.08);
}

.production-mode-tabs button.active > span:first-child {
  border-color: rgba(40, 220, 255, 0.72);
  color: #05101c;
  background: var(--blue);
  box-shadow: 0 0 22px rgba(40, 220, 255, 0.3);
}

.production-workspace {
  display: grid;
  gap: 1rem;
}

.production-setup,
.recording-booth,
.production-layers,
.production-mix-console,
.production-progress,
.production-result {
  border: 1px solid rgba(126, 170, 211, 0.23);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(5, 22, 44, 0.97), rgba(1, 7, 17, 0.99));
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
}

.production-setup,
.recording-booth,
.production-layers,
.production-mix-console {
  padding: clamp(1rem, 2.5vw, 1.45rem);
}

.production-section-heading {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(126, 170, 211, 0.18);
}

.production-section-heading > span {
  color: rgba(255, 255, 255, 0.15);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 2.9rem;
  line-height: 0.72;
}

.production-section-heading p {
  margin: 0 0 0.16rem;
  color: var(--blue);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.production-section-heading h2 {
  margin: 0;
  font-size: clamp(1.12rem, 3vw, 1.55rem);
  line-height: 1.1;
}

.production-section-heading.compact > span {
  font-size: 2.35rem;
}

.production-setup-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
  margin-top: 1rem;
}

.production-name,
.spot-duration-picker,
.song-duration-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(126, 170, 211, 0.18);
  border-radius: 14px;
  background: rgba(0, 5, 13, 0.52);
}

.production-name {
  display: grid;
  align-content: center;
  gap: 0.55rem;
}

.production-name > span,
.spot-duration-picker legend,
.song-duration-panel > span,
.production-vault-select > span {
  color: #8da2b8;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.production-name input {
  width: 100%;
  min-height: 48px;
  padding: 0 0.8rem;
  border: 1px solid rgba(126, 170, 211, 0.28);
  border-radius: 9px;
  color: #ffffff;
  background: #020914;
}

.spot-duration-picker {
  margin: 0;
}

.spot-duration-picker legend {
  padding: 0 0.35rem;
}

.spot-duration-picker > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(56px, 1fr));
  gap: 0.45rem;
}

.spot-duration-picker label {
  position: relative;
}

.spot-duration-picker input {
  position: absolute;
  opacity: 0;
}

.spot-duration-picker label > span {
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 0.45rem;
  border: 1px solid rgba(126, 170, 211, 0.22);
  border-radius: 9px;
  color: #9fb0c4;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.spot-duration-picker b {
  color: #ffffff;
  font-size: 1.08rem;
}

.spot-duration-picker small {
  font-size: 0.62rem;
  font-weight: 900;
}

.spot-duration-picker input:checked + span {
  border-color: var(--gold);
  color: #09121e;
  background: linear-gradient(145deg, #ffe79c, #ffb629 58%, #ba7200);
  box-shadow: 0 0 22px rgba(255, 182, 41, 0.18);
}

.spot-duration-picker input:checked + span b {
  color: #09121e;
}

.spot-duration-picker input:focus-visible + span {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 2px;
}

.spot-duration-picker > p,
.song-duration-panel p {
  margin: 0.7rem 0 0;
  color: #7f91a8;
  font-size: 0.78rem;
  line-height: 1.45;
}

.song-duration-panel {
  display: grid;
  align-content: center;
  gap: 0.15rem;
}

.song-duration-panel[hidden] {
  display: none;
}

.song-duration-panel strong {
  color: var(--gold);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 2rem;
}

.production-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: start;
}

.mic-processing-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(101, 242, 189, 0.24);
  border-radius: 12px;
  background: rgba(14, 68, 59, 0.18);
}

.mic-capsule {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #06140f;
  background: var(--green);
  font-size: 0.68rem;
  font-weight: 950;
}

.mic-processing-strip > span:nth-child(2) {
  display: grid;
  gap: 0.1rem;
}

.mic-processing-strip strong {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.mic-processing-strip small {
  color: #8ea99f;
  font-size: 0.69rem;
}

.mic-processing-strip > b {
  color: var(--green);
  font-size: 0.75rem;
}

.mic-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 58px;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  color: #71869d;
  font-size: 0.68rem;
  font-weight: 900;
}

.mic-meter > div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #030812;
  box-shadow: inset 0 0 0 1px rgba(126, 170, 211, 0.18);
}

.mic-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold) 76%, var(--danger));
  transition: width 80ms linear;
}

.mic-meter output {
  text-align: right;
}

.recording-clock {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid rgba(126, 170, 211, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(rgba(40, 220, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 9px,
    #010610;
}

.recording-clock > span {
  color: #7890a8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.recording-clock output {
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2.35rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 26px rgba(40, 220, 255, 0.26);
}

.recording-clock small {
  color: #8193a8;
  font-size: 0.75rem;
}

.recording-booth.is-recording .recording-clock {
  border-color: rgba(255, 67, 86, 0.52);
  box-shadow: 0 0 28px rgba(255, 67, 86, 0.1);
}

.recording-booth.is-recording .recording-clock output {
  color: #ff6b78;
  text-shadow: 0 0 26px rgba(255, 67, 86, 0.34);
}

.production-record-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.production-record-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 62px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 94, 110, 0.55);
  border-radius: 11px;
  color: #ffffff;
  text-align: left;
  background: linear-gradient(135deg, #8f1429, #3e0915);
  cursor: pointer;
}

.production-record-button > i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff4058;
  box-shadow: 0 0 16px rgba(255, 64, 88, 0.74);
}

.production-record-button > span {
  display: grid;
  gap: 0.08rem;
}

.production-record-button strong {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.production-record-button small {
  color: #e8aab2;
  font-size: 0.69rem;
}

.production-record-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.headphone-monitor {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid rgba(126, 170, 211, 0.14);
  border-radius: 10px;
  color: #c5d1df;
  cursor: pointer;
}

.headphone-monitor input {
  margin-top: 0.2rem;
  accent-color: var(--blue);
}

.headphone-monitor span {
  display: grid;
  gap: 0.08rem;
}

.headphone-monitor strong {
  font-size: 0.8rem;
}

.headphone-monitor small {
  color: #7e91a7;
  font-size: 0.7rem;
  line-height: 1.4;
}

.headphone-monitor.low-latency-monitor {
  margin-top: 0.45rem;
  border-color: rgba(101, 242, 189, 0.24);
  background: rgba(101, 242, 189, 0.035);
}

.headphone-monitor.low-latency-monitor strong {
  color: #baffdf;
}

.headphone-monitor-volume {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.7rem;
  border: 1px solid rgba(40, 220, 255, 0.2);
  border-radius: 10px;
  background: rgba(40, 220, 255, 0.035);
}

.headphone-monitor-volume > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #9eb1c5;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.headphone-monitor-volume output {
  color: var(--blue);
  font-weight: 900;
}

.headphone-monitor-volume input {
  width: 100%;
  accent-color: var(--blue);
}

.production-status {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
  color: #8295aa;
  font-size: 0.78rem;
  line-height: 1.5;
}

.production-voice-review {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid rgba(101, 242, 189, 0.24);
  border-radius: 12px;
  background: rgba(19, 77, 63, 0.14);
}

.production-voice-review[hidden] {
  display: none;
}

.production-voice-review > span {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
}

.production-voice-review strong {
  color: var(--green);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
}

.production-voice-review small {
  color: #8ea2b6;
  font-size: 0.71rem;
}

.production-voice-review audio,
.production-layer-loaded audio,
.production-result audio {
  width: 100%;
  min-height: 42px;
}

.production-layers {
  display: grid;
  gap: 0.8rem;
}

.production-port {
  padding: 0.9rem;
  border: 1px solid rgba(126, 170, 211, 0.19);
  border-radius: 14px;
  background: rgba(0, 5, 13, 0.48);
}

.port-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.port-heading > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(40, 220, 255, 0.34);
  border-radius: 9px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.06);
}

.port-heading > div {
  display: grid;
  gap: 0.1rem;
}

.port-heading strong {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.port-heading small {
  color: #8193a9;
  font-size: 0.71rem;
}

.production-upload-button {
  width: 100%;
  min-height: 47px;
  margin-top: 0.7rem;
  border: 1px dashed rgba(40, 220, 255, 0.52);
  border-radius: 9px;
  color: #c9f7ff;
  background: rgba(40, 220, 255, 0.055);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
}

.production-upload-button.fx {
  border-color: rgba(255, 182, 41, 0.52);
  color: #ffe7ae;
  background: rgba(255, 182, 41, 0.055);
}

.production-vault-select {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.production-vault-select select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1px solid rgba(216, 232, 245, 0.23);
  border-radius: 8px;
  color: #e9f0f8;
  background: #071323;
}

.production-layer-loaded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.8fr) auto;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(101, 242, 189, 0.21);
  border-radius: 9px;
  background: rgba(19, 77, 63, 0.12);
}

.production-layer-loaded[hidden] {
  display: none;
}

.production-layer-loaded > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.production-layer-loaded b {
  color: var(--green);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.production-layer-loaded strong,
.production-layer-loaded small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-layer-loaded strong {
  font-size: 0.8rem;
}

.production-layer-loaded small {
  color: #8798ac;
  font-size: 0.68rem;
}

.production-fx-empty {
  margin-top: 0.65rem;
  padding: 0.7rem;
  border-radius: 8px;
  color: #71849a;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.74rem;
  line-height: 1.45;
}

.production-fx-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.production-fx-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(118px, 0.5fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid rgba(126, 170, 211, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.production-fx-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #08121d;
  background: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
}

.production-fx-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
}

.production-fx-item strong,
.production-fx-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-fx-item strong {
  font-size: 0.73rem;
}

.production-fx-item small {
  color: #7e91a7;
  font-size: 0.65rem;
}

.production-fx-item select {
  min-height: 35px;
  padding: 0 0.35rem;
  border: 1px solid rgba(126, 170, 211, 0.23);
  border-radius: 7px;
  color: #dce7f2;
  background: #071323;
  font-size: 0.68rem;
}

.production-fx-item button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(126, 170, 211, 0.2);
  border-radius: 7px;
  color: #b7c6d6;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.production-mix-console {
  display: grid;
  gap: 1rem;
}

.production-faders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-faders label {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid rgba(126, 170, 211, 0.17);
  border-radius: 11px;
  background: rgba(0, 5, 13, 0.48);
}

.production-faders label > span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #a9b9c9;
  font-size: 0.74rem;
}

.production-faders output {
  color: var(--blue);
  font-weight: 900;
}

.production-faders input {
  width: 100%;
  accent-color: var(--blue);
}

.production-sync-control {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid rgba(101, 242, 189, 0.28);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(9, 53, 47, 0.42), rgba(0, 7, 15, 0.52));
}

.production-sync-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #b9c9d8;
  font-size: 0.76rem;
}

.production-sync-control output {
  color: #65f2bd;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.production-sync-control input {
  width: 100%;
  accent-color: #65f2bd;
}

.production-sync-control small {
  color: #8095a9;
  font-size: 0.7rem;
  line-height: 1.45;
}

.production-master-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-master-switches label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(126, 170, 211, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.production-master-switches input {
  margin-top: 0.2rem;
  accent-color: var(--blue);
}

.production-master-switches span {
  display: grid;
  gap: 0.08rem;
}

.production-master-switches strong {
  font-size: 0.76rem;
}

.production-master-switches small {
  color: #7c8fa4;
  font-size: 0.68rem;
  line-height: 1.35;
}

.production-master-switches label.disabled {
  opacity: 0.46;
}

.build-production-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 74px;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 13px;
  color: #06101b;
  text-align: left;
  background: linear-gradient(135deg, #ffffff, #8da2b5 34%, #f2f8fc 57%, #72879c 100%);
  box-shadow: inset 0 1px #ffffff, 0 12px 30px rgba(40, 220, 255, 0.11);
  cursor: pointer;
}

.build-production-button > span:first-child {
  color: #9a5b00;
  font-size: 1.65rem;
}

.build-production-button > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.build-production-button strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.build-production-button small {
  color: #33485c;
  font-size: 0.72rem;
}

.build-production-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.production-progress,
.production-result {
  padding: 1rem;
}

.production-result.finalized {
  border-color: rgba(255, 182, 41, 0.5);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 182, 41, 0.12), transparent 30rem),
    linear-gradient(145deg, rgba(9, 32, 39, 0.98), rgba(1, 8, 17, 0.99));
}

.production-progress > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.production-progress p {
  display: grid;
  gap: 0.12rem;
  margin: 0;
}

.production-progress small {
  color: #8194aa;
  font-size: 0.72rem;
}

.production-progress output {
  color: var(--blue);
  font-weight: 900;
}

.production-progress .progress-track {
  margin-top: 0.75rem;
}

.production-result {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr);
  align-items: center;
  gap: 1rem;
  border-color: rgba(101, 242, 189, 0.32);
  background:
    radial-gradient(circle at 100% 0, rgba(101, 242, 189, 0.09), transparent 30rem),
    linear-gradient(145deg, rgba(6, 29, 39, 0.98), rgba(1, 8, 17, 0.99));
}

.production-result[hidden] {
  display: none;
}

.production-result h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.production-result > div:first-child > p:last-child {
  margin: 0.45rem 0 0;
  color: #8ba0b4;
  font-size: 0.78rem;
}

.production-preview-button {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(40, 220, 255, 0.58);
  border-radius: 11px;
  color: #eafcff;
  text-align: left;
  background: linear-gradient(135deg, rgba(15, 75, 101, 0.82), rgba(5, 32, 54, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 10px 26px rgba(40, 220, 255, 0.1);
  cursor: pointer;
}

.production-preview-button > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #02202b;
  background: var(--blue);
  font-size: 0.95rem;
  font-weight: 950;
}

.production-preview-button > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.production-preview-button strong {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

.production-preview-button small {
  color: #9ec6d5;
  font-size: 0.71rem;
}

.production-preview-button.playing {
  border-color: rgba(101, 242, 189, 0.68);
  background: linear-gradient(135deg, rgba(13, 89, 70, 0.86), rgba(4, 39, 44, 0.94));
}

.production-preview-button.playing > span:first-child {
  background: #65f2bd;
}

.production-preview-button:disabled {
  border-color: rgba(126, 170, 211, 0.26);
  color: #9aabbb;
  background: linear-gradient(135deg, rgba(32, 51, 66, 0.68), rgba(8, 18, 30, 0.82));
  box-shadow: none;
  cursor: not-allowed;
}

.production-preview-button:disabled > span:first-child {
  color: #263746;
  background: #8497a8;
}

.production-approval-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(126, 170, 211, 0.18);
}

.production-approval-actions[hidden] {
  display: none;
}

.production-approval-actions .secondary-button {
  width: 100%;
  margin: 0;
}

.finalize-production-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 58px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(101, 242, 189, 0.68);
  border-radius: 10px;
  color: #06150f;
  text-align: left;
  background: linear-gradient(135deg, #d8fff0, #65f2bd 52%, #22a875);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.82), 0 10px 28px rgba(101, 242, 189, 0.14);
  cursor: pointer;
}

.finalize-production-button > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  background: #08754f;
  font-size: 1rem;
  font-weight: 950;
}

.finalize-production-button > span:last-child {
  display: grid;
  gap: 0.06rem;
}

.finalize-production-button strong {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.finalize-production-button small {
  color: #174f3b;
  font-size: 0.7rem;
}

.production-downloads {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-downloads[hidden] {
  display: none;
}

.production-downloads .download-button,
.production-downloads .secondary-button {
  width: 100%;
  margin: 0;
}

.production-rights-note {
  margin: 0.2rem 0 0;
  color: #6f8196;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

/* Live broadcast encoder */
.live-encoder {
  --live: #ff3048;
  --twitch: #a970ff;
  display: grid;
  gap: 1.25rem;
}

.live-encoder[hidden] {
  display: none;
}

.encoder-hero,
.encoder-program-panel,
.encoder-go-live-panel,
.encoder-audio-panel,
.encoder-branding-panel,
.encoder-show-preview-panel,
.encoder-recording-panel {
  border: 1px solid rgba(93, 150, 207, 0.23);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(5, 21, 43, 0.98), rgba(1, 8, 18, 0.98));
  box-shadow: var(--shadow);
}

.encoder-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  min-height: 250px;
  padding: clamp(1.4rem, 4vw, 3.2rem);
}

.encoder-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 5, 14, 0.98) 0%, rgba(2, 15, 32, 0.92) 48%, rgba(0, 5, 14, 0.56) 100%),
    url("./doc-in-the-mix-party.jpg") 82% 23% / cover no-repeat;
  opacity: 0.76;
}

.encoder-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 72% 50%, rgba(255, 48, 72, 0.18), transparent 34%);
}

.encoder-hero h1 {
  max-width: 780px;
  margin: 0.25rem 0 0.7rem;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.encoder-hero h1 span {
  color: var(--live);
  text-shadow: 0 0 34px rgba(255, 48, 72, 0.28);
}

.encoder-hero > div:first-child > p:last-child {
  max-width: 710px;
  margin: 0;
  color: #bdc9db;
  line-height: 1.65;
}

.encoder-air-status {
  min-width: 180px;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(149, 167, 190, 0.25);
  border-radius: 16px;
  background: rgba(0, 5, 13, 0.8);
  backdrop-filter: blur(14px);
}

.encoder-air-status span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

.encoder-air-status i,
.encoder-live-button i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #64748a;
}

.encoder-air-status small {
  display: block;
  margin-top: 0.4rem;
  color: #7f91a7;
  font-size: 0.68rem;
}

.encoder-air-status[data-state="connecting"] {
  border-color: rgba(255, 182, 41, 0.48);
}

.encoder-air-status[data-state="connecting"] i {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 182, 41, 0.7);
  animation: pulse-live 1s infinite;
}

.encoder-air-status[data-state="live"] {
  border-color: rgba(255, 48, 72, 0.62);
  background: rgba(47, 2, 9, 0.88);
}

.encoder-air-status[data-state="live"] i,
.encoder-live-button i {
  background: var(--live);
  box-shadow: 0 0 15px rgba(255, 48, 72, 0.82);
}

@keyframes pulse-live {
  50% { opacity: 0.35; transform: scale(0.78); }
}

.encoder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr);
  gap: 1.25rem;
  align-items: start;
}

.encoder-program-panel,
.encoder-go-live-panel,
.encoder-audio-panel,
.encoder-branding-panel,
.encoder-show-preview-panel,
.encoder-recording-panel {
  padding: clamp(1rem, 2.4vw, 1.6rem);
}

.encoder-go-live-panel {
  position: sticky;
  top: 1rem;
}

.encoder-panel-heading,
.encoder-panel-heading > div,
.encoder-panel-heading p {
  display: flex;
  align-items: center;
}

.encoder-panel-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.encoder-panel-heading > div {
  gap: 0.7rem;
}

.encoder-panel-heading > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(40, 220, 255, 0.38);
  border-radius: 50%;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
}

.encoder-panel-heading p {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0;
}

.encoder-panel-heading small,
.encoder-output-settings label > span,
.encoder-text-field > span,
.encoder-scene-switcher legend {
  color: #70869f;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.encoder-panel-heading strong {
  font-size: 1rem;
}

.encoder-panel-heading output {
  color: var(--green);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.encoder-monitor-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 15px;
  background: #01040a;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.72), 0 18px 45px rgba(0, 0, 0, 0.38);
}

#encoderCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #02060d;
}

.encoder-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(40, 220, 255, 0.09), transparent 33%);
}

.encoder-placeholder[hidden] { display: none; }
.encoder-placeholder > span { color: var(--live); font-size: 2.2rem; }
.encoder-placeholder strong { font-size: clamp(0.85rem, 2vw, 1.2rem); }
.encoder-placeholder small { color: #71849b; font-size: 0.7rem; }

.encoder-monitor-badges {
  position: absolute;
  inset: 0.7rem 0.7rem auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.encoder-monitor-badges span,
.encoder-monitor-badges b {
  padding: 0.28rem 0.45rem;
  border-radius: 5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.encoder-monitor-badges span { background: rgba(205, 15, 39, 0.86); }

.encoder-source-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.encoder-source-button,
.encoder-clear-button,
.encoder-destinations button,
.encoder-live-button,
.encoder-stop-live,
.encoder-music-port button,
.encoder-logo-port button,
.encoder-record-actions button,
.encoder-recording-result button {
  border: 1px solid rgba(117, 158, 201, 0.28);
  border-radius: 10px;
  background: rgba(8, 29, 56, 0.82);
  cursor: pointer;
}

.encoder-source-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 58px;
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.encoder-source-button > span:first-child { color: var(--blue); font-size: 1.15rem; }
.encoder-source-button strong,
.encoder-source-button small { display: block; }
.encoder-source-button strong { font-size: 0.69rem; letter-spacing: 0.05em; }
.encoder-source-button small { margin-top: 0.12rem; color: #8294aa; font-size: 0.58rem; }
.encoder-source-button.primary { border-color: rgba(40, 220, 255, 0.4); background: linear-gradient(135deg, rgba(10, 70, 99, 0.82), rgba(6, 24, 47, 0.92)); }
.encoder-clear-button { padding: 0.55rem 0.75rem; color: #aebbd0; font-size: 0.68rem; }

.encoder-scene-switcher {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.encoder-scene-switcher legend { margin-bottom: 0.5rem; }
.encoder-scene-switcher > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.encoder-scene-switcher button { display: grid; justify-items: center; gap: 0.4rem; min-height: 68px; padding: 0.55rem; border: 1px solid rgba(102, 138, 175, 0.22); border-radius: 9px; color: #71849b; background: rgba(0, 8, 18, 0.62); cursor: pointer; }
.encoder-scene-switcher button.active { border-color: var(--blue); color: #fff; background: rgba(9, 61, 86, 0.7); }
.encoder-scene-switcher b { font-size: 0.63rem; }
.scene-icon { position: relative; display: block; width: 31px; height: 19px; border: 2px solid currentColor; border-radius: 2px; opacity: 0.8; }
.pip-scene::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 9px; height: 6px; border: 1px solid currentColor; background: #07172a; }
.split-scene::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid currentColor; }
.camera-scene::after { content: "●"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.48rem; }

.encoder-destinations { display: grid; gap: 0.5rem; }
.encoder-destinations button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.65rem; min-height: 54px; padding: 0.55rem 0.7rem; color: #8799b0; text-align: left; }
.encoder-destinations button > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: #47566b; font-style: normal; }
.encoder-destinations strong,
.encoder-destinations small { display: block; }
.encoder-destinations strong { font-size: 0.74rem; }
.encoder-destinations small { margin-top: 0.08rem; color: #6f8198; font-size: 0.6rem; }
.encoder-destinations button.active { border-color: rgba(255, 255, 255, 0.48); color: #fff; background: rgba(25, 42, 65, 0.9); }
.encoder-destinations .youtube > i { background: #ff0033; }
.encoder-destinations .twitch > i { background: #9147ff; }
.encoder-destinations .both > i { background: linear-gradient(135deg, #ff0033 50%, #9147ff 50%); font-weight: 950; }
.encoder-destinations .facebook > i { background: #1877f2; font: 900 1.2rem Arial, sans-serif; }
.encoder-destinations .roku > i { background: #662d91; font: 900 0.95rem Arial, sans-serif; }
.encoder-destinations .all > i { color: #04101e; background: linear-gradient(135deg, #ffbe32, #28dcff 45%, #9147ff); font-weight: 950; }

.encoder-platform-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0.65rem 0; }
.encoder-platform-links a { padding: 0.55rem; border: 1px solid rgba(115, 151, 188, 0.18); border-radius: 8px; color: #9fb2c9; font-size: 0.61rem; text-align: center; text-decoration: none; }
.encoder-platform-links a:hover { border-color: rgba(40, 220, 255, 0.5); color: var(--blue); }

.encoder-platform-vault {
  overflow: hidden;
  margin: 0.85rem 0;
  border: 1px solid rgba(221, 231, 242, 0.38);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(29, 39, 55, 0.96), rgba(5, 12, 23, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.24);
}

.encoder-platform-vault[data-state="open"] {
  border-color: rgba(40, 220, 255, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 0 24px rgba(40, 220, 255, 0.08);
}

.encoder-platform-vault-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.58rem;
  width: 100%;
  min-height: 72px;
  padding: 0.7rem;
  border: 0;
  color: #f8fbff;
  text-align: left;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(135deg, rgba(56, 70, 91, 0.96), rgba(11, 22, 39, 0.98));
  cursor: pointer;
}

.encoder-platform-vault-toggle:hover,
.encoder-platform-vault-toggle:focus-visible { background: linear-gradient(135deg, rgba(69, 87, 111, 0.98), rgba(10, 32, 53, 0.98)); }
.encoder-platform-vault-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.encoder-platform-vault-toggle > span:nth-child(2) strong,
.encoder-platform-vault-toggle > span:nth-child(2) small { display: block; }
.encoder-platform-vault-toggle > span:nth-child(2) strong { font-size: 0.75rem; letter-spacing: 0.055em; }
.encoder-platform-vault-toggle > span:nth-child(2) small { margin-top: 0.14rem; color: #adbbcd; font-size: 0.61rem; line-height: 1.35; }
.encoder-platform-vault-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 10px; color: #101722; background: linear-gradient(145deg, #ffffff, #94a2b5 58%, #e7edf4); box-shadow: inset 0 1px #fff, 0 0 14px rgba(188, 210, 234, 0.16); font-size: 1rem; font-weight: 950; }
.encoder-platform-vault-toggle > b { padding: 0.28rem 0.42rem; border: 1px solid rgba(192, 207, 224, 0.38); border-radius: 999px; color: #d3deeb; background: rgba(0, 0, 0, 0.22); font-size: 0.5rem; letter-spacing: 0.05em; white-space: nowrap; }
.encoder-platform-vault-toggle > b[data-state="ready"] { border-color: rgba(101, 242, 189, 0.52); color: var(--green); }
.encoder-platform-vault-toggle > i { color: var(--blue); font-size: 1rem; font-style: normal; }

.encoder-platform-vault-panel { padding: 0.8rem; border-top: 1px solid rgba(180, 203, 226, 0.2); }
.encoder-platform-vault-panel[hidden] { display: none; }
.encoder-platform-security-note { margin: 0 0 0.75rem; padding: 0.65rem; border: 1px solid rgba(255, 182, 41, 0.22); border-radius: 9px; color: #aeb9c8; background: rgba(42, 31, 10, 0.34); font-size: 0.68rem; line-height: 1.5; }
.encoder-platform-security-note strong { color: var(--gold-hot); }
.encoder-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 0.65rem; }

.encoder-platform-card {
  padding: 0.68rem;
  border: 1px solid rgba(119, 150, 184, 0.23);
  border-radius: 11px;
  background: rgba(0, 7, 17, 0.62);
}
.encoder-platform-card[data-state="ready"] { border-color: rgba(101, 242, 189, 0.48); box-shadow: inset 0 0 24px rgba(101, 242, 189, 0.05); }
.encoder-platform-card[data-state="partial"] { border-color: rgba(255, 182, 41, 0.48); }
.encoder-platform-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.48rem; }
.encoder-platform-card header > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: #4b5a6d; font-size: 0.72rem; font-weight: 950; }
.encoder-platform-card.youtube header > span { background: #ff0033; }
.encoder-platform-card.twitch header > span { background: #9147ff; }
.encoder-platform-card.facebook header > span { background: #1877f2; font: 900 1rem Arial, sans-serif; }
.encoder-platform-card.roku header > span { background: #662d91; }
.encoder-platform-card header strong,
.encoder-platform-card header small { display: block; }
.encoder-platform-card header strong { font-size: 0.72rem; }
.encoder-platform-card header small { margin-top: 0.08rem; color: #7f92aa; font-size: 0.58rem; }
.encoder-platform-card header output { padding: 0.24rem 0.34rem; border: 1px solid rgba(150, 170, 193, 0.24); border-radius: 999px; color: #91a2b6; font-size: 0.47rem; font-weight: 900; letter-spacing: 0.045em; text-align: center; }
.encoder-platform-card[data-state="ready"] header output { border-color: rgba(101, 242, 189, 0.42); color: var(--green); }
.encoder-platform-card[data-state="partial"] header output { border-color: rgba(255, 182, 41, 0.42); color: var(--gold-hot); }
.encoder-platform-card > label { display: grid; gap: 0.28rem; margin-top: 0.58rem; }
.encoder-platform-card > label > span { color: #8fa1b7; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; }
.encoder-platform-card input { width: 100%; min-width: 0; min-height: 40px; padding: 0.52rem 0.58rem; border: 1px solid rgba(111, 148, 187, 0.3); border-radius: 8px; color: #f8fbff; background: rgba(0, 5, 13, 0.9); font-size: 0.66rem; }
.encoder-platform-card input:focus { border-color: rgba(40, 220, 255, 0.7); outline: 0; box-shadow: 0 0 0 2px rgba(40, 220, 255, 0.1); }
.encoder-platform-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-platform-secret input { border-radius: 8px 0 0 8px; }
.encoder-platform-secret button { padding: 0 0.58rem; border: 1px solid rgba(111, 148, 187, 0.3); border-left: 0; border-radius: 0 8px 8px 0; color: var(--blue); background: rgba(7, 31, 54, 0.98); font-size: 0.52rem; font-weight: 950; cursor: pointer; }
.encoder-platform-card > a { display: inline-block; margin-top: 0.56rem; color: #9bb3ca; font-size: 0.59rem; text-decoration: none; }
.encoder-platform-card > a:hover { color: var(--blue); }
.encoder-platform-card > p { margin: 0.65rem 0; color: #a492b5; font-size: 0.65rem; line-height: 1.48; }
.encoder-platform-card > p strong { color: #ddc5f2; }
.encoder-platform-roku-button { width: 100%; min-height: 40px; border: 1px solid rgba(178, 126, 225, 0.5); border-radius: 8px; color: #f5eaff; background: linear-gradient(135deg, #662d91, #3e175c); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.055em; cursor: pointer; }

.encoder-platform-vault-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.72rem; }
.encoder-platform-vault-actions button { min-height: 42px; padding: 0.55rem; border: 1px solid rgba(143, 168, 194, 0.3); border-radius: 8px; color: #b6c4d4; background: rgba(7, 23, 42, 0.9); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; }
.encoder-platform-vault-actions button.primary { border-color: rgba(40, 220, 255, 0.5); color: #eafcff; background: linear-gradient(135deg, rgba(6, 92, 124, 0.92), rgba(5, 42, 70, 0.96)); }
.encoder-platform-check-status { display: block; margin-top: 0.58rem; color: #91a3b9; font-size: 0.64rem; line-height: 1.45; }
.encoder-platform-check-status.ready { color: var(--green); }


.encoder-relay-box { margin-top: 0.8rem; padding: 0.8rem; border: 1px solid rgba(255, 182, 41, 0.25); border-radius: 12px; background: rgba(18, 14, 7, 0.46); }
.encoder-relay-heading { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.encoder-relay-heading > span { color: var(--gold); font-size: 1.4rem; }
.encoder-relay-heading strong,
.encoder-relay-heading small { display: block; }
.encoder-relay-heading strong { font-size: 0.7rem; letter-spacing: 0.08em; }
.encoder-relay-heading small { margin-top: 0.12rem; color: #9b8c6a; font-size: 0.58rem; }
.encoder-relay-box > label { display: grid; gap: 0.3rem; margin-top: 0.55rem; }
.encoder-relay-box > label > span { color: #8e9eb0; font-size: 0.57rem; font-weight: 900; letter-spacing: 0.1em; }
.encoder-relay-box input,
.encoder-output-settings select,
.encoder-text-field input { width: 100%; min-height: 40px; padding: 0.55rem 0.65rem; border: 1px solid rgba(111, 148, 187, 0.28); border-radius: 8px; color: #f5f9ff; background: rgba(0, 7, 16, 0.82); }
.encoder-secret-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-secret-input input { border-radius: 8px 0 0 8px; }
.encoder-secret-input button { padding: 0 0.6rem; border: 1px solid rgba(111, 148, 187, 0.28); border-left: 0; border-radius: 0 8px 8px 0; color: var(--blue); background: rgba(4, 24, 44, 0.9); font-size: 0.55rem; font-weight: 900; cursor: pointer; }
.encoder-relay-box > p { margin: 0.65rem 0 0; color: #968d7b; font-size: 0.62rem; line-height: 1.45; }
.encoder-relay-box > p strong { color: #d1b679; }

.encoder-roku-handoff { margin-top: 0.75rem; padding: 0.8rem; border: 1px solid rgba(160, 90, 225, 0.42); border-radius: 12px; background: linear-gradient(145deg, rgba(55, 17, 84, 0.62), rgba(11, 8, 23, 0.84)); }
.encoder-roku-handoff[hidden] { display: none; }
.encoder-roku-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; }
.encoder-roku-heading > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #fff; background: #662d91; font: 900 0.9rem Arial, sans-serif; }
.encoder-roku-heading strong,
.encoder-roku-heading small { display: block; }
.encoder-roku-heading strong { font-size: 0.66rem; letter-spacing: 0.07em; }
.encoder-roku-heading small { margin-top: 0.12rem; color: #ab8bc6; font-size: 0.57rem; }
.encoder-roku-heading b { padding: 0.25rem 0.42rem; border: 1px solid rgba(207, 165, 243, 0.32); border-radius: 999px; color: #c6a0e6; background: rgba(0, 0, 0, 0.24); font-size: 0.5rem; letter-spacing: 0.07em; }
.encoder-roku-heading b[data-state="ready"] { border-color: rgba(101, 242, 189, 0.48); color: var(--green); }
.encoder-roku-handoff > p { margin: 0.65rem 0; color: #ad9cbb; font-size: 0.62rem; line-height: 1.5; }
.encoder-roku-handoff > p strong { color: #e0c9f3; }
.encoder-roku-handoff > label { display: grid; gap: 0.3rem; }
.encoder-roku-handoff > label > span { color: #b59acb; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.09em; }
.encoder-roku-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-roku-url-row input { min-width: 0; min-height: 40px; padding: 0.55rem 0.65rem; border: 1px solid rgba(175, 123, 220, 0.38); border-radius: 8px 0 0 8px; color: #fff; background: rgba(0, 5, 14, 0.8); }
.encoder-roku-url-row button { min-width: 58px; border: 1px solid rgba(175, 123, 220, 0.38); border-left: 0; border-radius: 0 8px 8px 0; color: #fff; background: #662d91; font-size: 0.54rem; font-weight: 900; cursor: pointer; }
#encoderRokuHlsStatus { display: block; margin-top: 0.45rem; color: #a993ba; font-size: 0.58rem; line-height: 1.4; }
#encoderRokuHlsStatus.ready { color: var(--green); }
#encoderRokuHlsStatus.error { color: #ff8a9a; }

.encoder-output-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.75rem; }
.encoder-output-settings label { display: grid; gap: 0.3rem; }
.encoder-output-settings select { min-width: 0; padding: 0.45rem; font-size: 0.65rem; }

.encoder-quality-note {
  margin: 0.45rem 0 0;
  color: #7fa7bb;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: right;
}

.encoder-safety-record,
.encoder-monitor-toggle,
.encoder-check-row { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.encoder-safety-record { margin: 0.8rem 0; padding: 0.65rem; border: 1px solid rgba(101, 242, 189, 0.18); border-radius: 9px; background: rgba(23, 74, 62, 0.18); }
.encoder-safety-record strong,
.encoder-safety-record small,
.encoder-monitor-toggle strong,
.encoder-monitor-toggle small { display: block; }
.encoder-safety-record strong,
.encoder-monitor-toggle strong { font-size: 0.7rem; }
.encoder-safety-record small,
.encoder-monitor-toggle small { margin-top: 0.14rem; color: #7e91a6; font-size: 0.59rem; }

.encoder-live-button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; width: 100%; min-height: 66px; padding: 0.75rem 0.9rem; border-color: rgba(255, 48, 72, 0.65); text-align: left; background: linear-gradient(135deg, #9c061c, #4f0511); }
.encoder-live-button i { animation: pulse-live 1.2s infinite; }
.encoder-live-button strong,
.encoder-live-button small { display: block; }
.encoder-live-button strong { font-size: 0.78rem; letter-spacing: 0.07em; }
.encoder-live-button small { margin-top: 0.12rem; color: #eaa2ad; font-size: 0.59rem; }
.encoder-stop-live { width: 100%; margin-top: 0.5rem; padding: 0.65rem; color: #ff97a4; background: rgba(83, 5, 17, 0.45); }
.encoder-connection-status { margin: 0.65rem 0 0; color: #7f91a7; font-size: 0.62rem; line-height: 1.45; }
.encoder-connection-status.error { color: #ff8493; }
.encoder-connection-status.success { color: var(--green); }

.encoder-controls-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.25rem; }
.encoder-external-mixer-port {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 182, 41, 0.34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45, 31, 5, 0.48), rgba(4, 16, 31, 0.86));
}

.encoder-external-mixer-port[data-state="on"] {
  border-color: rgba(101, 242, 189, 0.58);
  box-shadow: inset 0 0 30px rgba(24, 111, 85, 0.09), 0 0 24px rgba(101, 242, 189, 0.06);
}

.external-mixer-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.external-mixer-jack {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgba(255, 182, 41, 0.1);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.encoder-external-mixer-port[data-state="on"] .external-mixer-jack {
  border-color: var(--green);
  color: #041711;
  background: var(--green);
  box-shadow: 0 0 16px rgba(101, 242, 189, 0.3);
}

.external-mixer-heading strong,
.external-mixer-heading small {
  display: block;
}

.external-mixer-heading strong {
  font-size: 0.83rem;
  letter-spacing: 0.04em;
}

.external-mixer-heading small {
  margin-top: 0.16rem;
  color: #91a3b8;
  font-size: 0.73rem;
  line-height: 1.4;
}

.external-mixer-heading > b {
  padding: 0.34rem 0.48rem;
  border: 1px solid rgba(255, 182, 41, 0.32);
  border-radius: 999px;
  color: var(--gold-hot);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.encoder-external-mixer-port[data-state="on"] .external-mixer-heading > b {
  border-color: rgba(101, 242, 189, 0.48);
  color: var(--green);
}

.encoder-external-mixer-port > p {
  margin: 0.7rem 0;
  color: #9bacbf;
  font-size: 0.78rem;
  line-height: 1.55;
}

.external-mixer-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 0.45rem;
}

.external-mixer-controls label {
  display: grid;
  gap: 0.3rem;
}

.external-mixer-controls label > span {
  color: #91a3b8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.external-mixer-controls select,
.external-mixer-controls button {
  min-height: 42px;
  border: 1px solid rgba(122, 159, 196, 0.3);
  border-radius: 8px;
  color: #f4f8fd;
  background: rgba(0, 7, 16, 0.85);
  font-size: 0.76rem;
}

.external-mixer-controls select {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
}

.external-mixer-controls button {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.external-mixer-controls button.connect {
  border-color: rgba(101, 242, 189, 0.46);
  color: #051711;
  background: var(--green);
  font-weight: 900;
}

.external-mixer-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.external-mixer-specs span {
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(40, 220, 255, 0.18);
  border-radius: 5px;
  color: #8ca7bb;
  background: rgba(4, 25, 42, 0.68);
  font-size: 0.7rem;
}

.encoder-external-mixer-port > .external-mixer-status {
  margin-bottom: 0;
  color: #d3b66e;
}

.encoder-external-mixer-port[data-state="on"] > .external-mixer-status {
  color: var(--green);
}

.encoder-audio-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.encoder-audio-meters > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.encoder-audio-meters span,
.encoder-audio-meters output { color: #7e92aa; font-size: 0.58rem; font-weight: 800; }
.encoder-audio-meters i { overflow: hidden; height: 8px; border-radius: 999px; background: #0a1727; }
.encoder-audio-meters b { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #36d6a4 0 70%, #f5c54e 84%, #ff4059 100%); transition: width 80ms linear; }
.encoder-faders { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; }
.encoder-faders label { display: grid; gap: 0.3rem; }
.encoder-faders label > span { display: flex; justify-content: space-between; color: #b4c1d1; font-size: 0.65rem; }
.encoder-faders output { color: var(--blue); }
.encoder-faders input { width: 100%; accent-color: var(--blue); }
.encoder-faders .external-mixer-fader { padding: 0.55rem; border: 1px solid rgba(101, 242, 189, 0.22); border-radius: 9px; background: rgba(17, 63, 52, 0.15); }
.encoder-faders .external-mixer-fader output { color: var(--green); }
.encoder-faders .external-mixer-fader input { accent-color: var(--green); }

.encoder-music-port { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.45rem; }
.encoder-music-port > button { min-height: 48px; padding: 0.5rem 0.65rem; }
.encoder-music-port > button:first-of-type { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; text-align: left; }
.encoder-music-port strong,
.encoder-music-port small { display: block; }
.encoder-music-port strong { font-size: 0.68rem; }
.encoder-music-port small { margin-top: 0.12rem; overflow: hidden; color: #71849a; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.encoder-music-play { width: 48px; color: var(--blue); }
.encoder-music-remove { color: #ff8a97; font-size: 0.62rem; }
.encoder-monitor-toggle { margin-top: 0.75rem; padding: 0.65rem; border-radius: 9px; background: rgba(2, 11, 23, 0.62); }

.encoder-branding-panel { display: grid; align-content: start; gap: 0.65rem; }
.encoder-branding-panel .encoder-panel-heading { margin-bottom: 0.35rem; }
.encoder-text-field { display: grid; gap: 0.3rem; }
.encoder-check-row { align-items: center; color: #9fb0c4; font-size: 0.66rem; }
.encoder-lower-third-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; padding-top: 0.35rem; border-top: 1px solid rgba(98, 136, 175, 0.16); }
.encoder-logo-port { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.65rem; border: 1px dashed rgba(40, 220, 255, 0.3); border-radius: 10px; }
.encoder-logo-port > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; min-width: 0; }
#encoderLogoPreview { display: grid; place-items: center; overflow: hidden; width: 42px; height: 42px; border-radius: 7px; color: #63788f; background: #07182a; font-size: 0.52rem; }
#encoderLogoPreview img { width: 100%; height: 100%; object-fit: contain; }
.encoder-logo-port p { min-width: 0; margin: 0; }
.encoder-logo-port strong,
.encoder-logo-port small { display: block; }
.encoder-logo-port strong { font-size: 0.66rem; }
.encoder-logo-port small { overflow: hidden; color: #71849a; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.encoder-logo-port button { padding: 0.55rem 0.65rem; font-size: 0.62rem; }

.encoder-show-preview-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: 1.25rem;
  border-color: rgba(40, 220, 255, 0.38);
  background:
    radial-gradient(circle at 76% 50%, rgba(40, 220, 255, 0.1), transparent 32%),
    linear-gradient(145deg, rgba(5, 25, 48, 0.98), rgba(1, 8, 18, 0.98));
}

.encoder-show-preview-panel h2 {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(1.3rem, 2.8vw, 2.15rem);
}

.encoder-show-preview-panel > div:first-child > p:last-child {
  max-width: 650px;
  margin: 0;
  color: #9aadc2;
  font-size: 0.86rem;
  line-height: 1.55;
}

.encoder-show-preview-controls {
  display: grid;
  gap: 0.6rem;
}

#toggleEncoderShowPreview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 68px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(40, 220, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, rgba(8, 111, 145, 0.9), rgba(5, 42, 75, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#toggleEncoderShowPreview > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #03131b;
  background: var(--blue);
  font-size: 0.9rem;
}

#toggleEncoderShowPreview strong,
#toggleEncoderShowPreview small {
  display: block;
}

#toggleEncoderShowPreview strong {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

#toggleEncoderShowPreview small {
  margin-top: 0.16rem;
  color: #b8d9e8;
  font-size: 0.75rem;
  line-height: 1.4;
}

#toggleEncoderShowPreview.active {
  border-color: rgba(101, 242, 189, 0.72);
  background: linear-gradient(135deg, rgba(16, 111, 84, 0.92), rgba(4, 52, 50, 0.96));
}

#toggleEncoderShowPreview.active > span:first-child {
  background: var(--green);
  box-shadow: 0 0 18px rgba(101, 242, 189, 0.32);
}

.encoder-show-preview-controls > label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem;
  border: 1px solid rgba(102, 145, 187, 0.2);
  border-radius: 9px;
  background: rgba(1, 11, 24, 0.62);
  cursor: pointer;
}

.encoder-show-preview-controls > label strong,
.encoder-show-preview-controls > label small {
  display: block;
}

.encoder-show-preview-controls > label strong {
  font-size: 0.8rem;
}

.encoder-show-preview-controls > label small {
  margin-top: 0.14rem;
  color: #8196ad;
  font-size: 0.74rem;
  line-height: 1.4;
}

#encoderShowPreviewStatus {
  margin: 0;
  color: #7fa8bd;
  font-size: 0.76rem;
  line-height: 1.45;
}

#encoderShowPreviewStatus.active {
  color: var(--green);
}

.encoder-recording-panel { display: grid; grid-template-columns: minmax(250px, 1fr) auto; align-items: center; gap: 1rem; }
.encoder-recording-panel h2 { margin: 0.2rem 0 0.35rem; font-size: clamp(1.25rem, 2.6vw, 2rem); }
.encoder-recording-panel > div:first-child > p:last-child { max-width: 670px; margin: 0; color: #8598ae; font-size: 0.72rem; line-height: 1.5; }
.encoder-record-actions { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 0.5rem; }
.encoder-record-actions button,
.encoder-recording-result button { min-height: 44px; padding: 0.55rem 0.8rem; }
#startEncoderRecording { border-color: rgba(255, 48, 72, 0.5); color: #fff; }
#startEncoderRecording span { color: var(--live); }
.encoder-record-actions output { min-width: 86px; color: #fff; font: 800 0.9rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.encoder-recording-result { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid rgba(95, 136, 178, 0.18); }
.encoder-recording-result[hidden] { display: none; }
.encoder-recording-result video { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.encoder-recording-result strong,
.encoder-recording-result small { display: block; }
.encoder-recording-result small { margin-top: 0.2rem; color: #7890a8; font-size: 0.64rem; }
.encoder-recording-result button { border-color: rgba(101, 242, 189, 0.4); color: #07140f; background: var(--green); font-weight: 900; }

.encoder-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.encoder-notes p { margin: 0; padding: 0.75rem; border: 1px solid rgba(91, 127, 164, 0.16); border-radius: 10px; color: #657c94; font-size: 0.62rem; line-height: 1.5; }
.encoder-notes strong { color: #9cb0c7; }

.live-encoder button:disabled,
.live-encoder select:disabled,
.live-encoder input:disabled { cursor: not-allowed; opacity: 0.44; }

.app-bottom-tabs {
  position: fixed;
  z-index: 30;
  right: 50%;
  bottom: max(0.65rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(900px, calc(100% - 1rem));
  padding: 0.42rem;
  border: 1px solid rgba(210, 228, 242, 0.42);
  border-radius: 18px;
  background: rgba(0, 5, 13, 0.93);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68), inset 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  transform: translateX(50%);
}

.app-bottom-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 58px;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #7f91a7;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.app-bottom-tabs button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(210, 228, 242, 0.2);
  border-radius: 50%;
  font-size: 1rem;
}

.app-bottom-tabs button > span:last-child {
  display: grid;
  gap: 0.05rem;
}

.app-bottom-tabs strong {
  font-size: 0.73rem;
  letter-spacing: 0.06em;
}

.app-bottom-tabs small {
  font-size: 0.63rem;
}

.app-bottom-tabs button.active {
  border-color: rgba(40, 220, 255, 0.38);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(18, 79, 111, 0.72), rgba(12, 24, 42, 0.92));
}

.app-bottom-tabs button.active > span:first-child {
  color: #051019;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 18px rgba(40, 220, 255, 0.25);
}

.record-tab-icon {
  position: relative;
}

.record-tab-icon::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4258;
  box-shadow: 0 0 10px rgba(255, 66, 88, 0.52);
}

.live-tab-icon {
  position: relative;
}

.live-tab-icon::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.live-tab-icon::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.app-bottom-tabs #liveEncoderTab.active {
  border-color: rgba(255, 48, 72, 0.48);
  background: linear-gradient(135deg, rgba(116, 5, 22, 0.85), rgba(29, 7, 24, 0.94));
}

.app-bottom-tabs #liveEncoderTab.active > span:first-child {
  color: #fff;
  border-color: var(--live);
  background: var(--live);
  box-shadow: 0 0 18px rgba(255, 48, 72, 0.4);
}

.toast {
  bottom: calc(90px + env(safe-area-inset-bottom));
}

@media (max-width: 850px) {
  .production-hero,
  .production-console-grid,
  .production-setup-grid,
  .production-result,
  .encoder-hero,
  .encoder-grid,
  .encoder-controls-grid {
    grid-template-columns: 1fr;
  }

  .production-signal {
    justify-self: start;
  }

  .production-faders,
  .production-master-switches {
    grid-template-columns: 1fr;
  }

  .production-result audio {
    grid-column: 1;
  }

  .encoder-air-status {
    justify-self: start;
  }

  .encoder-go-live-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .production-hero {
    min-height: 330px;
    padding: 1.15rem;
    border-radius: 20px;
  }

  .production-hero::before {
    background:
      linear-gradient(180deg, rgba(0, 4, 11, 0.48), rgba(0, 4, 11, 0.9) 72%),
      url("./doc-in-the-mix-party.jpg") 60% 10% / cover no-repeat;
    opacity: 0.42;
  }

  .production-hero > div:first-child > p:last-child {
    font-size: 0.88rem;
  }

  .production-signal {
    min-width: 0;
    width: 100%;
  }

  .production-mode-tabs {
    grid-template-columns: 1fr;
  }

  .production-mode-tabs button {
    min-height: 68px;
  }

  .spot-duration-picker > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .production-record-controls {
    grid-template-columns: 1fr;
  }

  .production-record-controls .secondary-button {
    width: 100%;
  }

  .production-sync-control > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mic-processing-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mic-processing-strip > b {
    grid-column: 2;
  }

  .production-layer-loaded {
    grid-template-columns: 1fr;
  }

  .production-fx-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .production-fx-item select {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .production-downloads {
    grid-template-columns: 1fr;
  }

  .production-approval-actions {
    grid-template-columns: 1fr;
  }

  .encoder-hero {
    min-height: 330px;
    padding: 1.15rem;
  }

  .encoder-hero::before {
    background:
      linear-gradient(180deg, rgba(0, 4, 11, 0.48), rgba(0, 4, 11, 0.94) 68%),
      url("./doc-in-the-mix-party.jpg") 60% 12% / cover no-repeat;
  }

  .encoder-air-status { width: 100%; }
  .encoder-source-buttons { grid-template-columns: 1fr; }
  .encoder-source-buttons .encoder-clear-button { min-height: 42px; }
  .encoder-scene-switcher > div { grid-template-columns: 1fr 1fr; }
  .encoder-platform-vault-toggle { grid-template-columns: auto minmax(0, 1fr) auto; }
  .encoder-platform-vault-toggle > b { grid-column: 2; justify-self: start; }
  .encoder-platform-vault-toggle > i { grid-column: 3; grid-row: 1 / span 2; }
  .encoder-platform-grid,
  .encoder-platform-vault-actions { grid-template-columns: 1fr; }
  .encoder-roku-heading { grid-template-columns: auto minmax(0, 1fr); }
  .encoder-roku-heading > b { grid-column: 2; justify-self: start; }
  .encoder-output-settings { grid-template-columns: 1fr; }
  .encoder-quality-note { text-align: left; }
  .external-mixer-heading { grid-template-columns: auto minmax(0, 1fr); }
  .external-mixer-heading > b { grid-column: 2; justify-self: start; }
  .external-mixer-controls { grid-template-columns: 1fr 1fr; }
  .external-mixer-controls label { grid-column: 1 / -1; }
  .encoder-audio-meters { grid-template-columns: 1fr; }
  .encoder-faders { grid-template-columns: 1fr; }
  .encoder-lower-third-fields { grid-template-columns: 1fr; }
  .encoder-logo-port { grid-template-columns: 1fr 1fr; }
  .encoder-logo-port > div { grid-column: 1 / -1; }
  .encoder-show-preview-panel { grid-template-columns: 1fr; }
  .encoder-recording-panel { grid-template-columns: 1fr; }
  .encoder-record-actions { grid-template-columns: 1fr 1fr; }
  .encoder-record-actions output { grid-column: 1 / -1; grid-row: 1; }
  .encoder-recording-result { grid-template-columns: 1fr; }
  .encoder-recording-result video { max-height: 230px; }
  .encoder-notes { grid-template-columns: 1fr; }

  .app-bottom-tabs {
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    width: calc(100% - 0.7rem);
    border-radius: 15px;
  }

  .app-bottom-tabs button {
    min-height: 52px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.25rem;
    text-align: center;
  }

  .app-bottom-tabs button > span:first-child {
    width: 30px;
    height: 30px;
  }

  .app-bottom-tabs strong {
    font-size: 0.58rem;
  }

  .app-bottom-tabs small {
    display: none;
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Relay setup spans the area below the program and destination panels. */
.encoder-broadcast-setup { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.5rem; margin:1.25rem 0; padding:clamp(1rem,2.4vw,1.6rem); border:1px solid rgba(255,182,41,.25); border-radius:16px; background:#101722; }
.encoder-broadcast-setup > div { min-width:0; }
.encoder-broadcast-setup .encoder-relay-box { margin-top:0; }
.encoder-broadcast-setup .encoder-output-settings { margin-top:0; }
.encoder-go-live-panel { position:static; }
@media(max-width:800px){ .encoder-broadcast-setup { grid-template-columns:minmax(0,1fr); } }

.encoder-preview-anchor { width:100%; }
.encoder-monitor-shell.is-floating { position:fixed; top:16px; right:18px; width:min(440px,38vw); margin:0; z-index:150; box-shadow:0 12px 36px #000b; border:2px solid var(--gold); }
.encoder-preview-return { display:none; }
.is-floating .encoder-preview-return { display:block; position:absolute; bottom:8px; right:8px; padding:8px 12px; border:1px solid #d8ae3f; border-radius:6px; background:#101722; color:white; font:700 14px Arial,sans-serif; cursor:pointer; }
@media(max-width:700px){.encoder-monitor-shell.is-floating{top:10px;right:10px;width:min(300px,65vw)}}

.talkin-monitor-panel{display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid #747b88;border-radius:12px;min-width:0}.talkin-monitor-panel legend{font-weight:700;padding:0 8px}.talkin-monitor-panel label,.talkin-monitor-panel p{font-size:16px}.talkin-monitor-panel p{margin:0;line-height:1.5}.talkin-monitor-panel select{width:100%;min-width:0;padding:12px;background:#111821;color:#fff;border:1px solid #747b88;border-radius:6px;font-size:16px}.talkin-monitor-panel input[type=range]{width:100%}.talkin-monitor-panel small{font-size:14px;line-height:1.5}

.vocal-tune-panel{min-width:0;margin:18px 0;padding:20px;border:1px solid #9a76e8;border-radius:14px;background:#171327;color:#fff}.vocal-tune-panel legend{font-size:19px;font-weight:800;padding:0 8px;color:#d1b7ff}.vocal-tune-panel p,.vocal-tune-panel label{font-size:16px;line-height:1.5}.vocal-tune-panel small{display:block;font-size:14px;line-height:1.5;color:#d6cde5}.vocal-tune-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.vocal-tune-grid label{display:grid;gap:8px}.vocal-tune-panel select{width:100%;padding:10px;background:#211c31;color:white;border:1px solid #827394;border-radius:6px;font-size:16px}.vocal-tune-panel input[type=range]{width:100%}.vocal-tune-panel output{color:#d1b7ff}@media(max-width:520px){.vocal-tune-grid{grid-template-columns:1fr}}
:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #a7b4cc;
  --muted-strong: #d2dbeb;
  --night: #000000;
  --panel: rgba(4, 20, 42, 0.96);
  --panel-strong: #071a35;
  --line: rgba(114, 171, 224, 0.2);
  --line-bright: rgba(40, 220, 255, 0.5);
  --blue: #28dcff;
  --blue-deep: #006fbf;
  --gold: #ffb629;
  --gold-hot: #ffe08a;
  --pink: #ff3ba7;
  --green: #65f2bd;
  --danger: #ff6a75;
  --radius: 22px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: #000;
  overflow-x: hidden;
}

.site-header,
.studio-shell,
footer {
  position: relative;
  z-index: 1;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="range"] {
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

button {
  color: inherit;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(100px);
  display: none;
  pointer-events: none;
}

.ambient-one {
  top: 8rem;
  left: -16rem;
  background: var(--pink);
}

.ambient-two {
  right: -18rem;
  bottom: 8rem;
  background: var(--blue);
}

.site-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 182, 41, 0.24);
  background: linear-gradient(90deg, rgba(1, 8, 18, 0.99), rgba(5, 24, 48, 0.97), rgba(1, 8, 18, 0.99));
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -65% 0 -95% 48%;
  background: linear-gradient(90deg, transparent, rgba(1, 8, 18, 0.28)), url("./doc-in-the-mix-brown.jpg") center 23% / cover no-repeat;
  opacity: 0.3;
  filter: grayscale(0.25) contrast(1.08);
  pointer-events: none;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--gold-hot), var(--gold) 42%, #a56600 100%);
  box-shadow: 0 0 0 4px rgba(255, 182, 41, 0.1), 0 0 28px rgba(255, 59, 167, 0.3);
}

.brand-mark span {
  width: 22px;
  height: 22px;
  border: 6px solid #07101f;
  border-radius: 50%;
  position: relative;
}

.brand-mark span::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  color: var(--gold);
  font-size: 1.08rem;
  letter-spacing: 0.13em;
}

.brand small {
  margin-top: 0.1rem;
  color: var(--muted-strong);
  font-size: 0.88rem;
  font-weight: 650;
}

.device-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted-strong);
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

.device-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(103, 231, 180, 0.72);
}

.studio-shell {
  width: min(1380px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.4rem, 3.5vw, 3rem) 0 4rem;
}

.intro {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  max-width: none;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(255, 182, 41, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(40, 220, 255, 0.08), transparent 24rem),
    linear-gradient(145deg, rgba(6, 26, 52, 0.97), rgba(1, 9, 22, 0.99));
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 12, 28, 0.48), rgba(2, 12, 28, 0.08)), url("./doc-in-the-mix-cream.jpg") 76% 18% / cover no-repeat;
  opacity: 0.32;
  filter: saturate(0.74) contrast(1.06) brightness(0.96);
  pointer-events: none;
}

.intro > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.19em;
}

.intro h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(2.35rem, 5.3vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.intro h1 span {
  display: block;
  color: var(--gold-hot);
  font-size: 0.43em;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-copy > p:last-of-type {
  max-width: 730px;
  margin: 1.2rem 0 0;
  color: var(--muted-strong);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.hero-features span {
  padding: 0.58rem 0.78rem;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 999px;
  color: #e5faff;
  background: rgba(40, 220, 255, 0.07);
  font-size: 0.82rem;
  font-weight: 800;
}

.doc-hero {
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto;
}

.doc-photo-wrap {
  position: relative;
  height: 290px;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 41, 0.55);
  border-radius: 28px 28px 76px 28px;
  background: #06152c;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.52), 0 0 44px rgba(255, 59, 167, 0.16);
}

.doc-photo-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.96;
  filter: saturate(1.04) contrast(1.03);
}

.doc-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(1, 8, 18, 0.9));
}

.photo-glow {
  position: absolute;
  inset: auto 12% 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--blue));
  box-shadow: 0 0 24px rgba(255, 59, 167, 0.7);
}

.doc-hero figcaption {
  position: absolute;
  right: -0.35rem;
  bottom: 1rem;
  z-index: 1;
  min-width: 76%;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 14, 30, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

.doc-hero figcaption strong,
.doc-hero figcaption span {
  display: block;
}

.doc-hero figcaption strong {
  color: var(--gold-hot);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.doc-hero figcaption span {
  margin-top: 0.18rem;
  color: var(--muted-strong);
  font-size: 0.72rem;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, 0.8fr);
  gap: 1.25rem;
  align-items: start;
}

.deck-panel,
.control-panel,
.progress-panel,
.result-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(91, 167, 232, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(40, 220, 255, 0.07), transparent 22rem),
    linear-gradient(145deg, rgba(5, 25, 50, 0.97), rgba(1, 8, 20, 0.99));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.deck-panel::after,
.control-panel::after,
.progress-panel::after,
.result-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-position: center 16%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.38;
  filter: saturate(0.78) contrast(1.06) brightness(0.94);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.7) 48%, transparent 90%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.7) 48%, transparent 90%);
  pointer-events: none;
}

.deck-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.04), rgba(2, 14, 30, 0.2)), url("./doc-in-the-mix-party.jpg");
}

.control-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.04), rgba(2, 14, 30, 0.22)), url("./doc-in-the-mix-brown.jpg");
  background-position: 58% 15%;
}

.progress-panel::after,
.result-panel::after {
  background-image: linear-gradient(rgba(2, 14, 30, 0.02), rgba(2, 14, 30, 0.2)), url("./doc-in-the-mix-cream.jpg");
  background-position: center 12%;
}

.deck-panel > *,
.control-panel > *,
.progress-panel > *,
.result-panel > * {
  position: relative;
  z-index: 1;
}

.deck-panel,
.control-panel {
  border-radius: var(--radius);
}

.deck-panel {
  position: relative;
}

.deck-panel::before,
.control-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 1.2rem;
  left: 1.2rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--blue));
  box-shadow: 0 0 18px rgba(255, 59, 167, 0.46);
}

.upload-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.upload-target {
  width: 100%;
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 2rem;
  border: 1.5px dashed rgba(40, 220, 255, 0.5);
  border-radius: 17px;
  color: var(--ink);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 59, 167, 0.14), transparent 42%),
    radial-gradient(circle at 68% 72%, rgba(40, 220, 255, 0.12), transparent 46%),
    rgba(1, 10, 24, 0.5);
  cursor: pointer;
  transition: 180ms ease;
}

.upload-target:hover,
.upload-panel.dragging .upload-target {
  border-color: var(--gold);
  background:
    radial-gradient(circle at center, rgba(255, 182, 41, 0.16), transparent 58%),
    rgba(2, 17, 36, 0.9);
  transform: translateY(-2px);
}

.upload-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(135deg, var(--gold-hot), var(--gold) 48%, #ff6b4a);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(245, 184, 46, 0.24);
}

.upload-copy strong,
.upload-copy small {
  display: block;
  text-align: center;
}

.upload-copy strong {
  font-size: 1.3rem;
}

.upload-copy small {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.93rem;
}

.track-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.instrumental-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 0 50%, rgba(103, 231, 180, 0.08), transparent 34%),
    rgba(4, 11, 19, 0.34);
}

.instrumental-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.lock-mark {
  min-width: 48px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(103, 231, 180, 0.42);
  border-radius: 999px;
  color: var(--green);
  background: rgba(103, 231, 180, 0.08);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.instrumental-kicker {
  margin: 0 0 0.3rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.instrumental-heading h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.instrumental-heading > div > p:last-child {
  max-width: 650px;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.instrumental-empty {
  margin-top: 1rem;
}

.beat-vault {
  margin-top: 1rem;
  border: 1px solid rgba(226, 231, 238, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(232, 236, 242, 0.08), rgba(77, 85, 98, 0.07) 48%, rgba(244, 247, 250, 0.06)),
    rgba(2, 8, 16, 0.58);
  overflow: hidden;
}

.beat-vault summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid transparent;
  color: #f2f5f8;
  cursor: pointer;
  list-style: none;
}

.beat-vault[open] summary {
  border-bottom-color: rgba(226, 231, 238, 0.18);
}

.beat-vault summary::-webkit-details-marker {
  display: none;
}

.beat-vault summary b,
.beat-vault summary small {
  display: block;
}

.beat-vault summary b {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
}

.beat-vault summary small {
  margin-top: 0.22rem;
  color: #aeb8c5;
  font-size: 0.76rem;
  line-height: 1.35;
}

.vault-count {
  flex: 0 0 auto;
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(246, 248, 251, 0.38);
  border-radius: 999px;
  color: #10151d;
  background: linear-gradient(135deg, #777f8b, #f7f9fb 46%, #aab1bc 70%, #eef1f5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 16px rgba(0, 0, 0, 0.28);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.beat-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
}

.beat-vault-button {
  position: relative;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.18rem 0.65rem;
  padding: 0.72rem;
  border: 1px solid #f5f7fa;
  border-radius: 12px;
  color: #080c12;
  background:
    linear-gradient(112deg, transparent 0 29%, rgba(255, 255, 255, 0.78) 40%, transparent 53%),
    linear-gradient(145deg, #606873 0%, #d9dee5 25%, #f8fafc 46%, #a4acb7 67%, #eef1f5 84%, #707883 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.92),
    inset 0 -1px 1px rgba(31, 37, 45, 0.36),
    0 7px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.beat-vault-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.3) 38%, transparent 60%);
  transform: translateX(-115%);
  transition: transform 420ms ease;
}

.beat-vault-button:hover {
  transform: translateY(-2px);
  border-color: #ffffff;
  box-shadow: inset 0 1px 1px #fff, 0 10px 24px rgba(0, 0, 0, 0.4);
}

.beat-vault-button:hover::after {
  transform: translateX(115%);
}

.beat-vault-button:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.82);
  outline-offset: 3px;
}

.beat-vault-button.active {
  border-color: #67e7b4;
  box-shadow:
    inset 0 1px 1px #fff,
    0 0 0 2px rgba(103, 231, 180, 0.3),
    0 10px 26px rgba(0, 0, 0, 0.42);
}

.beat-vault-button.loading {
  animation: platinum-pulse 900ms ease-in-out infinite alternate;
}

.beat-vault-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.beat-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  grid-row: 1 / -1;
  border: 1px solid rgba(0, 0, 0, 0.26);
  border-radius: 50%;
  color: #f8fafc;
  background: linear-gradient(145deg, #05070a, #323944);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  font-weight: 950;
}

.beat-vault-copy {
  min-width: 0;
}

.beat-vault-copy strong,
.beat-vault-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beat-vault-copy strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.beat-vault-copy small {
  margin-top: 0.18rem;
  color: #3f4854;
  font-size: 0.69rem;
  font-weight: 750;
}

.beat-vault-action {
  color: #18212b;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.beat-vault-button.active .beat-vault-action {
  color: #07553d;
}

.beat-vault-status {
  display: block;
  padding: 0 0.95rem 0.95rem;
  color: #c6ced8;
  font-size: 0.76rem;
  line-height: 1.45;
}

@keyframes platinum-pulse {
  from { filter: brightness(0.86); }
  to { filter: brightness(1.16); }
}

.instrumental-upload {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px dashed rgba(103, 231, 180, 0.38);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(103, 231, 180, 0.04);
  cursor: pointer;
}

.instrumental-upload:hover {
  border-color: var(--green);
  background: rgba(103, 231, 180, 0.08);
}

.instrumental-upload > span:first-child {
  color: var(--green);
  font-size: 1.35rem;
}

.instrumental-upload strong,
.instrumental-upload small {
  display: block;
  text-align: left;
}

.instrumental-upload strong {
  font-size: 0.9rem;
}

.instrumental-upload small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.instrumental-loaded {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(103, 231, 180, 0.26);
  border-radius: 14px;
  background: rgba(3, 14, 18, 0.62);
}

.instrumental-play {
  border-color: rgba(103, 231, 180, 0.48);
  color: var(--green);
  background: rgba(103, 231, 180, 0.07);
}

.instrumental-copy {
  min-width: 0;
}

.instrumental-copy strong,
.instrumental-copy small {
  display: block;
}

.locked-badge {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.instrumental-copy strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instrumental-copy small {
  margin-top: 0.22rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instrumental-bpm {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.2rem 0.45rem;
}

.instrumental-bpm label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.instrumental-bpm input {
  width: 64px;
  grid-row: span 2;
  padding: 0.45rem 0.35rem;
  border: 1px solid rgba(103, 231, 180, 0.28);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: 800;
}

.instrumental-bpm span {
  color: var(--green);
  font-size: 0.75rem;
}

.instrumental-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.instrumental-volume {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  align-items: center;
  gap: 0.45rem 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(103, 231, 180, 0.18);
}

.instrumental-volume label {
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.instrumental-volume output {
  min-width: 42px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.instrumental-volume small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.acapella-panel {
  background:
    radial-gradient(circle at 0 50%, rgba(71, 215, 255, 0.1), transparent 36%),
    rgba(4, 10, 22, 0.42);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-loaded {
  border-color: rgba(71, 215, 255, 0.4);
}

.acapella-panel .instrumental-loaded {
  background: rgba(3, 10, 22, 0.68);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-kicker,
.acapella-panel .instrumental-bpm span,
.acapella-panel .locked-badge,
.acapella-panel .instrumental-volume output {
  color: var(--blue);
}

.acapella-panel .lock-mark,
.acapella-panel .instrumental-upload,
.acapella-panel .instrumental-play {
  background: rgba(71, 215, 255, 0.07);
}

.acapella-panel .instrumental-upload {
  border-color: rgba(71, 215, 255, 0.42);
}

.acapella-panel .instrumental-upload:hover {
  border-color: var(--blue);
  background: rgba(71, 215, 255, 0.11);
}

.acapella-panel .instrumental-upload > span:first-child,
.acapella-panel .instrumental-play {
  color: var(--blue);
}

.acapella-panel .instrumental-bpm input {
  border-color: rgba(71, 215, 255, 0.34);
}

.acapella-panel .instrumental-bpm.clock-locked input {
  border-color: rgba(71, 215, 255, 0.7);
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(71, 215, 255, 0.08);
  cursor: not-allowed;
}

.acapella-panel .instrumental-bpm.clock-locked span {
  font-weight: 850;
}

.acapella-panel .instrumental-volume {
  border-top-color: rgba(71, 215, 255, 0.2);
}

.vocal-arrangement-sync {
  display: grid;
  grid-column: 2 / -1;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.phrase-sync-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid rgba(71, 215, 255, 0.42);
  border-radius: 13px;
  color: var(--ink);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.1), rgba(245, 184, 46, 0.05));
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.phrase-sync-button:hover {
  border-color: rgba(71, 215, 255, 0.8);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.15), rgba(245, 184, 46, 0.08));
  transform: translateY(-1px);
}

.phrase-sync-button:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.34);
  outline-offset: 2px;
}

.phrase-sync-button.active {
  border-color: var(--gold);
  background: linear-gradient(120deg, rgba(71, 215, 255, 0.16), rgba(245, 184, 46, 0.15));
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.12), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.phrase-sync-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(71, 215, 255, 0.5);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.09);
  font-size: 0.78rem;
  font-weight: 950;
}

.phrase-sync-button.active .phrase-sync-icon {
  border-color: rgba(245, 184, 46, 0.68);
  color: var(--gold);
  background: rgba(245, 184, 46, 0.1);
}

.phrase-sync-button strong,
.phrase-sync-button small {
  display: block;
}

.phrase-sync-button strong {
  font-size: 0.86rem;
}

.phrase-sync-button small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.phrase-sync-button b {
  min-width: 42px;
  padding: 0.3rem 0.42rem;
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(147, 166, 191, 0.1);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.phrase-sync-button.active b {
  color: #171005;
  background: var(--gold);
}

.vocal-arrangement-sync p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.vocal-beat-nudge {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.25rem;
  padding: 0.78rem;
  border: 1px solid rgba(245, 184, 46, 0.28);
  border-radius: 12px;
  background: rgba(245, 184, 46, 0.045);
}

.vocal-beat-nudge > span {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.vocal-nudge-controls {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(125px, auto) minmax(112px, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.vocal-nudge-controls button,
.vocal-nudge-reset {
  min-height: 40px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(71, 215, 255, 0.34);
  border-radius: 9px;
  color: var(--ink);
  background: rgba(71, 215, 255, 0.07);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
}

.vocal-nudge-controls button:hover,
.vocal-nudge-reset:hover {
  border-color: var(--blue);
  background: rgba(71, 215, 255, 0.12);
}

.vocal-nudge-controls button:focus-visible,
.vocal-nudge-reset:focus-visible {
  outline: 3px solid rgba(245, 184, 46, 0.3);
  outline-offset: 2px;
}

.vocal-nudge-controls button:disabled,
.vocal-nudge-reset:disabled {
  opacity: 0.42;
  cursor: default;
}

.vocal-nudge-controls output {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vocal-nudge-reset {
  justify-self: start;
  min-height: 34px;
  border-color: rgba(245, 184, 46, 0.28);
  color: var(--gold);
  background: transparent;
}

.vocal-beat-nudge small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.track-heading,
.deck-overview,
.track-actions,
.transport-row,
.result-topline,
.result-track-line,
.control-label,
.section-heading,
.switch-row,
.download-row {
  display: flex;
  align-items: center;
}

.track-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.deck-overview {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.deck-overview h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.25;
}

.deck-overview p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.track-actions {
  flex: 0 0 auto;
  gap: 0.9rem;
}

.text-button.muted {
  color: var(--muted-strong);
}

.text-button:disabled {
  color: #667082;
  cursor: default;
}

.track-decks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.2rem;
}

.track-deck {
  min-width: 0;
  min-height: 92px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(3, 8, 17, 0.5);
}

.track-deck.loaded.active {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(245, 184, 46, 0.13), rgba(7, 14, 26, 0.8));
  box-shadow: inset 0 0 0 1px rgba(245, 184, 46, 0.08);
}

.deck-select,
.track-deck.empty {
  width: 100%;
  min-height: 90px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.deck-select {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.9rem 0.8rem 0.7rem;
  text-align: left;
}

.deck-letter {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(71, 215, 255, 0.35);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  font-size: 0.76rem;
  font-weight: 900;
}

.track-deck.active .deck-letter {
  border-color: rgba(245, 184, 46, 0.48);
  color: var(--gold);
  background: rgba(245, 184, 46, 0.09);
}

.deck-copy {
  min-width: 0;
}

.deck-copy strong,
.deck-copy small {
  display: block;
}

.deck-copy strong {
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-copy small {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.69rem;
  white-space: nowrap;
}

.deck-remove {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(3, 8, 17, 0.82);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.deck-remove:hover {
  color: white;
  background: rgba(255, 106, 117, 0.22);
}

.track-deck.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  border: 1px dashed rgba(147, 166, 191, 0.24);
  color: var(--muted);
}

.track-deck.empty:hover {
  border-color: rgba(71, 215, 255, 0.48);
  color: var(--blue);
  background: rgba(71, 215, 255, 0.05);
}

.track-deck.empty .deck-letter {
  width: 27px;
  height: 27px;
  opacity: 0.72;
}

.deck-empty-copy {
  font-size: 0.72rem;
  font-weight: 750;
}

.active-track-heading {
  align-items: flex-end;
  margin: 0 0 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.preview-note {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.track-panel.dragging {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(245, 184, 46, 0.14);
}

.track-label {
  display: block;
  margin-bottom: 0.26rem;
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.track-heading h2 {
  max-width: min(58vw, 560px);
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-heading p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.text-button,
.icon-button {
  border: 0;
  cursor: pointer;
}

.text-button {
  padding: 0.7rem 0;
  color: var(--gold);
  background: none;
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.waveform-shell {
  position: relative;
  height: 155px;
  overflow: hidden;
  border: 1px solid rgba(71, 215, 255, 0.2);
  border-radius: 14px;
  background: #040a14;
}

#waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wave-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--blue) 12.5%);
  pointer-events: none;
}

.playhead {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(245, 184, 46, 0.7);
  transform: translateX(-2px);
  pointer-events: none;
}

.transport-row {
  gap: 0.9rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.round-button {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(71, 215, 255, 0.08);
  cursor: pointer;
}

.round-button span {
  transform: translateX(1px);
}

.transport-time {
  display: flex;
  gap: 0.42rem;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}

.bpm-readout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.bpm-readout label {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.bpm-readout input {
  width: 76px;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-weight: 800;
}

.bpm-readout span {
  color: var(--green);
  font-size: 0.875rem;
}

.master-bpm-readout {
  margin-left: 0;
}

.song-bpm-readout {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(71, 215, 255, 0.2);
  border-radius: 10px;
  background: rgba(71, 215, 255, 0.045);
}

.song-bpm-readout span {
  color: var(--blue);
  font-weight: 800;
}

.preset-section {
  padding: clamp(1.1rem, 3vw, 1.7rem);
}

.section-heading {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-heading > span {
  max-width: 330px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: right;
}

.step-number {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin: 0 0 0.45rem;
  border: 1px solid rgba(245, 184, 46, 0.44);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.07);
  font-size: 0.75rem;
  font-weight: 900;
}

.section-heading h2,
.result-panel h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}

.preset-card {
  min-height: 150px;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(155deg, rgba(7, 29, 58, 0.76), rgba(1, 8, 19, 0.78));
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.preset-card:hover {
  transform: translateY(-2px);
  border-color: rgba(40, 220, 255, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 22px rgba(40, 220, 255, 0.08);
}

.preset-card.active {
  border-color: var(--gold);
  background: linear-gradient(150deg, rgba(255, 59, 167, 0.15), rgba(255, 182, 41, 0.1) 48%, rgba(8, 8, 25, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 182, 41, 0.11), 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 24px rgba(255, 59, 167, 0.09);
}

.preset-card strong,
.preset-card small {
  display: block;
}

.preset-card strong {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.25;
}

.preset-card small {
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.preset-art {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 0.15rem;
}

.preset-art i {
  display: block;
  flex: 1;
  max-width: 18px;
  border-radius: 20px;
  background: linear-gradient(to top, var(--blue-deep), var(--blue));
  box-shadow: 0 0 12px rgba(71, 215, 255, 0.2);
}

.preset-card.active .preset-art i {
  background: linear-gradient(to top, #a56600, var(--gold-hot));
  box-shadow: 0 0 12px rgba(245, 184, 46, 0.28);
}

.slowride-art i:nth-child(1) { height: 20px; }
.slowride-art i:nth-child(2) { height: 45px; }
.slowride-art i:nth-child(3) { height: 29px; }
.scratch-art i:nth-child(1) { height: 42px; transform: rotate(16deg); }
.scratch-art i:nth-child(2) { height: 25px; transform: rotate(-13deg); }
.scratch-art i:nth-child(3) { height: 39px; transform: rotate(18deg); }
.coast-art i:nth-child(1) { height: 24px; border-radius: 60% 30%; }
.coast-art i:nth-child(2) { height: 39px; border-radius: 35% 60%; }
.coast-art i:nth-child(3) { height: 27px; border-radius: 60% 35%; }
.total-art i:nth-child(1) { height: 46px; }
.total-art i:nth-child(2) { height: 34px; }
.total-art i:nth-child(3) { height: 47px; }
.soul-art i:nth-child(1) { height: 19px; border-radius: 50% 50% 20% 20%; }
.soul-art i:nth-child(2) { height: 32px; border-radius: 55% 55% 25% 25%; }
.soul-art i:nth-child(3) { height: 24px; border-radius: 50% 50% 20% 20%; }
.twerk-art i:nth-child(1) { height: 47px; transform: skewX(-10deg); }
.twerk-art i:nth-child(2) { height: 18px; transform: skewX(12deg); }
.twerk-art i:nth-child(3) { height: 44px; transform: skewX(-8deg); }
.funk-art i:nth-child(1) { height: 29px; transform: translateY(7px) rotate(-12deg); }
.funk-art i:nth-child(2) { height: 44px; transform: rotate(9deg); }
.funk-art i:nth-child(3) { height: 22px; transform: translateY(-5px) rotate(-9deg); }
.rnb-art i:nth-child(1) { height: 18px; border-radius: 50%; }
.rnb-art i:nth-child(2) { height: 27px; border-radius: 50%; }
.rnb-art i:nth-child(3) { height: 20px; border-radius: 50%; }
.edm-art i:nth-child(1) { height: 16px; clip-path: polygon(0 100%, 100% 100%, 100% 62%); }
.edm-art i:nth-child(2) { height: 31px; clip-path: polygon(0 100%, 100% 100%, 100% 34%); }
.edm-art i:nth-child(3) { height: 48px; clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.gospel-art i:nth-child(1) { height: 34px; border-radius: 50% 50% 8px 8px; }
.gospel-art i:nth-child(2) { height: 47px; border-radius: 50% 50% 8px 8px; }
.gospel-art i:nth-child(3) { height: 38px; border-radius: 50% 50% 8px 8px; }

.control-panel {
  position: sticky;
  top: 1rem;
  padding: clamp(1.15rem, 3vw, 1.7rem);
}

.section-heading.compact {
  align-items: center;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
  font-size: 1.2rem;
}

.control-list {
  display: grid;
  gap: 1.2rem;
}

.control-group {
  padding-bottom: 0.1rem;
}

.control-label {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.control-label label,
.select-group label {
  color: var(--muted-strong);
  font-size: 0.86rem;
  font-weight: 700;
}

.control-label output {
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  border-radius: 99px;
  background: linear-gradient(to right, var(--gold) 0 var(--fill, 50%), rgba(145, 166, 191, 0.2) var(--fill, 50%) 100%);
  cursor: pointer;
}

input[type="range"]:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.control-group.tempo-locked .control-label output,
.control-group.tempo-locked .control-help {
  color: var(--green);
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  appearance: none;
  border: 3px solid #07101f;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.42), 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #07101f;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.42);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.44rem;
  color: #6f829d;
  font-size: 0.69rem;
}

.control-help {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.fx-preview-button {
  width: 100%;
  min-height: 42px;
  margin-top: 0.65rem;
  border: 1px solid rgba(245, 184, 46, 0.4);
  border-radius: 10px;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.07);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.fx-preview-button:hover {
  background: rgba(245, 184, 46, 0.13);
}

.fx-preview-button:focus-visible {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.dj-tag-tool {
  display: grid;
  gap: 0.55rem;
}

.dj-tag-launch-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 74px;
  padding: 0.75rem;
  border: 1px solid rgba(210, 224, 240, 0.48);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 27%, rgba(255, 59, 167, 0.09) 72%, transparent),
    linear-gradient(145deg, #516176, #101b2c 42%, #070d17 76%, #27364a);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.34), 0 13px 30px rgba(0, 0, 0, 0.28);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dj-tag-launch-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.46), 0 16px 34px rgba(0, 0, 0, 0.34);
}

.dj-tag-launch-button.open,
.dj-tag-launch-button.ready {
  border-color: rgba(40, 220, 255, 0.56);
}

.dj-tag-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(145deg, #fff, #9eacbe 48%, #f6bd49);
  box-shadow: 0 0 18px rgba(40, 220, 255, 0.2);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.dj-tag-launch-button > span:nth-child(2) {
  min-width: 0;
}

.dj-tag-launch-button strong,
.dj-tag-launch-button small {
  display: block;
}

.dj-tag-launch-button strong {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.035em;
}

.dj-tag-launch-button small {
  margin-top: 0.22rem;
  overflow: hidden;
  color: #bfcbdc;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-tag-launch-button > b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgba(0, 0, 0, 0.24);
  font-size: 1.15rem;
  transition: transform 160ms ease;
}

.dj-tag-launch-button.open > b {
  transform: rotate(45deg);
}

.dj-tag-panel {
  display: grid;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px solid rgba(40, 220, 255, 0.22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(12, 28, 48, 0.94), rgba(2, 7, 14, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.dj-tag-empty {
  display: grid;
  gap: 0.7rem;
}

.dj-tag-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.48;
}

.dj-tag-upload-button {
  min-height: 46px;
  border: 1px solid rgba(255, 182, 41, 0.52);
  border-radius: 11px;
  color: #07101f;
  cursor: pointer;
  background: linear-gradient(145deg, var(--gold-hot), var(--gold));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  font-weight: 900;
}

.dj-tag-upload-button > span {
  margin-right: 0.28rem;
  font-size: 1rem;
}

.dj-tag-loaded {
  display: grid;
  gap: 0.7rem;
}

.dj-tag-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(101, 242, 189, 0.28);
  border-radius: 11px;
  background: rgba(101, 242, 189, 0.055);
}

.dj-tag-wave {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--green);
  background: rgba(101, 242, 189, 0.1);
  font-size: 1.2rem;
}

.dj-tag-file > span:last-child {
  min-width: 0;
}

.dj-tag-file strong,
.dj-tag-file small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-tag-file strong {
  font-size: 0.82rem;
}

.dj-tag-file small {
  margin-top: 0.18rem;
  color: var(--green);
  font-size: 0.68rem;
}

.dj-tag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dj-tag-actions .text-button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.72rem;
}

.dj-tag-placement {
  display: grid;
  gap: 0.4rem;
}

.dj-tag-placement > span {
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.dj-tag-placement select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #091321;
}

.dj-tag-placement select:disabled {
  opacity: 0.5;
}

.dj-tag-volume {
  margin: 0;
}

.select-group {
  display: grid;
  gap: 0.55rem;
}

.select-group select {
  width: 100%;
  min-height: 46px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #0a1423;
  cursor: pointer;
}

.scratch-pattern-grid {
  display: grid;
  gap: 0.55rem;
}

.scratch-pattern-grid > label {
  display: grid;
  gap: 0.32rem;
}

.scratch-pattern-grid > label > span {
  color: #8191a7;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.scratch-pattern-grid select:disabled,
.scratch-pattern-grid option:disabled {
  color: #667082;
}

.switch-row {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(3, 8, 17, 0.42);
  cursor: pointer;
}

.switch-row.dance-lock {
  border-color: rgba(103, 231, 180, 0.32);
  background: rgba(103, 231, 180, 0.055);
}

.switch-row.dance-lock strong {
  color: var(--green);
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row strong {
  font-size: 0.85rem;
}

.switch-row small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-row i {
  width: 46px;
  height: 26px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 20px;
  background: #334058;
  transition: 160ms ease;
}

.switch-row i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d8e0ea;
  transition: 160ms ease;
}

.switch-row input:focus-visible + i {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.switch-row input:checked + i {
  background: var(--gold);
}

.switch-row input:checked + i::after {
  left: 24px;
  background: #07101f;
}

.mix-success-card {
  padding: 1rem;
  border: 1px solid rgba(71, 215, 255, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(71, 215, 255, 0.08), rgba(3, 8, 17, 0.62));
}

.mix-success-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.mix-success-heading span,
.mix-success-heading strong {
  display: block;
}

.mix-success-heading span {
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.mix-success-heading strong {
  margin-top: 0.15rem;
  color: var(--gold);
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mix-success-heading b {
  max-width: 145px;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(145, 166, 191, 0.22);
  border-radius: 999px;
  color: var(--muted-strong);
  background: rgba(3, 8, 17, 0.42);
  font-size: 0.76rem;
  line-height: 1.25;
  text-align: center;
}

.mix-success-meter {
  height: 9px;
  margin-top: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(145, 166, 191, 0.16);
}

.mix-success-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7d61, var(--gold), var(--green));
  transition: width 220ms ease;
}

.mix-success-card p {
  margin: 0.72rem 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.45;
}

.mix-success-card small {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.mix-success-card.excellent {
  border-color: rgba(103, 231, 180, 0.42);
  background: linear-gradient(145deg, rgba(103, 231, 180, 0.1), rgba(3, 8, 17, 0.62));
}

.mix-success-card.excellent .mix-success-heading strong,
.mix-success-card.strong .mix-success-heading strong {
  color: var(--green);
}

.mix-success-card.good .mix-success-heading strong {
  color: var(--gold);
}

.mix-success-card.workable .mix-success-heading strong,
.mix-success-card.risky .mix-success-heading strong {
  color: #ff9a72;
}

.make-section {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.primary-button {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 14px;
  color: #13091d;
  background: linear-gradient(115deg, var(--gold-hot), var(--gold) 42%, #ff7554 72%, var(--pink));
  box-shadow: 0 14px 38px rgba(255, 59, 167, 0.22), 0 8px 28px rgba(255, 182, 41, 0.18);
  cursor: pointer;
  transition: 160ms ease;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255, 59, 167, 0.3), 0 10px 34px rgba(255, 182, 41, 0.24);
}

.primary-button:disabled {
  color: #667082;
  background: #242e3e;
  box-shadow: none;
  cursor: not-allowed;
}

.primary-button strong,
.primary-button small {
  display: block;
  text-align: left;
}

.primary-button strong {
  font-size: 1.08rem;
}

.primary-button small {
  margin-top: 0.16rem;
  font-size: 0.73rem;
  opacity: 0.75;
}

.button-icon {
  font-size: 1.55rem;
}

.rights-note {
  margin: 0.72rem 0 0;
  color: #73839a;
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
}

.progress-panel,
.result-panel {
  margin-top: 1.25rem;
  border-radius: var(--radius);
}

.progress-panel {
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

.progress-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.progress-copy strong {
  display: block;
  font-size: 1rem;
}

.progress-copy p {
  margin: 0.22rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.progress-copy > span:last-child {
  color: var(--gold);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.spinner {
  width: 33px;
  height: 33px;
  border: 3px solid rgba(71, 215, 255, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.progress-track {
  height: 7px;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(147, 166, 191, 0.14);
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  box-shadow: 0 0 20px rgba(71, 215, 255, 0.35);
  transition: width 180ms ease;
}

.result-panel {
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border-color: rgba(245, 184, 46, 0.32);
  background:
    radial-gradient(circle at 12% 0, rgba(255, 182, 41, 0.13), transparent 36%),
    radial-gradient(circle at 90% 20%, rgba(255, 59, 167, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(7, 29, 58, 0.96), rgba(1, 8, 20, 0.99));
}

.result-topline {
  justify-content: space-between;
  gap: 1rem;
}

.result-badge {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(245, 184, 46, 0.32);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(245, 184, 46, 0.06);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.result-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(3, 8, 17, 0.6);
}

.large-play {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #07101f;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(245, 184, 46, 0.22);
}

.result-track-line {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.result-track-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-track-line span {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.result-seek {
  --fill: 0%;
}

.download-row {
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.download-button,
.secondary-button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.download-button {
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: #101d31;
}

.download-button.gold {
  border-color: var(--gold);
  color: #07101f;
  background: var(--gold);
}

.download-button > span:first-child {
  font-size: 1.3rem;
  font-weight: 900;
}

.download-button strong,
.download-button small {
  display: block;
  text-align: left;
}

.download-button strong {
  font-size: 0.88rem;
}

.download-button small {
  margin-top: 0.1rem;
  font-size: 0.69rem;
  opacity: 0.7;
}

.download-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.secondary-button {
  margin-left: auto;
  padding: 0 1rem;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.025);
}

.broadcast-launcher {
  position: relative;
  margin-top: 1.25rem;
}

.broadcast-launch-button {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  width: 100%;
  min-height: 118px;
  padding: clamp(1.05rem, 3vw, 1.55rem) clamp(1rem, 4vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(231, 240, 251, 0.72);
  border-radius: var(--radius);
  color: #fff;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.19), transparent 25%, rgba(255, 255, 255, 0.08) 52%, transparent 70%),
    linear-gradient(145deg, #8c99aa 0%, #26364c 22%, #0a1526 48%, #53667d 72%, #111c2c 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.46),
    0 0 28px rgba(40, 220, 255, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px rgba(0, 0, 0, 0.65);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.broadcast-launch-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 8% 50%, rgba(40, 220, 255, 0.24), transparent 26%),
    radial-gradient(circle at 88% 40%, rgba(255, 59, 167, 0.2), transparent 25%),
    linear-gradient(90deg, transparent, rgba(255, 182, 41, 0.12), transparent);
  pointer-events: none;
}

.broadcast-launch-button::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  left: 1.5rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--blue), #fff, var(--gold), var(--pink));
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.4);
}

.broadcast-launch-button:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(40, 220, 255, 0.2),
    inset 0 1px #fff;
}

.broadcast-launch-button.open {
  border-color: rgba(40, 220, 255, 0.72);
  border-radius: var(--radius) var(--radius) 14px 14px;
}

.broadcast-launch-icon {
  display: grid;
  place-items: center;
  width: clamp(54px, 8vw, 72px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: var(--gold-hot);
  background: radial-gradient(circle, #23354c 0 24%, #050b14 26% 48%, #aebdce 50% 52%, #1b2a3c 55% 100%);
  box-shadow: 0 0 24px rgba(40, 220, 255, 0.28), inset 0 0 16px rgba(255, 255, 255, 0.15);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.broadcast-launch-copy {
  min-width: 0;
}

.broadcast-launch-copy > span,
.broadcast-launch-copy strong,
.broadcast-launch-copy small {
  display: block;
}

.broadcast-launch-copy > span {
  margin-bottom: 0.28rem;
  color: var(--blue);
  font-size: clamp(0.62rem, 1.5vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.broadcast-launch-copy strong {
  font-size: clamp(1.25rem, 4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.broadcast-launch-copy small {
  margin-top: 0.42rem;
  color: #d7e0ed;
  font-size: clamp(0.72rem, 1.7vw, 0.88rem);
  line-height: 1.45;
}

.broadcast-launch-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  font-size: 1.7rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.broadcast-launch-button.open .broadcast-launch-arrow {
  transform: rotate(180deg);
}

.radio-set-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0.75rem;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid rgba(205, 220, 237, 0.35);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, 0.1), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(40, 220, 255, 0.09), transparent 28rem),
    linear-gradient(145deg, rgba(8, 21, 39, 0.98), rgba(0, 0, 0, 0.99));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.08);
}

.radio-set-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 8, 18, 0.72)), url("./doc-in-the-mix-party.jpg") center 20% / cover no-repeat;
  opacity: 0.25;
  filter: grayscale(0.18) contrast(1.12);
  -webkit-mask-image: linear-gradient(115deg, #000, rgba(0, 0, 0, 0.48) 50%, transparent 88%);
  mask-image: linear-gradient(115deg, #000, rgba(0, 0, 0, 0.48) 50%, transparent 88%);
  pointer-events: none;
}

.radio-set-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 1.5rem;
  left: 1.5rem;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #8995a8, #fff, #8d9eb4, var(--blue));
  box-shadow: 0 0 20px rgba(200, 225, 255, 0.42);
  pointer-events: none;
}

.radio-set-panel > * {
  position: relative;
  z-index: 1;
}

.radio-set-heading,
.radio-subheading,
.radio-set-summary,
.radio-set-progress > div,
.radio-set-result {
  display: flex;
  align-items: center;
}

.radio-set-heading {
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(205, 220, 237, 0.18);
}

.radio-set-heading h2 {
  margin: 0.08rem 0 0.45rem;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  letter-spacing: -0.035em;
}

.radio-set-heading > div > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.6;
}

.broadcast-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(205, 220, 237, 0.45);
  border-radius: 999px;
  color: #eaf5ff;
  background: linear-gradient(145deg, rgba(196, 214, 234, 0.17), rgba(60, 77, 100, 0.14));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.broadcast-badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 13px rgba(101, 242, 189, 0.75);
}

.radio-set-console {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 1rem;
  margin-top: 1.15rem;
}

.radio-source-panel,
.talkin-recorder,
.radio-running-order,
.radio-output-settings,
.radio-set-progress,
.radio-set-result {
  border: 1px solid rgba(205, 220, 237, 0.2);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(11, 28, 51, 0.88), rgba(2, 8, 17, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.radio-source-panel,
.talkin-recorder,
.radio-running-order,
.radio-output-settings {
  padding: 1rem;
}

.radio-subheading {
  align-items: flex-start;
  gap: 0.75rem;
}

.radio-subheading h3,
.radio-set-result h3 {
  margin: 0;
  font-size: 1rem;
}

.radio-subheading p {
  margin: 0.24rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.pro-radio-mic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(101, 242, 189, 0.34);
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(101, 242, 189, 0.1), rgba(40, 220, 255, 0.045)),
    rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 0 22px rgba(101, 242, 189, 0.035);
}

.pro-radio-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 237, 250, 0.6);
  border-radius: 50%;
  color: #07101f;
  background: linear-gradient(145deg, #fff, #91a4b9 48%, #dce9f4);
  box-shadow: inset 0 1px #fff, 0 0 14px rgba(101, 242, 189, 0.16);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.pro-radio-mic strong,
.pro-radio-mic small {
  display: block;
}

.pro-radio-mic strong {
  color: var(--green);
  font-size: 0.8rem;
  letter-spacing: 0.055em;
}

.pro-radio-mic small {
  margin-top: 0.14rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.pro-radio-mic > b {
  padding: 0.32rem 0.45rem;
  border: 1px solid rgba(40, 220, 255, 0.24);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.05);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.radio-step {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(205, 220, 237, 0.42);
  border-radius: 50%;
  color: #edf7ff;
  background: linear-gradient(145deg, #53657b, #1a2637);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.radio-upload-button,
.radio-build-button,
.record-button,
.platinum-action {
  border: 1px solid rgba(205, 220, 237, 0.48);
  color: #07101f;
  background: linear-gradient(135deg, #f7fbff 0%, #a7b6c8 28%, #edf5fb 49%, #718399 75%, #dce9f4 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.radio-upload-button {
  width: 100%;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  border-style: dashed;
  border-radius: 13px;
}

.radio-upload-button > span:first-child {
  font-size: 1.75rem;
  line-height: 1;
}

.radio-upload-button strong,
.radio-upload-button small,
.radio-build-button strong,
.radio-build-button small {
  display: block;
  text-align: left;
}

.radio-upload-button small,
.radio-build-button small {
  margin-top: 0.14rem;
  font-size: 0.76rem;
  opacity: 0.7;
}

.talkin-name-label {
  display: block;
  margin: 0.82rem 0 0.35rem;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.talkin-name {
  width: 100%;
  min-height: 43px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(205, 220, 237, 0.22);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.38);
}

.talkin-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.record-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 0.9rem;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #ff5364, #a50e28);
  border-color: rgba(255, 127, 138, 0.72);
}

.record-button i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.58);
}

.record-button.recording i {
  animation: record-pulse 1s ease-in-out infinite;
}

@keyframes record-pulse {
  50% { opacity: 0.35; transform: scale(0.78); }
}

.secondary-button.compact {
  min-height: 48px;
  margin-left: 0;
}

.secondary-button:disabled,
.record-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.talkin-controls output {
  min-width: 3.1rem;
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.talkin-review {
  margin-top: 0.7rem;
  padding: 0.7rem;
  border: 1px solid rgba(101, 242, 189, 0.3);
  border-radius: 11px;
  background: rgba(101, 242, 189, 0.045);
}

.talkin-review audio {
  width: 100%;
  height: 38px;
}

.talkin-review > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.platinum-action {
  min-height: 38px;
  padding: 0 0.75rem;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 900;
}

.talkin-status {
  margin: 0.58rem 0 0;
  color: #788da8;
  font-size: 0.75rem;
  line-height: 1.4;
}

.radio-running-order,
.radio-output-settings {
  margin-top: 1rem;
}

.running-order-heading > div {
  flex: 1;
}

.running-order-heading > button {
  flex: 0 0 auto;
}

.radio-set-empty {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px dashed rgba(205, 220, 237, 0.23);
  border-radius: 12px;
  color: #7f91aa;
  font-size: 0.85rem;
  text-align: center;
}

.radio-set-tracks {
  display: grid;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: radio-track;
}

.radio-set-item {
  counter-increment: radio-track;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 62px;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(205, 220, 237, 0.16);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.32);
}

.radio-set-item::before {
  content: counter(radio-track, decimal-leading-zero);
  color: #7f91a9;
  font-size: 0.75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.radio-item-kind {
  min-width: 62px;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.055);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}

.radio-set-item.talkin .radio-item-kind {
  border-color: rgba(255, 106, 117, 0.38);
  color: #ff9ca6;
  background: rgba(255, 106, 117, 0.065);
}

.radio-item-copy {
  min-width: 0;
}

.radio-item-copy strong,
.radio-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-item-copy strong {
  font-size: 0.88rem;
}

.radio-item-copy small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.radio-item-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.radio-item-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 220, 237, 0.18);
  border-radius: 8px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.radio-item-actions button:hover:not(:disabled) {
  border-color: rgba(40, 220, 255, 0.55);
  color: #fff;
}

.radio-item-actions button:disabled {
  opacity: 0.28;
  cursor: default;
}

.radio-setting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
  gap: 1rem;
  margin-top: 0.9rem;
}

.duration-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.duration-picker legend,
.crossfade-picker > span {
  margin-bottom: 0.45rem;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.duration-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.duration-picker label {
  cursor: pointer;
}

.duration-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.duration-picker label > span {
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(205, 220, 237, 0.22);
  border-radius: 11px;
  color: #dbe8f6;
  background: rgba(0, 0, 0, 0.32);
  font-size: 1rem;
  font-weight: 950;
  transition: 150ms ease;
}

.duration-picker label > span small {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
}

.duration-picker input:checked + span {
  border-color: #dbe8f6;
  color: #07101f;
  background: linear-gradient(135deg, #fff, #9eafc2 45%, #edf5fb);
  box-shadow: 0 0 22px rgba(198, 223, 249, 0.16);
}

.duration-picker input:focus-visible + span {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 3px;
}

.crossfade-picker {
  display: flex;
  flex-direction: column;
}

.crossfade-picker select {
  min-height: 56px;
  padding: 0 0.75rem;
  border: 1px solid rgba(205, 220, 237, 0.25);
  border-radius: 11px;
  color: var(--ink);
  background: #101d31;
}

.crossfade-picker small {
  margin-top: 0.35rem;
  color: #788da8;
  font-size: 0.75rem;
}

.radio-set-summary {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.7rem;
  border: 1px solid rgba(205, 220, 237, 0.15);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
}

.radio-set-summary span {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.radio-set-summary span strong {
  color: #fff;
}

.radio-set-summary b {
  margin-left: auto;
  color: var(--green);
  font-size: 0.8rem;
}

.radio-build-button {
  width: 100%;
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 13px;
}

.radio-build-button:disabled {
  border-color: rgba(205, 220, 237, 0.15);
  color: #64758a;
  background: #202b39;
  box-shadow: none;
  cursor: not-allowed;
}

.broadcast-icon {
  font-size: 1.5rem;
}

.radio-set-progress {
  margin-top: 1rem;
  padding: 1rem;
}

.radio-set-progress > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.radio-set-progress p {
  margin: 0;
}

.radio-set-progress p strong,
.radio-set-progress p small {
  display: block;
}

.radio-set-progress p small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.radio-set-progress output {
  color: #ddecfa;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.radio-set-result {
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border-color: rgba(101, 242, 189, 0.34);
  background: linear-gradient(145deg, rgba(13, 54, 56, 0.58), rgba(1, 10, 17, 0.95));
}

.radio-set-result > div {
  min-width: 180px;
}

.radio-set-result > div p:last-child {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.radio-set-result audio {
  width: min(440px, 100%);
}

.download-button.platinum {
  flex: 0 0 auto;
  border-color: rgba(223, 237, 250, 0.55);
  color: #07101f;
  background: linear-gradient(135deg, #fff, #9aabba 35%, #edf5fb 58%, #7a8a9f);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
}

.radio-rights-note {
  margin: 0.85rem 0 0;
  color: #73839a;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

.remix-faq-launcher {
  margin-top: 1.1rem;
}

.remix-faq-launcher a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 112px;
  padding: 1.15rem 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(219, 235, 249, 0.48);
  border-radius: 20px;
  color: #ffffff;
  text-decoration: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(71, 215, 255, 0.28), transparent 36%),
    radial-gradient(circle at 82% 86%, rgba(255, 39, 146, 0.22), transparent 35%),
    linear-gradient(135deg, rgba(20, 37, 61, 0.98), rgba(5, 9, 18, 0.98) 58%, rgba(23, 18, 43, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 18px 42px rgba(0, 0, 0, 0.32);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.remix-faq-launcher a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.11) 45%, transparent 63%);
  transform: translateX(-100%);
  transition: transform 450ms ease;
}

.remix-faq-launcher a:hover,
.remix-faq-launcher a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(71, 215, 255, 0.85);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 20px 50px rgba(31, 170, 226, 0.2);
}

.remix-faq-launcher a:hover::before,
.remix-faq-launcher a:focus-visible::before {
  transform: translateX(100%);
}

.remix-faq-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #08111f;
  background: linear-gradient(145deg, #ffffff, #8ea0b2 42%, #eff7fd 65%, #73879b);
  box-shadow: inset 0 1px #ffffff, 0 0 28px rgba(71, 215, 255, 0.2);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.9rem;
}

.remix-faq-launcher a > span:nth-child(2) {
  display: grid;
  gap: 0.23rem;
}

.remix-faq-launcher small {
  color: #92eaff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.remix-faq-launcher strong {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.12rem, 2.6vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.035em;
}

.remix-faq-launcher b {
  color: #9caabe;
  font-size: 0.76rem;
  font-weight: 700;
}

.remix-faq-launcher i {
  color: #f1c75b;
  font-size: 1.75rem;
  font-style: normal;
}

.toast {
  position: fixed;
  z-index: 10;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: min(390px, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  border: 1px solid rgba(71, 215, 255, 0.34);
  border-radius: 12px;
  color: var(--ink);
  background: #101d31;
  box-shadow: var(--shadow);
  font-size: 0.84rem;
  line-height: 1.45;
}

.toast.error {
  border-color: rgba(255, 106, 117, 0.58);
}

footer {
  width: min(1380px, calc(100% - 2rem));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 0 0 2.5rem;
  color: #6f829d;
  font-size: 0.75rem;
}

footer p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .intro {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .doc-photo-wrap {
    height: 260px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .control-panel {
    position: static;
  }

  .preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-decks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preset-card {
    min-height: 128px;
  }

  .radio-set-console {
    grid-template-columns: 1fr;
  }

  .radio-set-result {
    align-items: stretch;
    flex-direction: column;
  }

  .radio-set-result audio {
    width: 100%;
  }

  .radio-set-result .download-button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .site-header {
    min-height: 70px;
    padding: 0.8rem 1rem;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand small {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .device-badge {
    width: 10px;
    overflow: hidden;
    color: transparent;
    gap: 0;
  }

  .studio-shell {
    width: min(100% - 1rem, 1380px);
    padding-top: 2rem;
  }

  .intro {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.1rem;
    border-radius: 22px;
  }

  .intro h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .intro-copy > p:last-of-type {
    font-size: 1rem;
  }

  .hero-features {
    gap: 0.45rem;
  }

  .hero-features span {
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
  }

  .doc-hero {
    width: 100%;
    max-width: none;
  }

  .doc-photo-wrap {
    height: 185px;
    border-radius: 20px 20px 52px 20px;
  }

  .doc-photo-wrap img {
    object-position: 50% 20%;
  }

  .doc-hero figcaption {
    right: 0.6rem;
    bottom: 0.65rem;
    min-width: 58%;
  }

  .deck-panel,
  .control-panel,
  .progress-panel,
  .result-panel {
    border-radius: 17px;
  }

  .upload-target {
    min-height: 220px;
  }

  .waveform-shell {
    height: 125px;
  }

  .track-heading {
    align-items: flex-start;
  }

  .deck-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .track-actions {
    width: 100%;
    justify-content: space-between;
  }

  .preview-note {
    display: none;
  }

  .instrumental-loaded {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .beat-vault summary {
    align-items: flex-start;
  }

  .beat-vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .beat-vault-button {
    min-height: 94px;
    padding: 0.62rem;
  }

  .instrumental-bpm {
    grid-column: 2;
    justify-self: start;
  }

  .instrumental-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
  }

  .instrumental-volume {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
  }

  .instrumental-volume input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .instrumental-volume small {
    grid-row: 3;
  }

  .vocal-arrangement-sync {
    grid-column: 1 / -1;
  }

  .phrase-sync-button {
    gap: 0.65rem;
    padding: 0.72rem;
  }

  .vocal-nudge-controls {
    grid-template-columns: 1fr 1fr;
  }

  .vocal-nudge-controls output {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .scratch-pattern-grid {
    gap: 0.7rem;
  }

  .dj-tag-launch-button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dj-tag-launch-button > b {
    display: none;
  }

  .dj-tag-launch-button small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .track-heading h2 {
    max-width: 64vw;
  }

  .section-heading > span {
    display: none;
  }

  .preset-grid {
    gap: 0.55rem;
  }

  .preset-card {
    min-height: 124px;
    padding: 0.75rem;
  }

  .preset-card strong {
    font-size: 0.84rem;
  }

  .preset-art {
    height: 42px;
  }

  .result-topline,
  .download-row,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .download-button,
  .secondary-button {
    width: 100%;
    margin-left: 0;
  }

  .result-player {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .broadcast-launch-button {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 104px;
  }

  .broadcast-launch-arrow {
    display: none;
  }

  .broadcast-launch-copy > span {
    letter-spacing: 0.08em;
  }

  .remix-faq-launcher a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 98px;
    padding: 0.95rem;
  }

  .remix-faq-icon {
    width: 52px;
    height: 52px;
    font-size: 1.55rem;
  }

  .remix-faq-launcher i {
    display: none;
  }

  .radio-set-panel {
    padding: 1rem;
    border-radius: 17px;
  }

  .radio-set-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .radio-set-heading > div > p:last-child {
    font-size: 0.86rem;
  }

  .radio-source-panel,
  .talkin-recorder,
  .radio-running-order,
  .radio-output-settings {
    padding: 0.8rem;
  }

  .talkin-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .talkin-controls output {
    grid-column: 1 / -1;
    text-align: left;
  }

  .running-order-heading {
    flex-wrap: wrap;
  }

  .running-order-heading > button {
    margin-left: 2.45rem;
  }

  .radio-set-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .radio-set-item::before {
    display: none;
  }

  .radio-item-kind {
    min-width: 54px;
  }

  .radio-item-actions {
    display: grid;
    grid-template-columns: repeat(2, 32px);
  }

  .radio-item-actions button {
    width: 32px;
    height: 30px;
  }

  .radio-setting-grid {
    grid-template-columns: 1fr;
  }

  .radio-set-summary b {
    width: 100%;
    margin-left: 0;
  }

  .radio-set-progress > div:first-child {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  footer {
    line-height: 1.45;
  }
}

/* Production Studio */

body {
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.app-view[hidden] {
  display: none !important;
}

.production-studio {
  display: grid;
  gap: 1.1rem;
}

.production-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  min-height: 300px;
  padding: clamp(1.4rem, 4vw, 2.7rem);
  overflow: hidden;
  border: 1px solid rgba(216, 232, 245, 0.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0, rgba(40, 220, 255, 0.2), transparent 34rem),
    linear-gradient(135deg, rgba(7, 26, 50, 0.98), rgba(0, 3, 9, 0.99) 58%, rgba(23, 7, 25, 0.98));
  box-shadow: var(--shadow);
}

.production-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 4, 11, 0.86), rgba(0, 5, 14, 0.44) 58%, rgba(0, 3, 8, 0.75)),
    url("./doc-in-the-mix-party.jpg") 82% 24% / cover no-repeat;
  opacity: 0.42;
  filter: saturate(0.75) contrast(1.08);
}

.production-hero h1 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.production-hero h1 span {
  color: transparent;
  background: linear-gradient(120deg, #ffffff 5%, #92a8ba 32%, #ffffff 52%, #778b9f 78%, #dce9f3);
  -webkit-background-clip: text;
  background-clip: text;
}

.production-hero > div:first-child > p:last-child {
  max-width: 760px;
  margin: 1.15rem 0 0;
  color: #c6d1df;
  font-size: 1rem;
  line-height: 1.65;
}

.production-signal {
  display: grid;
  gap: 0.36rem;
  min-width: 190px;
  padding: 1rem;
  border: 1px solid rgba(216, 232, 245, 0.28);
  border-radius: 15px;
  background: rgba(0, 3, 9, 0.76);
  backdrop-filter: blur(12px);
}

.production-signal span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.production-signal i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(101, 242, 189, 0.72);
}

.production-signal b {
  color: #ffffff;
  font-size: 1.05rem;
}

.production-signal small {
  color: #889aaf;
  font-size: 0.76rem;
}

.production-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(216, 232, 245, 0.22);
  border-radius: 18px;
  background: rgba(2, 10, 21, 0.94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.production-mode-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 82px;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #91a2b8;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.production-mode-tabs button > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(216, 232, 245, 0.25);
  border-radius: 50%;
  color: #9aabbd;
  font-size: 1.15rem;
}

.production-mode-tabs button > span:last-child {
  display: grid;
  gap: 0.16rem;
}

.production-mode-tabs strong {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.production-mode-tabs small {
  font-size: 0.76rem;
}

.production-mode-tabs button.active {
  border-color: rgba(40, 220, 255, 0.55);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(16, 68, 98, 0.72), rgba(11, 20, 37, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(40, 220, 255, 0.08);
}

.production-mode-tabs button.active > span:first-child {
  border-color: rgba(40, 220, 255, 0.72);
  color: #05101c;
  background: var(--blue);
  box-shadow: 0 0 22px rgba(40, 220, 255, 0.3);
}

.production-workspace {
  display: grid;
  gap: 1rem;
}

.production-setup,
.recording-booth,
.production-layers,
.production-mix-console,
.production-progress,
.production-result {
  border: 1px solid rgba(126, 170, 211, 0.23);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(5, 22, 44, 0.97), rgba(1, 7, 17, 0.99));
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
}

.production-setup,
.recording-booth,
.production-layers,
.production-mix-console {
  padding: clamp(1rem, 2.5vw, 1.45rem);
}

.production-section-heading {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(126, 170, 211, 0.18);
}

.production-section-heading > span {
  color: rgba(255, 255, 255, 0.15);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 2.9rem;
  line-height: 0.72;
}

.production-section-heading p {
  margin: 0 0 0.16rem;
  color: var(--blue);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.production-section-heading h2 {
  margin: 0;
  font-size: clamp(1.12rem, 3vw, 1.55rem);
  line-height: 1.1;
}

.production-section-heading.compact > span {
  font-size: 2.35rem;
}

.production-setup-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
  margin-top: 1rem;
}

.production-name,
.spot-duration-picker,
.song-duration-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(126, 170, 211, 0.18);
  border-radius: 14px;
  background: rgba(0, 5, 13, 0.52);
}

.production-name {
  display: grid;
  align-content: center;
  gap: 0.55rem;
}

.production-name > span,
.spot-duration-picker legend,
.song-duration-panel > span,
.production-vault-select > span {
  color: #8da2b8;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.production-name input {
  width: 100%;
  min-height: 48px;
  padding: 0 0.8rem;
  border: 1px solid rgba(126, 170, 211, 0.28);
  border-radius: 9px;
  color: #ffffff;
  background: #020914;
}

.spot-duration-picker {
  margin: 0;
}

.spot-duration-picker legend {
  padding: 0 0.35rem;
}

.spot-duration-picker > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(56px, 1fr));
  gap: 0.45rem;
}

.spot-duration-picker label {
  position: relative;
}

.spot-duration-picker input {
  position: absolute;
  opacity: 0;
}

.spot-duration-picker label > span {
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 0.45rem;
  border: 1px solid rgba(126, 170, 211, 0.22);
  border-radius: 9px;
  color: #9fb0c4;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.spot-duration-picker b {
  color: #ffffff;
  font-size: 1.08rem;
}

.spot-duration-picker small {
  font-size: 0.62rem;
  font-weight: 900;
}

.spot-duration-picker input:checked + span {
  border-color: var(--gold);
  color: #09121e;
  background: linear-gradient(145deg, #ffe79c, #ffb629 58%, #ba7200);
  box-shadow: 0 0 22px rgba(255, 182, 41, 0.18);
}

.spot-duration-picker input:checked + span b {
  color: #09121e;
}

.spot-duration-picker input:focus-visible + span {
  outline: 3px solid rgba(71, 215, 255, 0.72);
  outline-offset: 2px;
}

.spot-duration-picker > p,
.song-duration-panel p {
  margin: 0.7rem 0 0;
  color: #7f91a8;
  font-size: 0.78rem;
  line-height: 1.45;
}

.song-duration-panel {
  display: grid;
  align-content: center;
  gap: 0.15rem;
}

.song-duration-panel[hidden] {
  display: none;
}

.song-duration-panel strong {
  color: var(--gold);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 2rem;
}

.production-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: start;
}

.mic-processing-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(101, 242, 189, 0.24);
  border-radius: 12px;
  background: rgba(14, 68, 59, 0.18);
}

.mic-capsule {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #06140f;
  background: var(--green);
  font-size: 0.68rem;
  font-weight: 950;
}

.mic-processing-strip > span:nth-child(2) {
  display: grid;
  gap: 0.1rem;
}

.mic-processing-strip strong {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.mic-processing-strip small {
  color: #8ea99f;
  font-size: 0.69rem;
}

.mic-processing-strip > b {
  color: var(--green);
  font-size: 0.75rem;
}

.mic-meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 58px;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  color: #71869d;
  font-size: 0.68rem;
  font-weight: 900;
}

.mic-meter > div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #030812;
  box-shadow: inset 0 0 0 1px rgba(126, 170, 211, 0.18);
}

.mic-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold) 76%, var(--danger));
  transition: width 80ms linear;
}

.mic-meter output {
  text-align: right;
}

.recording-clock {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid rgba(126, 170, 211, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(rgba(40, 220, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 9px,
    #010610;
}

.recording-clock > span {
  color: #7890a8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.recording-clock output {
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2.35rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 26px rgba(40, 220, 255, 0.26);
}

.recording-clock small {
  color: #8193a8;
  font-size: 0.75rem;
}

.recording-booth.is-recording .recording-clock {
  border-color: rgba(255, 67, 86, 0.52);
  box-shadow: 0 0 28px rgba(255, 67, 86, 0.1);
}

.recording-booth.is-recording .recording-clock output {
  color: #ff6b78;
  text-shadow: 0 0 26px rgba(255, 67, 86, 0.34);
}

.production-record-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.production-record-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 62px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 94, 110, 0.55);
  border-radius: 11px;
  color: #ffffff;
  text-align: left;
  background: linear-gradient(135deg, #8f1429, #3e0915);
  cursor: pointer;
}

.production-record-button > i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff4058;
  box-shadow: 0 0 16px rgba(255, 64, 88, 0.74);
}

.production-record-button > span {
  display: grid;
  gap: 0.08rem;
}

.production-record-button strong {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.production-record-button small {
  color: #e8aab2;
  font-size: 0.69rem;
}

.production-record-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.headphone-monitor {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid rgba(126, 170, 211, 0.14);
  border-radius: 10px;
  color: #c5d1df;
  cursor: pointer;
}

.headphone-monitor input {
  margin-top: 0.2rem;
  accent-color: var(--blue);
}

.headphone-monitor span {
  display: grid;
  gap: 0.08rem;
}

.headphone-monitor strong {
  font-size: 0.8rem;
}

.headphone-monitor small {
  color: #7e91a7;
  font-size: 0.7rem;
  line-height: 1.4;
}

.headphone-monitor.low-latency-monitor {
  margin-top: 0.45rem;
  border-color: rgba(101, 242, 189, 0.24);
  background: rgba(101, 242, 189, 0.035);
}

.headphone-monitor.low-latency-monitor strong {
  color: #baffdf;
}

.headphone-monitor-volume {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.7rem;
  border: 1px solid rgba(40, 220, 255, 0.2);
  border-radius: 10px;
  background: rgba(40, 220, 255, 0.035);
}

.headphone-monitor-volume > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #9eb1c5;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.headphone-monitor-volume output {
  color: var(--blue);
  font-weight: 900;
}

.headphone-monitor-volume input {
  width: 100%;
  accent-color: var(--blue);
}

.production-status {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
  color: #8295aa;
  font-size: 0.78rem;
  line-height: 1.5;
}

.production-voice-review {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid rgba(101, 242, 189, 0.24);
  border-radius: 12px;
  background: rgba(19, 77, 63, 0.14);
}

.production-voice-review[hidden] {
  display: none;
}

.production-voice-review > span {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
}

.production-voice-review strong {
  color: var(--green);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
}

.production-voice-review small {
  color: #8ea2b6;
  font-size: 0.71rem;
}

.production-voice-review audio,
.production-layer-loaded audio,
.production-result audio {
  width: 100%;
  min-height: 42px;
}

.production-layers {
  display: grid;
  gap: 0.8rem;
}

.production-port {
  padding: 0.9rem;
  border: 1px solid rgba(126, 170, 211, 0.19);
  border-radius: 14px;
  background: rgba(0, 5, 13, 0.48);
}

.port-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.port-heading > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(40, 220, 255, 0.34);
  border-radius: 9px;
  color: var(--blue);
  background: rgba(40, 220, 255, 0.06);
}

.port-heading > div {
  display: grid;
  gap: 0.1rem;
}

.port-heading strong {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.port-heading small {
  color: #8193a9;
  font-size: 0.71rem;
}

.production-upload-button {
  width: 100%;
  min-height: 47px;
  margin-top: 0.7rem;
  border: 1px dashed rgba(40, 220, 255, 0.52);
  border-radius: 9px;
  color: #c9f7ff;
  background: rgba(40, 220, 255, 0.055);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
}

.production-upload-button.fx {
  border-color: rgba(255, 182, 41, 0.52);
  color: #ffe7ae;
  background: rgba(255, 182, 41, 0.055);
}

.production-vault-select {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.production-vault-select select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1px solid rgba(216, 232, 245, 0.23);
  border-radius: 8px;
  color: #e9f0f8;
  background: #071323;
}

.production-layer-loaded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.8fr) auto;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.65rem;
  border: 1px solid rgba(101, 242, 189, 0.21);
  border-radius: 9px;
  background: rgba(19, 77, 63, 0.12);
}

.production-layer-loaded[hidden] {
  display: none;
}

.production-layer-loaded > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.production-layer-loaded b {
  color: var(--green);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.production-layer-loaded strong,
.production-layer-loaded small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-layer-loaded strong {
  font-size: 0.8rem;
}

.production-layer-loaded small {
  color: #8798ac;
  font-size: 0.68rem;
}

.production-fx-empty {
  margin-top: 0.65rem;
  padding: 0.7rem;
  border-radius: 8px;
  color: #71849a;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.74rem;
  line-height: 1.45;
}

.production-fx-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.production-fx-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(118px, 0.5fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid rgba(126, 170, 211, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.production-fx-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #08121d;
  background: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
}

.production-fx-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.05rem;
}

.production-fx-item strong,
.production-fx-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-fx-item strong {
  font-size: 0.73rem;
}

.production-fx-item small {
  color: #7e91a7;
  font-size: 0.65rem;
}

.production-fx-item select {
  min-height: 35px;
  padding: 0 0.35rem;
  border: 1px solid rgba(126, 170, 211, 0.23);
  border-radius: 7px;
  color: #dce7f2;
  background: #071323;
  font-size: 0.68rem;
}

.production-fx-item button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(126, 170, 211, 0.2);
  border-radius: 7px;
  color: #b7c6d6;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.production-mix-console {
  display: grid;
  gap: 1rem;
}

.production-faders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-faders label {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid rgba(126, 170, 211, 0.17);
  border-radius: 11px;
  background: rgba(0, 5, 13, 0.48);
}

.production-faders label > span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #a9b9c9;
  font-size: 0.74rem;
}

.production-faders output {
  color: var(--blue);
  font-weight: 900;
}

.production-faders input {
  width: 100%;
  accent-color: var(--blue);
}

.production-sync-control {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid rgba(101, 242, 189, 0.28);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(9, 53, 47, 0.42), rgba(0, 7, 15, 0.52));
}

.production-sync-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #b9c9d8;
  font-size: 0.76rem;
}

.production-sync-control output {
  color: #65f2bd;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.production-sync-control input {
  width: 100%;
  accent-color: #65f2bd;
}

.production-sync-control small {
  color: #8095a9;
  font-size: 0.7rem;
  line-height: 1.45;
}

.production-master-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-master-switches label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(126, 170, 211, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.production-master-switches input {
  margin-top: 0.2rem;
  accent-color: var(--blue);
}

.production-master-switches span {
  display: grid;
  gap: 0.08rem;
}

.production-master-switches strong {
  font-size: 0.76rem;
}

.production-master-switches small {
  color: #7c8fa4;
  font-size: 0.68rem;
  line-height: 1.35;
}

.production-master-switches label.disabled {
  opacity: 0.46;
}

.build-production-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 74px;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 13px;
  color: #06101b;
  text-align: left;
  background: linear-gradient(135deg, #ffffff, #8da2b5 34%, #f2f8fc 57%, #72879c 100%);
  box-shadow: inset 0 1px #ffffff, 0 12px 30px rgba(40, 220, 255, 0.11);
  cursor: pointer;
}

.build-production-button > span:first-child {
  color: #9a5b00;
  font-size: 1.65rem;
}

.build-production-button > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.build-production-button strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.build-production-button small {
  color: #33485c;
  font-size: 0.72rem;
}

.build-production-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.production-progress,
.production-result {
  padding: 1rem;
}

.production-result.finalized {
  border-color: rgba(255, 182, 41, 0.5);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 182, 41, 0.12), transparent 30rem),
    linear-gradient(145deg, rgba(9, 32, 39, 0.98), rgba(1, 8, 17, 0.99));
}

.production-progress > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.production-progress p {
  display: grid;
  gap: 0.12rem;
  margin: 0;
}

.production-progress small {
  color: #8194aa;
  font-size: 0.72rem;
}

.production-progress output {
  color: var(--blue);
  font-weight: 900;
}

.production-progress .progress-track {
  margin-top: 0.75rem;
}

.production-result {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr);
  align-items: center;
  gap: 1rem;
  border-color: rgba(101, 242, 189, 0.32);
  background:
    radial-gradient(circle at 100% 0, rgba(101, 242, 189, 0.09), transparent 30rem),
    linear-gradient(145deg, rgba(6, 29, 39, 0.98), rgba(1, 8, 17, 0.99));
}

.production-result[hidden] {
  display: none;
}

.production-result h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.production-result > div:first-child > p:last-child {
  margin: 0.45rem 0 0;
  color: #8ba0b4;
  font-size: 0.78rem;
}

.production-preview-button {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(40, 220, 255, 0.58);
  border-radius: 11px;
  color: #eafcff;
  text-align: left;
  background: linear-gradient(135deg, rgba(15, 75, 101, 0.82), rgba(5, 32, 54, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 10px 26px rgba(40, 220, 255, 0.1);
  cursor: pointer;
}

.production-preview-button > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #02202b;
  background: var(--blue);
  font-size: 0.95rem;
  font-weight: 950;
}

.production-preview-button > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.production-preview-button strong {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

.production-preview-button small {
  color: #9ec6d5;
  font-size: 0.71rem;
}

.production-preview-button.playing {
  border-color: rgba(101, 242, 189, 0.68);
  background: linear-gradient(135deg, rgba(13, 89, 70, 0.86), rgba(4, 39, 44, 0.94));
}

.production-preview-button.playing > span:first-child {
  background: #65f2bd;
}

.production-preview-button:disabled {
  border-color: rgba(126, 170, 211, 0.26);
  color: #9aabbb;
  background: linear-gradient(135deg, rgba(32, 51, 66, 0.68), rgba(8, 18, 30, 0.82));
  box-shadow: none;
  cursor: not-allowed;
}

.production-preview-button:disabled > span:first-child {
  color: #263746;
  background: #8497a8;
}

.production-approval-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(126, 170, 211, 0.18);
}

.production-approval-actions[hidden] {
  display: none;
}

.production-approval-actions .secondary-button {
  width: 100%;
  margin: 0;
}

.finalize-production-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 58px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(101, 242, 189, 0.68);
  border-radius: 10px;
  color: #06150f;
  text-align: left;
  background: linear-gradient(135deg, #d8fff0, #65f2bd 52%, #22a875);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.82), 0 10px 28px rgba(101, 242, 189, 0.14);
  cursor: pointer;
}

.finalize-production-button > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  background: #08754f;
  font-size: 1rem;
  font-weight: 950;
}

.finalize-production-button > span:last-child {
  display: grid;
  gap: 0.06rem;
}

.finalize-production-button strong {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.finalize-production-button small {
  color: #174f3b;
  font-size: 0.7rem;
}

.production-downloads {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.production-downloads[hidden] {
  display: none;
}

.production-downloads .download-button,
.production-downloads .secondary-button {
  width: 100%;
  margin: 0;
}

.production-rights-note {
  margin: 0.2rem 0 0;
  color: #6f8196;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

/* Live broadcast encoder */
.live-encoder {
  --live: #ff3048;
  --twitch: #a970ff;
  display: grid;
  gap: 1.25rem;
}

.live-encoder[hidden] {
  display: none;
}

.encoder-hero,
.encoder-program-panel,
.encoder-go-live-panel,
.encoder-audio-panel,
.encoder-branding-panel,
.encoder-show-preview-panel,
.encoder-recording-panel {
  border: 1px solid rgba(93, 150, 207, 0.23);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(5, 21, 43, 0.98), rgba(1, 8, 18, 0.98));
  box-shadow: var(--shadow);
}

.encoder-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  min-height: 250px;
  padding: clamp(1.4rem, 4vw, 3.2rem);
}

.encoder-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 5, 14, 0.98) 0%, rgba(2, 15, 32, 0.92) 48%, rgba(0, 5, 14, 0.56) 100%),
    url("./doc-in-the-mix-party.jpg") 82% 23% / cover no-repeat;
  opacity: 0.76;
}

.encoder-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 72% 50%, rgba(255, 48, 72, 0.18), transparent 34%);
}

.encoder-hero h1 {
  max-width: 780px;
  margin: 0.25rem 0 0.7rem;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.encoder-hero h1 span {
  color: var(--live);
  text-shadow: 0 0 34px rgba(255, 48, 72, 0.28);
}

.encoder-hero > div:first-child > p:last-child {
  max-width: 710px;
  margin: 0;
  color: #bdc9db;
  line-height: 1.65;
}

.encoder-air-status {
  min-width: 180px;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(149, 167, 190, 0.25);
  border-radius: 16px;
  background: rgba(0, 5, 13, 0.8);
  backdrop-filter: blur(14px);
}

.encoder-air-status span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

.encoder-air-status i,
.encoder-live-button i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #64748a;
}

.encoder-air-status small {
  display: block;
  margin-top: 0.4rem;
  color: #7f91a7;
  font-size: 0.68rem;
}

.encoder-air-status[data-state="connecting"] {
  border-color: rgba(255, 182, 41, 0.48);
}

.encoder-air-status[data-state="connecting"] i {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(255, 182, 41, 0.7);
  animation: pulse-live 1s infinite;
}

.encoder-air-status[data-state="live"] {
  border-color: rgba(255, 48, 72, 0.62);
  background: rgba(47, 2, 9, 0.88);
}

.encoder-air-status[data-state="live"] i,
.encoder-live-button i {
  background: var(--live);
  box-shadow: 0 0 15px rgba(255, 48, 72, 0.82);
}

@keyframes pulse-live {
  50% { opacity: 0.35; transform: scale(0.78); }
}

.encoder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr);
  gap: 1.25rem;
  align-items: start;
}

.encoder-program-panel,
.encoder-go-live-panel,
.encoder-audio-panel,
.encoder-branding-panel,
.encoder-show-preview-panel,
.encoder-recording-panel {
  padding: clamp(1rem, 2.4vw, 1.6rem);
}

.encoder-go-live-panel {
  position: sticky;
  top: 1rem;
}

.encoder-panel-heading,
.encoder-panel-heading > div,
.encoder-panel-heading p {
  display: flex;
  align-items: center;
}

.encoder-panel-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.encoder-panel-heading > div {
  gap: 0.7rem;
}

.encoder-panel-heading > div > span {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(40, 220, 255, 0.38);
  border-radius: 50%;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
}

.encoder-panel-heading p {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0;
}

.encoder-panel-heading small,
.encoder-output-settings label > span,
.encoder-text-field > span,
.encoder-scene-switcher legend {
  color: #70869f;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.encoder-panel-heading strong {
  font-size: 1rem;
}

.encoder-panel-heading output {
  color: var(--green);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.encoder-monitor-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(40, 220, 255, 0.28);
  border-radius: 15px;
  background: #01040a;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.72), 0 18px 45px rgba(0, 0, 0, 0.38);
}

#encoderCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #02060d;
}

.encoder-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(40, 220, 255, 0.09), transparent 33%);
}

.encoder-placeholder[hidden] { display: none; }
.encoder-placeholder > span { color: var(--live); font-size: 2.2rem; }
.encoder-placeholder strong { font-size: clamp(0.85rem, 2vw, 1.2rem); }
.encoder-placeholder small { color: #71849b; font-size: 0.7rem; }

.encoder-monitor-badges {
  position: absolute;
  inset: 0.7rem 0.7rem auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.encoder-monitor-badges span,
.encoder-monitor-badges b {
  padding: 0.28rem 0.45rem;
  border-radius: 5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.encoder-monitor-badges span { background: rgba(205, 15, 39, 0.86); }

.encoder-source-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.encoder-source-button,
.encoder-clear-button,
.encoder-destinations button,
.encoder-live-button,
.encoder-stop-live,
.encoder-music-port button,
.encoder-logo-port button,
.encoder-record-actions button,
.encoder-recording-result button {
  border: 1px solid rgba(117, 158, 201, 0.28);
  border-radius: 10px;
  background: rgba(8, 29, 56, 0.82);
  cursor: pointer;
}

.encoder-source-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 58px;
  padding: 0.55rem 0.7rem;
  text-align: left;
}

.encoder-source-button > span:first-child { color: var(--blue); font-size: 1.15rem; }
.encoder-source-button strong,
.encoder-source-button small { display: block; }
.encoder-source-button strong { font-size: 0.69rem; letter-spacing: 0.05em; }
.encoder-source-button small { margin-top: 0.12rem; color: #8294aa; font-size: 0.58rem; }
.encoder-source-button.primary { border-color: rgba(40, 220, 255, 0.4); background: linear-gradient(135deg, rgba(10, 70, 99, 0.82), rgba(6, 24, 47, 0.92)); }
.encoder-clear-button { padding: 0.55rem 0.75rem; color: #aebbd0; font-size: 0.68rem; }

.encoder-scene-switcher {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.encoder-scene-switcher legend { margin-bottom: 0.5rem; }
.encoder-scene-switcher > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.encoder-scene-switcher button { display: grid; justify-items: center; gap: 0.4rem; min-height: 68px; padding: 0.55rem; border: 1px solid rgba(102, 138, 175, 0.22); border-radius: 9px; color: #71849b; background: rgba(0, 8, 18, 0.62); cursor: pointer; }
.encoder-scene-switcher button.active { border-color: var(--blue); color: #fff; background: rgba(9, 61, 86, 0.7); }
.encoder-scene-switcher b { font-size: 0.63rem; }
.scene-icon { position: relative; display: block; width: 31px; height: 19px; border: 2px solid currentColor; border-radius: 2px; opacity: 0.8; }
.pip-scene::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 9px; height: 6px; border: 1px solid currentColor; background: #07172a; }
.split-scene::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid currentColor; }
.camera-scene::after { content: "●"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.48rem; }

.encoder-destinations { display: grid; gap: 0.5rem; }
.encoder-destinations button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.65rem; min-height: 54px; padding: 0.55rem 0.7rem; color: #8799b0; text-align: left; }
.encoder-destinations button > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: #47566b; font-style: normal; }
.encoder-destinations strong,
.encoder-destinations small { display: block; }
.encoder-destinations strong { font-size: 0.74rem; }
.encoder-destinations small { margin-top: 0.08rem; color: #6f8198; font-size: 0.6rem; }
.encoder-destinations button.active { border-color: rgba(255, 255, 255, 0.48); color: #fff; background: rgba(25, 42, 65, 0.9); }
.encoder-destinations .youtube > i { background: #ff0033; }
.encoder-destinations .twitch > i { background: #9147ff; }
.encoder-destinations .both > i { background: linear-gradient(135deg, #ff0033 50%, #9147ff 50%); font-weight: 950; }
.encoder-destinations .facebook > i { background: #1877f2; font: 900 1.2rem Arial, sans-serif; }
.encoder-destinations .roku > i { background: #662d91; font: 900 0.95rem Arial, sans-serif; }
.encoder-destinations .all > i { color: #04101e; background: linear-gradient(135deg, #ffbe32, #28dcff 45%, #9147ff); font-weight: 950; }

.encoder-platform-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0.65rem 0; }
.encoder-platform-links a { padding: 0.55rem; border: 1px solid rgba(115, 151, 188, 0.18); border-radius: 8px; color: #9fb2c9; font-size: 0.61rem; text-align: center; text-decoration: none; }
.encoder-platform-links a:hover { border-color: rgba(40, 220, 255, 0.5); color: var(--blue); }

.encoder-platform-vault {
  overflow: hidden;
  margin: 0.85rem 0;
  border: 1px solid rgba(221, 231, 242, 0.38);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(29, 39, 55, 0.96), rgba(5, 12, 23, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.24);
}

.encoder-platform-vault[data-state="open"] {
  border-color: rgba(40, 220, 255, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 0 24px rgba(40, 220, 255, 0.08);
}

.encoder-platform-vault-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.58rem;
  width: 100%;
  min-height: 72px;
  padding: 0.7rem;
  border: 0;
  color: #f8fbff;
  text-align: left;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(135deg, rgba(56, 70, 91, 0.96), rgba(11, 22, 39, 0.98));
  cursor: pointer;
}

.encoder-platform-vault-toggle:hover,
.encoder-platform-vault-toggle:focus-visible { background: linear-gradient(135deg, rgba(69, 87, 111, 0.98), rgba(10, 32, 53, 0.98)); }
.encoder-platform-vault-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.encoder-platform-vault-toggle > span:nth-child(2) strong,
.encoder-platform-vault-toggle > span:nth-child(2) small { display: block; }
.encoder-platform-vault-toggle > span:nth-child(2) strong { font-size: 0.75rem; letter-spacing: 0.055em; }
.encoder-platform-vault-toggle > span:nth-child(2) small { margin-top: 0.14rem; color: #adbbcd; font-size: 0.61rem; line-height: 1.35; }
.encoder-platform-vault-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 10px; color: #101722; background: linear-gradient(145deg, #ffffff, #94a2b5 58%, #e7edf4); box-shadow: inset 0 1px #fff, 0 0 14px rgba(188, 210, 234, 0.16); font-size: 1rem; font-weight: 950; }
.encoder-platform-vault-toggle > b { padding: 0.28rem 0.42rem; border: 1px solid rgba(192, 207, 224, 0.38); border-radius: 999px; color: #d3deeb; background: rgba(0, 0, 0, 0.22); font-size: 0.5rem; letter-spacing: 0.05em; white-space: nowrap; }
.encoder-platform-vault-toggle > b[data-state="ready"] { border-color: rgba(101, 242, 189, 0.52); color: var(--green); }
.encoder-platform-vault-toggle > i { color: var(--blue); font-size: 1rem; font-style: normal; }

.encoder-platform-vault-panel { padding: 0.8rem; border-top: 1px solid rgba(180, 203, 226, 0.2); }
.encoder-platform-vault-panel[hidden] { display: none; }
.encoder-platform-security-note { margin: 0 0 0.75rem; padding: 0.65rem; border: 1px solid rgba(255, 182, 41, 0.22); border-radius: 9px; color: #aeb9c8; background: rgba(42, 31, 10, 0.34); font-size: 0.68rem; line-height: 1.5; }
.encoder-platform-security-note strong { color: var(--gold-hot); }
.encoder-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 0.65rem; }

.encoder-platform-card {
  padding: 0.68rem;
  border: 1px solid rgba(119, 150, 184, 0.23);
  border-radius: 11px;
  background: rgba(0, 7, 17, 0.62);
}
.encoder-platform-card[data-state="ready"] { border-color: rgba(101, 242, 189, 0.48); box-shadow: inset 0 0 24px rgba(101, 242, 189, 0.05); }
.encoder-platform-card[data-state="partial"] { border-color: rgba(255, 182, 41, 0.48); }
.encoder-platform-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.48rem; }
.encoder-platform-card header > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: #4b5a6d; font-size: 0.72rem; font-weight: 950; }
.encoder-platform-card.youtube header > span { background: #ff0033; }
.encoder-platform-card.twitch header > span { background: #9147ff; }
.encoder-platform-card.facebook header > span { background: #1877f2; font: 900 1rem Arial, sans-serif; }
.encoder-platform-card.roku header > span { background: #662d91; }
.encoder-platform-card header strong,
.encoder-platform-card header small { display: block; }
.encoder-platform-card header strong { font-size: 0.72rem; }
.encoder-platform-card header small { margin-top: 0.08rem; color: #7f92aa; font-size: 0.58rem; }
.encoder-platform-card header output { padding: 0.24rem 0.34rem; border: 1px solid rgba(150, 170, 193, 0.24); border-radius: 999px; color: #91a2b6; font-size: 0.47rem; font-weight: 900; letter-spacing: 0.045em; text-align: center; }
.encoder-platform-card[data-state="ready"] header output { border-color: rgba(101, 242, 189, 0.42); color: var(--green); }
.encoder-platform-card[data-state="partial"] header output { border-color: rgba(255, 182, 41, 0.42); color: var(--gold-hot); }
.encoder-platform-card > label { display: grid; gap: 0.28rem; margin-top: 0.58rem; }
.encoder-platform-card > label > span { color: #8fa1b7; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; }
.encoder-platform-card input { width: 100%; min-width: 0; min-height: 40px; padding: 0.52rem 0.58rem; border: 1px solid rgba(111, 148, 187, 0.3); border-radius: 8px; color: #f8fbff; background: rgba(0, 5, 13, 0.9); font-size: 0.66rem; }
.encoder-platform-card input:focus { border-color: rgba(40, 220, 255, 0.7); outline: 0; box-shadow: 0 0 0 2px rgba(40, 220, 255, 0.1); }
.encoder-platform-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-platform-secret input { border-radius: 8px 0 0 8px; }
.encoder-platform-secret button { padding: 0 0.58rem; border: 1px solid rgba(111, 148, 187, 0.3); border-left: 0; border-radius: 0 8px 8px 0; color: var(--blue); background: rgba(7, 31, 54, 0.98); font-size: 0.52rem; font-weight: 950; cursor: pointer; }
.encoder-platform-card > a { display: inline-block; margin-top: 0.56rem; color: #9bb3ca; font-size: 0.59rem; text-decoration: none; }
.encoder-platform-card > a:hover { color: var(--blue); }
.encoder-platform-card > p { margin: 0.65rem 0; color: #a492b5; font-size: 0.65rem; line-height: 1.48; }
.encoder-platform-card > p strong { color: #ddc5f2; }
.encoder-platform-roku-button { width: 100%; min-height: 40px; border: 1px solid rgba(178, 126, 225, 0.5); border-radius: 8px; color: #f5eaff; background: linear-gradient(135deg, #662d91, #3e175c); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.055em; cursor: pointer; }

.encoder-platform-vault-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.72rem; }
.encoder-platform-vault-actions button { min-height: 42px; padding: 0.55rem; border: 1px solid rgba(143, 168, 194, 0.3); border-radius: 8px; color: #b6c4d4; background: rgba(7, 23, 42, 0.9); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; }
.encoder-platform-vault-actions button.primary { border-color: rgba(40, 220, 255, 0.5); color: #eafcff; background: linear-gradient(135deg, rgba(6, 92, 124, 0.92), rgba(5, 42, 70, 0.96)); }
.encoder-platform-check-status { display: block; margin-top: 0.58rem; color: #91a3b9; font-size: 0.64rem; line-height: 1.45; }
.encoder-platform-check-status.ready { color: var(--green); }


.encoder-relay-box { margin-top: 0.8rem; padding: 0.8rem; border: 1px solid rgba(255, 182, 41, 0.25); border-radius: 12px; background: rgba(18, 14, 7, 0.46); }
.encoder-relay-heading { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.encoder-relay-heading > span { color: var(--gold); font-size: 1.4rem; }
.encoder-relay-heading strong,
.encoder-relay-heading small { display: block; }
.encoder-relay-heading strong { font-size: 0.7rem; letter-spacing: 0.08em; }
.encoder-relay-heading small { margin-top: 0.12rem; color: #9b8c6a; font-size: 0.58rem; }
.encoder-relay-box > label { display: grid; gap: 0.3rem; margin-top: 0.55rem; }
.encoder-relay-box > label > span { color: #8e9eb0; font-size: 0.57rem; font-weight: 900; letter-spacing: 0.1em; }
.encoder-relay-box input,
.encoder-output-settings select,
.encoder-text-field input { width: 100%; min-height: 40px; padding: 0.55rem 0.65rem; border: 1px solid rgba(111, 148, 187, 0.28); border-radius: 8px; color: #f5f9ff; background: rgba(0, 7, 16, 0.82); }
.encoder-secret-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-secret-input input { border-radius: 8px 0 0 8px; }
.encoder-secret-input button { padding: 0 0.6rem; border: 1px solid rgba(111, 148, 187, 0.28); border-left: 0; border-radius: 0 8px 8px 0; color: var(--blue); background: rgba(4, 24, 44, 0.9); font-size: 0.55rem; font-weight: 900; cursor: pointer; }
.encoder-relay-box > p { margin: 0.65rem 0 0; color: #968d7b; font-size: 0.62rem; line-height: 1.45; }
.encoder-relay-box > p strong { color: #d1b679; }

.encoder-roku-handoff { margin-top: 0.75rem; padding: 0.8rem; border: 1px solid rgba(160, 90, 225, 0.42); border-radius: 12px; background: linear-gradient(145deg, rgba(55, 17, 84, 0.62), rgba(11, 8, 23, 0.84)); }
.encoder-roku-handoff[hidden] { display: none; }
.encoder-roku-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; }
.encoder-roku-heading > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #fff; background: #662d91; font: 900 0.9rem Arial, sans-serif; }
.encoder-roku-heading strong,
.encoder-roku-heading small { display: block; }
.encoder-roku-heading strong { font-size: 0.66rem; letter-spacing: 0.07em; }
.encoder-roku-heading small { margin-top: 0.12rem; color: #ab8bc6; font-size: 0.57rem; }
.encoder-roku-heading b { padding: 0.25rem 0.42rem; border: 1px solid rgba(207, 165, 243, 0.32); border-radius: 999px; color: #c6a0e6; background: rgba(0, 0, 0, 0.24); font-size: 0.5rem; letter-spacing: 0.07em; }
.encoder-roku-heading b[data-state="ready"] { border-color: rgba(101, 242, 189, 0.48); color: var(--green); }
.encoder-roku-handoff > p { margin: 0.65rem 0; color: #ad9cbb; font-size: 0.62rem; line-height: 1.5; }
.encoder-roku-handoff > p strong { color: #e0c9f3; }
.encoder-roku-handoff > label { display: grid; gap: 0.3rem; }
.encoder-roku-handoff > label > span { color: #b59acb; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.09em; }
.encoder-roku-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.encoder-roku-url-row input { min-width: 0; min-height: 40px; padding: 0.55rem 0.65rem; border: 1px solid rgba(175, 123, 220, 0.38); border-radius: 8px 0 0 8px; color: #fff; background: rgba(0, 5, 14, 0.8); }
.encoder-roku-url-row button { min-width: 58px; border: 1px solid rgba(175, 123, 220, 0.38); border-left: 0; border-radius: 0 8px 8px 0; color: #fff; background: #662d91; font-size: 0.54rem; font-weight: 900; cursor: pointer; }
#encoderRokuHlsStatus { display: block; margin-top: 0.45rem; color: #a993ba; font-size: 0.58rem; line-height: 1.4; }
#encoderRokuHlsStatus.ready { color: var(--green); }
#encoderRokuHlsStatus.error { color: #ff8a9a; }

.encoder-output-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.75rem; }
.encoder-output-settings label { display: grid; gap: 0.3rem; }
.encoder-output-settings select { min-width: 0; padding: 0.45rem; font-size: 0.65rem; }

.encoder-quality-note {
  margin: 0.45rem 0 0;
  color: #7fa7bb;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: right;
}

.encoder-safety-record,
.encoder-monitor-toggle,
.encoder-check-row { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.encoder-safety-record { margin: 0.8rem 0; padding: 0.65rem; border: 1px solid rgba(101, 242, 189, 0.18); border-radius: 9px; background: rgba(23, 74, 62, 0.18); }
.encoder-safety-record strong,
.encoder-safety-record small,
.encoder-monitor-toggle strong,
.encoder-monitor-toggle small { display: block; }
.encoder-safety-record strong,
.encoder-monitor-toggle strong { font-size: 0.7rem; }
.encoder-safety-record small,
.encoder-monitor-toggle small { margin-top: 0.14rem; color: #7e91a6; font-size: 0.59rem; }

.encoder-live-button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; width: 100%; min-height: 66px; padding: 0.75rem 0.9rem; border-color: rgba(255, 48, 72, 0.65); text-align: left; background: linear-gradient(135deg, #9c061c, #4f0511); }
.encoder-live-button i { animation: pulse-live 1.2s infinite; }
.encoder-live-button strong,
.encoder-live-button small { display: block; }
.encoder-live-button strong { font-size: 0.78rem; letter-spacing: 0.07em; }
.encoder-live-button small { margin-top: 0.12rem; color: #eaa2ad; font-size: 0.59rem; }
.encoder-stop-live { width: 100%; margin-top: 0.5rem; padding: 0.65rem; color: #ff97a4; background: rgba(83, 5, 17, 0.45); }
.encoder-connection-status { margin: 0.65rem 0 0; color: #7f91a7; font-size: 0.62rem; line-height: 1.45; }
.encoder-connection-status.error { color: #ff8493; }
.encoder-connection-status.success { color: var(--green); }

.encoder-controls-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.25rem; }
.encoder-external-mixer-port {
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 182, 41, 0.34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45, 31, 5, 0.48), rgba(4, 16, 31, 0.86));
}

.encoder-external-mixer-port[data-state="on"] {
  border-color: rgba(101, 242, 189, 0.58);
  box-shadow: inset 0 0 30px rgba(24, 111, 85, 0.09), 0 0 24px rgba(101, 242, 189, 0.06);
}

.external-mixer-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.external-mixer-jack {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgba(255, 182, 41, 0.1);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.encoder-external-mixer-port[data-state="on"] .external-mixer-jack {
  border-color: var(--green);
  color: #041711;
  background: var(--green);
  box-shadow: 0 0 16px rgba(101, 242, 189, 0.3);
}

.external-mixer-heading strong,
.external-mixer-heading small {
  display: block;
}

.external-mixer-heading strong {
  font-size: 0.83rem;
  letter-spacing: 0.04em;
}

.external-mixer-heading small {
  margin-top: 0.16rem;
  color: #91a3b8;
  font-size: 0.73rem;
  line-height: 1.4;
}

.external-mixer-heading > b {
  padding: 0.34rem 0.48rem;
  border: 1px solid rgba(255, 182, 41, 0.32);
  border-radius: 999px;
  color: var(--gold-hot);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.encoder-external-mixer-port[data-state="on"] .external-mixer-heading > b {
  border-color: rgba(101, 242, 189, 0.48);
  color: var(--green);
}

.encoder-external-mixer-port > p {
  margin: 0.7rem 0;
  color: #9bacbf;
  font-size: 0.78rem;
  line-height: 1.55;
}

.external-mixer-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 0.45rem;
}

.external-mixer-controls label {
  display: grid;
  gap: 0.3rem;
}

.external-mixer-controls label > span {
  color: #91a3b8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.external-mixer-controls select,
.external-mixer-controls button {
  min-height: 42px;
  border: 1px solid rgba(122, 159, 196, 0.3);
  border-radius: 8px;
  color: #f4f8fd;
  background: rgba(0, 7, 16, 0.85);
  font-size: 0.76rem;
}

.external-mixer-controls select {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
}

.external-mixer-controls button {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.external-mixer-controls button.connect {
  border-color: rgba(101, 242, 189, 0.46);
  color: #051711;
  background: var(--green);
  font-weight: 900;
}

.external-mixer-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.external-mixer-specs span {
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(40, 220, 255, 0.18);
  border-radius: 5px;
  color: #8ca7bb;
  background: rgba(4, 25, 42, 0.68);
  font-size: 0.7rem;
}

.encoder-external-mixer-port > .external-mixer-status {
  margin-bottom: 0;
  color: #d3b66e;
}

.encoder-external-mixer-port[data-state="on"] > .external-mixer-status {
  color: var(--green);
}

.encoder-audio-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.encoder-audio-meters > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.encoder-audio-meters span,
.encoder-audio-meters output { color: #7e92aa; font-size: 0.58rem; font-weight: 800; }
.encoder-audio-meters i { overflow: hidden; height: 8px; border-radius: 999px; background: #0a1727; }
.encoder-audio-meters b { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #36d6a4 0 70%, #f5c54e 84%, #ff4059 100%); transition: width 80ms linear; }
.encoder-faders { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; }
.encoder-faders label { display: grid; gap: 0.3rem; }
.encoder-faders label > span { display: flex; justify-content: space-between; color: #b4c1d1; font-size: 0.65rem; }
.encoder-faders output { color: var(--blue); }
.encoder-faders input { width: 100%; accent-color: var(--blue); }
.encoder-faders .external-mixer-fader { padding: 0.55rem; border: 1px solid rgba(101, 242, 189, 0.22); border-radius: 9px; background: rgba(17, 63, 52, 0.15); }
.encoder-faders .external-mixer-fader output { color: var(--green); }
.encoder-faders .external-mixer-fader input { accent-color: var(--green); }

.encoder-music-port { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.45rem; }
.encoder-music-port > button { min-height: 48px; padding: 0.5rem 0.65rem; }
.encoder-music-port > button:first-of-type { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; text-align: left; }
.encoder-music-port strong,
.encoder-music-port small { display: block; }
.encoder-music-port strong { font-size: 0.68rem; }
.encoder-music-port small { margin-top: 0.12rem; overflow: hidden; color: #71849a; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.encoder-music-play { width: 48px; color: var(--blue); }
.encoder-music-remove { color: #ff8a97; font-size: 0.62rem; }
.encoder-monitor-toggle { margin-top: 0.75rem; padding: 0.65rem; border-radius: 9px; background: rgba(2, 11, 23, 0.62); }

.encoder-branding-panel { display: grid; align-content: start; gap: 0.65rem; }
.encoder-branding-panel .encoder-panel-heading { margin-bottom: 0.35rem; }
.encoder-text-field { display: grid; gap: 0.3rem; }
.encoder-check-row { align-items: center; color: #9fb0c4; font-size: 0.66rem; }
.encoder-lower-third-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; padding-top: 0.35rem; border-top: 1px solid rgba(98, 136, 175, 0.16); }
.encoder-logo-port { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.65rem; border: 1px dashed rgba(40, 220, 255, 0.3); border-radius: 10px; }
.encoder-logo-port > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; min-width: 0; }
#encoderLogoPreview { display: grid; place-items: center; overflow: hidden; width: 42px; height: 42px; border-radius: 7px; color: #63788f; background: #07182a; font-size: 0.52rem; }
#encoderLogoPreview img { width: 100%; height: 100%; object-fit: contain; }
.encoder-logo-port p { min-width: 0; margin: 0; }
.encoder-logo-port strong,
.encoder-logo-port small { display: block; }
.encoder-logo-port strong { font-size: 0.66rem; }
.encoder-logo-port small { overflow: hidden; color: #71849a; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.encoder-logo-port button { padding: 0.55rem 0.65rem; font-size: 0.62rem; }

.encoder-show-preview-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: 1.25rem;
  border-color: rgba(40, 220, 255, 0.38);
  background:
    radial-gradient(circle at 76% 50%, rgba(40, 220, 255, 0.1), transparent 32%),
    linear-gradient(145deg, rgba(5, 25, 48, 0.98), rgba(1, 8, 18, 0.98));
}

.encoder-show-preview-panel h2 {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(1.3rem, 2.8vw, 2.15rem);
}

.encoder-show-preview-panel > div:first-child > p:last-child {
  max-width: 650px;
  margin: 0;
  color: #9aadc2;
  font-size: 0.86rem;
  line-height: 1.55;
}

.encoder-show-preview-controls {
  display: grid;
  gap: 0.6rem;
}

#toggleEncoderShowPreview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 68px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(40, 220, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, rgba(8, 111, 145, 0.9), rgba(5, 42, 75, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#toggleEncoderShowPreview > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #03131b;
  background: var(--blue);
  font-size: 0.9rem;
}

#toggleEncoderShowPreview strong,
#toggleEncoderShowPreview small {
  display: block;
}

#toggleEncoderShowPreview strong {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

#toggleEncoderShowPreview small {
  margin-top: 0.16rem;
  color: #b8d9e8;
  font-size: 0.75rem;
  line-height: 1.4;
}

#toggleEncoderShowPreview.active {
  border-color: rgba(101, 242, 189, 0.72);
  background: linear-gradient(135deg, rgba(16, 111, 84, 0.92), rgba(4, 52, 50, 0.96));
}

#toggleEncoderShowPreview.active > span:first-child {
  background: var(--green);
  box-shadow: 0 0 18px rgba(101, 242, 189, 0.32);
}

.encoder-show-preview-controls > label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem;
  border: 1px solid rgba(102, 145, 187, 0.2);
  border-radius: 9px;
  background: rgba(1, 11, 24, 0.62);
  cursor: pointer;
}

.encoder-show-preview-controls > label strong,
.encoder-show-preview-controls > label small {
  display: block;
}

.encoder-show-preview-controls > label strong {
  font-size: 0.8rem;
}

.encoder-show-preview-controls > label small {
  margin-top: 0.14rem;
  color: #8196ad;
  font-size: 0.74rem;
  line-height: 1.4;
}

#encoderShowPreviewStatus {
  margin: 0;
  color: #7fa8bd;
  font-size: 0.76rem;
  line-height: 1.45;
}

#encoderShowPreviewStatus.active {
  color: var(--green);
}

.encoder-recording-panel { display: grid; grid-template-columns: minmax(250px, 1fr) auto; align-items: center; gap: 1rem; }
.encoder-recording-panel h2 { margin: 0.2rem 0 0.35rem; font-size: clamp(1.25rem, 2.6vw, 2rem); }
.encoder-recording-panel > div:first-child > p:last-child { max-width: 670px; margin: 0; color: #8598ae; font-size: 0.72rem; line-height: 1.5; }
.encoder-record-actions { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 0.5rem; }
.encoder-record-actions button,
.encoder-recording-result button { min-height: 44px; padding: 0.55rem 0.8rem; }
#startEncoderRecording { border-color: rgba(255, 48, 72, 0.5); color: #fff; }
#startEncoderRecording span { color: var(--live); }
.encoder-record-actions output { min-width: 86px; color: #fff; font: 800 0.9rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.encoder-recording-result { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid rgba(95, 136, 178, 0.18); }
.encoder-recording-result[hidden] { display: none; }
.encoder-recording-result video { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.encoder-recording-result strong,
.encoder-recording-result small { display: block; }
.encoder-recording-result small { margin-top: 0.2rem; color: #7890a8; font-size: 0.64rem; }
.encoder-recording-result button { border-color: rgba(101, 242, 189, 0.4); color: #07140f; background: var(--green); font-weight: 900; }

.encoder-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.encoder-notes p { margin: 0; padding: 0.75rem; border: 1px solid rgba(91, 127, 164, 0.16); border-radius: 10px; color: #657c94; font-size: 0.62rem; line-height: 1.5; }
.encoder-notes strong { color: #9cb0c7; }

.live-encoder button:disabled,
.live-encoder select:disabled,
.live-encoder input:disabled { cursor: not-allowed; opacity: 0.44; }

.app-bottom-tabs {
  position: fixed;
  z-index: 30;
  right: 50%;
  bottom: max(0.65rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(900px, calc(100% - 1rem));
  padding: 0.42rem;
  border: 1px solid rgba(210, 228, 242, 0.42);
  border-radius: 18px;
  background: rgba(0, 5, 13, 0.93);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68), inset 0 1px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  transform: translateX(50%);
}

.app-bottom-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 58px;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #7f91a7;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.app-bottom-tabs button > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(210, 228, 242, 0.2);
  border-radius: 50%;
  font-size: 1rem;
}

.app-bottom-tabs button > span:last-child {
  display: grid;
  gap: 0.05rem;
}

.app-bottom-tabs strong {
  font-size: 0.73rem;
  letter-spacing: 0.06em;
}

.app-bottom-tabs small {
  font-size: 0.63rem;
}

.app-bottom-tabs button.active {
  border-color: rgba(40, 220, 255, 0.38);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(18, 79, 111, 0.72), rgba(12, 24, 42, 0.92));
}

.app-bottom-tabs button.active > span:first-child {
  color: #051019;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 18px rgba(40, 220, 255, 0.25);
}

.record-tab-icon {
  position: relative;
}

.record-tab-icon::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4258;
  box-shadow: 0 0 10px rgba(255, 66, 88, 0.52);
}

.live-tab-icon {
  position: relative;
}

.live-tab-icon::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.live-tab-icon::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.app-bottom-tabs #liveEncoderTab.active {
  border-color: rgba(255, 48, 72, 0.48);
  background: linear-gradient(135deg, rgba(116, 5, 22, 0.85), rgba(29, 7, 24, 0.94));
}

.app-bottom-tabs #liveEncoderTab.active > span:first-child {
  color: #fff;
  border-color: var(--live);
  background: var(--live);
  box-shadow: 0 0 18px rgba(255, 48, 72, 0.4);
}

.toast {
  bottom: calc(90px + env(safe-area-inset-bottom));
}

@media (max-width: 850px) {
  .production-hero,
  .production-console-grid,
  .production-setup-grid,
  .production-result,
  .encoder-hero,
  .encoder-grid,
  .encoder-controls-grid {
    grid-template-columns: 1fr;
  }

  .production-signal {
    justify-self: start;
  }

  .production-faders,
  .production-master-switches {
    grid-template-columns: 1fr;
  }

  .production-result audio {
    grid-column: 1;
  }

  .encoder-air-status {
    justify-self: start;
  }

  .encoder-go-live-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .production-hero {
    min-height: 330px;
    padding: 1.15rem;
    border-radius: 20px;
  }

  .production-hero::before {
    background:
      linear-gradient(180deg, rgba(0, 4, 11, 0.48), rgba(0, 4, 11, 0.9) 72%),
      url("./doc-in-the-mix-party.jpg") 60% 10% / cover no-repeat;
    opacity: 0.42;
  }

  .production-hero > div:first-child > p:last-child {
    font-size: 0.88rem;
  }

  .production-signal {
    min-width: 0;
    width: 100%;
  }

  .production-mode-tabs {
    grid-template-columns: 1fr;
  }

  .production-mode-tabs button {
    min-height: 68px;
  }

  .spot-duration-picker > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .production-record-controls {
    grid-template-columns: 1fr;
  }

  .production-record-controls .secondary-button {
    width: 100%;
  }

  .production-sync-control > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mic-processing-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mic-processing-strip > b {
    grid-column: 2;
  }

  .production-layer-loaded {
    grid-template-columns: 1fr;
  }

  .production-fx-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .production-fx-item select {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .production-downloads {
    grid-template-columns: 1fr;
  }

  .production-approval-actions {
    grid-template-columns: 1fr;
  }

  .encoder-hero {
    min-height: 330px;
    padding: 1.15rem;
  }

  .encoder-hero::before {
    background:
      linear-gradient(180deg, rgba(0, 4, 11, 0.48), rgba(0, 4, 11, 0.94) 68%),
      url("./doc-in-the-mix-party.jpg") 60% 12% / cover no-repeat;
  }

  .encoder-air-status { width: 100%; }
  .encoder-source-buttons { grid-template-columns: 1fr; }
  .encoder-source-buttons .encoder-clear-button { min-height: 42px; }
  .encoder-scene-switcher > div { grid-template-columns: 1fr 1fr; }
  .encoder-platform-vault-toggle { grid-template-columns: auto minmax(0, 1fr) auto; }
  .encoder-platform-vault-toggle > b { grid-column: 2; justify-self: start; }
  .encoder-platform-vault-toggle > i { grid-column: 3; grid-row: 1 / span 2; }
  .encoder-platform-grid,
  .encoder-platform-vault-actions { grid-template-columns: 1fr; }
  .encoder-roku-heading { grid-template-columns: auto minmax(0, 1fr); }
  .encoder-roku-heading > b { grid-column: 2; justify-self: start; }
  .encoder-output-settings { grid-template-columns: 1fr; }
  .encoder-quality-note { text-align: left; }
  .external-mixer-heading { grid-template-columns: auto minmax(0, 1fr); }
  .external-mixer-heading > b { grid-column: 2; justify-self: start; }
  .external-mixer-controls { grid-template-columns: 1fr 1fr; }
  .external-mixer-controls label { grid-column: 1 / -1; }
  .encoder-audio-meters { grid-template-columns: 1fr; }
  .encoder-faders { grid-template-columns: 1fr; }
  .encoder-lower-third-fields { grid-template-columns: 1fr; }
  .encoder-logo-port { grid-template-columns: 1fr 1fr; }
  .encoder-logo-port > div { grid-column: 1 / -1; }
  .encoder-show-preview-panel { grid-template-columns: 1fr; }
  .encoder-recording-panel { grid-template-columns: 1fr; }
  .encoder-record-actions { grid-template-columns: 1fr 1fr; }
  .encoder-record-actions output { grid-column: 1 / -1; grid-row: 1; }
  .encoder-recording-result { grid-template-columns: 1fr; }
  .encoder-recording-result video { max-height: 230px; }
  .encoder-notes { grid-template-columns: 1fr; }

  .app-bottom-tabs {
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    width: calc(100% - 0.7rem);
    border-radius: 15px;
  }

  .app-bottom-tabs button {
    min-height: 52px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.25rem;
    text-align: center;
  }

  .app-bottom-tabs button > span:first-child {
    width: 30px;
    height: 30px;
  }

  .app-bottom-tabs strong {
    font-size: 0.58rem;
  }

  .app-bottom-tabs small {
    display: none;
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Relay setup spans the area below the program and destination panels. */
.encoder-broadcast-setup { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.5rem; margin:1.25rem 0; padding:clamp(1rem,2.4vw,1.6rem); border:1px solid rgba(255,182,41,.25); border-radius:16px; background:#101722; }
.encoder-broadcast-setup > div { min-width:0; }
.encoder-broadcast-setup .encoder-relay-box { margin-top:0; }
.encoder-broadcast-setup .encoder-output-settings { margin-top:0; }
.encoder-go-live-panel { position:static; }
@media(max-width:800px){ .encoder-broadcast-setup { grid-template-columns:minmax(0,1fr); } }

.encoder-preview-anchor { width:100%; }
.encoder-monitor-shell.is-floating { position:fixed; top:16px; right:18px; width:min(440px,38vw); margin:0; z-index:150; box-shadow:0 12px 36px #000b; border:2px solid var(--gold); }
.encoder-preview-return { display:none; }
.is-floating .encoder-preview-return { display:block; position:absolute; bottom:8px; right:8px; padding:8px 12px; border:1px solid #d8ae3f; border-radius:6px; background:#101722; color:white; font:700 14px Arial,sans-serif; cursor:pointer; }
@media(max-width:700px){.encoder-monitor-shell.is-floating{top:10px;right:10px;width:min(300px,65vw)}}

.talkin-monitor-panel{display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid #747b88;border-radius:12px;min-width:0}.talkin-monitor-panel legend{font-weight:700;padding:0 8px}.talkin-monitor-panel label,.talkin-monitor-panel p{font-size:16px}.talkin-monitor-panel p{margin:0;line-height:1.5}.talkin-monitor-panel select{width:100%;min-width:0;padding:12px;background:#111821;color:#fff;border:1px solid #747b88;border-radius:6px;font-size:16px}.talkin-monitor-panel input[type=range]{width:100%}.talkin-monitor-panel small{font-size:14px;line-height:1.5}

.vocal-tune-panel{min-width:0;margin:18px 0;padding:20px;border:1px solid #9a76e8;border-radius:14px;background:#171327;color:#fff}.vocal-tune-panel legend{font-size:19px;font-weight:800;padding:0 8px;color:#d1b7ff}.vocal-tune-panel p,.vocal-tune-panel label{font-size:16px;line-height:1.5}.vocal-tune-panel small{display:block;font-size:14px;line-height:1.5;color:#d6cde5}.vocal-tune-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.vocal-tune-grid label{display:grid;gap:8px}.vocal-tune-panel select{width:100%;padding:10px;background:#211c31;color:white;border:1px solid #827394;border-radius:6px;font-size:16px}.vocal-tune-panel input[type=range]{width:100%}.vocal-tune-panel output{color:#d1b7ff}@media(max-width:520px){.vocal-tune-grid{grid-template-columns:1fr}}

/* Final mix choices run across the bottom of Pick the flavor. */
.finishing-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.finishing-controls > * { min-width: 0; }
.finishing-controls .select-group { align-content: start; }
.finishing-controls .switch-row { height: 100%; }
.finishing-controls .make-section { margin: 0; padding: 0; border: 0; }
.finishing-controls .mix-success-card { margin: 0; }
@media (max-width: 640px) {
  .finishing-controls { grid-template-columns: minmax(0, 1fr); }
}

#partyMixerView{padding-bottom:220px}#mixSuccessCard{position:fixed;z-index:29;right:16px;bottom:110px;width:min(350px,calc(100vw - 32px));max-height:48vh;overflow:auto;margin:0;background:#071b33;box-shadow:0 8px 36px #000a}#toggleMixSuccess{float:right;padding:5px 9px;margin:0 0 8px 10px;border:1px solid #d5ad50;border-radius:6px;color:#ffe099;background:#061325;font-size:14px;cursor:pointer}#mixSuccessCard.is-compact{width:240px}#mixSuccessCard.is-compact .mix-success-meter,#mixSuccessCard.is-compact p,#mixSuccessCard.is-compact>small,#mixSuccessCard.is-compact .mix-success-heading>b{display:none}#mixSuccessCard.is-compact .mix-success-heading{clear:both} @media(max-width:640px){#mixSuccessCard{bottom:105px;right:8px;width:min(290px,calc(100vw - 16px))}}

/* Keep all four subscribed workspaces reachable in the same mixer window. */
.app-bottom-tabs {grid-template-columns:repeat(4,minmax(0,1fr));width:min(1120px,calc(100% - 1rem));}
@media(max-width:640px){
 .app-bottom-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
 .app-bottom-tabs button{grid-template-columns:auto minmax(0,1fr);text-align:left;justify-items:start;min-height:48px;}
 .app-bottom-tabs strong{font-size:.875rem;line-height:1.2;}
 body{padding-bottom:145px;}
}

/* Keep all four workspaces reachable on desktop and phones. */
.app-bottom-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}.app-bottom-tabs button{min-width:0}.app-bottom-tabs button[data-access="included"]:not(.active){color:#eaf4ff;opacity:1}.app-bottom-tabs button:focus-visible{outline:3px solid #ffdc7c;outline-offset:-4px}@media(max-width:700px){.app-bottom-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}.app-bottom-tabs button{padding:10px 6px}.app-bottom-tabs strong{font-size:12px}.app-bottom-tabs small{font-size:12px}body{padding-bottom:150px}}