/* source: miniapp.css */
:root {
  color-scheme: dark;
  --bg-top: #0a0811;
  --bg-bottom: #121a29;
  --panel: rgba(12, 18, 30, 0.84);
  --panel-strong: rgba(16, 23, 38, 0.96);
  --panel-inner: rgba(255, 255, 255, 0.035);
  --border: rgba(122, 184, 255, 0.12);
  --border-strong: rgba(122, 184, 255, 0.3);
  --text: #f2f8ff;
  --muted: #9fb1c9;
  --accent: #39c5ff;
  --accent-soft: #6a8dff;
  --accent-pale: rgba(57, 197, 255, 0.12);
  --accent-warm: #ffbb7a;
  --accent-warm-pale: rgba(255, 187, 122, 0.1);
  --hero-tint-a: rgba(57, 197, 255, 0.18);
  --hero-tint-b: rgba(255, 187, 122, 0.12);
  --hero-orb-a: rgba(40, 195, 255, 0.18);
  --hero-orb-b: rgba(73, 117, 255, 0.12);
  --mode-signal-bg: linear-gradient(135deg, rgba(57, 197, 255, 0.18), rgba(255, 187, 122, 0.1));
  --mode-signal-dot: #39c5ff;
  --mode-signal-shadow: rgba(57, 197, 255, 0.7);
  --mode-tab-active: linear-gradient(135deg, rgba(57, 197, 255, 0.24), rgba(255, 187, 122, 0.08));
  --mode-pill-border: rgba(102, 214, 255, 0.24);
  --scenario-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.014));
  --scenario-surface-strong: linear-gradient(135deg, rgba(57, 197, 255, 0.1), rgba(255, 187, 122, 0.04));
  --scenario-card-border: rgba(102, 214, 255, 0.14);
  --scenario-card-shadow: rgba(40, 195, 255, 0.08);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01));
  --scenario-input-border: rgba(102, 214, 255, 0.16);
  --scenario-focus-ring: rgba(40, 195, 255, 0.12);
  --scenario-soft-text: rgba(220, 236, 255, 0.82);
  --danger: #ff8a8a;
  --success: #7ce8b4;
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow-xl: 0 34px 100px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 20px 56px rgba(0, 0, 0, 0.28);
}

/* Compact Studio Air and non-blocking service notifications. */
.studio-air-host {
  margin: 0 0 12px;
  position: relative;
  z-index: 8;
}

.studio-air-card.studio-air-card--compact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-height: 58px;
  padding: 9px 14px;
  border-radius: 14px;
}

.studio-air-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 340px;
}

.studio-air-card__identity > div { min-width: 0; }

.studio-air-card__identity h3,
.studio-air-card__identity p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-air-card__identity h3 {
  font-size: 1rem;
  line-height: 1.2;
}

.studio-air-card__mark {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
}

.studio-air-card.studio-air-card--compact audio {
  flex: 1 1 300px;
  width: auto;
  min-width: 240px;
  height: 38px;
}

.studio-air-card__summary,
.studio-air-card__until {
  margin: 0 0 0 auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.88rem;
}

.studio-air-card__reactions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.studio-air-reaction,
.studio-air-comments-panel > summary {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(118, 215, 255, 0.28);
  border-radius: 10px;
  background: rgba(6, 18, 31, 0.72);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.studio-air-comments-panel { width: auto; }

.studio-air-comments-panel > summary {
  list-style: none;
  white-space: nowrap;
}

.studio-air-comments-panel > summary::-webkit-details-marker { display: none; }
.studio-air-comments-panel[open] { flex: 1 0 100%; }

.studio-air-comments-panel__body {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

#notice:not(.hidden) {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  z-index: 1600 !important;
  width: min(720px, calc(100vw - 24px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.44) !important;
}

@media (max-width: 720px) {
  .studio-air-host { margin-bottom: 8px; }
  .studio-air-card.studio-air-card--compact { gap: 8px; padding: 8px 10px; }
  .studio-air-card__identity { flex: 1 1 180px; min-width: 0; }
  .studio-air-card.studio-air-card--compact audio { order: 5; flex-basis: 100%; min-width: 0; }
  .studio-air-card__summary,
  .studio-air-card__until { margin-left: 0; font-size: 0.78rem; }
  .studio-air-comments-panel[open] { order: 6; }
  #notice:not(.hidden) {
    top: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
}

* {
  box-sizing: border-box;
}

html.studio-wizard-booting {
  background: #0a0811;
}

html.studio-wizard-booting body {
  visibility: hidden;
}

html.studio-wizard-ready body {
  animation: studioBootReady 140ms ease-out both;
}

@keyframes studioBootReady {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.studio-wizard-ready body {
    animation: none;
  }
}

html,
body {
  min-height: 100%;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 187, 122, 0.14), transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(57, 197, 255, 0.16), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(88, 101, 255, 0.1), transparent 28%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  overflow-x: hidden;
}

body[data-scenario="GPT_LYRICS"] {
  --hero-tint-a: rgba(64, 190, 255, 0.32);
  --hero-tint-b: rgba(108, 123, 255, 0.2);
  --hero-orb-a: rgba(41, 200, 255, 0.34);
  --hero-orb-b: rgba(90, 107, 255, 0.22);
  --mode-signal-bg: linear-gradient(135deg, rgba(79, 214, 255, 0.28), rgba(110, 126, 255, 0.18));
  --mode-signal-dot: #62d8ff;
  --mode-signal-shadow: rgba(98, 216, 255, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(64, 190, 255, 0.32), rgba(120, 128, 255, 0.16));
  --mode-pill-border: rgba(102, 214, 255, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(84, 208, 255, 0.078), rgba(255, 255, 255, 0.014));
  --scenario-surface-strong: linear-gradient(135deg, rgba(81, 213, 255, 0.13), rgba(113, 122, 255, 0.07));
  --scenario-card-border: rgba(108, 212, 255, 0.18);
  --scenario-card-shadow: rgba(67, 198, 255, 0.12);
  --scenario-input-bg: linear-gradient(180deg, rgba(85, 202, 255, 0.055), rgba(255, 255, 255, 0.01));
  --scenario-input-border: rgba(104, 214, 255, 0.18);
  --scenario-focus-ring: rgba(97, 210, 255, 0.14);
  --scenario-soft-text: rgba(221, 242, 255, 0.84);
}

body[data-scenario="READY_POEM"] {
  --hero-tint-a: rgba(77, 232, 196, 0.3);
  --hero-tint-b: rgba(255, 179, 102, 0.22);
  --hero-orb-a: rgba(66, 227, 184, 0.28);
  --hero-orb-b: rgba(255, 156, 88, 0.22);
  --mode-signal-bg: linear-gradient(135deg, rgba(67, 233, 190, 0.24), rgba(255, 182, 98, 0.18));
  --mode-signal-dot: #57efcb;
  --mode-signal-shadow: rgba(87, 239, 203, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(71, 233, 193, 0.26), rgba(255, 185, 110, 0.18));
  --mode-pill-border: rgba(95, 239, 207, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(74, 235, 194, 0.07), rgba(255, 188, 114, 0.028));
  --scenario-surface-strong: linear-gradient(135deg, rgba(72, 236, 196, 0.12), rgba(255, 188, 110, 0.07));
  --scenario-card-border: rgba(95, 239, 207, 0.18);
  --scenario-card-shadow: rgba(74, 232, 193, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(72, 236, 196, 0.048), rgba(255, 190, 112, 0.012));
  --scenario-input-border: rgba(95, 239, 207, 0.18);
  --scenario-focus-ring: rgba(95, 239, 207, 0.14);
  --scenario-soft-text: rgba(228, 244, 238, 0.84);
}

body[data-scenario="SUNO_LYRICS"] {
  --hero-tint-a: rgba(121, 139, 255, 0.32);
  --hero-tint-b: rgba(62, 217, 255, 0.2);
  --hero-orb-a: rgba(104, 125, 255, 0.3);
  --hero-orb-b: rgba(44, 213, 255, 0.2);
  --mode-signal-bg: linear-gradient(135deg, rgba(121, 139, 255, 0.26), rgba(62, 217, 255, 0.18));
  --mode-signal-dot: #84a6ff;
  --mode-signal-shadow: rgba(132, 166, 255, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(121, 139, 255, 0.28), rgba(62, 217, 255, 0.16));
  --mode-pill-border: rgba(124, 162, 255, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(122, 145, 255, 0.075), rgba(74, 221, 255, 0.02));
  --scenario-surface-strong: linear-gradient(135deg, rgba(122, 145, 255, 0.125), rgba(72, 218, 255, 0.07));
  --scenario-card-border: rgba(124, 162, 255, 0.2);
  --scenario-card-shadow: rgba(103, 136, 255, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(124, 162, 255, 0.048), rgba(72, 218, 255, 0.012));
  --scenario-input-border: rgba(124, 162, 255, 0.18);
  --scenario-focus-ring: rgba(124, 162, 255, 0.14);
  --scenario-soft-text: rgba(227, 236, 255, 0.84);
}

body[data-scenario="INSTRUMENTAL"] {
  --hero-tint-a: rgba(255, 172, 92, 0.3);
  --hero-tint-b: rgba(214, 128, 88, 0.2);
  --hero-orb-a: rgba(255, 171, 92, 0.24);
  --hero-orb-b: rgba(220, 122, 76, 0.18);
  --mode-signal-bg: linear-gradient(135deg, rgba(255, 184, 102, 0.26), rgba(227, 134, 84, 0.18));
  --mode-signal-dot: #ffcb8c;
  --mode-signal-shadow: rgba(255, 203, 140, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(255, 176, 104, 0.28), rgba(219, 136, 87, 0.16));
  --mode-pill-border: rgba(255, 187, 122, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(255, 184, 104, 0.07), rgba(225, 139, 86, 0.022));
  --scenario-surface-strong: linear-gradient(135deg, rgba(255, 189, 118, 0.12), rgba(224, 136, 88, 0.07));
  --scenario-card-border: rgba(255, 195, 128, 0.18);
  --scenario-card-shadow: rgba(255, 176, 104, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 188, 118, 0.048), rgba(223, 140, 90, 0.012));
  --scenario-input-border: rgba(255, 194, 126, 0.18);
  --scenario-focus-ring: rgba(255, 190, 120, 0.14);
  --scenario-soft-text: rgba(255, 237, 223, 0.82);
}

.ambient {
  position: fixed;
  inset: auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.45;
  z-index: 0;
}

.ambient--left {
  top: -120px;
  left: -140px;
  background: rgba(255, 187, 122, 0.18);
}

.ambient--right {
  top: 260px;
  right: -180px;
  background: rgba(57, 197, 255, 0.15);
}

.page {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 22px 18px 320px;
  overflow-anchor: none;
}

#track-form,
#section-create {
  overflow-anchor: none;
}

.card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(24px);
}

.card--inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    var(--panel-inner);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hero {
  padding: 24px 24px 22px;
  margin-bottom: 20px;
  background:
    linear-gradient(135deg, var(--hero-tint-a), var(--hero-tint-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--panel);
  transition: background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 36%);
  opacity: 0.7;
  pointer-events: none;
}

.hero__mark {
  position: absolute;
  top: 18px;
  right: -6px;
  width: 360px;
  height: 220px;
  margin: 0;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at 48% 38%, rgba(57, 197, 255, 0.14), transparent 34%),
    url("/miniapp/static/logo-no-bg.png") center top / 84% auto no-repeat;
  box-shadow: none;
  opacity: 0.13;
  filter: saturate(1.04);
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.92) 56%, rgba(0, 0, 0, 0.08) 72%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.92) 56%, rgba(0, 0, 0, 0.08) 72%, rgba(0, 0, 0, 0) 100%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

.hero__glow--one {
  width: 260px;
  height: 260px;
  top: -96px;
  right: -56px;
  background: var(--hero-orb-a);
  transition: background 0.36s ease;
}

.hero__glow--two {
  width: 210px;
  height: 210px;
  bottom: -78px;
  left: -48px;
  background: var(--hero-orb-b);
  transition: background 0.36s ease;
}

.hero__brand {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.hero__copy {
  max-width: min(100%, 540px);
  position: relative;
  z-index: 1;
  padding-top: 2px;
}

.hero__title {
  max-width: none;
  text-wrap: pretty;
}

.hero__title-line {
  display: block;
}

.hero__title-line:last-child {
  white-space: nowrap;
}

.top-tabs {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 9;
  margin: 0 0 14px;
  padding: 8px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(9, 15, 26, 0.96), rgba(8, 14, 24, 0.92)),
    var(--panel-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.top-tabs__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #98dfff;
}

.hero h1,
.section h2 {
  margin: 0;
  line-height: 1.08;
}

.hero h1 {
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.hero__subtitle {
  margin: 12px 0 0;
  color: rgba(228, 240, 255, 0.86);
  line-height: 1.62;
  font-size: 15.5px;
  max-width: none;
  text-wrap: pretty;
}

.hero__brand-secondary {
  margin: 8px 0 0;
  color: rgba(220, 236, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: none;
  line-height: 1.42;
  text-wrap: pretty;
}

.hero__mode-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 14, 24, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef8ff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.36s ease, color 0.36s ease, border-color 0.36s ease;
}

.ui-language-switcher {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(164, 228, 255, 0.18);
  background: rgba(7, 14, 24, 0.64);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ui-language-switcher__button {
  min-width: 42px;
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 240, 255, 0.78);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ui-language-switcher__button.is-active {
  background: var(--mode-tab-active);
  color: #ffffff;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 560px) {
  .ui-language-switcher {
    top: 12px;
    right: 12px;
  }

  .ui-language-switcher__button {
    min-width: 36px;
    min-height: 28px;
    padding: 5px 8px;
    font-size: 10px;
  }
}

/* MAX keeps language and balance as two distinct controls in the top row. */
.studio-host-max .hero {
  padding-top: 72px;
}

.studio-host-max .studio-impulse-badge {
  left: auto;
  right: 12px;
}

.studio-host-max .ui-language-switcher {
  top: 54px;
}

.studio-host-max .studio-air-host {
  margin-top: 42px;
}

@media (max-width: 360px) {
  .studio-host-max .studio-impulse-badge {
    left: auto;
    right: 8px;
  }
}

/* PulseVeter Studio visual direction: cinematic music product shell. */
:root {
  --studio-cyan: #19d8ff;
  --studio-cyan-soft: rgba(25, 216, 255, 0.18);
  --studio-blue: #77bfff;
  --studio-gold: #e6bd69;
  --studio-night: #020816;
  --studio-panel: rgba(5, 15, 30, 0.72);
  --studio-panel-strong: rgba(4, 12, 24, 0.9);
  --studio-line: rgba(144, 220, 255, 0.22);
  --studio-text-soft: rgba(218, 235, 252, 0.74);
}

body.studio-wizard-enabled {
  background:
    radial-gradient(circle at 52% 17%, rgba(30, 203, 255, 0.18), transparent 22%),
    radial-gradient(circle at 8% 38%, rgba(52, 126, 196, 0.18), transparent 30%),
    linear-gradient(180deg, #061933 0%, #071426 42%, #020816 100%);
}

body.studio-wizard-enabled::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 22%, rgba(157, 225, 255, 0.58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 8%, rgba(255, 255, 255, 0.54) 0 1px, transparent 1.5px),
    radial-gradient(circle at 46% 36%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 82% 86%, rgba(40, 108, 168, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(4, 18, 36, 0.1) 0%, rgba(3, 13, 27, 0.46) 56%, rgba(2, 8, 18, 0.64) 100%);
  opacity: 0.85;
}

body.studio-wizard-enabled::after {
  display: none;
}

body.studio-wizard-enabled .hero,
body.studio-wizard-enabled .section,
body.studio-wizard-enabled .auth-gate,
body.studio-wizard-enabled .field-group,
body.studio-wizard-enabled .track-card,
body.studio-wizard-enabled .studio-utility-panel,
body.studio-wizard-enabled .studio-review-card {
  border-color: var(--studio-line);
  background:
    radial-gradient(circle at 16% 0%, rgba(25, 216, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--studio-panel);
  box-shadow: 0 26px 86px rgba(0, 0, 0, 0.36);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.studio-wizard-enabled .hero {
  position: relative;
  overflow: hidden;
}

body.studio-wizard-enabled .hero::after {
  display: none;
}

body.studio-wizard-enabled .hero__title,
body.studio-wizard-enabled .studio-start-panel__head h2,
body.studio-wizard-enabled .studio-review-card h2,
body.studio-wizard-enabled .view-header h2,
body.studio-wizard-enabled .section h2 {
  letter-spacing: 0;
  color: #fff8ec;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.32);
}

body.studio-wizard-enabled .hero__brand-secondary {
  max-width: 100%;
  margin: 10px 0 0;
  color: rgba(220, 236, 255, 0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-shadow: none;
}

body.studio-wizard-enabled .hero__subtitle,
body.studio-wizard-enabled .studio-start-panel__head p,
body.studio-wizard-enabled .studio-review-card p,
body.studio-wizard-enabled .field-group__header p,
body.studio-wizard-enabled .view-header p {
  color: var(--studio-text-soft);
}

body.studio-wizard-enabled .hero__subtitle {
  max-width: 100%;
  margin-top: 12px;
  color: rgba(228, 240, 255, 0.86);
  font-size: 15.5px;
  line-height: 1.62;
}

.studio-mobile-menu-toggle {
  width: fit-content;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 0 16px;
  gap: 10px;
  border-radius: 999px;
  background: rgba(3, 12, 24, 0.68);
  border-color: rgba(153, 224, 255, 0.26);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.studio-mobile-menu-toggle strong {
  font-size: 15px;
  line-height: 1;
}

.studio-mobile-menu-toggle__icon {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.studio-mobile-menu-toggle__icon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  border-top: 2px solid currentColor;
}

.studio-side-nav {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(4, 13, 26, 0.76);
  border-color: rgba(153, 224, 255, 0.18);
}

.studio-side-nav button {
  min-height: 54px;
  border-radius: 18px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

.studio-side-nav button span {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 30%, rgba(151, 237, 255, 0.26), transparent 42%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(151, 237, 255, 0.16);
  color: transparent;
  font-size: 0;
}

.studio-side-nav button span::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: var(--studio-cyan);
  box-shadow: 0 0 18px rgba(25, 216, 255, 0.5);
}

.studio-side-nav button span[data-icon="create"]::before {
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}

.studio-side-nav button span[data-icon="tracks"]::before {
  width: 16px;
  height: 16px;
  clip-path: polygon(30% 0, 82% 0, 82% 62%, 70% 62%, 70% 16%, 42% 16%, 42% 78%, 30% 78%);
}

.studio-side-nav button span[data-icon="impulses"]::before {
  width: 18px;
  height: 13px;
  clip-path: polygon(0 58%, 22% 58%, 32% 0, 46% 100%, 58% 58%, 100% 58%, 100% 78%, 62% 78%, 45% 100%, 32% 28%, 26% 78%, 0 78%);
}

.studio-side-nav button span[data-icon="drafts"]::before {
  border-radius: 3px;
  background: transparent;
  border: 2px solid var(--studio-cyan);
}

.studio-side-nav button span[data-icon="help"]::before {
  content: "?";
  width: auto;
  height: auto;
  background: transparent;
  color: var(--studio-cyan);
  font-size: 16px;
  font-weight: 950;
}

.studio-side-nav button span[data-icon="profile"]::before {
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--studio-cyan);
  box-shadow: 0 0 18px rgba(25, 216, 255, 0.45);
}

.studio-stepper {
  gap: 10px;
  padding: 12px;
  border-radius: 26px;
  background: rgba(3, 10, 20, 0.52);
  border-color: rgba(153, 224, 255, 0.16);
}

.studio-stepper__item {
  min-height: 70px;
  border-radius: 22px;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.studio-stepper__item.is-active {
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, rgba(25, 216, 255, 0.24), transparent 42%),
    rgba(9, 32, 52, 0.78);
  box-shadow: 0 0 0 1px rgba(25, 216, 255, 0.42), 0 16px 46px rgba(25, 216, 255, 0.13);
}

.studio-stepper__index {
  border-color: rgba(25, 216, 255, 0.32);
  background: rgba(6, 19, 35, 0.74);
  color: #dff8ff;
}

.studio-stepper__item.is-active .studio-stepper__index {
  background: var(--studio-cyan);
  color: #04111e;
  box-shadow: 0 0 24px rgba(25, 216, 255, 0.55);
}

.studio-wizard-actions {
  border-radius: 28px;
  background: rgba(4, 12, 24, 0.82);
  border-color: rgba(153, 224, 255, 0.22);
}

.studio-wizard-actions__primary,
.primary-button {
  background: linear-gradient(180deg, #30dfff, #58aaff) !important;
  color: #03101d !important;
  border-color: rgba(170, 242, 255, 0.72) !important;
  box-shadow: 0 18px 58px rgba(25, 216, 255, 0.34) !important;
}

.studio-wizard-actions__primary:hover,
.primary-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.select-tap-option,
.studio-voice-mode .chip,
.studio-scenario-card {
  border-color: rgba(153, 224, 255, 0.18);
  background:
    radial-gradient(circle at 52% 0%, rgba(25, 216, 255, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
}

.select-tap-option.is-active,
.studio-voice-mode .chip.is-active,
.studio-scenario-card.is-active {
  color: #fff;
  border-color: rgba(25, 216, 255, 0.62);
  background:
    radial-gradient(circle at 50% 18%, rgba(25, 216, 255, 0.25), transparent 44%),
    linear-gradient(180deg, rgba(53, 154, 216, 0.28), rgba(255, 255, 255, 0.035));
  box-shadow: 0 18px 48px rgba(25, 216, 255, 0.16);
}

.studio-impulse-badge {
  border-color: rgba(153, 224, 255, 0.34);
  background: rgba(4, 14, 28, 0.76);
  color: #fff;
}

.studio-impulse-badge__icon {
  background: transparent;
  color: var(--studio-cyan);
}

.studio-impulse-badge__icon::before {
  content: "";
  width: 18px;
  height: 13px;
  display: block;
  background: var(--studio-cyan);
  clip-path: polygon(0 58%, 22% 58%, 32% 0, 46% 100%, 58% 58%, 100% 58%, 100% 78%, 62% 78%, 45% 100%, 32% 28%, 26% 78%, 0 78%);
}

@media (max-width: 920px) {
  .page--web .studio-mobile-nav-wrap {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 96;
    display: grid;
    justify-items: start;
    margin: 0 0 10px;
    padding: 0 4px;
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav {
    width: min(320px, calc(100vw - 32px));
    margin-top: 8px;
    padding: 8px;
    border-radius: 24px;
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav button {
    min-height: 48px;
  }
}

.hero__signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--mode-signal-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #dbf5ff;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: background 0.36s ease, border-color 0.36s ease, color 0.36s ease;
  width: fit-content;
}

.hero__signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mode-signal-dot);
  box-shadow: 0 0 18px var(--mode-signal-shadow);
  transition: background 0.36s ease, box-shadow 0.36s ease;
}

.auth-gate {
  margin-bottom: 18px;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.auth-gate__copy h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.08;
}

.auth-gate__lead,
.auth-gate__note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-gate__actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-gate__widget {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.auth-gate .primary-button,
.auth-gate .secondary-button {
  width: 100%;
}

.auth-hint {
  display: grid;
  gap: 8px;
}

.is-auth-locked {
  position: relative;
}

.is-auth-locked::before {
  content: "Сначала войдите, затем заполните анкету";
  display: block;
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(132, 229, 255, 0.28);
  border-radius: 18px;
  background: rgba(60, 171, 218, 0.12);
  color: rgba(230, 242, 255, 0.9);
  font-weight: 800;
}

.is-auth-locked .field,
.is-auth-locked .field-group {
  opacity: 0.58;
}

.tab-button,
.primary-button,
.secondary-button,
.chip {
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.tab-button {
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 15px;
  box-shadow: var(--shadow-card);
}

.top-tabs .tab-button {
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.tab-button.is-active {
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.22), rgba(255, 187, 122, 0.08));
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(57, 197, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.section {
  padding: 24px;
  margin-bottom: 18px;
  background:
    var(--scenario-surface-strong),
    var(--scenario-surface),
    var(--panel);
  border-color: var(--scenario-card-border);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.015),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}

.section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section__header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.section__pill {
  padding: 10px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-pale), var(--accent-warm-pale));
  color: #ddf6ff;
  border: 1px solid rgba(40, 195, 255, 0.18);
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.36s ease, color 0.36s ease, border-color 0.36s ease;
}

.section h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.section__copy {
  margin: 0 0 18px;
  color: var(--scenario-soft-text);
  line-height: 1.6;
  max-width: none;
  transition: color 0.24s ease, opacity 0.24s ease;
}

.tracks-retention-note {
  margin: -6px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 187, 122, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 187, 122, 0.105), rgba(57, 197, 255, 0.045));
  color: rgba(245, 251, 255, 0.86);
  font-size: 14px;
  line-height: 1.45;
}

.tracks-retention-emphasis {
  display: inline-block;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 90, 90, 0.16);
  color: #ff6b6b !important;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.2);
}

.template-strip {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  overflow: visible;
}

.template-strip__header {
  display: grid;
  gap: 5px;
}

.template-strip__header strong {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--scenario-soft-text);
}

.template-strip__header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: none;
}

.template-strip__chips {
  margin-top: 2px;
}

.template-chip {
  font-size: 14px;
}

.template-chip.is-active {
  position: relative;
}

.template-chip.is-active::after {
  content: "✓";
}

.template-chip:hover {
  transform: translateY(-1px);
}

.template-chip:active {
  transform: translateY(1px) scale(0.99);
}

body[data-scenario="GPT_LYRICS"] .section__pill,
body[data-scenario="GPT_LYRICS"] .hero__mode-chip {
  background: linear-gradient(135deg, rgba(102, 214, 255, 0.22), rgba(255, 194, 126, 0.12));
  border-color: var(--mode-pill-border);
}

body[data-scenario="READY_POEM"] .section__pill,
body[data-scenario="READY_POEM"] .hero__mode-chip {
  background: linear-gradient(135deg, rgba(72, 236, 196, 0.26), rgba(255, 183, 102, 0.18));
  border-color: var(--mode-pill-border);
}

body[data-scenario="SUNO_LYRICS"] .section__pill,
body[data-scenario="SUNO_LYRICS"] .hero__mode-chip {
  background: linear-gradient(135deg, rgba(124, 162, 255, 0.28), rgba(88, 226, 255, 0.16));
  border-color: var(--mode-pill-border);
}

body[data-scenario="INSTRUMENTAL"] .section__pill,
body[data-scenario="INSTRUMENTAL"] .hero__mode-chip {
  background: linear-gradient(135deg, rgba(255, 187, 122, 0.28), rgba(224, 137, 86, 0.16));
  border-color: var(--mode-pill-border);
}

.grid {
  display: grid;
  gap: 14px;
}

.field-group {
  padding: 18px;
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
    var(--scenario-surface);
  border: 1px solid var(--scenario-card-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 14px 34px var(--scenario-card-shadow);
  transition: background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}

.field-group__header {
  margin-bottom: 14px;
}

.field-group__header h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.field-group__header p {
  margin: 0;
  color: var(--scenario-soft-text);
  line-height: 1.5;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 14px;
  color: #dff0ff;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 16px 17px;
  border-radius: 18px;
  border: 1px solid var(--scenario-input-border);
  background:
    var(--scenario-input-bg),
    rgba(8, 13, 23, 0.78);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  scroll-margin-top: 180px;
  scroll-margin-bottom: 210px;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.36s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #7590a8;
}

.select-tap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.select-tap-option {
  appearance: none;
  flex: 1 1 132px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--scenario-input-border);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(8, 15, 25, 0.68);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}

.select-tap-option.is-active {
  border-color: var(--border-strong);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.2), rgba(255, 187, 122, 0.12)),
    rgba(8, 15, 25, 0.82);
  box-shadow: 0 0 0 3px var(--scenario-focus-ring);
}

#vocal_gender[data-tap-buttons-ready="1"],
#performance_space[data-tap-buttons-ready="1"],
#performance_space_detail[data-tap-buttons-ready="1"] {
  display: none;
}

#track-form select[data-tap-buttons-ready="1"] {
  display: none;
}

.file-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--scenario-input-border);
  background:
    var(--scenario-input-bg),
    rgba(8, 13, 23, 0.78);
  color: var(--muted);
  font: inherit;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.36s ease;
}

.file-input::file-selector-button {
  margin-right: 14px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.2), rgba(255, 187, 122, 0.08));
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.custom-voice-panel {
  gap: 12px;
}

.custom-voice-panel .file-input {
  display: none;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.custom-voice-panel .notice {
  margin: 0;
}

.voice-consent-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 224, 138, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 224, 138, 0.1), rgba(151, 232, 211, 0.06)),
    rgba(7, 17, 29, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.voice-consent-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.voice-consent-card a {
  color: #9bead5;
  font-weight: 800;
}

.voice-consent-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: rgba(232, 242, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
}

.voice-consent-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #9bead5;
}

#custom_voice_status {
  position: relative;
  padding: 18px 18px 18px 54px;
  border-color: rgba(151, 232, 211, 0.46);
  background:
    radial-gradient(circle at 18px 22px, rgba(151, 232, 211, 0.26), transparent 18px),
    linear-gradient(135deg, rgba(151, 232, 211, 0.12), rgba(57, 197, 255, 0.08)),
    rgba(3, 14, 26, 0.74);
  color: #e9f8ff;
  font-weight: 800;
  line-height: 1.45;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#custom_voice_phrase {
  position: relative;
  padding: 18px 20px;
  border-color: rgba(255, 224, 138, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 224, 138, 0.15), rgba(151, 232, 211, 0.09)),
    rgba(8, 18, 30, 0.78);
  color: #fff7df;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.42;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#custom_voice_status::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #9bead5;
  box-shadow: 0 0 0 8px rgba(151, 232, 211, 0.12);
}

#custom_voice_status.notice--error {
  border-color: rgba(255, 119, 119, 0.55);
  background:
    radial-gradient(circle at 18px 22px, rgba(255, 119, 119, 0.22), transparent 18px),
    linear-gradient(135deg, rgba(255, 119, 119, 0.12), rgba(255, 187, 122, 0.06)),
    rgba(22, 8, 13, 0.78);
}

#custom_voice_status.notice--error::before {
  background: #ff8f8f;
  box-shadow: 0 0 0 8px rgba(255, 119, 119, 0.12);
}

.custom-voice-panel .inline-grid:has(.custom-voice-skill-chips) {
  align-items: start;
}

.custom-voice-skill-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.custom-voice-skill-chips .chip {
  justify-content: center;
  min-height: 46px;
  white-space: normal;
  text-align: center;
}

.custom-voice-skill-chips .chip.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.voice-progress-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.voice-progress-dialog.hidden {
  display: none;
}

.voice-progress-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 16, 0.74);
  backdrop-filter: blur(14px);
}

.voice-progress-dialog__panel {
  position: relative;
  width: min(480px, 100%);
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(154, 231, 214, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 231, 214, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(26, 41, 54, 0.96), rgba(8, 14, 24, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}

.voice-progress-dialog__pulse {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8eead8, #f3dc8f);
  box-shadow: 0 0 0 0 rgba(142, 234, 216, 0.42);
  animation: voicePulse 1.25s ease-in-out infinite;
}

.voice-progress-dialog__panel h3 {
  margin: 0;
  font-size: clamp(24px, 6vw, 34px);
}

.voice-progress-dialog__text {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.voice-progress-dialog__phrase {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(154, 231, 214, 0.24);
  background: rgba(8, 16, 28, 0.72);
  color: #f8fbff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.voice-progress-dialog__timer {
  margin: 18px auto 0;
  width: fit-content;
  min-width: 96px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(154, 231, 214, 0.14);
  color: #cffff4;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.voice-progress-dialog__actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.voice-progress-dialog__actions.hidden {
  display: none;
}

.voice-progress-dialog__actions .primary-button,
.voice-progress-dialog__actions .secondary-button {
  width: 100%;
  min-height: 52px;
}

@keyframes voicePulse {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(142, 234, 216, 0.42);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 18px rgba(142, 234, 216, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(142, 234, 216, 0);
  }
}

.field.is-field-error input,
.field.is-field-error select,
.field.is-field-error textarea {
  border-color: rgba(255, 166, 77, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 166, 77, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.notice--error {
  border-color: rgba(255, 119, 119, 0.55);
  color: #ffd8d8;
}

.poem-upload .muted {
  margin: 0;
  font-size: 13px;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.chip {
  position: relative;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.chip.is-active {
  background: var(--mode-tab-active);
  border-color: color-mix(in srgb, var(--mode-pill-border) 88%, white 12%);
  box-shadow: 0 12px 28px var(--scenario-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding-right: 36px;
}

.chip.is-active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #f4fbff, #d6f1ff);
  color: #06111f;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(57, 197, 255, 0.18);
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
  position: relative;
  z-index: 8;
}

.scenario-switcher {
  margin-top: 16px;
}

.scenario-switcher .scenario-grid {
  margin-bottom: 0;
}

.scenario-dock {
  padding: 10px;
  border-radius: 28px;
  background:
    var(--scenario-surface-strong),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(7, 14, 24, 0.72);
  border: 1px solid var(--scenario-card-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 14px 34px var(--scenario-card-shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.scenario-dock__button {
  min-height: 76px;
  padding: 11px 8px 12px;
  border-radius: 22px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(7, 14, 24, 0.9);
  border: 1px solid color-mix(in srgb, var(--scenario-card-border) 70%, rgba(255, 255, 255, 0.04) 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transform: translateY(0) scale(1);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}

.scenario-dock__button::before {
  display: none;
}

.scenario-dock__button strong,
.scenario-dock__button p,
.scenario-dock__button .scenario-card__eyebrow,
.scenario-dock__button .scenario-card__check {
  display: none !important;
}

.scenario-dock__icon {
  font-size: 18px;
  line-height: 1;
  color: #9ad8ff;
  transition: transform 0.22s ease, color 0.22s ease;
}

.scenario-dock__label {
  font-size: 11px;
  line-height: 1.2;
  color: #d9ebff;
  font-weight: 700;
  transition: color 0.22s ease, transform 0.22s ease;
}

.scenario-dock__button.is-active,
.scenario-dock__button[data-active="true"] {
  border-color: color-mix(in srgb, var(--mode-pill-border) 88%, white 12%);
  background:
    var(--mode-tab-active),
    rgba(10, 18, 32, 0.96);
  box-shadow:
    0 16px 40px var(--scenario-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-6px) scale(1.03);
}

.scenario-dock__button.is-active .scenario-dock__icon,
.scenario-dock__button[data-active="true"] .scenario-dock__icon,
.scenario-dock__button.is-active .scenario-dock__label,
.scenario-dock__button[data-active="true"] .scenario-dock__label {
  color: #ffffff;
}

.scenario-dock__button.is-active .scenario-dock__icon,
.scenario-dock__button[data-active="true"] .scenario-dock__icon {
  transform: translateY(-1px) scale(1.08);
}

.scenario-dock__button.is-active .scenario-dock__label,
.scenario-dock__button[data-active="true"] .scenario-dock__label {
  transform: translateY(-1px);
}

.scenario-dock__button:active {
  transform: translateY(-3px) scale(0.99);
}

.scenario-card {
  padding: 20px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(7, 14, 24, 0.86);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 8px;
  min-height: 156px;
  position: relative;
  padding-right: 56px;
  outline: none;
  z-index: 9;
  isolation: isolate;
  touch-action: manipulation;
}

.scenario-card__check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4fbff, #d6f1ff);
  color: #06111f;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(57, 197, 255, 0.18);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.scenario-card__check[hidden] {
  display: none !important;
}

.scenario-card:focus-visible {
  border-color: rgba(57, 197, 255, 0.44);
  box-shadow: 0 0 0 3px rgba(57, 197, 255, 0.12), var(--shadow-card);
}

.scenario-card strong {
  font-size: 19px;
}

.scenario-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.scenario-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9ad8ff;
}

.scenario-card.is-active {
  border-color: rgba(57, 197, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.18), rgba(255, 187, 122, 0.08)),
    rgba(10, 18, 32, 0.92);
  box-shadow: 0 18px 50px rgba(57, 197, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.scenario-card.is-active strong {
  color: #ffffff;
}

.scenario-card.is-active p {
  color: #dff4ff;
}

.scenario-card.is-active::after {
  content: none;
}

.scenario-card.is-active .scenario-card__check {
  opacity: 1;
  transform: scale(1);
}

.scenario-card[data-active="true"] .scenario-card__check {
  opacity: 1;
  transform: scale(1);
}

.toggle-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.toggle-card__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
}

.toggle-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.primary-button,
.secondary-button {
  width: 100%;
  border-radius: 20px;
  padding: 17px 18px;
  font-size: 16px;
  cursor: pointer;
}

.primary-button {
  border: none;
  color: #06111f;
  font-weight: 800;
  background:
    linear-gradient(135deg, #6cd6ff 0%, #5bbdff 42%, #ffbf82 100%);
  box-shadow: 0 22px 46px rgba(57, 197, 255, 0.22);
}

.primary-button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.96;
  padding-left: 48px;
}

.primary-button.is-loading::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(6, 17, 31, 0.28);
  border-top-color: #06111f;
  animation: button-spin 0.8s linear infinite;
}

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

.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
}

.secondary-button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
  padding-left: 48px;
}

.secondary-button.is-loading::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(242, 248, 255, 0.2);
  border-top-color: #f2f8ff;
  animation: button-spin 0.8s linear infinite;
}

.notice,
.track-item,
.copy-card,
.result-summary,
.status-summary,
.field-group {
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.track-item,
.scenario-card,
.copy-card,
.result-summary,
.status-summary,
.notice,
.field-group {
  position: relative;
}

.track-item::before,
.scenario-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.06), rgba(255, 187, 122, 0.03));
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.track-item:hover::before,
.scenario-card:hover::before {
  opacity: 1;
}

.info-block {
  cursor: default;
  background:
    var(--scenario-surface),
    rgba(8, 14, 24, 0.7);
  border-color: var(--scenario-card-border);
  box-shadow: none;
}

.info-block::before {
  display: none;
}

.info-block:hover {
  transform: none;
}

.notice.info-block,
.copy-card.info-block,
.result-summary.info-block,
.status-summary.info-block,
.field-group.info-block {
  background:
    var(--scenario-surface),
    rgba(8, 14, 24, 0.72);
  border-color: var(--scenario-card-border);
}

.notice.info-block {
  color: var(--scenario-soft-text);
}

.copy-card.info-block,
.result-summary.info-block,
.status-summary.info-block,
.field-group.info-block {
  box-shadow: none;
}

.copy-grid {
  display: grid;
  gap: 12px;
}

.status-stack {
  display: grid;
  gap: 16px;
}

.status-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 14px;
  align-items: start;
}

.status-column {
  display: grid;
  gap: 12px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.result-actions .primary-button,
.result-actions .secondary-button {
  width: auto;
  min-width: 180px;
  flex: 1 1 180px;
}

.status-summary {
  padding: 18px;
}

.status-summary ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.status-summary li {
  line-height: 1.55;
  color: var(--muted);
}

.status-summary strong {
  color: var(--text);
}

.status-steps {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 8px;
  line-height: 1.55;
}

.status-steps li::marker {
  color: var(--accent);
}

.copy-card {
  padding: 18px;
  border-radius: 22px;
  background:
    var(--scenario-surface),
    rgba(255, 255, 255, 0.035);
  border: 1px solid var(--scenario-card-border);
  box-shadow: var(--shadow-card), 0 12px 28px var(--scenario-card-shadow);
}

.copy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.copy-card__head .secondary-button {
  width: auto;
  padding: 10px 14px;
  font-size: 14px;
}

.copy-card__code {
  margin: 0;
  padding: 17px;
  border-radius: 18px;
  background: rgba(4, 11, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, "SFMono-Regular", monospace;
  line-height: 1.6;
}

.editable-lyrics-card__hint {
  color: var(--muted);
  font-size: 13px;
}

.editable-lyrics-card__meta {
  display: grid;
  gap: 4px;
}

.editable-lyrics-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 12px;
}

.editable-lyrics-card__textarea {
  width: 100%;
  min-height: 360px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 11, 20, 0.78);
  color: var(--text);
  resize: vertical;
  line-height: 1.65;
  font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
  font-size: 16px;
}

.editable-lyrics-card__textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(57, 197, 255, 0.12);
}

.editable-lyrics-card__footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.result-summary {
  padding: 18px;
}

.result-summary h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.result-summary p {
  margin: 0;
}

.generation-cover {
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 10, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.generation-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.generation-cover__fallback {
  display: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  color: rgba(232, 244, 255, 0.74);
  font-weight: 900;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.14), rgba(241, 208, 135, 0.1)),
    rgba(3, 10, 18, 0.86);
}

.generation-cover.is-broken .generation-cover__fallback,
.generation-cover--empty {
  display: grid;
}

.generation-cover__actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 16, 29, 0.2), rgba(8, 16, 29, 0.72));
}

.generation-cover--compact {
  margin-top: 0;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 92px;
  border-radius: 16px;
}

.generation-cover--compact img,
.generation-cover--compact .generation-cover__fallback {
  height: 100%;
}

.audio-preview-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.audio-preview {
  padding: 15px 15px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 18, 32, 0.92), rgba(5, 12, 22, 0.84));
  border: 1px solid rgba(116, 234, 229, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.audio-preview--compact {
  margin-top: 8px;
  padding: 12px;
}

.audio-preview__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.audio-preview__titles {
  display: grid;
  gap: 5px;
}

.audio-preview__label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ad8ff;
}

.audio-preview__hint {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(224, 232, 246, 0.7);
}

.audio-preview__links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-preview__favorite {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(116, 234, 229, 0.24);
  background: rgba(16, 26, 42, 0.9);
  color: rgba(236, 241, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.audio-preview__favorite.is-active {
  color: #ff6b81;
  border-color: rgba(255, 107, 129, 0.5);
  background: rgba(63, 19, 31, 0.9);
}

.audio-preview__download {
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.audio-preview__download:hover {
  text-decoration: underline;
}

.audio-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.audio-player__toggle {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(116, 234, 229, 0.22);
  background: linear-gradient(180deg, rgba(18, 31, 50, 0.96), rgba(9, 17, 31, 0.94));
  color: #f3fbff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.audio-player__timeline {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.audio-player__times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(224, 232, 246, 0.72);
}

.audio-player__range {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.audio-player__range::-webkit-slider-runnable-track {
  height: 6px;
}

.audio-player__range::-moz-range-track {
  height: 6px;
}

.audio-player__range::-webkit-slider-thumb {
  margin-top: -5px;
}

@media (max-width: 560px) {
  .audio-preview__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .audio-preview__links {
    justify-content: flex-start;
  }

  .audio-player {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .audio-player__toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}

.notice {
  margin-bottom: 16px;
  color: var(--muted);
  box-shadow: var(--shadow-card);
}

#notice {
  position: sticky;
  top: calc(72px + env(safe-area-inset-top, 0px));
  z-index: 8;
  padding: 11px 13px;
  border-radius: 16px;
  backdrop-filter: blur(18px);
  background:
    linear-gradient(135deg, rgba(12, 21, 35, 0.94), rgba(10, 18, 30, 0.9)),
    var(--scenario-surface);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 6px 18px var(--scenario-card-shadow);
  font-size: 14px;
  line-height: 1.45;
}

#notice.is-validation-alert {
  position: fixed;
  top: calc(78px + env(safe-area-inset-top, 0px));
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 120;
  width: auto;
  max-width: 680px;
  margin: 0 auto;
  color: #fff7f7;
  border-color: rgba(255, 153, 163, 0.72);
  background: linear-gradient(135deg, rgba(108, 24, 42, 0.98), rgba(31, 13, 29, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  animation: validation-alert-in 180ms ease-out both;
}

@keyframes validation-alert-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.notice.is-error {
  color: #ffd7d7;
  border-color: rgba(255, 138, 138, 0.24);
}

.notice.is-success {
  color: #d8ffee;
  border-color: rgba(124, 232, 180, 0.22);
}

.exact-lyrics-button.is-confirmed {
  color: #d8ffee;
  border-color: rgba(124, 232, 180, 0.5);
  background: rgba(34, 197, 94, 0.14);
}

.status-list,
.track-list {
  display: grid;
  gap: 12px;
}

.status-list p,
.track-item p {
  line-height: 1.55;
}

.track-item {
  text-align: left;
  display: grid;
  gap: 10px;
  min-height: 108px;
  padding: 16px;
}

.track-item__main {
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

.track-item__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}


.track-item__action {
  margin-top: 8px;
  width: 100%;
}

.track-item__main-layout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.track-item__copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.track-item__delete {
  width: auto;
  min-width: 150px;
  padding: 12px 16px;
  font-size: 14px;
  border-color: rgba(255, 138, 138, 0.24);
  color: #ffd9d9;
  background: linear-gradient(180deg, rgba(255, 138, 138, 0.12), rgba(255, 255, 255, 0.03));
}

.track-item__delete:hover:not(:disabled) {
  border-color: rgba(255, 138, 138, 0.34);
  color: #fff1f1;
}

.track-item__delete:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.track-item h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.track-item p {
  margin: 0;
}

.track-item__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mode-signal-dot) 86%, white 14%);
}

.track-item__status {
  color: var(--scenario-soft-text);
}

.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(4, 10, 18, 0) 0%, rgba(4, 10, 18, 0.86) 24%, rgba(4, 10, 18, 0.96) 100%);
  backdrop-filter: blur(18px);
  z-index: 6;
}

.footer-bar__inner {
  width: min(100%, 820px);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.footer-bar__meta {
  display: flex;
  justify-content: center;
}

.footer-bar__legal {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(211, 231, 255, 0.68);
  text-decoration: none;
  padding: 0 6px;
}

.footer-bar__legal:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-bar__secondary-action {
  width: 100%;
}

body.is-text-entry-active .footer-bar__meta,
body.is-text-entry-active .scenario-dock {
  display: none;
}

body.is-text-entry-active .footer-bar {
  padding-top: 8px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

body.is-text-entry-active .footer-bar__inner {
  gap: 8px;
}

body.is-keyboard-open .footer-bar {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.floating-action-shell {
  position: fixed;
  right: 18px;
  bottom: calc(132px + env(safe-area-inset-bottom));
  z-index: 7;
  pointer-events: none;
}

.footer-fab {
  pointer-events: auto;
  width: auto;
  min-width: 186px;
  padding: 14px 18px 14px 46px;
  border-radius: 999px;
  border: 1px solid rgba(57, 197, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(108, 214, 255, 0.96) 0%, rgba(91, 189, 255, 0.92) 42%, rgba(255, 191, 130, 0.96) 100%);
  color: #06111f;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow:
    0 24px 52px rgba(57, 197, 255, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.18);
  position: relative;
  backdrop-filter: blur(18px);
}

.footer-fab::before {
  content: "✦";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 17, 31, 0.18);
  color: #06111f;
  font-size: 13px;
  font-weight: 900;
}

.footer-fab.hidden {
  display: none !important;
}

.footer-fab:hover {
  transform: translateY(-2px) scale(1.01);
}

.footer-fab:active {
  transform: translateY(0) scale(0.99);
}

#track-form.is-scenario-switching .field-group,
#track-form.is-scenario-switching .field,
#track-form.is-scenario-switching .advanced-panel,
#track-form.is-scenario-switching .notice,
#track-form.is-scenario-switching .chips,
#track-form.is-scenario-switching .section__copy {
  animation: scenario-pop 0.24s ease;
}

@keyframes scenario-pop {
  0% {
    opacity: 0.82;
  }
  100% {
    opacity: 1;
  }
}

.tab-button:hover,
.primary-button:hover,
.secondary-button:hover,
.chip:hover,
.track-item:hover {
  transform: translateY(-1px);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--scenario-input-border) 80%, white 20%);
  box-shadow: 0 0 0 4px var(--scenario-focus-ring);
}

.generation-action {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.lyrics-editor {
  width: min(92vw, 860px);
  border: 1px solid rgba(39, 194, 255, 0.18);
  border-radius: 28px;
  padding: 0;
  background: rgba(8, 18, 31, 0.96);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.lyrics-editor::backdrop {
  background: rgba(4, 10, 18, 0.76);
  backdrop-filter: blur(8px);
}

.lyrics-editor__content {
  padding: 24px;
}

.lyrics-editor__textarea {
  min-height: 360px;
}

.advanced-panel {
  margin-top: 16px;
  padding: 16px 18px 18px;
  border-radius: 24px;
  border: 1px solid var(--scenario-card-border);
  background:
    var(--scenario-surface),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 12px 32px var(--scenario-card-shadow);
  transition: background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}

.advanced-panel > summary {
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}

.advanced-panel > summary::-webkit-details-marker {
  display: none;
}

.advanced-panel > summary::after {
  content: "▾";
  float: right;
  color: var(--muted);
}

.advanced-panel[open] > summary::after {
  content: "▴";
}

.advanced-panel__body {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.sound-panel {
  margin-top: 8px;
  border-radius: 24px;
  border: 1px solid var(--scenario-card-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    var(--scenario-surface);
  box-shadow: 0 10px 28px var(--scenario-card-shadow);
  overflow: hidden;
}

.sound-panel__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.sound-panel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.sound-panel__summary strong {
  display: block;
  font-size: 15px;
}

.sound-panel__summary p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.sound-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  flex: 1 1 240px;
}

.sound-panel__badge {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sound-panel__body {
  gap: 16px;
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sound-panel__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.sound-panel__toggle:hover {
  transform: translateY(-1px);
}

.sound-panel__toggle:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--scenario-input-border) 80%, white 20%);
  box-shadow: 0 0 0 4px var(--scenario-focus-ring);
}

.sound-panel.is-attention {
  border-color: rgba(255, 166, 77, 0.7);
  box-shadow: 0 12px 36px rgba(255, 166, 77, 0.16);
}

@media (max-width: 720px) {
  .sound-panel__summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sound-panel__controls {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .sound-panel__badges {
    justify-content: flex-start;
  }

  .sound-panel__badge {
    max-width: 100%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lyrics-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.lyrics-inline-editor {
  margin-top: 16px;
}

.lyrics-inline-editor__hint {
  margin: 0 0 12px;
  line-height: 1.5;
}

.lyrics-inline-editor__textarea {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 11, 20, 0.78);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

body.is-poem-flow #lyrics_or_idea {
  min-height: 220px;
  font-size: 16px;
  line-height: 1.7;
}

body.is-poem-flow .field-group:first-of-type {
  padding-bottom: 20px;
}

body.is-poem-flow .field-group:first-of-type .field {
  gap: 10px;
}

body.is-poem-flow .field-group:first-of-type .field label {
  font-size: 15px;
}

.offer-page .page {
  padding-bottom: 84px;
}

.offer-page .offer-hero {
  margin-bottom: 18px;
}

.offer-page .offer-intro {
  margin-top: 18px;
}

.offer-page .offer-document {
  padding: 22px;
}

.offer-page .offer-text {
  display: grid;
  gap: 12px;
}

.offer-page .offer-text h2 {
  margin: 22px 0 2px;
  font-size: 22px;
}

.offer-page .offer-text p {
  margin: 0;
  line-height: 1.68;
  color: var(--scenario-soft-text);
}

.offer-page .offer-text table {
  width: 100%;
  margin: 18px 0 22px;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid rgba(160, 220, 255, 0.16);
  border-radius: 18px;
  color: rgba(226, 240, 255, 0.9);
}

.offer-page .offer-text th,
.offer-page .offer-text td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(160, 220, 255, 0.12);
  text-align: left;
  vertical-align: top;
}

.offer-page .offer-text th {
  background: rgba(160, 220, 255, 0.08);
  color: var(--text);
  font-weight: 800;
}

.offer-page .offer-text tr:last-child td {
  border-bottom: 0;
}

.offer-page .offer-text strong {
  color: var(--text);
}

.offer-page .offer-back {
  width: fit-content;
}

.tariffs-language {
  display: inline-flex;
  gap: 6px;
  margin-top: 14px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(160, 220, 255, 0.18);
  background: rgba(3, 12, 22, 0.52);
}

.tariffs-language button {
  min-height: 34px;
  min-width: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(232, 244, 255, 0.72);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.tariffs-language button.is-active {
  background: linear-gradient(135deg, rgba(150, 91, 255, 0.72), rgba(94, 197, 255, 0.36));
  color: #fff;
  box-shadow: 0 10px 24px rgba(98, 72, 255, 0.22);
}

@media (max-width: 720px) {
  .offer-page .page {
    padding-inline: 12px;
  }

  .offer-page .offer-hero {
    padding: 18px;
  }

  .offer-page .offer-document {
    padding: 16px;
    border-radius: 22px;
  }

  .offer-page .offer-text h2 {
    font-size: 19px;
    line-height: 1.25;
  }

  .offer-page .offer-text table,
  .offer-page .offer-text thead,
  .offer-page .offer-text tbody,
  .offer-page .offer-text tr,
  .offer-page .offer-text th,
  .offer-page .offer-text td {
    display: block;
    width: 100%;
  }

  .offer-page .offer-text table {
    margin: 14px 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .offer-page .offer-text thead {
    display: none;
  }

  .offer-page .offer-text tr {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(160, 220, 255, 0.16);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
      rgba(7, 18, 30, 0.68);
  }

  .offer-page .offer-text td {
    display: grid;
    grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1fr);
    gap: 12px;
    padding: 7px 0;
    border: 0;
  }

  .offer-page .offer-text td::before {
    content: attr(data-label);
    color: rgba(172, 214, 245, 0.72);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .tariffs-language {
    width: 100%;
    justify-content: space-between;
  }

  .section__header {
    flex-direction: column;
  }

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

  .top-tabs__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .scenario-dock {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .scenario-dock__button {
    min-height: 68px;
    padding: 10px 6px;
  }

  .scenario-dock__label {
    font-size: 10px;
  }

  .floating-action-shell {
    right: 12px;
    bottom: calc(124px + env(safe-area-inset-bottom));
  }

  .footer-fab {
    min-width: 160px;
    padding: 13px 16px 13px 42px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 16px 12px 220px;
  }

  .hero {
    padding: 18px 18px 20px;
  }

  .hero__mark {
    top: 36px;
    right: -36px;
    width: 250px;
    height: 160px;
    opacity: 0.11;
    background:
      radial-gradient(circle at 46% 34%, rgba(57, 197, 255, 0.13), transparent 32%),
      url("/miniapp/static/logo-no-bg.png") center top / 82% auto no-repeat;
  }

  .hero__copy {
    max-width: 100%;
  }

  .hero__title {
    max-width: 9.6ch;
  }

  .hero h1 {
    font-size: 29px;
  }

  .hero__subtitle {
    max-width: 100%;
    font-size: 14.5px;
  }

  .hero__brand-secondary {
    max-width: 100%;
  }

  .section {
    padding: 18px;
  }

  .top-tabs {
    top: calc(8px + env(safe-area-inset-top));
    margin-bottom: 12px;
    padding: 7px;
    border-radius: 18px;
  }

  .top-tabs__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

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

  .top-tabs .tab-button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 15px;
  }

  .auth-gate__actions {
    grid-template-columns: 1fr;
  }

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

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

  .copy-card__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lyrics-editor__content {
    padding: 18px;
  }

  body.is-text-entry-active .footer-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lyrics-editor__textarea {
    min-height: 280px;
  }

  .editable-lyrics-card__textarea {
    min-height: 280px;
  }
}

/* PulseVeter UI Icons v1: one asset system for Web App and Mini App. */
[data-icon] {
  --pv-icon: none;
}

[data-icon="create"] { --pv-icon: url("/miniapp/static/assets/icons/create-track.svg"); }
[data-icon="tracks"] { --pv-icon: url("/miniapp/static/assets/icons/my-tracks.svg"); }
[data-icon="impulses"] { --pv-icon: url("/miniapp/static/assets/icons/impulses.svg"); }
[data-icon="drafts"] { --pv-icon: url("/miniapp/static/assets/icons/drafts.svg"); }
[data-icon="help"] { --pv-icon: url("/miniapp/static/assets/icons/help.svg"); }
[data-icon="profile"] { --pv-icon: url("/miniapp/static/assets/icons/profile.svg"); }
[data-icon="song-by-idea"] { --pv-icon: url("/miniapp/static/assets/icons/song-by-idea.svg"); }
[data-icon="lyrics"] { --pv-icon: url("/miniapp/static/assets/icons/lyrics.svg"); }
[data-icon="greeting"] { --pv-icon: url("/miniapp/static/assets/icons/greeting.svg"); }
[data-icon="instrumental"] { --pv-icon: url("/miniapp/static/assets/icons/instrumental.svg"); }
[data-icon="library"] { --pv-icon: url("/miniapp/static/assets/icons/library.svg"); }
[data-icon="home"] { --pv-icon: url("/miniapp/static/assets/icons/create-track.svg"); }

[data-icon="create"] { background-image: url("/miniapp/static/assets/icons/create-track.svg") !important; }
[data-icon="tracks"] { background-image: url("/miniapp/static/assets/icons/my-tracks.svg") !important; }
[data-icon="impulses"] { background-image: url("/miniapp/static/assets/icons/impulses.svg") !important; }
[data-icon="drafts"] { background-image: url("/miniapp/static/assets/icons/drafts.svg") !important; }
[data-icon="help"] { background-image: url("/miniapp/static/assets/icons/help.svg") !important; }
[data-icon="profile"] { background-image: url("/miniapp/static/assets/icons/profile.svg") !important; }
[data-icon="song-by-idea"] { background-image: url("/miniapp/static/assets/icons/song-by-idea.svg") !important; }
[data-icon="lyrics"] { background-image: url("/miniapp/static/assets/icons/lyrics.svg") !important; }
[data-icon="greeting"] { background-image: url("/miniapp/static/assets/icons/greeting.svg") !important; }
[data-icon="instrumental"] { background-image: url("/miniapp/static/assets/icons/instrumental.svg") !important; }
[data-icon="library"] { background-image: url("/miniapp/static/assets/icons/library.svg") !important; }
[data-icon="home"] { background-image: url("/miniapp/static/assets/icons/create-track.svg") !important; }

.studio-side-nav button > span[data-icon],
.studio-bottom-nav button > span[data-icon],
.studio-scenario-card__icon[data-icon],
.studio-impulse-badge__icon[data-icon] {
  display: inline-block;
  flex: 0 0 auto;
  border: 0;
  background-image: var(--pv-icon) !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.studio-side-nav button > span[data-icon]::before,
.studio-bottom-nav button > span[data-icon]::before,
.studio-scenario-card__icon[data-icon]::before,
.studio-impulse-badge__icon[data-icon]::before {
  display: none !important;
  content: none !important;
}

.studio-side-nav button > span[data-icon] {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.studio-side-nav button[data-studio-nav="billing"]:not(:has([data-icon]))::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: url("/miniapp/static/assets/icons/impulses.svg") center / contain no-repeat;
}

.studio-bottom-nav button > span[data-icon] {
  width: 24px;
  height: 24px;
  margin: 0 auto 3px;
  border-radius: 7px;
}

.studio-scenario-card__icon[data-icon] {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.studio-impulse-badge__icon[data-icon] {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background-image: var(--pv-icon) !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

@media (max-width: 919px) {
  .page--web .studio-impulse-badge {
    right: 12px;
  }
}

/* Studio wizard: step-based creation flow for Mini App and Web App. */
.studio-wizard-enabled #create-view .section,
.studio-wizard-enabled #section-create {
  overflow: visible;
}

.studio-wizard-enabled .mode-tabs,
.studio-wizard-enabled .mode-story,
.studio-wizard-enabled .template-strip {
  display: none;
}

.studio-stepper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 16px;
  padding: 8px;
  border: 1px solid rgba(120, 220, 255, 0.12);
  border-radius: 24px;
  background: rgba(3, 12, 22, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.studio-stepper__item {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(221, 238, 255, 0.66);
  font: inherit;
  cursor: pointer;
}

.studio-stepper__item.is-active {
  color: #fff;
  background:
    radial-gradient(circle at 20% 10%, rgba(123, 231, 255, 0.24), transparent 58%),
    linear-gradient(135deg, rgba(57, 197, 255, 0.18), rgba(255, 187, 122, 0.08));
  box-shadow: 0 12px 28px rgba(57, 197, 255, 0.12);
}

.studio-stepper__item.is-done {
  color: rgba(169, 240, 219, 0.92);
}

.studio-stepper__index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
  font-weight: 900;
}

.studio-stepper__text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.studio-voice-step {
  gap: 18px;
}

.studio-voice-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 6px;
  border: 1px solid rgba(120, 220, 255, 0.14);
  border-radius: 22px;
  background: rgba(2, 12, 22, 0.42);
}

.studio-voice-mode .chip {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 900;
}

.studio-voice-mode .chip.is-active {
  color: #081118;
  border-color: rgba(151, 232, 211, 0.9);
  background: linear-gradient(135deg, #ffe08a, #9bead5);
  box-shadow: 0 16px 34px rgba(78, 210, 255, 0.16);
}

.custom-voice-panel button:disabled,
.custom-voice-panel select:disabled {
  cursor: wait;
  opacity: 0.58;
}

.track-detail-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(10px, 1.4vw, 18px);
  overflow: hidden;
}

.track-card > .track-detail-panel {
  margin-top: 16px;
}

.track-detail-panel > .inline-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
}

.track-detail-panel > .inline-grid .secondary-button {
  white-space: nowrap;
}

.track-detail__header,
.track-detail__audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.track-detail__header h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.track-detail__lyrics,
.track-detail__audio {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.track-detail-panel .detail-grid,
.track-detail-panel input,
.track-detail-panel textarea {
  min-width: 0;
  box-sizing: border-box;
}

.track-detail-panel .detail-grid {
  overflow-wrap: anywhere;
}

.track-detail__lyrics .lyrics-editor {
  min-height: 340px;
  height: min(56vh, 620px);
  max-height: min(62vh, 620px);
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.55;
  box-sizing: border-box;
}

.track-detail__audio-row audio {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 720px) {
  .track-detail__header,
  .track-detail__audio-row,
  .track-detail-panel > .inline-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

.studio-voice-suno,
.studio-voice-custom {
  display: grid;
  gap: 12px;
}

.studio-start-panel {
  display: grid;
  gap: 18px;
  margin: 0 0 16px;
}

.studio-start-panel__head {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid rgba(120, 220, 255, 0.14);
  background:
    radial-gradient(circle at 10% 0%, rgba(78, 210, 255, 0.16), transparent 44%),
    radial-gradient(circle at 92% 16%, rgba(255, 191, 128, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.025);
}

.studio-start-panel__head h2,
.studio-review-card h2 {
  margin: 0;
  font-size: clamp(25px, 4.5vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.studio-start-panel__head p,
.studio-review-card p {
  margin: 0;
  color: var(--scenario-soft-text);
  line-height: 1.62;
}

.studio-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.studio-scenario-card {
  min-height: 172px;
  padding: 20px;
  border: 1px solid rgba(121, 221, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 8%, rgba(92, 216, 255, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
  color: var(--text);
  text-align: left;
  display: grid;
  align-content: start;
  gap: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.studio-scenario-card.is-active,
.studio-scenario-card:hover {
  border-color: rgba(95, 220, 255, 0.34);
  background:
    radial-gradient(circle at 18% 6%, rgba(83, 215, 255, 0.22), transparent 50%),
    linear-gradient(135deg, rgba(57, 197, 255, 0.12), rgba(255, 187, 122, 0.04));
  transform: translateY(-2px);
}

.studio-scenario-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: #9ee8ff;
  font-size: 22px;
}

.studio-scenario-card__title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.studio-scenario-card__copy {
  color: rgba(225, 239, 255, 0.74);
  font-size: 14px;
  line-height: 1.48;
}

.studio-scenario-card--library {
  grid-column: 1 / -1;
  min-height: 118px;
}

.studio-review-panel,
.studio-result-panel {
  display: none;
  margin: 0 0 16px;
}

.studio-review-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(120, 220, 255, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(65, 205, 255, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.018));
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.22);
}

.studio-utility-panels {
  display: block;
}

.studio-utility-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.studio-utility-panel.hidden {
  display: none;
}

.studio-utility-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.studio-utility-panel h2,
.studio-utility-panel h3 {
  margin: 0;
}

.studio-utility-panel__lead,
.studio-profile-hint {
  margin: 0;
  color: var(--scenario-soft-text);
  line-height: 1.55;
}

.studio-help-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
}

.studio-help-steps li {
  padding-left: 4px;
  line-height: 1.45;
}

.studio-help-note {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(154, 226, 255, 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(64, 173, 222, 0.12), rgba(152, 255, 212, 0.08));
}

.studio-help-note h3,
.studio-help-note p {
  margin: 0;
}

.studio-help-note p {
  color: var(--scenario-soft-text);
  line-height: 1.55;
}

.studio-draft-summary,
.studio-empty-state,
.studio-draft-card {
  display: grid;
  gap: 12px;
}

.studio-empty-state,
.studio-draft-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(120, 220, 255, 0.12);
  background: rgba(255, 255, 255, 0.026);
}

.studio-utility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.studio-profile-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.studio-profile-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.studio-profile-list dt {
  color: #9bdfff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-profile-list dd {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.studio-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(154, 226, 255, 0.26);
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(64, 173, 222, 0.18), rgba(152, 255, 212, 0.1));
}

.studio-max-billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.studio-max-tariff {
  display: grid;
  gap: 8px;
  min-height: 180px;
  padding: 16px;
  border: 1px solid rgba(102, 211, 255, 0.26);
  border-radius: 16px;
  background: rgba(5, 16, 30, 0.72);
}

.studio-max-tariff.is-recommended {
  border-color: rgba(241, 200, 98, 0.62);
}

.studio-max-tariff > span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff0c5;
  background: rgba(173, 123, 30, 0.28);
  font-size: 12px;
  font-weight: 700;
}

.studio-max-tariff b { color: #d4e7f8; font-size: 14px; }
.studio-max-tariff small { color: #8fa6bd; }
.studio-max-tariff button { margin-top: auto; }

/* MAX tariff cards mirror the compact Web App purchase hierarchy. */
#studio-max-billing-panel .studio-max-billing-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 18px;
}

#studio-max-billing-panel .studio-max-tariff {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 218px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 235, 217, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(73, 215, 255, 0.11), transparent 38%),
    rgba(7, 18, 30, 0.82);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

#studio-max-billing-panel .studio-max-tariff.is-recommended {
  border-color: rgba(247, 211, 124, 0.52);
  background:
    radial-gradient(circle at 100% 0%, rgba(247, 211, 124, 0.16), transparent 40%),
    rgba(7, 18, 30, 0.86);
}

#studio-max-billing-panel .studio-max-tariff::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: url("/miniapp/static/assets/icons/impulses.svg") center / contain no-repeat;
}

#studio-max-billing-panel .studio-max-tariff > span {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: #fff0c5;
  background: rgba(173, 123, 30, 0.3);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#studio-max-billing-panel .studio-max-tariff > strong {
  color: var(--text);
  font-size: 21px;
  line-height: 1.15;
}

#studio-max-billing-panel .studio-max-tariff > b {
  display: block;
  color: #dceefa;
  font-size: 15px;
  line-height: 1.45;
}

#studio-max-billing-panel .studio-max-tariff > small {
  display: block;
  color: #9fcdec;
  font-size: 14px;
  line-height: 1.4;
}

#studio-max-billing-panel .studio-max-tariff > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid rgba(158, 240, 255, 0.54);
  border-radius: 14px;
  color: #06111d;
  background: linear-gradient(135deg, #49d7ff, #79e8d2);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(73, 215, 255, 0.18);
}

.studio-bottom-nav button > span[data-icon="impulses"] {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 3px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: url("/miniapp/static/assets/icons/impulses.svg") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.studio-bottom-nav button > span[data-icon="impulses"]::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 640px) {
  #studio-max-billing-panel {
    padding-bottom: 104px;
  }

  #studio-max-billing-panel .studio-max-billing-plans {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #studio-max-billing-panel .studio-max-tariff {
    min-height: 0;
    padding: 16px;
  }
}

.studio-max-link {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(92, 212, 255, 0.24);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(33, 113, 165, 0.16), rgba(71, 46, 116, 0.14));
}

.studio-max-link.hidden {
  display: none;
}

.studio-max-link h3,
.studio-max-link p {
  margin: 0;
}

.studio-max-link > p:not(.studio-profile-hint) {
  color: var(--scenario-soft-text);
  line-height: 1.5;
}

.studio-max-link label,
.studio-max-link [data-max-link-code-wrap] {
  display: grid;
  gap: 8px;
}

.studio-max-link input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(154, 226, 255, 0.2);
  border-radius: 14px;
  background: rgba(4, 10, 20, 0.7);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.studio-review-list {
  display: grid;
  gap: 10px;
  margin: 2px 0 0;
}

.studio-review-list__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.studio-review-list dt {
  color: #9bdfff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-review-list dd {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.studio-wizard-actions {
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid rgba(120, 220, 255, 0.14);
  background: rgba(5, 12, 22, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
}

.studio-wizard-actions .primary-button,
.studio-wizard-actions .secondary-button,
.studio-wizard-actions .ghost-button {
  min-height: 50px;
}

.studio-wizard-actions__primary {
  grid-column: 4;
}

.studio-wizard-actions__ghost[hidden],
.studio-wizard-actions__secondary[hidden],
.studio-wizard-actions__clear[hidden] {
  display: none;
}

.studio-wizard-actions__clear {
  border-color: rgba(255, 214, 121, 0.32);
  color: #ffe5a3;
}

.studio-wizard-enabled .footer-bar #clear-track-form,
.studio-wizard-enabled .footer-bar #footer-clear-track-form {
  display: none;
}

body[data-studio-step="start"] #track-form,
body[data-studio-step="start"] .studio-review-panel,
body[data-studio-step="start"] .studio-result-panel,
body[data-studio-step="story"] .studio-start-panel,
body[data-studio-step="sound"] .studio-start-panel,
body[data-studio-step="voice"] .studio-start-panel,
body[data-studio-step="advanced"] .studio-start-panel,
body[data-studio-step="review"] .studio-start-panel,
body[data-studio-step="result"] .studio-start-panel {
  display: none;
}

body[data-studio-step="story"] #track-form,
body[data-studio-step="sound"] #track-form,
body[data-studio-step="voice"] #track-form,
body[data-studio-step="advanced"] #track-form {
  display: grid;
}

body[data-studio-step="story"] #track-form > .field-group,
body[data-studio-step="sound"] #track-form > .field-group,
body[data-studio-step="voice"] #track-form > .field-group,
body[data-studio-step="advanced"] #track-form > .field-group,
body[data-studio-step="review"] #track-form,
body[data-studio-step="result"] #track-form {
  display: none;
}

body[data-studio-step="story"] #track-form > .studio-group-start,
body[data-studio-step="story"] #track-form > .studio-group-story,
body[data-studio-step="sound"] #track-form > .studio-group-start,
body[data-studio-step="sound"] #track-form > .studio-group-sound,
body[data-studio-step="voice"] #track-form > .studio-voice-step,
body[data-studio-step="advanced"] #track-form > .studio-group-story {
  display: block;
}

body[data-studio-step="story"] #track-form > .studio-group-start .field:has(#genre),
body[data-studio-step="story"] #track-form > .studio-group-start .field:has(#custom_genre),
body[data-studio-step="sound"] #track-form > .studio-group-start .field:has(#title),
body[data-studio-step="sound"] #track-form > .studio-group-start .field:has(#topic),
body[data-studio-step="sound"] #track-form > .studio-group-start .field:has(#custom_topic),
body[data-studio-step="sound"] #track-form > .studio-group-start .field:has(#lyrics_or_idea) {
  display: none;
}

body.studio-wizard-enabled #track-form .form-actions,
body.studio-wizard-enabled #track-form #submit-track,
body.studio-wizard-enabled #track-form #generate-track {
  display: none;
}

body.studio-wizard-enabled:not([data-studio-step="advanced"]) .advanced-panel {
  display: none !important;
}

body[data-studio-step="advanced"] #track-form > .studio-group-story > *:not(.field-group__header):not(.advanced-panel) {
  display: none;
}

body[data-studio-step="advanced"] .advanced-panel {
  display: block;
}

body[data-studio-step="review"] .studio-review-panel,
body[data-studio-step="result"] .studio-result-panel {
  display: block;
}

body[data-studio-step="result"] #status-box:not(.hidden),
body[data-studio-step="result"] #result-panel:not(.hidden) {
  display: block;
}

.studio-wizard-enabled .footer-bar .scenario-dock {
  display: none;
}

.studio-wizard-enabled .footer-bar .footer-bar__meta,
.studio-wizard-enabled .footer-bar #submit-track,
.studio-wizard-enabled .footer-bar #footer-generate {
  display: none;
}

.studio-wizard-enabled .page--web .footer-bar {
  display: none;
}

.studio-side-nav {
  display: none;
  gap: 8px;
  margin-top: 24px;
  padding: 8px;
  border-radius: 24px;
  border: 1px solid rgba(164, 228, 255, 0.14);
  background: rgba(3, 12, 22, 0.36);
}

.studio-mobile-nav-wrap {
  display: none;
}

.studio-mobile-menu-toggle {
  display: none;
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border: 1px solid rgba(164, 228, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.18), rgba(255, 187, 122, 0.08)),
    rgba(3, 12, 22, 0.56);
  color: #eef8ff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.studio-mobile-menu-toggle__label,
.studio-mobile-menu-toggle__current,
.studio-mobile-menu-toggle__chevron {
  pointer-events: none;
}

.studio-mobile-menu-toggle__label {
  color: rgba(190, 218, 237, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-mobile-menu-toggle__current {
  color: #fffaf0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}

.studio-mobile-menu-toggle__chevron {
  color: rgba(224, 244, 255, 0.72);
  font-size: 19px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.studio-mobile-menu-toggle.is-active .studio-mobile-menu-toggle__chevron {
  transform: rotate(180deg);
}

.studio-mobile-menu-toggle.is-active {
  border-color: rgba(160, 255, 224, 0.38);
  box-shadow: 0 12px 28px rgba(57, 197, 255, 0.12);
}

.studio-impulse-badge {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 54px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(247, 211, 124, 0.36);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 18%, rgba(160, 255, 224, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(14, 28, 42, 0.9), rgba(38, 35, 49, 0.84));
  color: #fff8e8;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.studio-impulse-badge.is-hidden {
  display: none;
}

.studio-impulse-badge__icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7df91, #a6f5df);
  color: #07111c;
  font-size: 11px;
  line-height: 1;
}

.studio-impulse-badge__value {
  min-width: 12px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.studio-side-nav button {
  min-height: 46px;
  padding: 12px 14px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: rgba(232, 244, 255, 0.82);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.studio-side-nav button span {
  display: none;
}

.studio-side-nav button strong {
  font: inherit;
  font-weight: inherit;
}

.studio-side-nav button:hover {
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.16), rgba(255, 187, 122, 0.06));
  color: #fff;
}

.studio-utility-panel__return {
  white-space: nowrap;
}

.studio-utility-panel .studio-utility-panel__return,
.billing-panel .studio-utility-panel__return {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 0.92rem;
}

.studio-help-dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border: 1px solid rgba(164, 228, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #b9f2ff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.studio-help-dot:hover,
.studio-help-dot:focus-visible {
  border-color: rgba(247, 211, 124, 0.42);
  color: #fff7df;
  outline: none;
}

.studio-hint-popover {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 8, 16, 0.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.studio-hint-popover.is-open {
  display: flex;
}

.studio-hint-popover__panel {
  position: relative;
  width: min(430px, 100%);
  padding: 22px;
  border: 1px solid rgba(164, 228, 255, 0.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(116, 234, 229, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(11, 22, 36, 0.98), rgba(17, 17, 29, 0.96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.studio-hint-popover__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.studio-hint-popover__text {
  margin: 10px 0 0;
  color: rgba(232, 242, 255, 0.86);
  font-size: 17px;
  line-height: 1.55;
}

.studio-bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 22px;
  border: 1px solid rgba(164, 228, 255, 0.14);
  background: rgba(3, 12, 22, 0.72);
}

.studio-bottom-nav--max {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.studio-bottom-nav button {
  min-height: 54px;
  padding: 7px 4px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(229, 242, 255, 0.72);
  font: inherit;
  display: grid;
  place-items: center;
  gap: 3px;
  cursor: pointer;
}

.studio-bottom-nav button:hover,
.studio-bottom-nav button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  outline: none;
}

.studio-bottom-nav span {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  border: 1px solid rgba(151, 237, 255, 0.14);
  background: rgba(151, 237, 255, 0.06);
  color: transparent;
  font-size: 0;
  line-height: 1;
}

.studio-bottom-nav span::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: #92e4ff;
  box-shadow: 0 0 14px rgba(25, 216, 255, 0.48);
}

.studio-bottom-nav span[data-icon="home"]::before {
  background: transparent;
  border: 2px solid #92e4ff;
  border-top: 0;
  clip-path: polygon(50% 0, 100% 42%, 84% 42%, 84% 100%, 16% 100%, 16% 42%, 0 42%);
}

.studio-bottom-nav span[data-icon="create"]::before {
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}

.studio-bottom-nav span[data-icon="tracks"]::before {
  width: 14px;
  height: 14px;
  clip-path: polygon(30% 0, 82% 0, 82% 62%, 70% 62%, 70% 16%, 42% 16%, 42% 78%, 30% 78%);
}

.studio-bottom-nav span[data-icon="profile"]::before {
  border-radius: 50%;
  background: transparent;
  border: 2px solid #92e4ff;
}

.studio-bottom-nav strong {
  font-size: 10px;
  line-height: 1.1;
}

@media (min-width: 920px) {
  .studio-mobile-menu-toggle {
    display: none;
  }

  .studio-side-nav {
    display: grid;
  }

  .page--web {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    width: min(100%, 1360px);
    align-items: start;
  }

  .page--web .hero {
    position: sticky;
    top: 18px;
    min-height: calc(100vh - 36px);
    margin-bottom: 0;
  }

  .page--web #notice,
  .page--web #auth-panel,
  .page--web #telegram-link-panel,
  .page--web #create-view,
  .page--web #tracks-view,
  .page--web #status-box {
    grid-column: 2;
  }

  .page--web .top-tabs {
    position: relative;
    top: auto;
    margin-top: 24px;
  }

  .page--web .top-tabs__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 919px) {
  .page--web {
    padding-top: 10px;
  }

  .page--web .studio-mobile-nav-wrap {
    display: grid;
    grid-column: 1 / -1;
    position: sticky;
    top: 8px;
    z-index: 92;
    margin: 0 0 10px;
  }

  .page--web .studio-mobile-menu-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 10px;
    margin: 0;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 20px;
    text-align: left;
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav {
    display: none;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 20px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(3, 12, 22, 0.9);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid transparent;
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav button span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.07);
    color: #9fefff;
    font-size: 13px;
    line-height: 1;
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav button.is-active {
    border-color: rgba(247, 211, 124, 0.26);
  }

  .page--web .studio-mobile-nav-wrap .studio-side-nav.is-open {
    display: grid;
  }

  .page--web .hero > .studio-side-nav,
  .page--web .hero__copy > .studio-side-nav,
  .page--web .hero .studio-mobile-menu-toggle {
    display: none;
  }

  .studio-utility-panel__head,
  .billing-panel__head {
    gap: 14px;
  }

  .studio-utility-panel__return {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .studio-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-scenario-grid {
    grid-template-columns: 1fr;
  }

  .studio-scenario-card {
    min-height: 134px;
    padding: 18px;
  }

  .studio-review-list__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .studio-utility-panel__head,
  .studio-profile-list > div {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .studio-wizard-actions {
    position: static;
    grid-template-columns: 1fr;
    bottom: auto;
  }

  .studio-wizard-actions__primary {
    grid-column: 1;
  }

  .studio-stepper__text {
    font-size: 10px;
  }
}

/* Premium studio skin: visual-only layer for Mini App and Web App. */
:root {
  --bg-top: #05050a;
  --bg-bottom: #11101a;
  --panel: rgba(13, 13, 22, 0.86);
  --panel-strong: rgba(18, 18, 30, 0.97);
  --panel-inner: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.105);
  --border-strong: rgba(216, 181, 109, 0.34);
  --text: rgba(255, 250, 241, 0.96);
  --muted: rgba(225, 219, 242, 0.66);
  --accent: #8b5cf6;
  --accent-soft: #b772ff;
  --accent-3: #fff7df;
  --accent-pale: rgba(139, 92, 246, 0.18);
  --accent-warm: #d8b56d;
  --accent-warm-pale: rgba(216, 181, 109, 0.13);
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(216, 181, 109, 0.36);
  --hero-tint-a: rgba(139, 92, 246, 0.19);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.22);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.13));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(216, 181, 109, 0.13));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.19), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(255, 255, 255, 0.12);
  --scenario-card-shadow: rgba(139, 92, 246, 0.15);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016));
  --scenario-input-border: rgba(255, 255, 255, 0.14);
  --scenario-focus-ring: rgba(139, 92, 246, 0.22);
  --scenario-soft-text: rgba(235, 230, 255, 0.82);
  --danger: #ff8f9a;
  --success: #86efac;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-xl: 0 34px 110px rgba(0, 0, 0, 0.58);
  --shadow-card: 0 22px 64px rgba(0, 0, 0, 0.36);
}

body {
  background:
    radial-gradient(ellipse at 18% -10%, rgba(139, 92, 246, 0.22), transparent 42%),
    radial-gradient(ellipse at 86% 8%, rgba(216, 181, 109, 0.13), transparent 36%),
    radial-gradient(ellipse at 48% 104%, rgba(75, 64, 148, 0.17), transparent 44%),
    linear-gradient(180deg, #05050a 0%, #0a0a12 42%, #11101a 100%);
}

body[data-scenario="GPT_LYRICS"],
body[data-scenario="READY_POEM"],
body[data-scenario="SUNO_LYRICS"],
body[data-scenario="INSTRUMENTAL"] {
  --hero-tint-a: rgba(139, 92, 246, 0.22);
  --hero-tint-b: rgba(216, 181, 109, 0.11);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(216, 181, 109, 0.14));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-focus-ring: rgba(139, 92, 246, 0.22);
}

.ambient {
  border-radius: 40%;
  filter: blur(96px);
  opacity: 0.3;
}

.ambient--left {
  background: rgba(139, 92, 246, 0.26);
}

.ambient--right {
  background: rgba(216, 181, 109, 0.16);
}

.card,
.auth-gate,
.section,
.field-group,
.result-summary,
.result-panel,
.track-card,
.copy-card,
.status-summary,
.studio-utility-panel,
.studio-review-card,
.studio-result-panel,
.studio-start-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(12, 12, 20, 0.86);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: var(--shadow-card);
}

.card--inner,
.info-block,
.mode-story,
.template-strip,
.sound-panel,
.advanced-panel,
.studio-stepper,
.studio-wizard-actions,
.studio-scenario-card,
.studio-draft-card,
.studio-empty-state,
.track-detail-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(9, 10, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero {
  min-height: 0;
  border-color: rgba(216, 181, 109, 0.2);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(216, 181, 109, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(12, 12, 20, 0.9);
}

.hero::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 40%),
    radial-gradient(ellipse at 78% 16%, rgba(216, 181, 109, 0.12), transparent 30%);
}

.hero__mark {
  opacity: 0.09;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.28));
}

.hero__logo {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(216, 181, 109, 0.32);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.hero__site-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 16px;
  color: #edf7ff;
  text-decoration: none;
}

.hero__site-link .hero__logo {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.hero__site-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(160, 220, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.17), rgba(216, 181, 109, 0.1)),
    rgba(7, 14, 24, 0.48);
  color: rgba(239, 249, 255, 0.92);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero__site-link:hover .hero__site-label,
.hero__site-link:focus-visible .hero__site-label {
  border-color: rgba(164, 228, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.24), rgba(216, 181, 109, 0.16)),
    rgba(7, 14, 24, 0.58);
}

.hero__title {
  color: var(--text);
  letter-spacing: 0;
  text-shadow: 0 18px 58px rgba(139, 92, 246, 0.22);
}

.hero__brand-secondary,
.section__copy,
.mode-story__copy,
.field-group__header p,
.auth-gate__lead,
.auth-gate__note,
.sound-panel__summary p,
.studio-scenario-card__copy,
.studio-utility-panel__lead,
.studio-profile-hint {
  color: var(--muted);
}

.eyebrow {
  color: #cdb8ff;
}

.hero__mode-chip,
.section__pill,
.mode-story__chip,
.sound-panel__badge,
.track-status-badge,
.status-badge,
.studio-stepper__index {
  color: rgba(255, 248, 231, 0.94);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(216, 181, 109, 0.11));
  border-color: rgba(216, 181, 109, 0.28);
}

.top-tabs,
.mode-tabs,
.studio-voice-mode {
  background: rgba(7, 8, 14, 0.72);
  border-color: rgba(255, 255, 255, 0.09);
}

.tab-button.is-active,
.mode-tab.is-active,
.chip.is-active,
.template-chip.is-active,
.studio-scenario-card.is-active,
.studio-stepper__item.is-active,
.studio-voice-mode .chip.is-active {
  color: #fff9ec;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(216, 181, 109, 0.16));
  border-color: rgba(216, 181, 109, 0.38);
  box-shadow: 0 18px 45px rgba(139, 92, 246, 0.18);
}

.chip,
.template-chip,
.tab-button,
.mode-tab,
.ghost-button,
.secondary-button,
.sound-panel__toggle {
  color: rgba(255, 250, 241, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.12);
}

.chip:hover,
.template-chip:hover,
.tab-button:hover,
.mode-tab:hover,
.secondary-button:hover,
.ghost-button:hover,
.studio-scenario-card:hover {
  border-color: rgba(216, 181, 109, 0.34);
  box-shadow: 0 16px 42px rgba(139, 92, 246, 0.16);
}

.primary-button,
.studio-wizard-actions__primary {
  color: #fffaf0;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d8b56d 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(124, 58, 237, 0.28);
}

.primary-button:hover,
.studio-wizard-actions__primary:hover {
  filter: saturate(1.06) brightness(1.04);
  box-shadow: 0 22px 60px rgba(124, 58, 237, 0.34);
}

input,
select,
textarea,
.file-input {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(7, 8, 14, 0.88);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

input:focus,
select:focus,
textarea:focus,
.file-input:focus-within {
  border-color: rgba(216, 181, 109, 0.46);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.notice,
#custom_voice_status,
#custom_voice_phrase {
  color: rgba(255, 250, 241, 0.94);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(216, 181, 109, 0.08)),
    rgba(8, 9, 16, 0.9);
  border-color: rgba(216, 181, 109, 0.22);
}

.notice.is-success,
#custom_voice_status.is-success {
  border-color: rgba(134, 239, 172, 0.38);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(216, 181, 109, 0.08)),
    rgba(8, 9, 16, 0.92);
}

.notice.is-error,
.notice--error,
#custom_voice_status.notice--error {
  border-color: rgba(255, 143, 154, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 143, 154, 0.16), rgba(139, 92, 246, 0.06)),
    rgba(8, 9, 16, 0.92);
}

.notice.is-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: rgba(255, 214, 121, 0.78);
  background: linear-gradient(135deg, #ffe18a 0%, #a8f0dd 100%);
  color: #111827;
  box-shadow:
    0 18px 42px rgba(255, 194, 90, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  font-size: 16px;
  font-weight: 900;
}

.notice.is-loading::before,
.studio-spinner {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid rgba(255, 250, 241, 0.28);
  border-top-color: rgba(216, 181, 109, 0.98);
  animation: studio-spin 0.9s linear infinite;
}

.notice.is-loading::before {
  border-color: rgba(17, 24, 39, 0.18);
  border-top-color: #111827;
}

.studio-spinner {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
}

#notice.notice.is-loading,
.notice.info-block.is-loading {
  border-color: rgba(255, 214, 121, 0.88) !important;
  background: linear-gradient(135deg, #ffe18a 0%, #a8f0dd 100%) !important;
  color: #111827 !important;
  box-shadow:
    0 18px 42px rgba(255, 194, 90, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset !important;
  text-shadow: none !important;
}

#notice.notice.is-loading::before,
.notice.info-block.is-loading::before {
  border-color: rgba(17, 24, 39, 0.18) !important;
  border-top-color: #111827 !important;
}

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

.track-card,
.studio-draft-card,
.studio-empty-state {
  border-radius: 24px;
}

.track-card audio {
  filter: sepia(0.12) saturate(0.9);
}

.studio-feedback-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(140, 219, 255, 0.24);
  background:
    radial-gradient(circle at 0 0, rgba(151, 92, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(10, 21, 36, 0.96), rgba(15, 29, 48, 0.92));
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
}

.studio-feedback-card h3 {
  margin: 0;
}

.studio-feedback-card .muted {
  margin: 0;
  line-height: 1.55;
}

.studio-feedback-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.studio-feedback-card input,
.studio-feedback-card select,
.studio-feedback-card textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(120, 220, 255, 0.24);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(5, 14, 25, 0.86);
  color: var(--text);
  font: inherit;
}

.studio-feedback-card textarea {
  min-height: 112px;
  resize: vertical;
}

.studio-feedback-rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.studio-feedback-rating legend {
  margin: 0 0 9px;
  padding: 0;
  color: var(--muted);
  font-weight: 800;
}

.studio-feedback-rating__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.studio-feedback-rating__chip,
.studio-feedback-rating__skip {
  position: relative;
  display: block;
  cursor: pointer;
}

.studio-feedback-rating__chip input,
.studio-feedback-rating__skip input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.studio-feedback-rating__chip span {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-height: 72px;
  padding: 8px 5px;
  border: 1px solid rgba(120, 220, 255, 0.2);
  border-radius: 16px;
  background: rgba(5, 14, 25, 0.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.studio-feedback-rating__chip b {
  color: var(--text);
  font-size: 18px;
}

.studio-feedback-rating__chip input:checked + span {
  border-color: rgba(73, 215, 255, 0.82);
  background: rgba(32, 120, 160, 0.34);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(73, 215, 255, 0.2);
}

.studio-feedback-rating__chip input:focus-visible + span,
.studio-feedback-rating__skip input:focus-visible + span {
  outline: 2px solid rgba(73, 215, 255, 0.78);
  outline-offset: 2px;
}

.studio-feedback-rating__skip {
  margin-top: 8px;
}

.studio-feedback-rating__skip span {
  display: block;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(120, 220, 255, 0.16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.studio-feedback-rating__skip input:checked + span {
  border-color: rgba(120, 220, 255, 0.38);
  background: rgba(120, 220, 255, 0.1);
  color: var(--text);
}

.studio-feedback-card button {
  margin-top: 2px;
}

.studio-feedback-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(140, 219, 255, 0.2);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(13, 27, 46, 0.86));
}

.studio-feedback-inline p {
  margin: 4px 0 0;
}

.studio-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.studio-feedback-modal.hidden {
  display: none;
}

.studio-feedback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 14, 0.72);
  backdrop-filter: blur(12px);
}

.studio-feedback-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(140, 219, 255, 0.24);
  background: rgba(7, 15, 27, 0.98);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
}

.studio-feedback-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.studio-feedback-modal__content .studio-feedback-card {
  border: 0;
  border-radius: 28px;
  box-shadow: none;
  padding: clamp(22px, 4vw, 34px);
}

.max-voice-unavailable-modal__panel {
  width: min(560px, 100%);
}

.max-voice-unavailable-modal__content {
  padding: clamp(26px, 5vw, 42px);
}

.max-voice-unavailable-modal__content h2 {
  margin: 8px 54px 12px 0;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.12;
}

.max-voice-unavailable-modal__content > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.55;
}

.max-voice-unavailable-modal__actions {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.max-voice-unavailable-modal__actions .primary-button,
.max-voice-unavailable-modal__actions .ghost-button {
  width: 100%;
  min-height: 54px;
}

.studio-air-stats-open {
  width: auto;
  min-width: 180px;
  margin: 8px 0 18px;
}

body.studio-modal-open {
  overflow: hidden;
}

.studio-air-stats-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.studio-air-stats-modal.hidden { display: none; }

.studio-air-stats-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(1, 6, 14, 0.76);
  backdrop-filter: blur(12px);
}

.studio-air-stats-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(73, 215, 255, 0.24);
  border-radius: 24px;
  background: #081321;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.studio-air-stats-modal__panel h3 { margin: 4px 48px 4px 0; }

.studio-air-stats-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.studio-air-stats-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.studio-air-stats-summary > div {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid rgba(73, 215, 255, 0.15);
  border-radius: 12px;
  background: rgba(73, 215, 255, 0.05);
}

.studio-air-stats-summary strong { font-size: 1.45rem; }
.studio-air-stats-summary span { color: var(--muted); font-size: 0.82rem; }
.studio-air-stats-tracks { display: grid; gap: 12px; }

.studio-air-stats-track {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.studio-air-stats-track__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.studio-air-stats-track__head > div:first-child { display: grid; gap: 4px; min-width: 0; }
.studio-air-stats-track__head strong { overflow-wrap: anywhere; }
.studio-air-stats-track__head span { color: var(--muted); font-size: 0.82rem; }
.studio-air-stats-track__counts { display: flex; gap: 10px; white-space: nowrap; }
.studio-air-stats-track ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.studio-air-stats-track li { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.studio-air-stats-track li p { margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.studio-air-stats-empty { padding: 18px; border: 1px dashed rgba(73, 215, 255, 0.2); border-radius: 12px; color: var(--muted); }

@media (max-width: 600px) {
  .studio-air-stats-modal { padding: 8px; }
  .studio-air-stats-modal__panel { max-height: calc(100dvh - 16px); padding: 20px 16px; border-radius: 18px; }
  .studio-air-stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-air-stats-track__head { display: grid; }
}

.track-detail-panel {
  overflow: hidden;
  padding-left: clamp(18px, 3vw, 28px);
  padding-right: clamp(18px, 3vw, 28px);
}

.track-detail-panel input,
.track-detail-panel textarea {
  min-width: 0;
  width: 100%;
}

.custom-voice-panel {
  border-color: rgba(216, 181, 109, 0.2);
}

.custom-voice-panel button:disabled,
.custom-voice-panel select:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  filter: grayscale(0.15);
}

.studio-side-nav,
.studio-bottom-nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(9, 10, 18, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-card);
}

.studio-side-nav button:hover,
.studio-bottom-nav button:hover,
.studio-bottom-nav button:focus-visible {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.23), rgba(216, 181, 109, 0.08));
}

.field-counter {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.field-counter.is-long-material {
  color: #ffe08a;
}

.studio-air-card {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(73, 215, 255, 0.3);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(73, 215, 255, 0.09), rgba(139, 92, 246, 0.08) 54%, rgba(216, 181, 109, 0.06)),
    rgba(6, 14, 27, 0.92);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.studio-air-card--empty {
  border-style: dashed;
}

.studio-air-card__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.studio-air-card__heading h3,
.studio-air-card__heading p {
  margin: 0;
  overflow-wrap: anywhere;
}

.studio-air-card__mark {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(73, 215, 255, 0.45);
  border-radius: 15px;
  color: #49d7ff;
  background: rgba(73, 215, 255, 0.08);
  font-size: 23px;
  box-shadow: inset 0 0 20px rgba(73, 215, 255, 0.08);
}

.studio-air-card audio {
  display: block;
  width: 100%;
}

.studio-air-card__reactions {
  display: flex;
  gap: 10px;
}

.studio-air-reaction {
  min-width: 72px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.studio-air-reaction.is-active {
  border-color: rgba(73, 215, 255, 0.66);
  color: #a9efff;
  background: rgba(73, 215, 255, 0.13);
}

.studio-air-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.studio-air-comment-form label,
.studio-air-comment-form label span {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.studio-air-comment-form input {
  width: 100%;
  min-width: 0;
}

.studio-air-comments {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-air-comments li {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-air-comments span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.studio-air-publish {
  border-color: rgba(73, 215, 255, 0.35);
}

.studio-air-host {
  width: 100%;
  margin: 18px 0;
}

.studio-air-host:empty {
  display: none;
}

.studio-air-card__until {
  margin: 10px 0 0;
  color: var(--muted, #aebbd0);
  font-size: 0.88rem;
}

.studio-air-publish-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.studio-air-publish-options > span {
  color: var(--muted, #aebbd0);
  font-size: 0.9rem;
  font-weight: 700;
}

.studio-air-publish-options .studio-air-publish {
  flex: 1 1 190px;
}

@media (max-width: 640px) {
  .studio-air-host {
    margin: 12px 0;
  }

  .studio-air-publish-options .studio-air-publish {
    flex-basis: 100%;
  }
  .studio-air-comment-form {
    grid-template-columns: 1fr;
  }

  .studio-air-comment-form .secondary-button {
    width: 100%;
  }

  .studio-feedback-inline {
    display: grid;
  }

  .studio-feedback-modal {
    align-items: end;
    padding-left: 10px;
    padding-right: 10px;
  }

  .studio-feedback-modal__panel {
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
  }

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

  .studio-feedback-rating__chip:first-child {
    grid-column: 1 / -1;
  }

  .studio-feedback-rating__chip span {
    min-height: 54px;
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    text-align: left;
  }

  .hero__logo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .hero__site-link {
    margin-bottom: 12px;
  }

  .hero__site-link .hero__logo {
    margin-bottom: 0;
  }

  .hero__site-label {
    min-height: 30px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .card,
  .auth-gate,
  .section,
  .field-group,
  .track-card {
    border-radius: 24px;
  }
}

/* Final Studio Air overrides stay after legacy component rules. */
.studio-air-host { margin: 0 0 12px; position: relative; z-index: 8; }
.studio-air-card.studio-air-card--compact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 58px; padding: 9px 14px; border-radius: 14px; }
.studio-air-card__identity { display: flex; align-items: center; gap: 10px; min-width: 180px; max-width: 340px; }
.studio-air-card__identity > div { min-width: 0; }
.studio-air-card__identity h3, .studio-air-card__identity p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-air-card__identity h3 { font-size: 1rem; line-height: 1.2; }
.studio-air-card.studio-air-card--compact audio { flex: 1 1 300px; width: auto; min-width: 240px; height: 38px; }
.studio-air-card__summary, .studio-air-card__until { margin: 0 0 0 auto; white-space: nowrap; color: var(--muted); font-size: 0.88rem; }
.studio-air-comments-panel { width: auto; }
.studio-air-comments-panel[open] { flex: 1 0 100%; }
.studio-air-comments-panel__body { display: grid; gap: 10px; padding-top: 12px; }
#notice:not(.hidden) { position: fixed !important; top: max(14px, env(safe-area-inset-top)) !important; left: 50% !important; z-index: 1600 !important; width: min(720px, calc(100vw - 24px)) !important; margin: 0 !important; transform: translateX(-50%) !important; box-shadow: 0 18px 56px rgba(0, 0, 0, 0.44) !important; }
@media (max-width: 720px) {
  .studio-air-host { margin-bottom: 8px; }
  .studio-air-card.studio-air-card--compact { gap: 8px; padding: 8px 10px; }
  .studio-air-card__identity { flex: 1 1 180px; min-width: 0; }
  .studio-air-card.studio-air-card--compact audio { order: 5; flex-basis: 100%; min-width: 0; }
  .studio-air-card__summary, .studio-air-card__until { margin-left: 0; font-size: 0.78rem; }
  .studio-air-comments-panel[open] { order: 6; }
  #notice:not(.hidden) {
    top: max(14px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }
}


/* source: webapp.css */
:root {
  color-scheme: dark;
  --bg-top: #0a0811;
  --bg-bottom: #121a29;
  --panel: rgba(12, 18, 30, 0.84);
  --panel-strong: rgba(16, 23, 38, 0.96);
  --panel-inner: rgba(255, 255, 255, 0.035);
  --border: rgba(122, 184, 255, 0.12);
  --border-strong: rgba(122, 184, 255, 0.3);
  --text: #f2f8ff;
  --muted: #9fb1c9;
  --accent: #39c5ff;
  --accent-soft: #6a8dff;
  --accent-3: #f4efe1;
  --accent-pale: rgba(57, 197, 255, 0.12);
  --accent-warm: #ffbb7a;
  --accent-warm-pale: rgba(255, 187, 122, 0.1);
  --line: rgba(220, 232, 228, 0.12);
  --line-strong: rgba(160, 231, 211, 0.42);
  --hero-tint-a: rgba(57, 197, 255, 0.18);
  --hero-tint-b: rgba(255, 187, 122, 0.12);
  --hero-orb-a: rgba(40, 195, 255, 0.18);
  --hero-orb-b: rgba(73, 117, 255, 0.12);
  --mode-signal-bg: linear-gradient(135deg, rgba(57, 197, 255, 0.18), rgba(255, 187, 122, 0.1));
  --mode-signal-dot: #39c5ff;
  --mode-signal-shadow: rgba(57, 197, 255, 0.7);
  --mode-tab-active: linear-gradient(135deg, rgba(57, 197, 255, 0.24), rgba(255, 187, 122, 0.08));
  --mode-pill-border: rgba(102, 214, 255, 0.24);
  --scenario-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.014));
  --scenario-surface-strong: linear-gradient(135deg, rgba(57, 197, 255, 0.1), rgba(255, 187, 122, 0.04));
  --scenario-card-border: rgba(102, 214, 255, 0.14);
  --scenario-card-shadow: rgba(40, 195, 255, 0.08);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01));
  --scenario-input-border: rgba(102, 214, 255, 0.16);
  --scenario-focus-ring: rgba(40, 195, 255, 0.12);
  --scenario-soft-text: rgba(220, 236, 255, 0.82);
  --danger: #ff8a8a;
  --success: #7ce8b4;
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow-xl: 0 34px 100px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 20px 56px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 187, 122, 0.14), transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(57, 197, 255, 0.16), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(88, 101, 255, 0.1), transparent 28%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  overflow-x: hidden;
}

body[data-scenario="GPT_LYRICS"] {
  --hero-tint-a: rgba(64, 190, 255, 0.32);
  --hero-tint-b: rgba(108, 123, 255, 0.2);
  --hero-orb-a: rgba(41, 200, 255, 0.34);
  --hero-orb-b: rgba(90, 107, 255, 0.22);
  --mode-signal-bg: linear-gradient(135deg, rgba(79, 214, 255, 0.28), rgba(110, 126, 255, 0.18));
  --mode-signal-dot: #62d8ff;
  --mode-signal-shadow: rgba(98, 216, 255, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(64, 190, 255, 0.32), rgba(120, 128, 255, 0.16));
  --mode-pill-border: rgba(102, 214, 255, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(84, 208, 255, 0.078), rgba(255, 255, 255, 0.014));
  --scenario-surface-strong: linear-gradient(135deg, rgba(81, 213, 255, 0.13), rgba(113, 122, 255, 0.07));
  --scenario-card-border: rgba(108, 212, 255, 0.18);
  --scenario-card-shadow: rgba(67, 198, 255, 0.12);
  --scenario-input-bg: linear-gradient(180deg, rgba(85, 202, 255, 0.055), rgba(255, 255, 255, 0.01));
  --scenario-input-border: rgba(104, 214, 255, 0.18);
  --scenario-focus-ring: rgba(97, 210, 255, 0.14);
  --scenario-soft-text: rgba(221, 242, 255, 0.84);
}

body[data-scenario="READY_POEM"] {
  --hero-tint-a: rgba(77, 232, 196, 0.3);
  --hero-tint-b: rgba(255, 179, 102, 0.22);
  --hero-orb-a: rgba(66, 227, 184, 0.28);
  --hero-orb-b: rgba(255, 156, 88, 0.22);
  --mode-signal-bg: linear-gradient(135deg, rgba(67, 233, 190, 0.24), rgba(255, 182, 98, 0.18));
  --mode-signal-dot: #57efcb;
  --mode-signal-shadow: rgba(87, 239, 203, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(71, 233, 193, 0.26), rgba(255, 185, 110, 0.18));
  --mode-pill-border: rgba(95, 239, 207, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(74, 235, 194, 0.07), rgba(255, 188, 114, 0.028));
  --scenario-surface-strong: linear-gradient(135deg, rgba(72, 236, 196, 0.12), rgba(255, 188, 110, 0.07));
  --scenario-card-border: rgba(95, 239, 207, 0.18);
  --scenario-card-shadow: rgba(74, 232, 193, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(72, 236, 196, 0.048), rgba(255, 190, 112, 0.012));
  --scenario-input-border: rgba(95, 239, 207, 0.18);
  --scenario-focus-ring: rgba(95, 239, 207, 0.14);
  --scenario-soft-text: rgba(228, 244, 238, 0.84);
}

body[data-scenario="SUNO_LYRICS"] {
  --hero-tint-a: rgba(121, 139, 255, 0.32);
  --hero-tint-b: rgba(62, 217, 255, 0.2);
  --hero-orb-a: rgba(104, 125, 255, 0.3);
  --hero-orb-b: rgba(44, 213, 255, 0.2);
  --mode-signal-bg: linear-gradient(135deg, rgba(121, 139, 255, 0.26), rgba(62, 217, 255, 0.18));
  --mode-signal-dot: #84a6ff;
  --mode-signal-shadow: rgba(132, 166, 255, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(121, 139, 255, 0.28), rgba(62, 217, 255, 0.16));
  --mode-pill-border: rgba(124, 162, 255, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(122, 145, 255, 0.075), rgba(74, 221, 255, 0.02));
  --scenario-surface-strong: linear-gradient(135deg, rgba(122, 145, 255, 0.125), rgba(72, 218, 255, 0.07));
  --scenario-card-border: rgba(124, 162, 255, 0.2);
  --scenario-card-shadow: rgba(103, 136, 255, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(124, 162, 255, 0.048), rgba(72, 218, 255, 0.012));
  --scenario-input-border: rgba(124, 162, 255, 0.18);
  --scenario-focus-ring: rgba(124, 162, 255, 0.14);
  --scenario-soft-text: rgba(227, 236, 255, 0.84);
}

body[data-scenario="INSTRUMENTAL"] {
  --hero-tint-a: rgba(255, 172, 92, 0.3);
  --hero-tint-b: rgba(214, 128, 88, 0.2);
  --hero-orb-a: rgba(255, 171, 92, 0.24);
  --hero-orb-b: rgba(220, 122, 76, 0.18);
  --mode-signal-bg: linear-gradient(135deg, rgba(255, 184, 102, 0.26), rgba(227, 134, 84, 0.18));
  --mode-signal-dot: #ffcb8c;
  --mode-signal-shadow: rgba(255, 203, 140, 0.72);
  --mode-tab-active: linear-gradient(135deg, rgba(255, 176, 104, 0.28), rgba(219, 136, 87, 0.16));
  --mode-pill-border: rgba(255, 187, 122, 0.28);
  --scenario-surface: linear-gradient(180deg, rgba(255, 184, 104, 0.07), rgba(225, 139, 86, 0.022));
  --scenario-surface-strong: linear-gradient(135deg, rgba(255, 189, 118, 0.12), rgba(224, 136, 88, 0.07));
  --scenario-card-border: rgba(255, 195, 128, 0.18);
  --scenario-card-shadow: rgba(255, 176, 104, 0.1);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 188, 118, 0.048), rgba(223, 140, 90, 0.012));
  --scenario-input-border: rgba(255, 194, 126, 0.18);
  --scenario-focus-ring: rgba(255, 190, 120, 0.14);
  --scenario-soft-text: rgba(255, 237, 223, 0.82);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.ambient {
  position: fixed;
  inset: auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.45;
  z-index: 0;
}

.ambient--left {
  top: -120px;
  left: -140px;
  background: rgba(255, 187, 122, 0.18);
}

.ambient--right {
  top: 260px;
  right: -180px;
  background: rgba(57, 197, 255, 0.15);
}

.page {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 22px 18px 280px;
}

.card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(24px);
}

.card--inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    var(--panel-inner);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.hero {
  padding: 24px 24px 22px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, var(--hero-tint-a), var(--hero-tint-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--panel);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 36%);
  opacity: 0.7;
  pointer-events: none;
}

.hero__mark {
  position: absolute;
  top: 18px;
  right: -6px;
  width: 360px;
  height: 220px;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at 48% 38%, rgba(57, 197, 255, 0.14), transparent 34%),
    url("/miniapp/static/logo-no-bg.png") center top / 84% auto no-repeat;
  box-shadow: none;
  opacity: 0.13;
  filter: saturate(1.04);
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.92) 56%, rgba(0, 0, 0, 0.08) 72%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.92) 56%, rgba(0, 0, 0, 0.08) 72%, rgba(0, 0, 0, 0) 100%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

.hero__glow--one {
  width: 260px;
  height: 260px;
  top: -96px;
  right: -56px;
  background: var(--hero-orb-a);
}

.hero__glow--two {
  width: 210px;
  height: 210px;
  bottom: -78px;
  left: -48px;
  background: var(--hero-orb-b);
}

.hero__brand {
  position: relative;
  z-index: 1;
}

.hero__copy {
  max-width: min(100%, 620px);
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #98dfff;
}

.hero__title {
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-size: clamp(30px, 5vw, 46px);
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.hero__title-line {
  display: block;
}

.hero__brand-secondary {
  margin: 10px 0 0;
  color: rgba(220, 236, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
}

.hero__subtitle {
  margin: 12px 0 0;
  color: rgba(228, 240, 255, 0.86);
  line-height: 1.62;
  font-size: 15.5px;
  max-width: none;
}

.hero__mode-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 14, 24, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef8ff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Keep technical statuses as floating toasts in Web App too. */
#notice:not(.hidden) {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  z-index: 1600 !important;
  width: min(720px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.44) !important;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.hero__offer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(160, 220, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 14, 24, 0.56);
  color: #dcefff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.hero__offer-link:hover,
.hero__offer-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(164, 228, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)),
    rgba(7, 14, 24, 0.66);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero__main-site-link {
  border-color: rgba(216, 181, 109, 0.34);
  background:
    linear-gradient(135deg, rgba(216, 181, 109, 0.15), rgba(57, 197, 255, 0.1)),
    rgba(7, 14, 24, 0.6);
}

.hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

.hero__actions .tab-button {
  min-height: 70px;
  padding: 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
}

.hero__actions .tab-button.is-active {
  background: var(--mode-tab-active), rgba(255, 255, 255, 0.04);
  border-color: var(--mode-pill-border);
}

.top-tabs {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 9;
  margin: 0 0 14px;
  padding: 8px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(9, 15, 26, 0.96), rgba(8, 14, 24, 0.92)),
    rgba(7, 12, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.top-tabs__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.top-tabs .tab-button {
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.top-tabs .tab-button.is-active {
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.22), rgba(255, 187, 122, 0.08));
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(57, 197, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page--web .footer-bar {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 32px), 1120px);
  padding: 0;
  background: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  z-index: 12;
}

.page--web .footer-bar .footer-bar__inner {
  width: 100%;
  gap: 8px;
}

.page--web .footer-bar .scenario-dock {
  padding: 8px;
  gap: 6px;
}

.page--web .footer-bar .scenario-card {
  min-height: 70px;
  padding: 10px 8px 11px;
  border-radius: 20px;
}

.page--web .footer-bar .scenario-dock__icon {
  font-size: 16px;
}

.page--web .footer-bar .scenario-dock__label {
  font-size: 11px;
}

.page--web .footer-bar .footer-bar__meta {
  margin-top: -2px;
}

.page--web .footer-bar .footer-bar__legal {
  font-size: 10px;
}

.page--web .footer-bar .primary-button,
.page--web .footer-bar .secondary-button {
  min-height: 54px;
  padding: 14px 18px;
}

.hero__signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--mode-signal-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #dbf5ff;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  width: fit-content;
}

.hero__signal-action {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.hero__signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mode-signal-dot);
  box-shadow: 0 0 18px var(--mode-signal-shadow);
}

.notice,
.auth-gate,
.section,
.view-header,
.result-panel,
.track-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.notice {
  margin-bottom: 14px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}

.notice.is-error {
  color: #ffd2d2;
  border-color: rgba(255, 107, 107, 0.4);
}

.notice.is-success {
  color: #f3fff8;
  border-color: rgba(126, 224, 161, 0.5);
  background:
    linear-gradient(135deg, rgba(24, 112, 87, 0.38), rgba(9, 23, 29, 0.92)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 36px rgba(4, 16, 20, 0.22);
}

.notice.is-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: rgba(255, 214, 121, 0.78);
  background: linear-gradient(135deg, #ffe18a 0%, #a8f0dd 100%);
  color: #111827;
  box-shadow:
    0 18px 42px rgba(255, 194, 90, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  font-size: 16px;
  font-weight: 900;
}

.notice.is-loading::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 3px solid rgba(17, 24, 39, 0.18);
  border-top-color: #111827;
  animation: prepare-spin 0.8s linear infinite;
}

#notice.notice.is-loading,
.notice.info-block.is-loading {
  border-color: rgba(255, 214, 121, 0.88) !important;
  background: linear-gradient(135deg, #ffe18a 0%, #a8f0dd 100%) !important;
  color: #111827 !important;
  box-shadow:
    0 18px 42px rgba(255, 194, 90, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset !important;
  text-shadow: none !important;
}

#notice.notice.is-loading::before,
.notice.info-block.is-loading::before {
  border-color: rgba(17, 24, 39, 0.18) !important;
  border-top-color: #111827 !important;
}

.view-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.prepare-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 214, 121, 0.78);
  border-radius: 20px;
  background: linear-gradient(135deg, #ffe18a 0%, #a8f0dd 100%);
  color: #111827;
  box-shadow:
    0 18px 42px rgba(255, 194, 90, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.prepare-progress strong,
.prepare-progress p {
  margin: 0;
}

.prepare-progress p {
  margin-top: 3px;
  color: rgba(17, 24, 39, 0.78);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
}

.is-auth-locked {
  position: relative;
}

.is-auth-locked::before {
  content: "Сначала войдите, затем заполните анкету";
  display: block;
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(132, 229, 255, 0.28);
  border-radius: 18px;
  background: rgba(60, 171, 218, 0.12);
  color: rgba(230, 242, 255, 0.9);
  font-weight: 800;
}

.is-auth-locked .field,
.is-auth-locked .field-group {
  opacity: 0.58;
}

.prepare-progress__spinner {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(17, 24, 39, 0.18);
  border-top-color: #111827;
  animation: prepare-spin 0.8s linear infinite;
}

.primary-button.is-loading {
  cursor: progress;
}

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

.auth-gate {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: 24px;
  border-color: rgba(214, 168, 95, 0.22);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.08), rgba(255, 187, 122, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    var(--panel);
}

.auth-gate__widget {
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px dashed rgba(57, 197, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
}

.auth-gate .primary-button,
.auth-gate .secondary-button {
  width: 100%;
}

.auth-gate__copy h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.08;
}

.auth-gate__lead,
.auth-gate__note,
.auth-gate__hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-gate__hint {
  font-size: 14px;
}

.auth-gate__email,
.auth-gate__code,
.auth-gate__fallback {
  display: grid;
  gap: 14px;
}

.auth-gate__code,
.auth-gate__fallback {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
    rgba(10, 17, 28, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.auth-gate__fallback {
  border-style: dashed;
  border-color: rgba(110, 202, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.05), rgba(255, 187, 122, 0.04)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    rgba(9, 15, 26, 0.5);
}

.auth-gate__fallback-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 231, 255, 0.78);
}

.auth-gate__actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-gate__actions--code {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.auth-gate__actions button,
.auth-gate__actions .auth-gate__link {
  min-height: 52px;
}

.auth-gate__actions button {
  white-space: nowrap;
}

.auth-gate__actions--fallback {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.auth-gate__link {
  color: var(--accent);
  font-weight: 800;
  width: fit-content;
  text-decoration: none;
}

.auth-gate__link:hover,
.auth-gate__link:focus-visible {
  color: #8fdcff;
  text-decoration: underline;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(9, 15, 26, 0.96), rgba(8, 14, 24, 0.92)),
    var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.mode-story {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.08), rgba(255, 187, 122, 0.07)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(12, 18, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.mode-story__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mode-story__head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.mode-story__copy {
  margin: 0;
  color: rgba(228, 240, 255, 0.84);
  line-height: 1.58;
}

.mode-story__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mode-pill-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  color: #eef8ff;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mode-tab {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 18px;
  font-weight: 800;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.mode-tab.is-active {
  background: var(--mode-tab-active);
  border-color: var(--mode-pill-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 28px rgba(0, 0, 0, 0.18);
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.section {
  padding: 24px;
}

.section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section__header h2,
.view-header h2 {
  margin: 0;
  color: var(--accent-3);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.06;
}

.section__pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--mode-pill-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  color: #eef8ff;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section__copy {
  margin: 0 0 18px;
  color: var(--scenario-soft-text);
  line-height: 1.6;
}

.template-strip {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.014)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 30px rgba(0, 0, 0, 0.14);
}

.template-strip__header {
  display: grid;
  gap: 5px;
}

.template-strip__header strong {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--scenario-soft-text);
}

.template-strip__header p,
.field-group__header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: none;
}

.grid {
  display: grid;
  gap: 14px;
}

.field-group {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
    var(--scenario-surface);
  border: 1px solid var(--scenario-card-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 14px 34px var(--scenario-card-shadow);
}

.field-group__header {
  margin-bottom: 14px;
}

.field-group__header h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 14px;
  color: #dff0ff;
}

.field input,
.field select,
.field textarea,
.lyrics-editor {
  width: 100%;
  padding: 16px 17px;
  border-radius: 18px;
  border: 1px solid var(--scenario-input-border);
  background:
    var(--scenario-input-bg),
    rgba(8, 13, 23, 0.78);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  scroll-margin-top: 180px;
  scroll-margin-bottom: 210px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #7590a8;
}

.field textarea,
.lyrics-editor {
  min-height: 120px;
  resize: vertical;
  line-height: 1.48;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.lyrics-editor:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--scenario-focus-ring);
}

.select-tap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.select-tap-option {
  appearance: none;
  flex: 1 1 132px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--scenario-input-border);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(8, 15, 25, 0.68);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}

.select-tap-option.is-active {
  border-color: var(--border-strong);
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.2), rgba(255, 187, 122, 0.12)),
    rgba(8, 15, 25, 0.82);
  box-shadow: 0 0 0 3px var(--scenario-focus-ring);
}

#track-form select[data-tap-buttons-ready="1"] {
  display: none;
}

.inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.chip,
.template-chip,
.tab-button,
.primary-button,
.secondary-button,
.ghost-button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chip {
  position: relative;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chip:hover,
.template-chip:hover,
.tab-button:hover,
.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.chip:active,
.template-chip:active,
.tab-button:active,
.primary-button:active,
.secondary-button:active,
.ghost-button:active {
  transform: translateY(1px) scale(0.99);
}

.chip.is-active,
.template-chip.is-active {
  background: var(--mode-tab-active);
  border-color: color-mix(in srgb, var(--mode-pill-border) 88%, white 12%);
  box-shadow: 0 12px 28px var(--scenario-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chip.is-active {
  padding-right: 36px;
}

.chip.is-active::after,
.template-chip.is-active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #f4fbff, #d6f1ff);
  color: #06111f;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(57, 197, 255, 0.18);
}

.chips--compact {
  gap: 8px;
}

.template-chip {
  position: relative;
  font-size: 14px;
  padding: 12px 16px;
}

.template-chip.is-active {
  padding-right: 34px;
}

.sound-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    rgba(7, 12, 21, 0.4);
}

.sound-panel__summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.sound-panel__summary strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.sound-panel__summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.sound-panel__controls {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.sound-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sound-panel__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(57, 197, 255, 0.14), rgba(255, 187, 122, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #eef8ff;
  font-size: 12px;
}

.sound-panel__toggle {
  min-height: 40px;
}

.sound-panel__body {
  display: grid;
  gap: 14px;
}

.muted {
  margin: 0;
  color: var(--muted);
}

.form-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 42px;
  padding: 0 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-button {
  border-color: rgba(214, 168, 95, 0.6);
  background: linear-gradient(135deg, #f1d087, #9ee7d4);
  color: #101512;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.secondary-button {
  border-color: rgba(158, 231, 212, 0.32);
}

.ghost-button {
  background: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.result-panel {
  margin-top: 18px;
  padding: 16px;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lyrics-editor {
  min-height: 280px;
  margin-bottom: 12px;
}

.storage-note {
  margin: -6px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 187, 122, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 187, 122, 0.105), rgba(57, 197, 255, 0.045));
  color: rgba(245, 251, 255, 0.86);
  font-size: 14px;
  line-height: 1.45;
}

.storage-note span {
  display: inline-block;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 90, 90, 0.16);
  color: #ff6b6b;
  font-weight: 900;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.tracks-list {
  display: grid;
  gap: 12px;
}

.track-card {
  padding: 14px;
}

.track-card__top {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cover {
  width: 74px;
  height: 74px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #101820;
}

.cover--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover__fallback {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, rgba(57, 197, 255, 0.14), rgba(241, 208, 135, 0.1)),
    #101820;
}

.cover--image.is-broken .cover__fallback {
  display: grid;
}

.cover--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.track-title {
  margin: 0 0 4px;
  font-size: 17px;
}

.track-meta {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.track-meta__subtitle {
  color: #b8c7d9;
  font-size: 14px;
}

.track-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(147, 172, 203, 0.26);
  background: rgba(134, 154, 182, 0.12);
  color: #eef6ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.track-status-badge.is-live {
  border-color: rgba(115, 237, 197, 0.52);
  background:
    linear-gradient(135deg, rgba(36, 163, 124, 0.34), rgba(9, 25, 31, 0.9)),
    rgba(18, 40, 45, 0.9);
  color: #f4fffb;
  box-shadow:
    0 0 0 1px rgba(98, 240, 183, 0.08),
    0 10px 24px rgba(8, 26, 24, 0.22);
}

.track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.track-actions button {
  min-height: 34px;
}

audio {
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 860px) {
  #vocal_gender[data-tap-buttons-ready="1"],
  #performance_space[data-tap-buttons-ready="1"],
  #performance_space_detail[data-tap-buttons-ready="1"] {
    display: none;
  }

  .select-tap-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .select-tap-option {
    flex: 1 1 132px;
  }

  .view-header__actions {
    justify-content: stretch;
  }

  .view-header__actions .secondary-button,
  .view-header__actions .ghost-button {
    flex: 1 1 160px;
  }

  .prepare-progress {
    align-items: flex-start;
  }

  .page {
    width: 100%;
    padding: 16px 14px 250px;
  }

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

  .auth-gate__actions,
  .mode-tabs,
  .inline-grid {
    grid-template-columns: 1fr;
  }

  .mode-story__head {
    flex-direction: column;
  }

  .section__header,
  .view-header,
  .result-header,
  .sound-panel__summary {
    align-items: stretch;
    flex-direction: column;
  }

  .sound-panel__controls {
    justify-items: start;
  }

  .sound-panel__badges {
    justify-content: flex-start;
  }

  .track-card__top {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .track-card__top > .ghost-button {
    grid-column: 1 / -1;
  }

  .cover {
    width: 58px;
    height: 58px;
  }
}

/* Web layout uses the miniapp window flow instead of the older inline actions. */
.mode-tabs {
  display: none;
}

#track-form > .form-actions,
#track-form > .result-panel {
  display: none !important;
}

#status-box {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .top-tabs {
    top: calc(8px + env(safe-area-inset-top));
    margin-bottom: 12px;
    padding: 7px;
    border-radius: 18px;
  }

  .top-tabs__inner {
    gap: 8px;
  }

  .top-tabs .tab-button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 15px;
  }

  .auth-gate__actions {
    grid-template-columns: 1fr;
  }

  .page--web .footer-bar {
    width: calc(100vw - 20px);
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .page--web .footer-bar .scenario-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--web .footer-bar .scenario-card {
    min-height: 60px;
    padding: 9px 6px 10px;
  }
}

/* Studio wizard: premium web layout on top of the shared miniapp flow. */
body.studio-wizard-enabled .page--web {
  width: min(100%, 1440px);
}

body.studio-wizard-enabled .page--web .footer-bar {
  display: none;
}

body.studio-wizard-enabled .page--web .top-tabs {
  display: none;
}

body.studio-screen-mode:not([data-studio-screen="create"]) .page--web #create-view,
body.studio-screen-mode:not([data-studio-screen="tracks"]) .page--web #tracks-view,
body.studio-screen-mode:not([data-studio-screen="billing"]) .page--web #billing-panel,
body.studio-screen-mode:not([data-studio-screen="drafts"]) .page--web #studio-drafts-panel,
body.studio-screen-mode:not([data-studio-screen="help"]) .page--web #studio-help-panel,
body.studio-screen-mode:not([data-studio-screen="profile"]) .page--web #studio-profile-panel,
body.studio-screen-mode:not([data-studio-screen="create"]) .page--web #status-box {
  display: none !important;
}

body.studio-screen-mode .page--web #create-view:not(.hidden),
body.studio-screen-mode .page--web #tracks-view:not(.hidden),
body.studio-screen-mode .page--web #billing-panel:not(.hidden),
body.studio-screen-mode .page--web .studio-utility-panel:not(.hidden) {
  animation: studioScreenIn 180ms ease-out both;
}

@keyframes studioScreenIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.studio-wizard-enabled .studio-side-nav button.is-active,
body.studio-wizard-enabled .studio-bottom-nav button.is-active {
  border-color: rgba(247, 211, 124, 0.45);
  background:
    radial-gradient(circle at 18% 18%, rgba(102, 214, 255, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(216, 181, 109, 0.16));
  color: var(--text);
}

body.studio-wizard-enabled .page--web .hero {
  min-height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  background:
    radial-gradient(circle at 78% 24%, rgba(118, 229, 255, 0.16), transparent 24%),
    radial-gradient(circle at 16% 88%, rgba(255, 188, 112, 0.12), transparent 22%),
    linear-gradient(135deg, rgba(17, 42, 55, 0.92), rgba(18, 20, 33, 0.94));
}

body.studio-wizard-enabled .page--web .section {
  max-width: none;
}

body.studio-wizard-enabled .page--web .studio-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.studio-wizard-enabled .page--web .studio-wizard-actions {
  bottom: calc(10px + env(safe-area-inset-bottom));
}

body.studio-wizard-enabled .page--web .advanced-panel {
  margin-bottom: 18px;
}

body.studio-wizard-enabled .page--web .advanced-panel > summary {
  min-height: 64px;
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(132, 229, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 20%, rgba(88, 210, 255, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(47, 136, 174, 0.22), rgba(255, 255, 255, 0.035));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

.page--web > .hero.card {
  overflow: visible;
  overscroll-behavior: auto;
}

@media (min-width: 1040px) {
  body.studio-wizard-enabled .page--web {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  body.studio-wizard-enabled .page--web .hero {
    position: sticky;
    grid-row: 1 / span 20;
    top: 18px;
    min-height: calc(100vh - 36px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin-bottom: 0;
  }

  body.studio-wizard-enabled .page--web #notice,
  body.studio-wizard-enabled .page--web #auth-panel,
  body.studio-wizard-enabled .page--web #telegram-link-panel,
  body.studio-wizard-enabled .page--web #create-view,
  body.studio-wizard-enabled .page--web #tracks-view,
  body.studio-wizard-enabled .page--web .studio-utility-panels,
  body.studio-wizard-enabled .page--web #status-box {
    grid-column: 2;
  }

  body.studio-wizard-enabled .page--web #create-view {
    align-self: start;
  }

  body.studio-wizard-enabled .page--web .studio-stepper {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.studio-wizard-enabled .page--web .studio-wizard-actions {
    bottom: 18px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1280px) {
  body.studio-wizard-enabled .page--web .studio-scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.file-input {
  width: 100%;
  color: var(--muted);
}

.custom-voice-panel {
  gap: 12px;
}

.custom-voice-panel .file-input {
  display: none;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.custom-voice-panel .notice {
  margin: 0;
}

.notice--error {
  border-color: rgba(255, 119, 119, 0.55);
  color: #ffd8d8;
}

/* Premium studio skin: Web App refinements over the shared Mini App layer. */
:root {
  --bg-top: #05050a;
  --bg-bottom: #11101a;
  --panel: rgba(13, 13, 22, 0.86);
  --panel-strong: rgba(18, 18, 30, 0.97);
  --panel-inner: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.105);
  --border-strong: rgba(216, 181, 109, 0.34);
  --text: rgba(255, 250, 241, 0.96);
  --muted: rgba(225, 219, 242, 0.66);
  --accent: #8b5cf6;
  --accent-soft: #b772ff;
  --accent-3: #fff7df;
  --accent-pale: rgba(139, 92, 246, 0.18);
  --accent-warm: #d8b56d;
  --accent-warm-pale: rgba(216, 181, 109, 0.13);
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(216, 181, 109, 0.36);
  --hero-tint-a: rgba(139, 92, 246, 0.19);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.13));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(216, 181, 109, 0.13));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.19), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(255, 255, 255, 0.12);
  --scenario-card-shadow: rgba(139, 92, 246, 0.15);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016));
  --scenario-input-border: rgba(255, 255, 255, 0.14);
  --scenario-focus-ring: rgba(139, 92, 246, 0.22);
  --scenario-soft-text: rgba(235, 230, 255, 0.82);
}

body[data-scenario="GPT_LYRICS"],
body[data-scenario="READY_POEM"],
body[data-scenario="SUNO_LYRICS"],
body[data-scenario="INSTRUMENTAL"] {
  --hero-tint-a: rgba(139, 92, 246, 0.21);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.2);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.12));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-card-shadow: rgba(139, 92, 246, 0.14);
}

.page--web .hero,
body.studio-wizard-enabled .page--web .hero {
  background:
    radial-gradient(ellipse at 35% 14%, rgba(139, 92, 246, 0.2), transparent 42%),
    radial-gradient(ellipse at 82% 22%, rgba(216, 181, 109, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(10, 11, 19, 0.92);
  border-color: rgba(216, 181, 109, 0.22);
}

.page--web .primary-button,
.page--web .auth-gate .primary-button,
.page--web .footer-bar .primary-button,
.page--web .studio-wizard-actions .primary-button {
  color: #fffaf0;
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 52%, #d8b56d 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(124, 58, 237, 0.32);
}

.page--web .primary-button:hover,
.page--web .auth-gate .primary-button:hover,
.page--web .footer-bar .primary-button:hover,
.page--web .studio-wizard-actions .primary-button:hover {
  filter: saturate(1.05) brightness(1.05);
  box-shadow: 0 24px 62px rgba(124, 58, 237, 0.38);
}

.page--web .secondary-button,
.page--web .ghost-button,
.page--web .chip,
.page--web .tab-button,
.page--web .auth-gate__link {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 250, 241, 0.92);
}

.page--web .auth-gate__link {
  color: #cdb8ff;
}

.page--web .billing-panel {
  display: grid;
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
  scroll-margin-top: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(216, 181, 109, 0.16), transparent 32%),
    linear-gradient(145deg, rgba(13, 18, 31, 0.94), rgba(8, 25, 38, 0.88));
}

.page--web .billing-panel.hidden {
  display: none;
}

.page--web .billing-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.page--web .billing-panel__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page--web .billing-panel__head h2 {
  margin: 0;
}

.page--web .billing-panel__head p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.page--web .billing-overview {
  display: grid;
  grid-template-columns: minmax(180px, 0.58fr) minmax(0, 1.42fr);
  gap: 14px;
}

.page--web .billing-overview__balance,
.page--web .billing-overview__explain {
  border: 1px solid rgba(148, 235, 217, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 18, 30, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 16px;
  min-width: 0;
}

.page--web .billing-overview__balance {
  display: grid;
  align-content: center;
  gap: 8px;
}

.page--web .billing-overview__balance span,
.page--web .billing-overview__balance small {
  color: var(--muted);
}

.page--web .billing-overview__balance strong {
  display: block;
  color: #fffaf0;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 0.95;
}

.page--web .billing-overview__explain h3 {
  margin: 0 0 8px;
  color: #fffaf0;
  font-size: 22px;
}

.page--web .billing-overview__explain p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.page--web .billing-overview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.page--web .billing-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.page--web .billing-plans__intro {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 2px 2px 0;
  color: #c8d8e8;
}

.page--web .billing-plans__intro strong {
  color: #fff6e7;
  font-size: 17px;
}

.page--web .billing-plans__intro span {
  color: #9fcdec;
  font-size: 14px;
}

.page--web .billing-panel:not(.is-expanded) {
  gap: 14px;
  padding: 18px 22px;
}

.page--web .billing-panel:not(.is-expanded) .billing-panel__head {
  align-items: center;
}

.page--web .billing-panel:not(.is-expanded) .billing-panel__head .eyebrow,
.page--web .billing-panel:not(.is-expanded) .billing-overview__explain,
.page--web .billing-panel:not(.is-expanded) .billing-plans {
  display: none;
}

.page--web .billing-panel:not(.is-expanded) .billing-overview {
  grid-template-columns: 1fr;
}

.page--web .billing-panel:not(.is-expanded) .billing-overview__balance {
  min-height: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page--web .billing-panel:not(.is-expanded) .billing-overview__balance strong {
  font-size: 36px;
}

.page--web .billing-panel:not(.is-expanded) .billing-overview__balance small {
  margin-left: auto;
}

.page--web .billing-card,
.page--web .billing-note {
  border: 1px solid rgba(148, 235, 217, 0.18);
  border-radius: 20px;
  background: rgba(7, 18, 30, 0.58);
  padding: 14px;
}

.page--web .billing-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 188px;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.page--web .billing-card.is-recommended {
  border-color: rgba(247, 211, 124, 0.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(247, 211, 124, 0.14), transparent 34%),
    rgba(7, 18, 30, 0.68);
}

.page--web .billing-card__top,
.page--web .billing-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page--web .billing-card__top {
  padding-right: 0;
}

.page--web .billing-card.is-recommended .billing-card__top {
  padding-right: 0;
}

.page--web .billing-card__icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 225, 142, 0.9), rgba(160, 239, 214, 0.78)),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(255, 203, 112, 0.16);
}

.page--web .billing-card__icon::before,
.page--web .billing-card__icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.page--web .billing-card__icon::before {
  width: 13px;
  height: 13px;
  background: rgba(6, 16, 24, 0.88);
  clip-path: polygon(50% 0%, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0% 50%, 37% 35%);
}

.page--web .billing-card__icon::after {
  width: 22px;
  height: 9px;
  border: 2px solid rgba(6, 16, 24, 0.26);
  border-left-color: transparent;
  border-right-color: transparent;
  transform: rotate(-12deg);
}

.page--web .billing-card > button {
  width: 100%;
  margin-top: auto;
  min-height: 40px;
}

.page--web .billing-card__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.page--web .billing-card strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.page--web .billing-card__title small {
  color: rgba(220, 238, 245, 0.68);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.page--web .billing-card p,
.page--web .billing-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.page--web .billing-card p {
  max-width: 28em;
  min-height: 56px;
  font-size: 13px;
  overflow-wrap: normal;
  word-break: normal;
}

.page--web .billing-note {
  display: flex;
  align-items: center;
  min-height: 76px;
  grid-column: 1 / -1;
}

.page--web .billing-card__badge,
.page--web .billing-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.page--web .billing-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  margin-left: auto;
  min-height: 26px;
  padding: 0 9px;
  background: rgba(247, 211, 124, 0.18);
  color: #ffe7a7;
  font-size: 12px;
}

.page--web .billing-card__meta {
  flex-wrap: wrap;
  margin-top: 2px;
}

.page--web .hero__mode-chip,
.page--web .hero__signal,
.page--web .section__pill,
.page--web .sound-panel__badge,
.page--web .track-status-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(216, 181, 109, 0.11));
  border-color: rgba(216, 181, 109, 0.28);
}

@media (min-width: 920px) {
  body.studio-wizard-enabled .page--web .studio-wizard-actions {
    position: relative;
    bottom: auto;
  }
}

.page--web {
  width: min(100%, 1360px);
  padding-top: 28px;
}

.page--web .hero {
  display: block;
  padding: 30px;
  max-width: 100%;
  overflow-x: hidden;
}

.page--web .hero__logo {
  grid-column: 1;
}

.page--web .hero__site-link {
  grid-column: 1;
  max-width: calc(100% - 190px);
  margin-top: 58px;
}

.page--web .hero__brand {
  grid-column: 1;
}

.page--web .top-tabs {
  grid-column: 1;
  width: 100%;
  margin: 4px 0 0;
}

.page--web .hero__signal {
  grid-column: 1;
  width: fit-content;
}

.page--web .hero::after {
  display: none;
}

@media (min-width: 920px) {
  .page--web .hero {
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .page--web .hero__copy,
  .page--web .hero__brand,
  .page--web .top-tabs,
  .page--web .hero__signal {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .page--web .hero__site-link {
    max-width: calc(100% - 178px);
    margin-top: 58px;
  }

  .page--web .hero__site-label {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .page--web .hero__site-label {
    display: none;
  }
}

body.studio-wizard-enabled .page--web .hero {
  max-width: none;
  overflow-x: hidden;
}

body.studio-wizard-enabled .page--web #create-view,
body.studio-wizard-enabled .page--web #tracks-view,
body.studio-wizard-enabled .page--web #auth-panel,
body.studio-wizard-enabled .page--web #telegram-link-panel,
body.studio-wizard-enabled .page--web .studio-utility-panels,
body.studio-wizard-enabled .page--web #status-box {
  max-width: none;
}

.page--web .section,
.page--web .auth-gate,
.page--web .view-header,
.page--web .track-card,
.page--web .studio-utility-panel {
  border-radius: 28px;
}

.page--web .studio-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page--web .studio-stepper {
  padding: 14px;
}

.page--web .studio-stepper__item {
  min-height: 78px;
}

.page--web .result-panel,
.page--web .studio-result-panel,
.page--web .studio-review-panel {
  border-color: rgba(216, 181, 109, 0.2);
}

.page--web .track-card__top {
  align-items: center;
}

.page--web .custom-voice-panel .notice,
.page--web #custom_voice_status,
.page--web #custom_voice_phrase {
  font-size: 17px;
  line-height: 1.55;
}

.field-counter {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.field-counter.is-long-material {
  color: #ffe08a;
}

@media (max-width: 920px) {
  .page--web {
    width: min(100%, 760px);
    padding-top: 18px;
  }

  .page--web .hero {
    display: block;
    padding: 24px;
  }

  .page--web .hero::after {
    display: none;
  }

  .page--web .top-tabs {
    margin-top: 18px;
  }

  .page--web .studio-scenario-grid {
    grid-template-columns: 1fr;
  }

  .page--web .billing-panel__head {
    align-items: stretch;
    flex-direction: column;
  }

  .page--web .billing-panel__head,
  .page--web .billing-overview {
    grid-template-columns: 1fr;
  }

  .page--web .billing-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page--web .billing-card,
  .page--web .billing-note {
    min-width: 0;
  }

  .page--web .billing-card {
    min-height: 0;
    padding: 14px;
  }

  .page--web .billing-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .page--web .billing-card p {
    min-height: 0;
    font-size: 14px;
  }

  .page--web .billing-card__badge {
    position: static;
    width: fit-content;
  }

  .page--web .billing-card__top {
    align-items: flex-start;
  }

  .page--web .billing-panel:not(.is-expanded) .billing-panel__head {
    grid-template-columns: 1fr;
  }

  .page--web .billing-panel:not(.is-expanded) .billing-overview__balance {
    align-items: flex-start;
    flex-direction: column;
  }

  .page--web .billing-panel:not(.is-expanded) .billing-overview__balance small {
    margin-left: 0;
  }
}

/* PulseVeter v1 hero polish: keep the compact sidebar stable. */
body.studio-wizard-enabled .page--web .hero__title {
  letter-spacing: 0;
}

body.studio-wizard-enabled .page--web .hero__brand-secondary {
  max-width: 100%;
  margin: 10px 0 0;
  color: rgba(220, 236, 255, 0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-shadow: none;
}

body.studio-wizard-enabled .page--web .hero__subtitle {
  max-width: 100%;
  margin-top: 12px;
  color: rgba(228, 240, 255, 0.86);
  font-size: 15.5px;
  line-height: 1.62;
}

@media (max-width: 640px) {
  body.studio-wizard-enabled .hero__brand-secondary,
  body.studio-wizard-enabled .page--web .hero__brand-secondary {
    font-size: 12px;
  }

  body.studio-wizard-enabled .hero__subtitle,
  body.studio-wizard-enabled .page--web .hero__subtitle {
    font-size: 15px;
  }
}

/* Stable v1 shell: base typography, one content column and compact navigation. */
body.studio-wizard-enabled .page--web .studio-start-panel__head h2,
body.studio-wizard-enabled .page--web #create-section-title,
body.studio-wizard-enabled .page--web .studio-review-card h2,
body.studio-wizard-enabled .page--web .studio-result-panel h2 {
  font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.16;
  letter-spacing: 0;
}

body.studio-wizard-enabled .page--web .studio-start-panel__head p,
body.studio-wizard-enabled .page--web .studio-scenario-card__copy,
body.studio-wizard-enabled .page--web .studio-review-card p {
  font-size: 14px;
  line-height: 1.55;
}

body.studio-wizard-enabled .page--web .studio-scenario-card {
  min-height: 0;
  padding: 18px;
}

body.studio-wizard-enabled .page--web .studio-scenario-card__title {
  font-size: 17px;
  line-height: 1.25;
}

body.studio-wizard-enabled .page--web .studio-stepper__item {
  min-height: 64px;
}

@media (min-width: 920px) {
  body.studio-wizard-enabled .page--web {
    display: block;
    width: min(calc(100% - 36px), 1220px);
    padding-top: 18px;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap {
    position: sticky;
    top: 10px;
    z-index: 96;
    display: block;
    margin: 0 0 14px;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-menu-toggle {
    display: none;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap .studio-side-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 6px;
    border-radius: 20px;
    background: rgba(7, 13, 23, 0.9);
    backdrop-filter: blur(18px);
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap .studio-side-nav button {
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 14px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    font-size: 13px;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap .studio-side-nav button span {
    display: grid;
    width: 28px;
    height: 28px;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .studio-side-nav {
    display: none;
  }

  body.studio-wizard-enabled .page--web .hero {
    position: relative;
    top: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 18px;
    overflow: hidden;
  }

  body.studio-wizard-enabled .page--web #notice,
  body.studio-wizard-enabled .page--web #auth-panel,
  body.studio-wizard-enabled .page--web #telegram-link-panel,
  body.studio-wizard-enabled .page--web #create-view,
  body.studio-wizard-enabled .page--web #tracks-view,
  body.studio-wizard-enabled .page--web .studio-utility-panels,
  body.studio-wizard-enabled .page--web #status-box {
    grid-column: auto;
  }
}

@media (max-width: 919px) {
  body.studio-wizard-enabled .page--web .hero {
    overflow: visible;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap {
    justify-items: start;
    min-height: 46px;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-menu-toggle {
    display: inline-grid;
    grid-template-columns: 18px auto;
    gap: 8px;
    place-items: center;
    width: auto;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-menu-toggle strong {
    display: block;
    font-size: 15px;
    line-height: 1;
  }

  body.studio-wizard-enabled .page--web .studio-mobile-nav-wrap .studio-side-nav.is-open {
    position: absolute;
    top: 50px;
    right: auto;
    left: 4px;
    width: min(300px, calc(100vw - 28px));
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
}

/* Compact v1 workspace: natural page scrolling and no empty hero floor. */
body.studio-wizard-enabled .page--web {
  align-items: start;
}

body.studio-wizard-enabled .page--web .hero {
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 24px 28px !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

body.studio-wizard-enabled .page--web .hero__copy {
  max-width: 760px;
}

body.studio-wizard-enabled .page--web .hero__site-link {
  margin-top: 0;
}

body.studio-wizard-enabled .page--web .hero__subtitle {
  max-width: 720px;
}

@media (min-width: 920px) {
  body.studio-wizard-enabled .page--web .hero__copy {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(28px, 5vw, 76px);
    align-items: start;
    max-width: 1080px;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .eyebrow,
  body.studio-wizard-enabled .page--web .hero__copy > .hero__title,
  body.studio-wizard-enabled .page--web .hero__copy > .hero__brand-secondary {
    grid-column: 1;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .hero__subtitle,
  body.studio-wizard-enabled .page--web .hero__copy > .hero__mode-chip,
  body.studio-wizard-enabled .page--web .hero__copy > .hero__links {
    grid-column: 2;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .hero__subtitle {
    grid-row: 1 / span 2;
    margin-top: 2px;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .hero__mode-chip {
    grid-row: 3;
    align-self: end;
  }

  body.studio-wizard-enabled .page--web .hero__copy > .hero__links {
    grid-row: 4;
  }
}

body.studio-wizard-enabled .page--web .studio-start-panel {
  padding: 22px;
}

body.studio-wizard-enabled .page--web .studio-start-panel__head {
  margin-bottom: 16px;
}

body.studio-wizard-enabled .page--web .studio-scenario-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.studio-wizard-enabled .page--web .studio-scenario-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  column-gap: 13px;
  row-gap: 4px;
  padding: 16px;
}

body.studio-wizard-enabled .page--web .studio-scenario-card__icon {
  grid-row: 1 / span 2;
}

body.studio-wizard-enabled .page--web .studio-scenario-card__title,
body.studio-wizard-enabled .page--web .studio-scenario-card__copy {
  text-align: left;
}

body.studio-wizard-enabled .page--web .studio-scenario-card--library {
  grid-column: 1 / -1;
  min-height: 78px;
}

@media (max-width: 1120px) {
  body.studio-wizard-enabled .page--web .studio-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.studio-wizard-enabled .page--web {
    width: 100%;
    padding: 8px 10px 32px;
  }

  body.studio-wizard-enabled .page--web .hero {
    padding: 18px !important;
    border-radius: 24px;
  }

  body.studio-wizard-enabled .page--web .studio-scenario-grid {
    grid-template-columns: 1fr;
  }

  body.studio-wizard-enabled .page--web .studio-scenario-card--library {
    grid-column: auto;
  }
}
.studio-delivery-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
}

.studio-delivery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 15, 0.76);
  backdrop-filter: blur(12px);
}

.studio-delivery-modal__panel {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(24px, 5vw, 34px);
  border: 1px solid rgba(126, 219, 229, 0.24);
  border-radius: 24px;
  background: rgba(8, 17, 29, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.studio-delivery-modal__panel h3 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.15;
}

.studio-delivery-modal__panel > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.studio-delivery-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.studio-delivery-modal__choices button {
  width: 100%;
  min-height: 54px;
}

.studio-delivery-modal__cancel {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

@media (max-width: 560px) {
  .studio-delivery-modal {
    align-items: end;
    padding: 10px;
  }

  .studio-delivery-modal__panel {
    border-radius: 22px 22px 12px 12px;
  }

  .studio-delivery-modal__choices {
    grid-template-columns: 1fr;
  }
}

#notice:not(.hidden) {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  z-index: 1600 !important;
  width: min(720px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.44) !important;
}


/* source: pulseveter_v2.css */
/* Pulse & Wind 2.0: an isolated visual layer over the existing studio logic. */
:root {
  --pv2-ink: #020913;
  --pv2-panel: rgba(5, 17, 31, 0.72);
  --pv2-line: rgba(151, 224, 255, 0.17);
  --pv2-cyan: #23c8ff;
  --pv2-gold: #e7b959;
  --pv2-copy: #d6e8f5;
  --pv2-muted: #849aae;
  --pv2-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pv2-ui: "Aptos", "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

body.studio-wizard-enabled {
  font-family: var(--pv2-ui);
  background: var(--pv2-ink);
}

body.studio-wizard-enabled.studio-workspace-open {
  background:
    radial-gradient(circle at 76% 12%, rgba(20, 122, 181, 0.2), transparent 30rem),
    radial-gradient(circle at 16% 84%, rgba(6, 79, 119, 0.16), transparent 34rem),
    var(--pv2-ink);
}

body.studio-wizard-enabled.studio-workspace-open .page,
body.studio-wizard-enabled.studio-workspace-open .page--web {
  isolation: isolate;
  max-width: none;
}

/* The hero is a calm, single-scene entrance. The wizard becomes a new scene. */
body.studio-wizard-enabled:not(.studio-workspace-open) .hero.card {
  background:
    linear-gradient(90deg, rgba(2, 9, 19, 0.45), rgba(2, 9, 19, 0.12) 55%, rgba(2, 9, 19, 0.36)),
    url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/hero-baikal-aurora-desktop.jpg") center / cover !important;
}

body.studio-wizard-enabled:not(.studio-workspace-open) .hero__brand-secondary,
body.studio-wizard-enabled .studio-start-panel__head h2,
body.studio-wizard-enabled .field-group__header h3,
body.studio-wizard-enabled .studio-review-card h2 {
  font-family: var(--pv2-display);
  font-weight: 400;
  letter-spacing: -0.035em;
}

body.studio-wizard-enabled:not(.studio-workspace-open) .hero__brand-secondary {
  color: #f0f7fc;
  text-shadow: 0 5px 36px rgba(23, 190, 255, 0.22);
}

body.studio-wizard-enabled .studio-impulse-badge {
  border-color: rgba(231, 185, 89, 0.46);
  color: #ffe6aa;
  background: rgba(11, 13, 16, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.23);
}

body.studio-wizard-enabled.studio-workspace-open #section-create,
body.studio-wizard-enabled.studio-workspace-open #create-view {
  position: relative;
  min-height: calc(100svh - 78px);
  padding: clamp(18px, 3vw, 44px) clamp(12px, 4vw, 68px) 116px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.studio-wizard-enabled.studio-workspace-open #section-create::before,
body.studio-wizard-enabled.studio-workspace-open #create-view::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.27;
  pointer-events: none;
  background: url("/miniapp/static/assets/studio/pulse-redesign/06_decor/decor-star-particles.jpg") center / cover;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

body.studio-wizard-enabled .section__header,
body.studio-wizard-enabled .section__heading,
body.studio-wizard-enabled .section__copy,
body.studio-wizard-enabled .template-strip,
body.studio-wizard-enabled .top-tabs {
  display: none !important;
}

/* A short progress constellation replaces the old long wizard strip. */
body.studio-wizard-enabled .studio-stepper {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 18px);
  width: min(680px, 100%);
  margin: 0 auto clamp(20px, 3vh, 36px);
  padding: 0;
  background: none;
  border: 0;
}

body.studio-wizard-enabled .studio-stepper::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(93, 205, 255, 0.38), transparent);
}

body.studio-wizard-enabled .studio-stepper__item {
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pv2-muted);
}

body.studio-wizard-enabled .studio-stepper__index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 201, 229, 0.32);
  border-radius: 50%;
  background: #071523;
  font-size: 12px;
}

body.studio-wizard-enabled .studio-stepper__text { display: none; }

body.studio-wizard-enabled .studio-stepper__item.is-active .studio-stepper__index {
  border-color: var(--pv2-cyan);
  background: linear-gradient(135deg, #1bb7ef, #057ba7);
  color: white;
  box-shadow: 0 0 0 5px rgba(35, 200, 255, 0.1), 0 0 25px rgba(35, 200, 255, 0.55);
}

body.studio-wizard-enabled .studio-stepper__item.is-done .studio-stepper__index {
  border-color: rgba(99, 224, 200, 0.72);
  color: #8df7db;
}

/* Each logical step is a self-contained scene, never a page-length questionnaire. */
body.studio-wizard-enabled .studio-start-panel,
body.studio-wizard-enabled #track-form > .field-group,
body.studio-wizard-enabled .studio-voice-step,
body.studio-wizard-enabled .studio-review-panel,
body.studio-wizard-enabled .studio-result-panel {
  width: min(100%, 940px);
  min-height: min(550px, calc(100svh - 230px));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid var(--pv2-line) !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
  background:
    linear-gradient(125deg, rgba(11, 35, 56, 0.8), rgba(4, 13, 25, 0.84) 58%, rgba(7, 25, 42, 0.73)) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32) !important;
  animation: pv2-scene-in 380ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

body.studio-wizard-enabled .studio-start-panel {
  display: grid;
  align-content: center;
  background:
    linear-gradient(115deg, rgba(3, 17, 31, 0.78), rgba(3, 17, 31, 0.43)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") center / cover !important;
}

body.studio-wizard-enabled .studio-start-panel__head {
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

body.studio-wizard-enabled .studio-start-panel__head h2,
body.studio-wizard-enabled .field-group__header h3,
body.studio-wizard-enabled .studio-review-card h2 {
  margin: 0;
  color: #f3f8fb;
  font-size: clamp(31px, 4.6vw, 58px);
  line-height: 1.02;
}

body.studio-wizard-enabled .studio-start-panel__head p,
body.studio-wizard-enabled .field-group__header p,
body.studio-wizard-enabled .studio-review-card p {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--pv2-copy);
  font-size: 16px;
  line-height: 1.6;
}

body.studio-wizard-enabled .studio-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin: 0 auto;
  gap: 12px;
}

body.studio-wizard-enabled .studio-scenario-card {
  min-height: 148px;
  padding: 20px;
  text-align: left;
  border: 1px solid rgba(158, 223, 255, 0.18);
  border-radius: 22px;
  color: #eaf7ff;
  background: rgba(2, 14, 27, 0.55);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

body.studio-wizard-enabled .studio-scenario-card:hover,
body.studio-wizard-enabled .studio-scenario-card:focus-visible,
body.studio-wizard-enabled .studio-scenario-card.is-active {
  transform: translateY(-3px);
  border-color: var(--pv2-cyan);
  background: linear-gradient(145deg, rgba(20, 115, 153, 0.44), rgba(4, 19, 34, 0.86));
  box-shadow: 0 18px 38px rgba(1, 129, 185, 0.19);
}

body.studio-wizard-enabled .studio-scenario-card__icon { color: var(--pv2-cyan); }
body.studio-wizard-enabled .studio-scenario-card__title { font-size: 17px; }
body.studio-wizard-enabled .studio-scenario-card__copy { color: #a7bdcc; }
body.studio-wizard-enabled .studio-scenario-card--library { display: none; }

body.studio-wizard-enabled #track-form {
  display: block !important;
  width: 100%;
  margin: 0;
}

body.studio-wizard-enabled #track-form > .field-group {
  display: none;
}

body[data-studio-step="story"] #track-form > .studio-group-start,
body[data-studio-step="story"] #track-form > .studio-group-story,
body[data-studio-step="sound"] #track-form > .studio-group-start,
body[data-studio-step="sound"] #track-form > .studio-group-sound,
body[data-studio-step="voice"] #track-form > .studio-voice-step,
body[data-studio-step="advanced"] #track-form > .studio-group-story {
  display: block;
}

body.studio-wizard-enabled .field-group__header {
  max-width: 680px;
  margin: 0 auto 28px;
  text-align: center;
}

body.studio-wizard-enabled .field-group__header p { font-size: 15px; }
body.studio-wizard-enabled .field { max-width: 720px; margin: 0 auto 18px; }
body.studio-wizard-enabled label { color: #d7edf8; font-weight: 600; }

body.studio-wizard-enabled input,
body.studio-wizard-enabled textarea,
body.studio-wizard-enabled select {
  border-color: rgba(143, 214, 246, 0.2) !important;
  border-radius: 16px !important;
  background: rgba(2, 11, 22, 0.54) !important;
  color: #eff9ff !important;
  box-shadow: none !important;
}

body.studio-wizard-enabled textarea#lyrics_or_idea { min-height: 190px; }
body.studio-wizard-enabled input:focus,
body.studio-wizard-enabled textarea:focus,
body.studio-wizard-enabled select:focus { border-color: var(--pv2-cyan) !important; }

body.studio-wizard-enabled .chips { gap: 9px; }
body.studio-wizard-enabled .chip {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border-color: rgba(135, 211, 247, 0.18);
  background: rgba(8, 30, 48, 0.76);
  color: #c5d9e6;
}

body.studio-wizard-enabled .chip.is-active,
body.studio-wizard-enabled .chip:hover {
  border-color: rgba(35, 200, 255, 0.82);
  color: #f4fbff;
  background: rgba(20, 145, 195, 0.28);
  box-shadow: 0 0 22px rgba(35, 200, 255, 0.14);
}

/* Existing mood buttons become the image-led choices from the reference pack. */
body.studio-wizard-enabled #mood + .chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  margin: 18px auto 0;
  gap: 12px;
}

body.studio-wizard-enabled #mood + .chips .chip {
  position: relative;
  display: flex;
  align-items: end;
  min-height: 178px;
  padding: 14px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  border-color: rgba(177, 225, 244, 0.24);
  color: #f4fbff;
  text-align: left;
  text-shadow: 0 2px 10px #000;
  background-position: center;
  background-size: cover;
}

body.studio-wizard-enabled #mood + .chips .chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 10, 20, 0.95), rgba(1, 10, 20, 0.06) 75%);
}

body.studio-wizard-enabled #mood + .chips .chip:nth-child(1) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-nostalgic.jpg"); }
body.studio-wizard-enabled #mood + .chips .chip:nth-child(2) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-gentle.jpg"); }
body.studio-wizard-enabled #mood + .chips .chip:nth-child(3) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-inspiring.jpg"); }
body.studio-wizard-enabled #mood + .chips .chip:nth-child(4) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-cinematic.jpg"); }
body.studio-wizard-enabled #mood + .chips .chip:nth-child(5) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-strong.jpg"); }
body.studio-wizard-enabled #mood + .chips .chip:nth-child(6) { background-image: url("/miniapp/static/assets/studio/pulse-redesign/02_mood_cards/mood-warm.jpg"); }

body.studio-wizard-enabled #mood + .chips .chip.is-active {
  transform: translateY(-3px);
  outline: 2px solid var(--pv2-cyan);
  outline-offset: 2px;
  box-shadow: 0 18px 34px rgba(4, 185, 252, 0.23);
}

body.studio-wizard-enabled .studio-voice-step {
  background:
    linear-gradient(90deg, rgba(4, 12, 20, 0.82), rgba(4, 12, 20, 0.48)),
    url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/bg-studio-warm-dark.jpg") center / cover !important;
}

body.studio-wizard-enabled .studio-review-panel,
body.studio-wizard-enabled .studio-result-panel { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.studio-wizard-enabled .studio-review-card { min-height: min(550px, calc(100svh - 230px)); padding: clamp(28px, 5vw, 64px); border: 1px solid var(--pv2-line); border-radius: clamp(24px, 3vw, 38px); background: var(--pv2-panel); }
body.studio-wizard-enabled .studio-review-list { margin-top: 34px; }
body.studio-wizard-enabled .studio-review-list__row { padding: 15px 0; border-bottom-color: rgba(154, 214, 240, 0.12); }
body.studio-wizard-enabled .studio-review-list dt { color: var(--pv2-muted); }
body.studio-wizard-enabled .studio-review-list dd { color: #f1f9fd; }

body.studio-wizard-enabled .studio-wizard-actions {
  position: fixed;
  z-index: 22;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(730px, calc(100% - 24px));
  margin: 0;
  padding: 8px;
  transform: translateX(-50%);
  border-radius: 22px;
  border-color: rgba(132, 219, 255, 0.18);
  background: rgba(3, 14, 25, 0.86);
  box-shadow: 0 22px 66px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(22px);
}

body.studio-wizard-enabled .studio-wizard-actions__primary {
  min-width: 170px;
  border: 1px solid rgba(135, 232, 255, 0.68) !important;
  color: white !important;
  background: linear-gradient(135deg, #21c4ff, #0878b2) !important;
  box-shadow: 0 10px 26px rgba(8, 154, 218, 0.28) !important;
}

body.studio-wizard-enabled .studio-wizard-actions__primary:disabled { opacity: 0.45; box-shadow: none !important; }

body.studio-wizard-enabled .studio-utility-panel,
body.studio-wizard-enabled #tracks-view,
body.studio-wizard-enabled #billing-panel,
body.studio-wizard-enabled #status-box { border-radius: 30px !important; border-color: var(--pv2-line) !important; background: var(--pv2-panel) !important; }

/* Web authentication is its own calm scene, while retaining the live OTP controls. */
@media (min-width: 701px) {
  body.studio-wizard-enabled .page--web:has(#auth-panel:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(520px, 1.55fr);
    align-items: stretch;
    gap: 28px;
    min-height: 100svh;
    padding: 28px !important;
  }

  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) {
    position: sticky;
    top: 28px;
    display: flex !important;
    min-height: calc(100svh - 56px) !important;
    height: auto !important;
    padding: 44px 30px !important;
    overflow: hidden;
    border: 1px solid var(--pv2-line) !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(2, 10, 20, 0.2), rgba(2, 10, 20, 0.82)),
      url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/hero-baikal-aurora-desktop.jpg") center / cover !important;
  }

  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .hero__brand { align-self: center; }
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .hero__brand-secondary { font-size: clamp(38px, 3.5vw, 62px) !important; }
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .hero__title { font-size: clamp(29px, 2.4vw, 42px) !important; }
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .hero__subtitle { max-width: 330px; font-size: 15px !important; }
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .hero__links,
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .top-tabs,
  body.studio-wizard-enabled .page--web .hero.card:has(~ #auth-panel:not(.hidden)) .studio-hero-actions { display: none !important; }

  body.studio-wizard-enabled .page--web #auth-panel:not(.hidden) {
    display: grid !important;
    align-content: center;
    width: min(100%, 860px);
    min-height: calc(100svh - 56px);
    margin: 0 !important;
    padding: clamp(34px, 5vw, 78px) !important;
    border: 1px solid var(--pv2-line) !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(31, 190, 247, 0.16), transparent 23rem),
      rgba(5, 16, 28, 0.88) !important;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35) !important;
  }

  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__copy { max-width: 600px; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__copy h2 { font-family: var(--pv2-display); font-size: clamp(40px, 4.3vw, 66px); font-weight: 400; letter-spacing: -0.04em; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__lead { max-width: 570px; color: var(--pv2-copy); font-size: 17px; line-height: 1.6; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__email { max-width: 680px; margin-top: 32px; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 12px; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__fallback { max-width: 680px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(151, 224, 255, 0.14); }
}

@keyframes pv2-scene-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.987); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 700px) {
  body.studio-wizard-enabled:not(.studio-workspace-open) .hero.card {
    background-image:
      linear-gradient(90deg, rgba(2, 9, 19, 0.48), rgba(2, 9, 19, 0.08) 70%, rgba(2, 9, 19, 0.44)),
      url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp") !important;
  }

  body.studio-wizard-enabled.studio-workspace-open #section-create,
  body.studio-wizard-enabled.studio-workspace-open #create-view {
    min-height: 100svh;
    padding: 72px 12px 104px !important;
  }

  body.studio-wizard-enabled .studio-stepper { gap: 5px; margin-bottom: 18px; }
  body.studio-wizard-enabled .studio-stepper__item { min-width: 30px; }
  body.studio-wizard-enabled .studio-stepper__index { width: 30px; height: 30px; font-size: 11px; }
  body.studio-wizard-enabled .studio-stepper::before { top: 15px; left: 7%; right: 7%; }
  body.studio-wizard-enabled .studio-start-panel,
  body.studio-wizard-enabled #track-form > .field-group,
  body.studio-wizard-enabled .studio-voice-step { min-height: calc(100svh - 196px); padding: 28px 20px; border-radius: 26px !important; }
  body.studio-wizard-enabled .studio-scenario-grid { grid-template-columns: 1fr; }
  body.studio-wizard-enabled .studio-scenario-card { min-height: 104px; padding: 16px; }
  body.studio-wizard-enabled .studio-start-panel__head h2,
  body.studio-wizard-enabled .field-group__header h3,
  body.studio-wizard-enabled .studio-review-card h2 { font-size: clamp(30px, 10vw, 43px); }
  body.studio-wizard-enabled .studio-start-panel__head p,
  body.studio-wizard-enabled .field-group__header p { font-size: 14px; }
  body.studio-wizard-enabled .studio-wizard-actions { grid-template-columns: auto 1fr; gap: 7px; }
  body.studio-wizard-enabled .studio-wizard-actions__primary { grid-column: 2; min-width: 0; }
  body.studio-wizard-enabled .studio-wizard-actions__clear,
  body.studio-wizard-enabled .studio-wizard-actions__ghost { display: none !important; }
  body.studio-wizard-enabled #mood + .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  body.studio-wizard-enabled #mood + .chips .chip { min-height: 132px; padding: 11px; font-size: 13px; }
  body.studio-wizard-enabled .page--web #auth-panel:not(.hidden) { margin: 16px 12px 100px !important; padding: 28px 20px !important; border-radius: 26px !important; }
  body.studio-wizard-enabled .page--web #auth-panel .auth-gate__copy h2 { font-family: var(--pv2-display); font-size: 42px; font-weight: 400; letter-spacing: -0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-wizard-enabled * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Web sign-in scene: one composition, no modal over the landing page. */
@media (min-width: 821px) {
  body.is-auth-required.studio-wizard-enabled {
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #020913 !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020913 !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web > :not(.hero):not(#auth-panel):not(#notice),
  body.is-auth-required.studio-wizard-enabled .studio-mobile-nav-wrap,
  body.is-auth-required.studio-wizard-enabled .studio-impulse-badge {
    display: none !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web > #notice.hidden { display: none !important; }

  body.is-auth-required.studio-wizard-enabled .page--web .hero.card {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: end !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    height: 100svh !important;
    margin: 0 !important;
    padding: clamp(38px, 5vw, 78px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(1, 8, 16, 0.24), rgba(1, 8, 16, 0.08) 58%, rgba(1, 8, 16, 0.78)),
      linear-gradient(0deg, rgba(1, 8, 16, 0.9), transparent 52%),
      url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/hero-baikal-aurora-desktop.jpg") center / cover no-repeat !important;
    box-shadow: none !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__site-link {
    position: absolute !important;
    top: 34px !important;
    left: clamp(38px, 5vw, 78px) !important;
    max-width: 240px !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__logo {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__brand {
    display: block !important;
    width: min(650px, 88%) !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__copy {
    display: block !important;
    width: 100% !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__title {
    max-width: 360px !important;
    margin: 0 0 20px !important;
    color: #eaf8ff !important;
    font-family: var(--pv2-ui) !important;
    font-size: clamp(34px, 3vw, 54px) !important;
    font-weight: 760 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__brand-secondary {
    max-width: 640px !important;
    margin: 0 !important;
    color: #f5f9fb !important;
    font-family: var(--pv2-display) !important;
    font-size: clamp(52px, 5.2vw, 88px) !important;
    font-weight: 400 !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__subtitle {
    max-width: 510px !important;
    margin: 22px 0 0 !important;
    color: rgba(223, 238, 247, 0.82) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web .hero__eyebrow,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__mode-chip,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__links,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__signal,
  body.is-auth-required.studio-wizard-enabled .page--web .top-tabs,
  body.is-auth-required.studio-wizard-enabled .page--web .studio-side-nav,
  body.is-auth-required.studio-wizard-enabled .page--web .studio-hero-actions {
    display: none !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(42px, 5vw, 86px) clamp(42px, 5vw, 82px) !important;
    overflow: auto !important;
    border: 0 !important;
    border-left: 1px solid rgba(140, 219, 255, 0.16) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 80% 12%, rgba(24, 181, 239, 0.14), transparent 25rem),
      linear-gradient(145deg, rgba(4, 19, 33, 0.98), rgba(2, 10, 19, 0.99)) !important;
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.32) !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__copy,
  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__email,
  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel > #login-status,
  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__fallback {
    width: min(100%, 570px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__copy h2 {
    margin: 5px 0 12px !important;
    color: #f6fbff !important;
    font-family: var(--pv2-display) !important;
    font-size: clamp(46px, 4.2vw, 68px) !important;
    font-weight: 400 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__lead {
    max-width: 520px !important;
    margin: 0 !important;
    color: #afc2d0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__email {
    margin-top: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel input {
    min-height: 58px !important;
    width: 100% !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel button,
  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__link {
    min-height: 52px !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel > #login-status {
    margin-top: 18px !important;
    color: #8499aa !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel .auth-gate__fallback {
    margin-top: 22px !important;
    padding: 20px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(144, 214, 243, 0.13) !important;
    background: transparent !important;
  }
}

@media (max-width: 820px) {
  body.is-auth-required.studio-wizard-enabled { overflow: auto !important; }
  body.is-auth-required.studio-wizard-enabled .page--web { display: block !important; min-height: 100svh !important; height: auto !important; padding: 0 !important; }
  body.is-auth-required.studio-wizard-enabled .page--web > :not(.hero):not(#auth-panel):not(#notice) { display: none !important; }
  body.is-auth-required.studio-wizard-enabled .page--web .hero.card {
    display: flex !important;
    min-height: 42svh !important;
    height: 42svh !important;
    padding: 86px 22px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(0deg, rgba(2, 10, 19, 0.86), rgba(2, 10, 19, 0.1)),
      url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp") center / cover !important;
  }
  body.is-auth-required.studio-wizard-enabled .page--web .hero__brand-secondary { font-size: clamp(40px, 12vw, 58px) !important; }
  body.is-auth-required.studio-wizard-enabled .page--web .hero__subtitle,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__mode-chip,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__links,
  body.is-auth-required.studio-wizard-enabled .page--web .hero__signal,
  body.is-auth-required.studio-wizard-enabled .page--web .studio-hero-actions { display: none !important; }
  body.is-auth-required.studio-wizard-enabled .page--web #auth-panel {
    display: block !important;
    min-height: 58svh !important;
    margin: 0 !important;
    padding: 34px 20px 96px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #04111e !important;
  }
}


/* source: pulseveter_v2_exact.css */
:root {
  --pvx-bg: #020a13;
  --pvx-cyan: #22c8ff;
  --pvx-cyan-soft: #8de4ff;
  --pvx-gold: #e6b958;
  --pvx-line: rgba(139, 218, 251, 0.18);
  --pvx-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pvx-ui: "Aptos", "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

/* Tariff cards keep a readable surface over the photographic scene. */
body.pv2-exact .pv3-reference.pv3-force-utility #billing-panel .billing-card,
body.pv2-exact .pv3-reference.pv3-force-utility #studio-max-billing-panel .studio-max-tariff {
  border-color: rgba(104, 214, 247, .34) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(44, 191, 235, .18), transparent 38%),
    linear-gradient(145deg, rgba(4, 31, 47, .96), rgba(1, 11, 21, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -40px 70px rgba(0, 5, 12, .22),
    0 18px 48px rgba(0, 4, 11, .3) !important;
}

body.pv2-exact .pv3-reference.pv3-force-utility #billing-panel .billing-card.is-recommended,
body.pv2-exact .pv3-reference.pv3-force-utility #studio-max-billing-panel .studio-max-tariff.is-recommended {
  border-color: rgba(232, 190, 91, .58) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(224, 179, 69, .2), transparent 40%),
    linear-gradient(145deg, rgba(36, 31, 22, .96), rgba(2, 13, 22, .95)) !important;
}

.pv-mobile-editor-source {
  visibility: hidden !important;
}

body.is-editor-overlay-active {
  overflow: hidden !important;
}

body.is-editor-overlay-active > :not(.pv-mobile-editor-overlay) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.pv-mobile-editor-overlay {
  position: fixed;
  z-index: 2147483000;
  top: var(--pv-keyboard-viewport-top, 0px);
  right: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: var(--pv-keyboard-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  color: #edf9ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(26, 159, 202, .14), transparent 42%),
    #020b14;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pv-mobile-editor-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid rgba(103, 211, 244, .18);
  background: rgba(2, 14, 25, .96);
}

.pv-mobile-editor-overlay__head strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(224, 242, 249, .82);
  font: 600 13px/1.3 "Manrope", "Segoe UI Variable", sans-serif;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-mobile-editor-overlay__done {
  min-width: 82px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(91, 220, 252, .48);
  border-radius: 999px;
  color: #e9fbff;
  background: linear-gradient(135deg, rgba(28, 161, 205, .88), rgba(9, 89, 132, .9));
  font: 700 13px/1 "Manrope", "Segoe UI Variable", sans-serif;
}

.pv-mobile-editor-overlay__body {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow: hidden;
}

.pv-mobile-editor-overlay__field {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(99, 220, 251, .34);
  border-radius: 18px;
  outline: 0;
  color: #f2fbff;
  caret-color: #5edcff;
  background: rgba(0, 8, 16, .78);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 0 0 3px rgba(35, 193, 235, .06);
  font: 400 18px/1.62 "Literata", Georgia, serif;
}

input.pv-mobile-editor-overlay__field {
  align-self: flex-start;
  min-height: 58px;
  font-family: "Manrope", "Segoe UI Variable", sans-serif;
  line-height: 1.35;
}

textarea.pv-mobile-editor-overlay__field {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  resize: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.pv2-exact {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #edf9ff;
  background: var(--pvx-bg) !important;
  font-family: var(--pvx-ui);
}

body.pv2-exact > .page,
body.pv2-exact > .ambient,
body.pv2-exact > #page-top {
  position: fixed !important;
  left: -200vw !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.pv2-exact-shell,
.pv2-exact-shell * { box-sizing: border-box; }

.pv2-exact-shell {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  color: #edf9ff;
  background: var(--pvx-bg);
}

.pv2-screens,
.pv2-screen { width: 100%; height: 100%; }

.pv2-screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: auto;
  animation: pvx-enter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pv2-screen.is-active { display: block; }

.pv2-topbar {
  position: fixed;
  z-index: 30;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.pv2-topbar button,
.pv2-languages { pointer-events: auto; }

.pv2-topbar__menu,
.pv2-help,
.pv2-impulses,
.pv2-languages {
  min-height: 42px;
  border: 1px solid var(--pvx-line);
  color: #d9f2ff;
  background: rgba(2, 11, 21, 0.58);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.pv2-topbar__menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 13px;
}

.pv2-topbar__menu span,
.pv2-topbar__menu span::before,
.pv2-topbar__menu span::after {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--pvx-cyan-soft);
}

.pv2-topbar__menu span { position: relative; }
.pv2-topbar__menu span::before,
.pv2-topbar__menu span::after { content: ""; position: absolute; left: 0; }
.pv2-topbar__menu span::before { top: -5px; }
.pv2-topbar__menu span::after { top: 5px; }
.pv2-topbar__menu strong { font-size: 13px; font-weight: 600; }
.pv2-topbar__tools { display: flex; align-items: center; gap: 8px; }

.pv2-impulses {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 13px;
}

.pv2-impulses span { color: #a9bdc9; font-size: 12px; }
.pv2-impulses strong { color: #ffe3a0; font-size: 14px; }
.pv2-impulses strong { min-width: 2ch; text-align: center; }
.pv2-languages { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; }
.pv2-languages button { width: 39px; height: 32px; border: 0; border-radius: 9px; color: #8ea6b6; background: transparent; font-size: 11px; font-weight: 700; }
.pv2-languages button.is-active { color: #fff; background: rgba(22, 157, 211, 0.3); }
.pv2-help { width: 42px; padding: 0; border-radius: 50%; font-size: 18px; }

.pv2-hero {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 7, 14, 0.08), rgba(0, 7, 14, 0.16) 54%, rgba(0, 7, 14, 0.72)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") center / cover no-repeat;
}

.pv2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(26, 196, 255, 0.11), transparent 25rem);
}

.pv2-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(760px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  padding: 74px 0 58px;
  text-align: center;
}

.pv2-hero__logo { width: clamp(112px, 11vw, 168px); max-height: 130px; margin-bottom: 12px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(22, 196, 255, 0.28)); }
.pv2-hero__eyebrow { margin: 0 0 17px; color: #7ec9e7; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; }
.pv2-hero h1 { margin: 0; color: #f4f8fb; font-family: var(--pvx-serif); font-size: clamp(52px, 5.1vw, 82px); font-weight: 400; line-height: 0.97; letter-spacing: -0.045em; text-shadow: 0 4px 34px rgba(0, 0, 0, 0.36); }
.pv2-hero h1 span { color: #9ee7ff; }
.pv2-hero__lead { margin: 22px 0 0; color: rgba(225, 240, 248, 0.82); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }

.pv2-hero__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 250px;
  min-height: 58px;
  margin-top: 30px;
  padding: 0 26px;
  border: 1px solid #73e5ff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #22c8ff, #087db5);
  box-shadow: 0 0 0 5px rgba(26, 193, 250, 0.1), 0 0 34px rgba(24, 194, 251, 0.48), inset 0 1px rgba(255, 255, 255, 0.35);
}

.pv2-hero__create strong { font-size: 16px; }
.pv2-hero__create span { font-size: 25px; }
.pv2-hero__tracks { margin-top: 17px; padding: 7px 18px; border: 0; color: #b8d2e0; background: transparent; font-size: 14px; }
.pv2-hero__dots { position: absolute; z-index: 2; bottom: 22px; left: 50%; display: flex; gap: 9px; transform: translateX(-50%); }
.pv2-hero__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.38); }
.pv2-hero__dots i:first-child { background: #9deaff; box-shadow: 0 0 12px #35cfff; }

.pv2-drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: min(360px, 88vw);
  height: 100%;
  padding: 28px;
  transform: translateX(-105%);
  transition: transform 300ms ease;
  border-right: 1px solid var(--pvx-line);
  background: rgba(2, 12, 22, 0.95);
  backdrop-filter: blur(24px);
}

.is-menu-open .pv2-drawer { transform: translateX(0); }
.pv2-drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--pvx-line); }
.pv2-drawer__head img { width: 108px; max-height: 72px; object-fit: contain; }
.pv2-drawer__head button { width: 42px; height: 42px; border: 1px solid var(--pvx-line); border-radius: 50%; color: #dff6ff; background: transparent; font-size: 25px; }
.pv2-drawer nav { display: grid; gap: 8px; margin-top: 24px; }
.pv2-drawer nav button { min-height: 52px; padding: 0 18px; border: 1px solid transparent; border-radius: 14px; color: #c8dce8; background: transparent; text-align: left; font-size: 15px; }
.pv2-drawer nav button:hover { border-color: var(--pvx-line); color: #fff; background: rgba(21, 153, 207, 0.14); }
.pv2-drawer-shade { position: fixed; z-index: 45; inset: 0; display: none; border: 0; background: rgba(0, 5, 10, 0.62); }
.is-menu-open .pv2-drawer-shade { display: block; }

.pv2-auth {
  padding: 92px clamp(22px, 6vw, 90px) 42px;
  background:
    linear-gradient(90deg, rgba(1, 9, 17, 0.3), rgba(1, 9, 17, 0.88) 54%),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") center / cover;
}

.pv2-auth.is-active { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr); align-items: center; gap: clamp(36px, 7vw, 110px); }
.pv2-auth__intro { max-width: 520px; }
.pv2-auth__intro img { width: 140px; max-height: 100px; object-fit: contain; }
.pv2-auth__intro p { margin: 20px 0 12px; color: #8fdfff; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.pv2-auth__intro h2 { margin: 0; font-family: var(--pvx-serif); font-size: clamp(44px, 5vw, 76px); font-weight: 400; line-height: 0.98; }
.pv2-auth__mount { width: min(100%, 620px); justify-self: end; }

body.pv2-exact .pv2-auth .auth-gate {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100svh - 140px) !important;
  margin: 0 !important;
  padding: clamp(28px, 4vw, 52px) !important;
  overflow: auto !important;
  border: 1px solid var(--pvx-line) !important;
  border-radius: 28px !important;
  background: rgba(3, 15, 27, 0.76) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(24px);
}

body.pv2-exact .pv2-auth .auth-gate__copy h2 { font-family: var(--pvx-serif) !important; font-size: clamp(38px, 4vw, 58px) !important; font-weight: 400 !important; }
body.pv2-exact .pv2-auth .auth-gate__email { display: block !important; width: 100% !important; margin-top: 24px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.pv2-exact .pv2-auth .field { width: 100% !important; max-width: none !important; }
body.pv2-exact .pv2-auth input { width: 100% !important; }
body.pv2-exact .pv2-auth .auth-gate__actions { grid-template-columns: 1fr !important; }
body.pv2-exact .pv2-auth #local-dev-login { display: none !important; }

.pv2-studio,
.pv2-library,
.pv2-utility {
  padding: 82px clamp(12px, 4vw, 60px) 100px;
  background:
    linear-gradient(rgba(1, 9, 17, 0.72), rgba(1, 9, 17, 0.86)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") center / cover fixed;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 8, 16, .12), rgba(1, 8, 16, .28) 52%, rgba(1, 8, 16, .58)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.pv2-studio__mount,
.pv2-library__mount,
.pv2-utility__mount { width: min(1120px, 100%); margin: 0 auto; }

body.pv2-exact .pv2-studio-root {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact .pv2-studio__mount > .section.card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact .pv2-studio #section-create,
body.pv2-exact .pv2-studio #create-view .section,
body.pv2-exact .pv2-library #tracks-view,
body.pv2-exact .pv2-library #section-tracks { display: block !important; width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.pv2-exact .pv2-studio .section__header,
body.pv2-exact .pv2-studio .section__copy,
body.pv2-exact .pv2-studio .mode-tabs,
body.pv2-exact .pv2-studio .mode-story,
body.pv2-exact .pv2-studio .template-strip { display: none !important; }

.pv2-bottom-nav { display: none; }

@keyframes pvx-enter {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
  .pv2-exact-shell { min-height: 100svh; }
  .pv2-topbar { top: 12px; left: 12px; right: 12px; }
  .pv2-topbar__menu { width: 42px; padding: 0; justify-content: center; border-radius: 12px; }
  .pv2-topbar__menu strong,
  .pv2-impulses span,
  .pv2-help { display: none; }
  .pv2-impulses { min-width: 74px; justify-content: center; padding: 0 9px; }
  .pv2-languages button { width: 31px; }
  .pv2-hero { background-image: linear-gradient(180deg, rgba(0,7,14,.04), rgba(0,7,14,.7)), url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp"); }
  .pv2-hero__content { width: calc(100% - 32px); padding: 80px 0 92px; justify-content: center; }
  .pv2-hero__logo { width: 118px; margin-bottom: 8px; }
  .pv2-hero__eyebrow { margin-bottom: 12px; font-size: 9px; }
  .pv2-hero h1 { font-size: clamp(42px, 12.5vw, 62px); line-height: 0.95; }
  .pv2-hero__lead { margin-top: 17px; font-size: 14px; }
  .pv2-hero__create { min-width: 222px; min-height: 54px; margin-top: 24px; }
  .pv2-hero__tracks { margin-top: 10px; }
  .pv2-hero__dots { bottom: 82px; }
  .pv2-bottom-nav { position: fixed; z-index: 32; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); min-height: 62px; padding: 7px; border: 1px solid var(--pvx-line); border-radius: 19px; background: rgba(2, 12, 22, 0.88); backdrop-filter: blur(22px); }
  .pv2-bottom-nav button { display: grid; place-items: center; gap: 2px; border: 0; color: #9bb4c3; background: transparent; }
  .pv2-bottom-nav span { color: var(--pvx-cyan); font-size: 17px; }
  .pv2-bottom-nav strong { font-size: 9px; font-weight: 600; }
  .pv2-auth { padding: 76px 16px 92px; background-image: linear-gradient(rgba(1,9,17,.44), rgba(1,9,17,.94)), url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp"); }
  .pv2-auth.is-active { display: block; }
  .pv2-auth__intro { display: none; }
  .pv2-auth__mount { width: 100%; }
  body.pv2-exact .pv2-auth .auth-gate { max-height: none !important; padding: 28px 20px !important; border-radius: 24px !important; }
  .pv2-studio, .pv2-library, .pv2-utility { padding: 74px 10px 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv2-exact-shell * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

body.pv2-exact .pv2-auth.is-active #auth-panel,
body.pv2-exact .pv2-auth.is-active #auth-gate {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

body.pv2-exact .pv2-studio.is-active #section-create,
body.pv2-exact .pv2-studio.is-active #create-view,
body.pv2-exact .pv2-studio.is-active #create-view > .section {
  position: relative !important;
  inset: auto !important;
  display: block !important;
}

body.pv2-exact .pv2-studio .studio-stepper {
  width: min(620px, 100%) !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio .studio-stepper {
  display: none !important;
}

body.pv2-exact .pv2-studio .studio-start-panel,
body.pv2-exact .pv2-studio #track-form > .field-group,
body.pv2-exact .pv2-studio .studio-review-panel,
body.pv2-exact .pv2-studio .studio-result-panel {
  width: min(980px, 100%) !important;
  min-height: calc(100svh - 176px) !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: clamp(16px, 2.2vw, 30px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact .pv2-studio .studio-start-panel::before,
body.pv2-exact .pv2-studio .studio-review-panel::before,
body.pv2-exact .pv2-studio .studio-result-panel::before {
  content: none !important;
}

body.pv2-exact .pv2-studio .studio-start-panel__head {
  max-width: 640px !important;
  margin: 0 auto 12px !important;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio .studio-start-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: calc(100svh - 96px) !important;
  padding-block: 74px 42px !important;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio .studio-start-panel__head {
  padding: 0 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio .studio-scenario-grid {
  margin-top: 12px !important;
}

body.pv2-exact[data-studio-step="start"] .pv2-studio .studio-scenario-card {
  border-color: rgba(167, 222, 245, .24) !important;
  background-color: rgba(2, 12, 22, .66) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(14px);
}

body.pv2-exact.pv2-preview[data-studio-step="start"] .pv2-studio .notice,
body.pv2-exact.pv2-preview[data-studio-step="start"] .pv2-studio #notice {
  display: none !important;
}

body.pv2-exact .pv2-studio .studio-start-panel__head h2 {
  font-size: clamp(40px, 3.8vw, 58px) !important;
  line-height: 0.98 !important;
}

body.pv2-exact .pv2-studio .studio-start-panel__head p {
  max-width: 570px !important;
  margin-top: 12px !important;
  font-size: 14px !important;
}

body.pv2-exact .pv2-studio .studio-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  gap: 10px !important;
}

body.pv2-exact .pv2-studio .studio-scenario-card {
  min-height: 86px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background-color: rgba(3, 15, 26, 0.58) !important;
}

body.pv2-exact .pv2-studio .studio-scenario-card__copy {
  display: none !important;
}

body.pv2-exact .pv2-studio .studio-wizard-actions {
  bottom: 14px !important;
}

body.pv2-exact[data-studio-step]:not([data-studio-step="start"]) .pv2-studio .studio-start-panel {
  display: none !important;
}

body.pv2-exact[data-studio-step="story"] .pv2-studio #track-form,
body.pv2-exact[data-studio-step="sound"] .pv2-studio #track-form,
body.pv2-exact[data-studio-step="voice"] .pv2-studio #track-form,
body.pv2-exact[data-studio-step="advanced"] .pv2-studio #track-form {
  display: grid !important;
}

body.pv2-exact[data-studio-step="sound"] .pv2-studio #track-form > .studio-group-start,
body.pv2-exact[data-studio-step="sound"] .pv2-studio #track-form > .studio-group-sound {
  display: block !important;
}

body.pv2-exact[data-studio-step="sound"] .pv2-studio #track-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: min(1080px, 100%) !important;
  margin-inline: auto !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-sound { order: 1; }
body.pv2-exact[data-studio-step="sound"] .studio-group-start { order: 2; }

body.pv2-exact.pv2-preview[data-studio-step="sound"] #status-box {
  display: none !important;
}

body.pv2-exact.pv2-preview .pv2-studio,
body.pv2-exact.pv2-preview .pv2-studio * {
  opacity: 1 !important;
  filter: none !important;
}

body.pv2-exact[data-studio-step="voice"] .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 8, 16, 0.3), rgba(1, 8, 16, 0.78) 58%, rgba(1, 8, 16, 0.88)),
    url("/miniapp/static/assets/studio/generated-v2/voice-recording-studio-v2.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body.pv2-exact[data-studio-step="sound"] .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 8, 16, 0.46), rgba(1, 8, 16, 0.88)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-sound {
  width: min(1080px, 100%) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-sound > .field-group__header {
  margin: 0 auto 24px !important;
  text-align: center !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-start {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-start > .field-group__header,
body.pv2-exact[data-studio-step="sound"] .studio-group-start .field:has(#custom_genre) {
  display: none !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-start .field:has(#genre) > label,
body.pv2-exact[data-studio-step="sound"] .studio-group-start #genre {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-start [data-target="genre"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-start [data-target="genre"] .chip {
  min-height: 36px !important;
  padding: 8px 16px !important;
  border-color: rgba(181, 225, 245, .18) !important;
  border-radius: 999px !important;
  background: rgba(2, 13, 24, .62) !important;
}

body.pv2-exact[data-studio-step="sound"] .studio-group-sound > .field-group__header h3 {
  font-family: var(--pvx-serif) !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body.pv2-exact[data-studio-step="sound"] .sound-panel,
body.pv2-exact[data-studio-step="sound"] .sound-panel__body {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact[data-studio-step="sound"] .sound-panel__summary {
  display: none !important;
}

body.pv2-exact[data-studio-step="sound"] #sound-panel-body {
  display: grid !important;
  gap: 18px !important;
  padding: 0 !important;
}

body.pv2-exact[data-studio-step="sound"] #sound-panel-body > .field:not(:has(> #mood)),
body.pv2-exact[data-studio-step="sound"] #sound-panel-body > .inline-grid,
body.pv2-exact[data-studio-step="sound"] #sound-panel-body > .advanced-panel {
  display: none !important;
}

body.pv2-exact[data-studio-step="sound"] .field:has(> #mood) {
  display: flex !important;
  flex-direction: column !important;
}

body.pv2-exact[data-studio-step="sound"] .field:has(> #mood) > label {
  order: -2;
  align-self: center;
  margin-bottom: 14px !important;
  color: var(--pvx-cyan) !important;
  font-size: 12px !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

body.pv2-exact[data-studio-step="sound"] #mood {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.pv2-exact[data-studio-step="sound"] [data-target="mood"] {
  order: -1;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: clamp(190px, 20vw, 250px) !important;
  padding: 20px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(181, 225, 245, .16) !important;
  border-radius: 18px !important;
  color: #f3fbff !important;
  background-image:
    linear-gradient(180deg, transparent 48%, rgba(1, 8, 16, .86)),
    url("/miniapp/static/assets/studio/generated-v2/mood-cards-strip-v2.webp") !important;
  background-size: 500% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .26) !important;
  font-size: 13px !important;
}

body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(1) { background-position: 0% 50% !important; }
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(2) { background-position: 25% 50% !important; }
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(3) { background-position: 50% 50% !important; }
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(4) { background-position: 75% 50% !important; }
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(5) { background-position: 100% 50% !important; }
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:nth-child(n+6) { display: none !important; }

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips.chips--compact .chip {
  background:
    linear-gradient(180deg, transparent 48%, rgba(1, 8, 16, .86)),
    url("/miniapp/static/assets/studio/generated-v2/mood-cards-strip-v2.webp") no-repeat !important;
  background-size: 500% 100% !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips .chip:nth-child(1) { background-position: 0% 50% !important; }
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips .chip:nth-child(2) { background-position: 25% 50% !important; }
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips .chip:nth-child(3) { background-position: 50% 50% !important; }
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips .chip:nth-child(4) { background-position: 75% 50% !important; }
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell .pv2-studio #mood + .chips .chip:nth-child(5) { background-position: 100% 50% !important; }

body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip:hover,
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip.is-active,
body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip[aria-pressed="true"] {
  border-color: var(--pvx-cyan) !important;
  box-shadow: 0 0 0 1px var(--pvx-cyan), 0 0 34px rgba(35, 197, 255, .3) !important;
  transform: translateY(-4px);
}

body.pv2-exact .cover--empty,
body.pv2-exact .generation-cover--empty,
body.pv2-exact .cover.is-broken {
  color: transparent !important;
  background: url("/miniapp/static/assets/studio/generated-v2/ice-light-cover-v2.webp") center / cover no-repeat !important;
}

@media (max-width: 720px) {
  body.pv2-exact .pv2-studio .studio-start-panel,
  body.pv2-exact .pv2-studio #track-form > .field-group,
  body.pv2-exact .pv2-studio .studio-review-panel,
  body.pv2-exact .pv2-studio .studio-result-panel {
    min-height: calc(100svh - 154px) !important;
    padding: 18px 10px !important;
  }

  body.pv2-exact .pv2-studio .studio-start-panel__head h2 {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  body.pv2-exact .pv2-studio .studio-start-panel__head p {
    display: none !important;
  }

  body.pv2-exact .pv2-studio .studio-scenario-grid {
    grid-template-columns: 1fr !important;
  }

  body.pv2-exact .pv2-studio .studio-scenario-card {
    min-height: 94px !important;
  }

  body.pv2-exact[data-studio-step="sound"] [data-target="mood"] {
    grid-template-columns: repeat(5, minmax(122px, 1fr)) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.pv2-exact[data-studio-step="sound"] [data-target="mood"] .chip {
    min-height: 250px !important;
    scroll-snap-align: center;
  }
}


/* source: pulseveter_v2_reference.css */
:root {
  --pv3-bg: #020914;
  --pv3-panel: rgba(3, 14, 26, .74);
  --pv3-line: rgba(137, 218, 251, .2);
  --pv3-cyan: #2acbff;
  --pv3-cyan-soft: #9be8ff;
  --pv3-gold: #e6bb65;
  --pv3-serif: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --pv3-ui: "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

body.pv3-reference-body {
  background: var(--pv3-bg) !important;
  color: #eef9ff;
}

.pv3-reference,
.pv3-reference * { box-sizing: border-box; }

.pv3-reference {
  background: var(--pv3-bg);
  font-family: var(--pv3-ui);
}

.pv3-reference .pv2-topbar {
  top: 18px;
  left: 24px;
  right: 24px;
}

.pv3-reference .pv2-topbar__menu,
.pv3-reference .pv2-help,
.pv3-reference .pv2-impulses,
.pv3-reference .pv2-languages {
  min-height: 38px;
  border-color: var(--pv3-line);
  border-radius: 11px;
  background: rgba(1, 9, 18, .62);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.pv3-reference .pv2-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 7, 14, .02), rgba(0, 7, 14, .08) 58%, rgba(0, 7, 14, .62)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp");
}

.pv3-reference .pv2-hero__content {
  width: min(720px, calc(100% - 32px));
  padding-top: 58px;
}

.pv3-reference .pv2-hero__logo {
  width: clamp(110px, 9vw, 148px);
  margin-bottom: 14px;
}

.pv3-reference .pv2-hero h1 {
  font-family: var(--pv3-serif);
  font-size: clamp(50px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.04em;
}

.pv3-reference .pv2-hero__create {
  min-width: 244px;
  min-height: 54px;
  border-color: #8ae8ff;
  background: linear-gradient(180deg, #40d7ff, #0b92d4);
  box-shadow: 0 0 0 4px rgba(35, 203, 255, .1), 0 0 32px rgba(35, 203, 255, .4);
}

.pv3-reference .pv2-studio,
.pv3-reference .pv2-library,
.pv3-reference .pv2-utility {
  padding: 64px 24px 34px;
  overflow: auto;
  background-attachment: scroll !important;
}

.pv3-reference.pv3-force-studio .pv2-auth,
.pv3-reference.pv3-force-studio .pv2-hero,
.pv3-reference.pv3-force-studio .pv2-library,
.pv3-reference.pv3-force-studio .pv2-utility {
  display: none !important;
}

.pv3-reference.pv3-force-studio .pv2-studio {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pv3-reference .pv2-studio__mount,
.pv3-reference .pv2-library__mount,
.pv3-reference .pv2-utility__mount {
  width: min(1180px, 100%);
  min-height: 100%;
}

.pv3-reference .pv3-scene-caption {
  position: fixed;
  z-index: 15;
  top: 24px;
  left: 50%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.pv3-reference .pv3-scene-caption span {
  color: var(--pv3-cyan);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pv3-reference .pv3-scene-caption strong {
  color: rgba(232, 247, 255, .76);
  font-size: 11px;
  font-weight: 500;
}

.pv3-reference .pv2-studio-root,
.pv3-reference .pv2-studio__mount > .section.card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

.pv3-reference .studio-stepper {
  position: fixed !important;
  z-index: 14;
  left: 50% !important;
  bottom: 22px !important;
  top: auto !important;
  display: flex !important;
  width: min(520px, calc(100% - 210px)) !important;
  gap: 0 !important;
  margin: 0 !important;
  transform: translateX(-50%);
}

.pv3-reference .studio-stepper::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, rgba(42,203,255,.1), rgba(42,203,255,.8), rgba(42,203,255,.1));
}

.pv3-reference .studio-stepper__item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid !important;
  justify-items: center;
  gap: 5px;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pv3-reference .studio-stepper__index {
  width: 29px !important;
  height: 29px !important;
  border-color: rgba(156, 219, 244, .28) !important;
  background: #04111f !important;
}

.pv3-reference .studio-stepper__item.is-active .studio-stepper__index {
  border-color: #73dfff !important;
  background: #0a9fd8 !important;
  box-shadow: 0 0 0 5px rgba(34, 199, 255, .1), 0 0 24px rgba(34, 199, 255, .55) !important;
}

.pv3-reference .studio-stepper__text {
  color: rgba(226, 242, 250, .68);
  font-size: 9px !important;
  font-weight: 500 !important;
}

body[data-studio-step="start"] .pv3-reference .studio-stepper { display: none !important; }
body[data-studio-step="start"] .pv3-reference .studio-wizard-actions { display: none !important; }

.pv3-reference .studio-start-panel,
.pv3-reference #track-form > .field-group,
.pv3-reference .studio-review-panel,
.pv3-reference .studio-result-panel {
  width: min(1040px, 100%) !important;
  min-height: calc(100svh - 98px) !important;
  margin: 0 auto !important;
  padding: 32px 24px 76px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pv3-reference .studio-wizard-actions {
  position: fixed !important;
  z-index: 18;
  right: 24px !important;
  bottom: 18px !important;
  left: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  width: auto !important;
  transform: none !important;
}

.pv3-reference .studio-wizard-actions button {
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  pointer-events: auto;
  flex: 0 0 auto !important;
  width: auto !important;
}

.pv3-reference .studio-wizard-actions__primary {
  min-width: 190px;
  border: 1px solid #6adfff !important;
  color: white !important;
  background: linear-gradient(180deg, #24c8fa, #087dae) !important;
  box-shadow: 0 0 24px rgba(35, 200, 250, .3) !important;
}

.pv3-reference .studio-wizard-actions__clear,
.pv3-reference .studio-wizard-actions__ghost { display: none !important; }

/* Start: a compact scenario choice over the poetic room. */
body[data-studio-step="start"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 7, 14, .08), rgba(1, 7, 14, .34) 56%, rgba(1, 7, 14, .68)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

body[data-studio-step="start"] .pv3-reference .studio-start-panel {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px !important;
}

.pv3-reference .studio-start-panel__head {
  max-width: 680px !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
}

.pv3-reference .studio-start-panel__head h2,
.pv3-reference .field-group__header h3,
.pv3-reference .studio-review-card h2 {
  margin: 0;
  color: #f4f8fb;
  font-family: var(--pv3-serif) !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em;
}

.pv3-reference .studio-start-panel__head p,
.pv3-reference .field-group__header p {
  color: rgba(223, 240, 248, .72) !important;
  font-size: 13px !important;
}

.pv3-reference .studio-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(720px, 100%) !important;
  gap: 10px !important;
  margin: 0 auto !important;
}

.pv3-reference .studio-scenario-card {
  min-height: 88px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(156, 220, 245, .22) !important;
  border-radius: 18px !important;
  background-color: rgba(2, 13, 24, .7) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px);
}

.pv3-reference .studio-scenario-card__copy,
.pv3-reference .studio-scenario-card--library { display: none !important; }
.pv3-reference .studio-scenario-card__title { font-size: 16px !important; }

/* Story: the poetic room from the reference, one main textarea and topic chips. */
body[data-studio-step="story"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 8, 16, .2), rgba(1, 8, 16, .58)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

body[data-studio-step="story"] .pv3-reference #track-form {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  width: min(760px, 100%) !important;
  min-height: calc(100svh - 108px);
  margin: 0 auto !important;
  padding: 46px 0 90px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.pv2-exact[data-studio-step="story"] .pv3-reference .pv2-studio #track-form {
  display: flex !important;
  grid-template-columns: 1fr !important;
}

body[data-studio-step="story"] .pv3-reference #track-form > .studio-group-start {
  order: 1;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

body[data-studio-step="story"] .pv3-reference #track-form > .studio-group-story {
  display: none !important;
}

body.pv3-showcase[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#lyrics_or_idea),
body.pv3-showcase[data-studio-step="story"] .pv3-reference .studio-group-start #lyrics_or_idea {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: none !important;
}

body[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#title),
body[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#genre),
body[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#custom_genre),
body[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#custom_topic),
body[data-studio-step="story"] .pv3-reference .studio-group-start .field:has(#topic),
body[data-studio-step="story"] .pv3-reference .studio-group-start > *:not(.field-group__header):not(:has(#lyrics_or_idea)),
body[data-studio-step="story"] .pv3-reference .studio-group-start .field:not(:has(#lyrics_or_idea)) {
  display: none !important;
}

body[data-studio-step="story"] .pv3-reference .studio-group-story,
body[data-studio-step="story"] .pv3-reference .studio-group-start {
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-studio-step="story"] .pv3-reference .studio-group-start .field-group__header {
  margin: 0 auto 22px;
  text-align: center;
}

body[data-studio-step="story"] .pv3-reference .studio-group-start .field-group__header h3,
body[data-studio-step="story"] .pv3-reference .studio-group-start .field-group__header p {
  font-size: 0 !important;
}

body[data-studio-step="story"] .pv3-reference .studio-group-start .field-group__header h3::after {
  content: attr(data-pv3-title);
  font-size: clamp(38px, 4vw, 58px);
}

body[data-studio-step="story"] .pv3-reference .studio-group-start .field-group__header p::after {
  content: attr(data-pv3-lead);
  color: var(--pv3-cyan);
  font-size: 13px;
}

body[data-studio-step="story"] .pv3-reference .studio-stepper,
body[data-studio-step="sound"] .pv3-reference .studio-stepper,
body[data-studio-step="result"] .pv3-reference .studio-stepper {
  display: none !important;
}

body[data-studio-step="story"] .pv3-reference #lyrics-or-idea-label { display: none !important; }

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea {
  width: 100% !important;
  min-height: 190px !important;
  max-height: 32vh !important;
  padding: 22px !important;
  border: 1px solid rgba(173, 222, 242, .3) !important;
  border-radius: 16px !important;
  color: white !important;
  background: rgba(5, 16, 29, .68) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(15px);
}

body[data-studio-step="story"] .pv3-reference #lyrics-length-hint {
  margin: 8px 0 0 !important;
  color: rgba(213, 232, 241, .5) !important;
  font-size: 10px !important;
}

body[data-studio-step="story"] .pv3-reference .field:has(#topic) {
  margin-top: 16px;
}

body[data-studio-step="story"] .pv3-reference .field:has(#topic) > label,
body[data-studio-step="story"] .pv3-reference #topic {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

body[data-studio-step="story"] .pv3-reference [data-target="topic"] {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

body[data-studio-step="story"] .pv3-reference [data-target="topic"] .chip {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(2, 13, 24, .72) !important;
}

/* Sound: five reference-like visual cards. */
body[data-studio-step="sound"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 8, 16, .34), rgba(1, 8, 16, .78)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") !important;
}

html body.pv2-exact[data-studio-step="sound"] .pv3-reference .pv2-studio #track-form {
  min-height: calc(100svh - 108px) !important;
  gap: 0 !important;
}

body[data-studio-step="sound"] .pv3-reference #track-form > .studio-group-start {
  display: none !important;
}

body[data-studio-step="sound"] .pv3-reference #track-form > .studio-group-sound {
  min-height: 0 !important;
  height: auto !important;
}

/* Voice: microphone on the left, controls on the right. */
body[data-studio-step="voice"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 8, 16, .05), rgba(1, 8, 16, .48) 48%, rgba(1, 8, 16, .86)),
    url("/miniapp/static/assets/studio/generated-v2/voice-recording-studio-v2.webp") !important;
  background-position: left center !important;
  background-size: cover !important;
}

body[data-studio-step="voice"] .pv3-reference #track-form {
  display: flex !important;
  justify-content: flex-end;
  min-height: calc(100svh - 100px);
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
  width: min(570px, 52%) !important;
  min-height: auto !important;
  align-self: center;
  margin: 0 2vw 0 auto !important;
  padding: 26px !important;
  border: 1px solid rgba(161, 220, 243, .18) !important;
  border-radius: 24px !important;
  background: rgba(2, 12, 22, .68) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px);
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step::before { content: none !important; }
body[data-studio-step="voice"] .pv3-reference .field-group__header h3 { font-size: clamp(36px, 4vw, 54px) !important; }

body[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header h3,
body[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header p {
  font-size: 0 !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header h3::after {
  content: attr(data-pv3-title);
  font-size: clamp(36px, 4vw, 54px);
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header p::after {
  content: attr(data-pv3-lead);
  color: rgba(223, 240, 248, .72);
  font-size: 13px;
}

.pv3-reference .studio-voice-mode {
  padding: 4px !important;
  border: 1px solid var(--pv3-line) !important;
  border-radius: 16px !important;
  background: rgba(1, 9, 18, .6) !important;
}

.pv3-reference .studio-voice-mode .chip {
  min-height: 44px !important;
  border-radius: 13px !important;
  background: transparent !important;
}

.pv3-reference .studio-voice-mode .chip.is-active {
  color: white !important;
  border-color: rgba(77, 210, 255, .55) !important;
  background: linear-gradient(180deg, rgba(31, 185, 236, .68), rgba(10, 100, 143, .68)) !important;
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-panel > label,
body[data-studio-step="voice"] .pv3-reference #custom-voice-panel > .inline-grid,
body[data-studio-step="voice"] .pv3-reference #custom-voice-panel > .muted {
  display: none !important;
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-panel::before {
  content: "";
  display: block;
  width: 100%;
  height: 82px;
  margin: 4px 0 12px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, #27c9ff 6px 8px, transparent 8px 12px);
  filter: drop-shadow(0 0 8px rgba(39, 201, 255, .72));
  mask: radial-gradient(ellipse at center, #000 0 42%, transparent 74%);
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-panel > .actions-row {
  justify-content: center !important;
}

body[data-studio-step="voice"] .pv3-reference #record-custom-voice {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  overflow: hidden;
  border-color: #32cfff !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: rgba(5, 20, 32, .76) !important;
  box-shadow: 0 0 0 5px rgba(36, 201, 255, .08), 0 0 28px rgba(36, 201, 255, .25) !important;
}

body[data-studio-step="voice"] .pv3-reference #record-custom-voice::after {
  content: "■";
  color: #e8fbff;
  font-size: 18px;
}

body[data-studio-step="voice"] .pv3-reference #upload-custom-voice {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-card {
  gap: 7px !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-check,
body[data-studio-step="voice"] .pv3-reference .voice-consent-card p {
  font-size: 9px !important;
  line-height: 1.25 !important;
}

/* Fine tuning and review are compact, never a long page. */
body[data-studio-step="advanced"] .pv3-reference .pv2-studio,
body[data-studio-step="review"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 8, 16, .48), rgba(1, 8, 16, .86)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

body[data-studio-step="advanced"] .pv3-reference #track-form {
  width: min(820px, 100%) !important;
  margin: 0 auto !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
  max-height: calc(100svh - 230px);
  overflow: auto;
  border: 1px solid var(--pv3-line) !important;
  border-radius: 22px !important;
  background: rgba(2, 12, 22, .68) !important;
  backdrop-filter: blur(18px);
}

body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header h3,
body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header p {
  font-size: 0 !important;
}

body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header h3::after {
  content: attr(data-pv3-title);
  font-size: clamp(38px, 4vw, 58px);
}

body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header p::after {
  content: attr(data-pv3-lead);
  color: rgba(223, 240, 248, .72);
  font-size: 13px;
}

body[data-studio-step="review"] .pv3-reference .studio-review-panel {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.pv3-reference .studio-review-card {
  width: min(760px, 100%);
  max-height: calc(100svh - 180px);
  overflow: auto;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

/* Result: album/release screen from panel 3. */
body[data-studio-step="result"] .pv3-reference .pv2-studio {
  background: #020914 !important;
}

body[data-studio-step="result"] .pv3-reference .studio-result-panel {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.pv3-showcase[data-studio-step="result"] .pv3-reference .studio-review-card--result { display: none !important; }

.pv3-reference .pv3-demo-release {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(300px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  width: min(980px, 100%);
  align-items: center;
}

.pv3-demo-release__cover {
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  border: 1px solid rgba(116, 217, 255, .35);
  border-radius: 16px;
  background: url("/miniapp/static/assets/studio/generated-v2/ice-light-cover-v2.webp") center / cover;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
}

.pv3-demo-release__cover span {
  color: #f4d9a3;
  font-family: var(--pv3-serif);
  font-size: clamp(34px, 4vw, 56px);
  line-height: .9;
}

.pv3-demo-release__body > p { color: var(--pv3-cyan); font-size: 10px; letter-spacing: .18em; }
.pv3-demo-release__body h2 { margin: 8px 0 20px; font-family: var(--pv3-serif); font-size: clamp(44px, 5vw, 68px); font-weight: 400; }
.pv3-demo-release__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pv3-demo-release__tags span { padding: 7px 12px; border: 1px solid var(--pv3-line); border-radius: 999px; color: #a9dff4; font-size: 12px; }
.pv3-demo-player { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; margin: 22px 0; padding: 12px; border: 1px solid var(--pv3-line); border-radius: 16px; background: rgba(4, 18, 31, .76); }
.pv3-demo-player button { width: 40px; height: 40px; border: 1px solid var(--pv3-cyan); border-radius: 50%; color: white; background: transparent; }
.pv3-demo-player i { height: 24px; background: repeating-linear-gradient(90deg, var(--pv3-cyan) 0 1px, transparent 1px 5px); mask: linear-gradient(0deg, transparent, #000 50%, transparent); }
.pv3-demo-player time { color: #91aaba; font-size: 11px; }
.pv3-demo-release__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv3-demo-release__choices button { min-height: 72px; border: 1px solid var(--pv3-line); border-radius: 16px; color: #eaf8ff; background: rgba(3, 15, 27, .7); }

/* Tracks and utility screens share the same restrained visual language. */
.pv3-reference .pv2-library {
  background-image: linear-gradient(rgba(1,8,16,.6), rgba(1,8,16,.88)), url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") !important;
  background-size: cover !important;
}

.pv3-reference .pv2-library #tracks-view,
.pv3-reference .pv2-library #section-tracks,
.pv3-reference .pv2-utility > * {
  width: min(980px, 100%) !important;
  margin: 30px auto !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.pv3-reference .track-card {
  border-color: var(--pv3-line) !important;
  border-radius: 18px !important;
  background: rgba(4, 18, 31, .72) !important;
}

.pv3-reference .pv2-library .view-header,
.pv3-reference .pv2-library .section__header {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Utility scenes: premium, full-screen and independent from legacy card chrome. */
.pv3-reference .pv2-utility {
  background-image:
    radial-gradient(circle at 72% 22%, rgba(18, 162, 211, .17), transparent 34%),
    linear-gradient(180deg, rgba(1, 8, 16, .64), rgba(1, 8, 16, .9)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

.pv3-reference[data-screen="utility"] .pv2-utility {
  display: block !important;
}

.pv3-reference.pv3-force-utility .pv2-auth,
.pv3-reference.pv3-force-utility .pv2-hero,
.pv3-reference.pv3-force-utility .pv2-studio,
.pv3-reference.pv3-force-utility .pv2-library {
  display: none !important;
}

.pv3-reference.pv3-force-utility .pv2-utility {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pv3-reference[data-utility="billing"] #billing-panel,
.pv3-reference[data-utility="profile"] #studio-profile-panel,
.pv3-reference[data-utility="help"] #studio-help-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pv3-reference.pv3-force-utility[data-utility="billing"] #billing-panel,
.pv3-reference.pv3-force-utility[data-utility="profile"] #studio-profile-panel,
.pv3-reference.pv3-force-utility[data-utility="help"] #studio-help-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pv3-reference.pv3-force-utility #billing-panel {
  width: min(1120px, 100%) !important;
  min-height: calc(100svh - 104px) !important;
  margin: 0 auto !important;
  padding: clamp(42px, 6vh, 72px) 0 70px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #eef9ff !important;
}

.pv3-reference #billing-panel .billing-panel__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin: 0 0 28px !important;
  padding: 0 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(137, 218, 251, .16) !important;
  background: transparent !important;
}

.pv3-reference #billing-panel .billing-panel__head .eyebrow {
  margin: 0 0 8px !important;
  color: var(--pv3-cyan) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
}

.pv3-reference #billing-title {
  margin: 0 !important;
  color: #f5f9fb !important;
  font-family: var(--pv3-serif) !important;
  font-size: clamp(50px, 6vw, 78px) !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}

.pv3-reference #billing-summary {
  margin: 12px 0 0 !important;
  color: rgba(221, 239, 247, .68) !important;
  font-size: 14px !important;
}

.pv3-reference #billing-panel .billing-panel__actions > :not(.studio-utility-panel__return),
.pv3-reference #billing-panel [data-studio-nav="create"] {
  display: none !important;
}

.pv3-reference #billing-panel .studio-utility-panel__return {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(134, 218, 250, .25) !important;
  border-radius: 999px !important;
  color: #dff6ff !important;
  background: rgba(3, 16, 28, .54) !important;
}

.pv3-reference #billing-panel .billing-overview {
  display: grid !important;
  grid-template-columns: minmax(230px, .72fr) minmax(320px, 1.7fr) !important;
  gap: 18px !important;
  margin: 0 0 22px !important;
}

.pv3-reference #billing-panel .billing-overview__balance,
.pv3-reference #billing-panel .billing-overview__explain {
  min-height: 210px !important;
  padding: 26px 28px !important;
  border: 1px solid rgba(137, 218, 251, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(5, 24, 40, .72), rgba(2, 12, 22, .46)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(18px);
}

.pv3-reference #billing-panel .billing-overview__balance {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.pv3-reference #billing-panel .billing-overview__balance span {
  color: var(--pv3-cyan-soft) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.pv3-reference #billing-panel .billing-overview__balance strong {
  margin: 2px 0 4px !important;
  color: #f5d79b !important;
  font-family: var(--pv3-serif) !important;
  font-size: 82px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: 0 0 32px rgba(230, 187, 101, .2) !important;
}

.pv3-reference #billing-panel .billing-overview__balance small {
  max-width: 190px !important;
  color: rgba(217, 235, 243, .58) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.pv3-reference #billing-panel .billing-overview__explain h3 {
  margin: 0 0 12px !important;
  color: #f4f8fb !important;
  font-family: var(--pv3-serif) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
}

.pv3-reference #billing-panel .billing-overview__explain p {
  margin: 0 !important;
  color: rgba(220, 237, 245, .7) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.pv3-reference #billing-panel .billing-overview__actions {
  margin-top: 18px !important;
}

.pv3-reference #billing-panel .billing-overview__actions a,
.pv3-reference #billing-panel .billing-overview__actions button {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(3, 16, 28, .56) !important;
}

.pv3-reference #billing-panel .billing-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pv3-reference #billing-panel .pv3-billing-note--hidden { display: none !important; }

.pv3-reference #billing-panel .pv3-plan,
.pv3-reference #billing-panel .billing-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 260px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(137, 218, 251, .17) !important;
  border-radius: 20px !important;
  color: #eef9ff !important;
  background: linear-gradient(160deg, rgba(6, 27, 45, .78), rgba(2, 12, 22, .66)) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(18px);
}

.pv3-reference #billing-panel .pv3-plan::before,
.pv3-reference #billing-panel .billing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 0, rgba(43, 204, 255, .13), transparent 42%);
}

.pv3-reference #billing-panel .pv3-plan.is-featured,
.pv3-reference #billing-panel .billing-card.is-recommended {
  border-color: rgba(230, 187, 101, .72) !important;
  background: linear-gradient(160deg, rgba(29, 34, 43, .88), rgba(5, 18, 29, .74)) !important;
  box-shadow: 0 24px 70px rgba(230, 187, 101, .12) !important;
}

.pv3-reference #billing-panel .pv3-plan p {
  margin: 0 0 10px !important;
  color: var(--pv3-cyan) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
}

.pv3-reference #billing-panel .pv3-plan strong {
  color: #f5f9fb !important;
  font-family: var(--pv3-serif) !important;
  font-size: 58px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
}

.pv3-reference #billing-panel .pv3-plan h3 {
  margin: 4px 0 12px !important;
  color: #f5f9fb !important;
  font-family: var(--pv3-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

.pv3-reference #billing-panel .pv3-plan span {
  color: rgba(220, 237, 245, .6) !important;
  font-size: 11px !important;
}

.pv3-reference #billing-panel .pv3-plan b {
  margin: auto 0 14px !important;
  color: #f5d79b !important;
  font-family: var(--pv3-serif) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
}

.pv3-reference #billing-panel .pv3-plan button,
.pv3-reference #billing-panel .pv3-plan a,
.pv3-reference #billing-panel .billing-card > button {
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  border: 1px solid rgba(89, 215, 255, .48) !important;
  border-radius: 999px !important;
  color: white !important;
  background: linear-gradient(180deg, rgba(30, 189, 239, .72), rgba(8, 101, 143, .76)) !important;
  text-decoration: none !important;
}

.pv3-reference #billing-panel .pv3-plan em {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #191207;
  background: #e6bb65;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
}

.pv3-reference.pv3-force-utility #studio-profile-panel,
.pv3-reference.pv3-force-utility #studio-help-panel {
  width: min(960px, 100%) !important;
  min-height: calc(100svh - 104px) !important;
  margin: 0 auto !important;
  padding: clamp(52px, 8vh, 92px) 0 70px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pv3-reference #studio-profile-panel .studio-utility-panel__head,
.pv3-reference #studio-help-panel .studio-utility-panel__head {
  margin-bottom: 28px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid rgba(137, 218, 251, .16) !important;
}

.pv3-reference #studio-profile-panel h2,
.pv3-reference #studio-help-panel h2 {
  font-family: var(--pv3-serif) !important;
  font-size: clamp(44px, 5vw, 68px) !important;
  font-weight: 400 !important;
}

.pv3-showcase-nav {
  position: fixed;
  z-index: 100;
  top: 18px;
  right: auto;
  bottom: auto;
  left: 126px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--pv3-line);
  border-radius: 14px;
  background: rgba(1, 9, 18, .9);
  backdrop-filter: blur(20px);
}

.pv3-showcase-nav button:not([data-pv3-toggle]) { display: none; }
.pv3-showcase-nav.is-open {
  width: calc(100% - 28px);
}
.pv3-showcase-nav.is-open button { display: block; }

.pv3-showcase-nav button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  color: #b9d8e6;
  background: transparent;
  font-size: 10px;
}
.pv3-showcase-nav button:hover { color: white; background: rgba(38, 185, 233, .2); }
.pv3-showcase-nav button.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(38, 195, 244, .56), rgba(8, 104, 147, .64));
  box-shadow: inset 0 0 0 1px rgba(113, 224, 255, .28);
}

body.pv3-showcase .pv3-reference #track-form::before,
body.pv3-showcase .pv3-reference #track-form::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px) {
  .pv3-reference .pv2-topbar { top: 10px; left: 10px; right: 10px; }
  .pv3-reference .pv2-hero { background-image: linear-gradient(180deg, rgba(0,7,14,.02), rgba(0,7,14,.68)), url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp"); }
  .pv3-reference .pv2-hero__content { padding: 72px 0 90px; }
  .pv3-reference .pv2-hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .pv3-reference .pv3-scene-caption { display: none !important; }
  .pv3-reference .pv2-studio, .pv3-reference .pv2-library, .pv3-reference .pv2-utility { padding: 58px 12px 86px; }
  .pv3-reference .studio-start-panel, .pv3-reference #track-form > .field-group, .pv3-reference .studio-review-panel, .pv3-reference .studio-result-panel { min-height: calc(100svh - 80px) !important; padding: 24px 8px 76px !important; }
  .pv3-reference .studio-start-panel__head h2, .pv3-reference .field-group__header h3, .pv3-reference .studio-review-card h2 { font-size: clamp(34px, 10vw, 46px) !important; }
  .pv3-reference .studio-scenario-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
  .pv3-reference .studio-scenario-card { min-height: 70px !important; }
  .pv3-reference .studio-stepper { bottom: 76px !important; width: calc(100% - 28px) !important; }
  .pv3-reference .studio-stepper__text { display: none; }
  .pv3-reference .studio-wizard-actions { bottom: 78px !important; left: 12px !important; right: 12px !important; }
  .pv3-reference .studio-wizard-actions__primary { min-width: 140px; }
  body[data-studio-step="story"] .pv3-reference #track-form { padding-top: 24px !important; }
  body[data-studio-step="story"] .pv3-reference #lyrics_or_idea { min-height: 220px !important; max-height: 38vh !important; }
  body[data-studio-step="voice"] .pv3-reference .pv2-studio { background-position: 20% center !important; }
  body[data-studio-step="voice"] .pv3-reference #track-form { align-items: flex-end; padding-top: 36vh !important; }
  body[data-studio-step="voice"] .pv3-reference .studio-voice-step { width: 100% !important; margin: 0 !important; padding: 20px !important; }
  .pv3-reference .pv3-demo-release { grid-template-columns: 1fr; gap: 18px; padding-bottom: 90px; }
  .pv3-demo-release__cover { width: min(72vw, 300px); margin: 0 auto; }
  .pv3-demo-release__body h2 { font-size: 42px; }
  .pv3-showcase-nav { top: 58px; right: auto; bottom: auto; left: 8px; width: auto; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .pv3-showcase-nav.is-open { width: calc(100% - 16px); }
  body.pv3-showcase .pv2-bottom-nav { display: none !important; }
  .pv3-reference #billing-panel { padding: 34px 4px 84px !important; }
  .pv3-reference #billing-panel .billing-panel__head { align-items: flex-start !important; margin-bottom: 14px !important; }
  .pv3-reference #billing-title { font-size: 48px !important; }
  .pv3-reference #billing-panel .billing-panel__actions { flex: 0 0 auto !important; }
  .pv3-reference #billing-panel .studio-utility-panel__return { width: 42px !important; min-width: 42px !important; padding: 0 !important; overflow: hidden; color: transparent !important; }
  .pv3-reference #billing-panel .studio-utility-panel__return::after { content: "←"; color: #eaf8ff; font-size: 18px; }
  .pv3-reference #billing-panel .billing-overview { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pv3-reference #billing-panel .billing-overview__balance { min-height: 140px !important; padding: 18px !important; }
  .pv3-reference #billing-panel .billing-overview__balance strong { font-size: 64px !important; }
  .pv3-reference #billing-panel .billing-overview__explain { min-height: 0 !important; padding: 20px !important; }
  .pv3-reference #billing-panel .billing-overview__explain h3 { font-size: 26px !important; }
  .pv3-reference #billing-panel .billing-plans { display: flex !important; gap: 10px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding-bottom: 8px !important; }
  .pv3-reference #billing-panel .pv3-plan,
  .pv3-reference #billing-panel .billing-card { flex: 0 0 78vw !important; min-height: 245px !important; scroll-snap-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}


/* source: pulseveter_v3_art.css */
:root {
  --pv4-ink: #010711;
  --pv4-panel: rgba(3, 13, 24, .54);
  --pv4-panel-deep: rgba(2, 10, 19, .78);
  --pv4-line: rgba(137, 218, 251, .2);
  --pv4-line-bright: rgba(83, 211, 255, .62);
  --pv4-cyan: #25c9ff;
  --pv4-ice: #c9f3ff;
  --pv4-gold: #e9bd67;
  --pv4-gold-soft: #f3d69b;
  --pv4-serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --pv4-ui: "Bahnschrift", "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

body.pv3-reference-body {
  color: #eef9ff !important;
  background: var(--pv4-ink) !important;
}

.pv3-reference {
  isolation: isolate;
  color: #eef9ff;
  background: var(--pv4-ink) !important;
  font-family: var(--pv4-ui) !important;
  letter-spacing: .005em;
}

.pv3-reference::before,
.pv3-reference::after {
  content: "";
  position: fixed;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.pv3-reference::before {
  background:
    radial-gradient(circle at 50% 38%, transparent 24%, rgba(0, 5, 12, .14) 72%, rgba(0, 4, 10, .62) 100%),
    linear-gradient(180deg, rgba(0, 6, 14, .06), transparent 42%, rgba(0, 5, 12, .26));
}

.pv3-reference::after {
  z-index: 13;
  opacity: .14;
  background-image: url("/miniapp/static/assets/studio/pulse-redesign/06_decor/decor-star-particles.jpg");
  background-size: 520px auto;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000, transparent 48%);
}

.pv3-reference .pv2-screen.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

/* Navigation: thin instrument controls, not generic web pills. */
.pv3-reference .pv2-topbar {
  z-index: 90;
  top: 22px !important;
  right: 28px !important;
  left: 28px !important;
  height: 42px;
}

.pv3-reference .pv2-topbar__menu,
.pv3-reference .pv2-help,
.pv3-reference .pv2-impulses,
.pv3-reference .pv2-languages,
.pv3-reference .pv3-showcase-nav {
  border: 1px solid rgba(151, 224, 255, .17) !important;
  border-radius: 12px !important;
  color: rgba(235, 248, 255, .86) !important;
  background: linear-gradient(180deg, rgba(6, 21, 35, .7), rgba(2, 10, 19, .6)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 34px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

.pv3-reference .pv2-topbar__menu,
.pv3-reference .pv2-help,
.pv3-reference .pv2-impulses { min-height: 42px !important; }

.pv3-reference .pv2-topbar__menu strong,
.pv3-reference .pv2-impulses span,
.pv3-reference .pv2-languages button,
.pv3-reference .pv3-showcase-nav button {
  font-family: var(--pv4-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
}

.pv3-reference .pv2-topbar__menu > span,
.pv3-reference .pv2-topbar__menu > span::before,
.pv3-reference .pv2-topbar__menu > span::after { background: var(--pv4-ice) !important; }
.pv3-reference .pv2-impulses strong { color: var(--pv4-gold-soft) !important; font-weight: 500 !important; }
.pv3-reference .pv2-impulses b { color: var(--pv4-cyan) !important; font-size: 18px !important; font-weight: 300 !important; }
.pv3-reference .pv2-help { width: 42px !important; border-radius: 50% !important; font-family: var(--pv4-serif) !important; font-size: 18px !important; }
.pv3-reference .pv2-languages { padding: 3px !important; }
.pv3-reference .pv2-languages button { min-width: 37px !important; min-height: 34px !important; border-radius: 9px !important; }
.pv3-reference .pv2-languages button.is-active { color: #f8fdff !important; background: linear-gradient(180deg, rgba(22, 115, 157, .8), rgba(7, 53, 81, .86)) !important; box-shadow: inset 0 0 0 1px rgba(66, 208, 255, .18) !important; }

.pv3-reference .pv3-showcase-nav {
  top: 22px !important;
  left: 132px !important;
  min-height: 42px;
  padding: 4px !important;
  gap: 2px !important;
}

.pv3-reference .pv3-showcase-nav button {
  min-height: 32px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 8px !important;
  color: rgba(219, 238, 247, .5) !important;
  background: transparent !important;
}

.pv3-reference .pv3-showcase-nav button.is-active { color: var(--pv4-ice) !important; background: rgba(24, 148, 194, .17) !important; }

/* The same cinematic typography on every scene. */
.pv3-reference h1,
.pv3-reference h2,
.pv3-reference h3,
.pv3-reference .studio-start-panel__head h2,
.pv3-reference .field-group__header h3,
.pv3-reference .studio-review-card h2 {
  color: #f5f8fa !important;
  font-family: var(--pv4-serif) !important;
  font-weight: 400 !important;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 8, 18, .5);
}

.pv3-reference .eyebrow,
.pv3-reference .pv2-hero__eyebrow,
.pv3-reference .pv3-scene-caption span,
.pv3-reference .section__pill {
  color: var(--pv4-cyan) !important;
  font-family: var(--pv4-ui) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
}

.pv3-reference p,
.pv3-reference label,
.pv3-reference small { color: rgba(220, 238, 247, .68); }

/* Hero: match panel 1 of the reference, with visible copy and controlled light. */
.pv3-reference .pv2-hero {
  background-image:
    linear-gradient(180deg, rgba(0, 7, 14, .03), rgba(0, 7, 14, .03) 48%, rgba(0, 6, 13, .44)),
    url("/miniapp/static/assets/studio/generated-v2/hero-aurora-desktop-v2.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

.pv3-reference .pv2-hero__content {
  z-index: 20;
  width: min(660px, calc(100% - 48px)) !important;
  padding-top: 72px !important;
  opacity: 1 !important;
  filter: none !important;
}

.pv3-reference .pv2-hero__logo {
  width: clamp(98px, 8vw, 132px) !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 0 16px rgba(20, 197, 255, .2));
}

.pv3-reference .pv2-hero h1 {
  margin: 14px 0 18px !important;
  font-size: clamp(52px, 5.25vw, 78px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
}

.pv3-reference .pv2-hero h1 span { color: #86dfff !important; text-shadow: 0 0 38px rgba(24, 183, 235, .25); }
.pv3-reference .pv2-hero__lead { margin: 0 0 28px !important; color: rgba(235, 247, 252, .76) !important; font-size: 13px !important; line-height: 1.65 !important; }

/* Buttons are luminous instrument surfaces from the reference kit. */
.pv3-reference button,
.pv3-reference .primary-button,
.pv3-reference .secondary-button,
.pv3-reference .ghost-button,
.pv3-reference a.secondary-button {
  font-family: var(--pv4-ui) !important;
  font-weight: 500 !important;
  letter-spacing: .015em;
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease, background .25s ease !important;
}

.pv3-reference button:hover,
.pv3-reference a.secondary-button:hover { transform: translateY(-1px); }

.pv3-reference .pv2-hero__create,
.pv3-reference .studio-wizard-actions__primary,
.pv3-reference .primary-button,
.pv3-reference #billing-panel .pv3-plan a,
.pv3-reference #billing-panel .pv3-plan button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(119, 229, 255, .86) !important;
  border-radius: 12px !important;
  color: #f8fdff !important;
  background:
    linear-gradient(180deg, rgba(51, 208, 255, .96), rgba(5, 111, 164, .94)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    inset 0 -12px 28px rgba(0, 54, 94, .2),
    0 0 0 4px rgba(28, 196, 252, .07),
    0 12px 32px rgba(0, 142, 205, .28) !important;
}

.pv3-reference .pv2-hero__create::before,
.pv3-reference .studio-wizard-actions__primary::before,
.pv3-reference .primary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 22%, rgba(255,255,255,.28) 48%, transparent 72%);
  transform: translateX(-120%);
  animation: pv4-button-shine 6s ease-in-out infinite;
}

.pv3-reference .pv2-hero__create { min-width: 260px !important; min-height: 56px !important; }
.pv3-reference .pv2-hero__tracks { color: rgba(220, 239, 248, .66) !important; font-size: 12px !important; }

@keyframes pv4-button-shine {
  0%, 72% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}

/* Studio scenes: less chrome, more image and editorial space. */
.pv3-reference .pv2-studio,
.pv3-reference .pv2-library,
.pv3-reference .pv2-utility,
.pv3-reference .pv2-auth { background-color: var(--pv4-ink) !important; }

.pv3-reference .pv3-scene-caption { top: 27px !important; z-index: 91 !important; }
.pv3-reference .pv3-scene-caption strong { color: rgba(230, 243, 250, .64) !important; font-size: 10px !important; font-weight: 400 !important; }

.pv3-reference .studio-start-panel__head,
.pv3-reference .field-group__header { position: relative; z-index: 2; }

.pv3-reference .studio-start-panel__head h2,
.pv3-reference .field-group__header h3 { font-size: clamp(42px, 4vw, 62px) !important; line-height: .98 !important; }

.pv3-reference .studio-scenario-grid { gap: 12px !important; width: min(760px, 100%) !important; }
.pv3-reference .studio-scenario-card {
  min-height: 96px !important;
  border: 1px solid rgba(151, 224, 255, .18) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(7, 23, 38, .68), rgba(2, 10, 19, .56)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 48px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(20px) saturate(118%) !important;
}
.pv3-reference .studio-scenario-card:hover,
.pv3-reference .studio-scenario-card.is-active { border-color: rgba(63, 207, 255, .68) !important; box-shadow: inset 0 0 0 1px rgba(40,199,255,.12), 0 0 30px rgba(27,177,230,.12) !important; }
.pv3-reference .studio-scenario-card__title { font-family: var(--pv4-serif) !important; font-size: 19px !important; font-weight: 400 !important; }

.pv3-reference .studio-scenario-card__icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  overflow: hidden;
  border: 1px solid rgba(70, 207, 255, .16) !important;
  border-radius: 11px !important;
  color: transparent !important;
  background-color: rgba(8, 62, 88, .34) !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"] .studio-scenario-card__icon { background-image: url("/miniapp/static/assets/icons/song-by-idea.svg") !important; }
.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"] .studio-scenario-card__icon { background-image: url("/miniapp/static/assets/icons/lyrics.svg") !important; }
.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"] .studio-scenario-card__icon { background-image: url("/miniapp/static/assets/icons/greeting.svg") !important; }
.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"] .studio-scenario-card__icon { background-image: url("/miniapp/static/assets/icons/instrumental.svg") !important; }

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea,
.pv3-reference input,
.pv3-reference textarea,
.pv3-reference select {
  border: 1px solid rgba(151, 224, 255, .22) !important;
  color: #f4fbff !important;
  background: linear-gradient(145deg, rgba(5, 18, 31, .66), rgba(2, 10, 19, .5)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 58px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(22px) saturate(110%);
}

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea {
  min-height: 220px !important;
  padding: 26px 28px !important;
  border-radius: 14px !important;
  font-family: var(--pv4-serif) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.pv3-reference input:focus,
.pv3-reference textarea:focus,
.pv3-reference select:focus { border-color: rgba(58, 205, 255, .68) !important; box-shadow: 0 0 0 3px rgba(38, 192, 245, .08), 0 22px 60px rgba(0,0,0,.24) !important; outline: none !important; }

body[data-studio-step="sound"] .pv3-reference .studio-mood-visual {
  gap: 10px !important;
  width: min(930px, 100%) !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card {
  min-height: 250px !important;
  overflow: hidden !important;
  border: 1px solid rgba(129, 215, 248, .2) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.28) !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(1,8,16,.88));
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card.is-active {
  border-color: #33d0ff !important;
  box-shadow: 0 0 0 2px rgba(31, 198, 251, .12), 0 0 30px rgba(31, 198, 251, .25) !important;
  transform: translateY(-6px) !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
  width: min(600px, 54%) !important;
  padding: 26px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .studio-voice-mode {
  border-radius: 12px !important;
  background: rgba(2, 10, 19, .5) !important;
  backdrop-filter: blur(18px);
}

.pv3-reference .studio-voice-mode .chip { border-radius: 9px !important; }
.pv3-reference .voice-consent-card { border: 1px solid rgba(151,224,255,.14) !important; background: rgba(3,14,25,.54) !important; backdrop-filter: blur(18px); }

.pv3-reference .studio-wizard-actions button { min-height: 46px !important; padding: 0 25px !important; border-radius: 12px !important; }
.pv3-reference .studio-wizard-actions__back { border: 1px solid rgba(151,224,255,.18) !important; color: rgba(235,248,255,.78) !important; background: rgba(3,14,25,.52) !important; backdrop-filter: blur(18px); }

.pv3-reference .studio-stepper__index {
  border: 1px solid rgba(151,224,255,.26) !important;
  color: rgba(230,246,252,.72) !important;
  background: rgba(2,10,19,.78) !important;
  box-shadow: 0 0 0 4px rgba(1,7,14,.28) !important;
}
.pv3-reference .studio-stepper__item.is-active .studio-stepper__index { color: white !important; background: linear-gradient(180deg, #28c9fa, #087eaf) !important; }

/* Review and fine tuning are editorial sheets, never heavy modal cards. */
body[data-studio-step="advanced"] .pv3-reference .advanced-panel,
.pv3-reference .studio-review-card {
  border: 1px solid rgba(151,224,255,.13) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(4,17,29,.58), rgba(2,9,17,.46)) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(24px) saturate(112%) !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
  max-height: calc(100svh - 300px) !important;
  padding-bottom: 28px !important;
  scrollbar-color: rgba(64, 203, 251, .42) transparent;
}

.pv3-reference .studio-review-card { padding: 34px 38px !important; }
.pv3-reference .studio-review-list > * { border-color: rgba(151,224,255,.1) !important; }

/* Generated atmospheric art for library and utility scenes. */
.pv3-reference .pv2-library {
  background-image:
    linear-gradient(180deg, rgba(0,6,13,.2), rgba(0,6,13,.66)),
    url("/miniapp/static/assets/studio/generated-v3/library-aurora-lake-v3.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

.pv3-reference .pv2-utility {
  background-image:
    linear-gradient(180deg, rgba(0,6,13,.18), rgba(0,6,13,.72)),
    url("/miniapp/static/assets/studio/generated-v3/utility-aurora-wave-v3.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

.pv3-reference .pv2-library #tracks-view,
.pv3-reference .pv2-library #section-tracks {
  margin-top: 70px !important;
}

.pv3-reference .pv2-library .view-header h2,
.pv3-reference .pv2-library .section__header h2 { font-size: clamp(48px, 5vw, 72px) !important; letter-spacing: -.04em; }
.pv3-reference .tracks-retention-note { border: 1px solid rgba(151,224,255,.13) !important; border-radius: 12px !important; background: rgba(3,14,25,.46) !important; backdrop-filter: blur(18px); }
.pv3-reference .track-card { border-radius: 14px !important; background: linear-gradient(145deg, rgba(5,20,34,.66), rgba(2,10,19,.56)) !important; backdrop-filter: blur(20px); }

/* Utility titles and pricing, inspired by the compact tariff strip in the reference. */
.pv3-reference.pv3-force-utility #billing-panel,
.pv3-reference.pv3-force-utility #studio-profile-panel,
.pv3-reference.pv3-force-utility #studio-help-panel { padding-top: 64px !important; }

.pv3-reference #billing-title,
.pv3-reference #studio-profile-panel h2,
.pv3-reference #studio-help-panel h2 { font-size: clamp(54px, 6vw, 82px) !important; line-height: .92 !important; letter-spacing: -.045em !important; }

.pv3-reference #billing-panel .billing-panel__head { border-color: rgba(151,224,255,.12) !important; }
.pv3-reference #billing-panel .billing-overview__balance,
.pv3-reference #billing-panel .billing-overview__explain,
.pv3-reference #billing-panel .pv3-plan,
.pv3-reference #billing-panel .billing-card {
  border: 1px solid rgba(151,224,255,.15) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(5,20,34,.58), rgba(2,10,19,.48)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 22px 64px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
}

.pv3-reference #billing-panel .pv3-plan.is-featured,
.pv3-reference #billing-panel .billing-card.is-recommended {
  border-color: rgba(233,189,103,.7) !important;
  background: linear-gradient(145deg, rgba(38,31,20,.64), rgba(3,13,23,.56)) !important;
  box-shadow: inset 0 1px rgba(255,240,205,.08), 0 0 42px rgba(233,189,103,.1) !important;
}

.pv3-reference #billing-panel .billing-overview__balance strong { color: var(--pv4-gold-soft) !important; font-size: 88px !important; }
.pv3-reference #billing-panel .pv3-plan strong { font-size: 62px !important; }
.pv3-reference #billing-panel .pv3-plan a,
.pv3-reference #billing-panel .pv3-plan button { min-height: 44px !important; border-radius: 10px !important; }

.pv3-reference #studio-profile-panel > *,
.pv3-reference #studio-help-panel > * { border-color: rgba(151,224,255,.13) !important; }

.pv3-reference #studio-profile-panel .studio-utility-panel__head,
.pv3-reference #studio-help-panel .studio-utility-panel__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.pv3-reference #studio-profile-panel .studio-utility-panel__head > div,
.pv3-reference #studio-help-panel .studio-utility-panel__head > div { max-width: 620px; }

.pv3-reference #studio-profile-panel .studio-utility-panel__return,
.pv3-reference #studio-help-panel .studio-utility-panel__return {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 176px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(151,224,255,.18) !important;
  border-radius: 11px !important;
  color: rgba(235,248,255,.78) !important;
  background: rgba(3,14,25,.48) !important;
  backdrop-filter: blur(18px);
}

.pv3-reference .studio-profile-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 24px 0 18px !important;
}

.pv3-reference .studio-profile-list > div {
  min-height: 94px;
  padding: 20px 22px !important;
  border: 1px solid rgba(151,224,255,.13) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(5,20,34,.56), rgba(2,10,19,.46)) !important;
  backdrop-filter: blur(20px);
}

.pv3-reference .studio-profile-list dt {
  margin-bottom: 10px;
  color: var(--pv4-cyan) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase;
}

.pv3-reference .studio-profile-list dd { color: #f2f8fb !important; font-family: var(--pv4-serif) !important; font-size: 21px !important; }

.pv3-reference .studio-help-steps {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: pv4-help;
}

.pv3-reference .studio-help-steps li {
  counter-increment: pv4-help;
  min-height: 112px;
  padding: 18px 14px !important;
  border: 1px solid rgba(151,224,255,.13) !important;
  border-radius: 13px !important;
  color: rgba(235,247,252,.82) !important;
  background: linear-gradient(145deg, rgba(5,20,34,.54), rgba(2,10,19,.44)) !important;
  backdrop-filter: blur(20px);
}

.pv3-reference .studio-help-steps li::before {
  content: "0" counter(pv4-help);
  display: block;
  margin-bottom: 16px;
  color: var(--pv4-cyan);
  font-family: var(--pv4-serif);
  font-size: 23px;
}

.pv3-reference .studio-help-note {
  margin-top: 22px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(233,189,103,.24) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(40,31,17,.34), rgba(3,13,23,.44)) !important;
}

.pv3-reference .studio-help-note h3 { color: var(--pv4-gold-soft) !important; font-size: 25px !important; }

body.pv3-showcase .pv3-reference button:disabled,
body.pv3-showcase .pv3-reference button[disabled],
body.pv3-showcase .pv3-reference input:disabled,
body.pv3-showcase .pv3-reference textarea:disabled,
body.pv3-showcase .pv3-reference select:disabled {
  opacity: 1 !important;
  filter: none !important;
}

/* Auth follows the same full-screen visual system. */
.pv3-reference .pv2-auth {
  background-image:
    linear-gradient(90deg, rgba(0,6,13,.18), rgba(0,6,13,.72)),
    url("/miniapp/static/assets/studio/generated-v3/library-aurora-lake-v3.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}
.pv3-reference .pv2-auth__intro h2 { font-size: clamp(44px, 5vw, 68px) !important; line-height: 1 !important; }
.pv3-reference .pv2-auth-root { border: 1px solid rgba(151,224,255,.15) !important; border-radius: 16px !important; background: rgba(3,14,25,.58) !important; box-shadow: 0 30px 90px rgba(0,0,0,.26) !important; backdrop-filter: blur(24px); }

@media (max-width: 760px) {
  .pv3-reference::after { background-size: 360px auto; }
  .pv3-reference .pv2-topbar { top: 12px !important; right: 12px !important; left: 12px !important; }
  .pv3-reference .pv2-topbar__menu strong { display: none; }
  .pv3-reference .pv3-showcase-nav { top: 60px !important; left: 12px !important; right: 12px !important; max-width: calc(100% - 24px); }
  .pv3-reference .pv2-hero { background-image: linear-gradient(180deg, rgba(0,7,14,.02), rgba(0,7,14,.44)), url("/miniapp/static/assets/studio/generated-v2/hero-aurora-mobile-v2.webp") !important; }
  .pv3-reference .pv2-hero__content { width: min(92vw, 430px) !important; padding-top: 90px !important; }
  .pv3-reference .pv2-hero h1 { font-size: clamp(42px, 12vw, 58px) !important; }
  .pv3-reference .pv2-hero__lead { font-size: 12px !important; }
  .pv3-reference .pv2-hero__create { width: min(280px, 86vw) !important; }
  .pv3-reference .pv3-scene-caption { top: 68px !important; max-width: 72vw; white-space: nowrap; }
  .pv3-reference .studio-start-panel__head h2,
  .pv3-reference .field-group__header h3 { font-size: clamp(35px, 10vw, 48px) !important; }
  .pv3-reference .studio-scenario-grid { grid-template-columns: 1fr !important; width: min(92vw, 460px) !important; }
  .pv3-reference .studio-scenario-card { min-height: 68px !important; }
  body[data-studio-step="story"] .pv3-reference #lyrics_or_idea { min-height: 240px !important; padding: 20px !important; }
  body[data-studio-step="sound"] .pv3-reference .studio-mood-visual { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding: 10px 9vw 20px !important; }
  body[data-studio-step="sound"] .pv3-reference .studio-mood-card { flex: 0 0 58vw !important; min-height: 300px !important; scroll-snap-align: center; }
  body[data-studio-step="sound"] .pv3-reference .field:has(> #mood) > label { display: none !important; }
  body[data-studio-step="sound"] .pv3-reference [data-target="mood"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 10px !important;
    width: calc(100vw - 24px) !important;
    margin-inline: calc(50% - 50vw + 12px) !important;
    padding: 10px 14vw 22px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body[data-studio-step="sound"] .pv3-reference [data-target="mood"]::-webkit-scrollbar { display: none; }
  body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip {
    flex: 0 0 62vw !important;
    width: 62vw !important;
    min-height: 310px !important;
    scroll-snap-align: center;
  }
  body[data-studio-step="voice"] .pv3-reference .pv2-studio { background-position: 32% center !important; }
  body[data-studio-step="voice"] .pv3-reference .studio-voice-step { width: 100% !important; margin: 90px 0 0 !important; padding: 20px 16px 100px !important; background: linear-gradient(180deg, transparent, rgba(1,7,14,.86) 20%) !important; }
  .pv3-reference .studio-review-card { padding: 24px 18px !important; }
  .pv3-reference .studio-wizard-actions { right: 12px !important; bottom: 12px !important; left: 12px !important; }
  .pv3-reference .studio-wizard-actions button { min-height: 44px !important; padding: 0 18px !important; }
  .pv3-reference #billing-title,
  .pv3-reference #studio-profile-panel h2,
  .pv3-reference #studio-help-panel h2 { font-size: clamp(48px, 14vw, 62px) !important; }
  .pv3-reference #billing-panel .billing-overview__balance strong { font-size: 72px !important; }
  .pv3-reference #studio-profile-panel .studio-utility-panel__head,
  .pv3-reference #studio-help-panel .studio-utility-panel__head { align-items: flex-start !important; }
  .pv3-reference #studio-profile-panel .studio-utility-panel__return,
  .pv3-reference #studio-help-panel .studio-utility-panel__return { min-width: 42px !important; width: 42px !important; padding: 0 !important; overflow: hidden; color: transparent !important; }
  .pv3-reference #studio-profile-panel .studio-utility-panel__return::after,
  .pv3-reference #studio-help-panel .studio-utility-panel__return::after { content: "←"; color: #eaf8ff; font-size: 18px; }
  .pv3-reference #billing-panel .studio-utility-panel__return::after { content: "←" !important; color: #eaf8ff !important; font-size: 18px !important; }
  .pv3-reference .studio-profile-list { grid-template-columns: 1fr !important; }
  .pv3-reference .studio-help-steps { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .pv3-reference .studio-help-steps li { flex: 0 0 56vw; scroll-snap-align: center; }
  body[data-studio-step="advanced"] .pv3-reference .advanced-panel { max-height: calc(100svh - 270px) !important; }
}

/* Studio refinement: keep the approved start scene, quieten every later step. */
body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .studio-wizard-actions__primary,
body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .primary-button {
  border: 1px solid rgba(79, 211, 255, .46) !important;
  color: rgba(238, 249, 253, .9) !important;
  background: linear-gradient(180deg, rgba(6, 31, 48, .72), rgba(2, 15, 26, .7)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 26px rgba(26, 179, 230, .1) !important;
}

body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .studio-wizard-actions__primary::before,
body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .primary-button::before { animation: none !important; opacity: 0 !important; }

body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .studio-wizard-actions__back {
  border: 0 !important;
  color: rgba(217, 237, 246, .52) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not([data-studio-step="start"]) .pv3-reference .pv2-studio .studio-wizard-actions__back::before {
  content: "←";
  margin-right: 8px;
  color: var(--pv4-cyan);
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip.is-active {
  border-color: rgba(75, 210, 255, .38) !important;
  color: var(--pv4-ice) !important;
  background: rgba(11, 72, 99, .28) !important;
  box-shadow: inset 0 0 22px rgba(29, 187, 235, .06) !important;
}

body[data-studio-step="voice"] .pv3-reference #upload-custom-voice {
  display: block !important;
  width: min(220px, 100%) !important;
  margin: 8px auto 0 !important;
  border: 0 !important;
  color: rgba(218, 239, 247, .62) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-studio-step="voice"] .pv3-reference #upload-custom-voice::before {
  content: "+";
  margin-right: 7px;
  color: var(--pv4-cyan);
  font-size: 16px;
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-panel > .actions-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
  border: 0 !important;
  border-top: 1px solid rgba(142, 217, 246, .12) !important;
  border-bottom: 1px solid rgba(142, 217, 246, .1) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(3, 15, 26, .24), rgba(2, 10, 18, .1)) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-card {
  width: min(880px, 100%) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 18px 28px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-card h2 {
  font-size: clamp(36px, 4vw, 52px) !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-card > p {
  margin-bottom: 18px !important;
  font-size: 12px !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 34px !important;
  margin: 0 !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list__row {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 8px 0 !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list__row dt {
  color: rgba(108, 210, 247, .54) !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list__row dd {
  color: rgba(238, 247, 250, .82) !important;
  font-family: var(--pv4-serif) !important;
  font-size: 15px !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list > * {
  border-color: rgba(142, 217, 246, .1) !important;
  background: transparent !important;
}

body[data-studio-step="result"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(0, 6, 13, .35), rgba(0, 6, 13, .78)),
    url("/miniapp/static/assets/studio/generated-v3/library-aurora-lake-v3.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-studio-step="result"] .pv3-reference .pv3-demo-player,
body[data-studio-step="result"] .pv3-reference .pv3-demo-release__choices button {
  border-color: rgba(130, 216, 248, .14) !important;
  background: rgba(2, 13, 23, .36) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

body[data-studio-step="result"] .pv3-reference .pv3-demo-release__choices button:hover {
  border-color: rgba(72, 208, 255, .42) !important;
}

.pv3-reference .pv2-library .tracks-retention-note {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(210, 231, 240, .44) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 10px !important;
}

.pv3-reference .pv2-library .tracks-retention-note span {
  color: var(--pv4-gold-soft) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

.pv3-reference #studio-profile-panel .studio-profile-list > div,
.pv3-reference #studio-help-panel .studio-help-steps li,
.pv3-reference #studio-help-panel .studio-help-note {
  background: linear-gradient(150deg, rgba(5, 20, 33, .38), rgba(2, 10, 18, .22)) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

@media (max-width: 760px) {
  body[data-studio-step="review"] .pv3-reference .studio-review-card {
    max-height: calc(100svh - 190px) !important;
    overflow-y: auto !important;
    padding: 14px 10px 88px !important;
  }
  body[data-studio-step="review"] .pv3-reference .studio-review-list { grid-template-columns: 1fr !important; }
  body[data-studio-step="review"] .pv3-reference .studio-review-list__row { grid-template-columns: 96px minmax(0, 1fr) !important; }
}

/* Billing scene v2: the approved hero screen is the visual benchmark. */
.pv3-reference.pv3-force-utility .pv2-utility {
  background-image:
    linear-gradient(180deg, rgba(0, 6, 13, .08), rgba(0, 6, 13, .34) 58%, rgba(0, 5, 11, .7)),
    url("/miniapp/static/assets/studio/generated-v3/utility-aurora-wave-v3.webp") !important;
}

.pv3-reference.pv3-force-utility #billing-panel {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  width: min(1020px, 100%) !important;
  min-height: calc(100svh - 98px) !important;
  margin: 0 auto !important;
  padding: 68px 8px 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #billing-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 40px;
  width: 82%;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(14, 158, 211, .1), transparent 67%);
  filter: blur(30px);
  transform: translateX(-50%);
  pointer-events: none;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-panel__head {
  position: static !important;
  display: block !important;
  max-width: 670px;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-panel__head .eyebrow {
  margin-bottom: 10px !important;
  color: var(--pv4-cyan) !important;
}

.pv3-reference.pv3-force-utility #billing-title {
  font-size: clamp(56px, 6vw, 82px) !important;
  line-height: .92 !important;
}

.pv3-reference.pv3-force-utility #billing-summary {
  max-width: none !important;
  margin: 12px 0 0 !important;
  color: rgba(225, 241, 248, .62) !important;
  font-family: var(--pv4-ui) !important;
  font-size: 12px !important;
  letter-spacing: .035em;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-panel__actions {
  position: absolute !important;
  top: 76px !important;
  right: 8px !important;
}

.pv3-reference.pv3-force-utility #billing-panel .studio-utility-panel__return {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(218, 238, 247, .58) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.pv3-reference.pv3-force-utility #billing-panel .studio-utility-panel__return::before {
  content: "←";
  margin-right: 8px;
  color: var(--pv4-cyan);
  font-size: 14px;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview {
  display: block !important;
  margin: 0 auto 22px !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance {
  position: absolute !important;
  top: 68px !important;
  left: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance::after {
  order: -1;
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  margin-right: 9px;
  opacity: .78 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance span {
  margin-right: 8px;
  color: rgba(213, 236, 246, .52) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance strong {
  margin: 0 !important;
  color: var(--pv4-gold-soft) !important;
  font-family: var(--pv4-ui) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance small { display: none !important; }

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain {
  display: block !important;
  width: min(620px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain h3 {
  margin: 0 0 5px !important;
  color: rgba(244, 249, 251, .84) !important;
  font-family: var(--pv4-serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain p {
  max-width: none !important;
  color: rgba(215, 234, 243, .48) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .billing-plans {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: min(900px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan,
.pv3-reference.pv3-force-utility #billing-panel .billing-card {
  min-height: 226px !important;
  padding: 22px 22px 18px !important;
  border: 1px solid rgba(140, 216, 246, .13) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(155deg, rgba(6, 21, 34, .5), rgba(1, 8, 16, .38)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.02), 0 24px 70px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan::before,
.pv3-reference.pv3-force-utility #billing-panel .billing-card::before {
  background: radial-gradient(circle at 84% 8%, rgba(35, 189, 240, .08), transparent 44%) !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan::after,
.pv3-reference.pv3-force-utility #billing-panel .billing-card::after {
  top: 20px !important;
  right: 20px !important;
  width: 30px !important;
  height: 30px !important;
  opacity: .28 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan.is-featured,
.pv3-reference.pv3-force-utility #billing-panel .billing-card.is-recommended {
  border-color: rgba(231, 186, 95, .54) !important;
  background: linear-gradient(155deg, rgba(31, 28, 21, .56), rgba(2, 11, 19, .42)) !important;
  box-shadow: inset 0 1px rgba(255,239,199,.04), 0 0 46px rgba(212,158,58,.07) !important;
  transform: translateY(-6px);
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan p {
  color: rgba(94, 215, 255, .72) !important;
  font-size: 8px !important;
  letter-spacing: .2em !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan strong {
  color: #f2f5f6 !important;
  font-size: 58px !important;
  line-height: .9 !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan h3 {
  margin: 4px 0 9px !important;
  color: rgba(238, 246, 249, .72) !important;
  font-size: 18px !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan span {
  color: rgba(210, 229, 238, .42) !important;
  font-size: 9px !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan b {
  margin: auto 0 13px !important;
  color: var(--pv4-gold-soft) !important;
  font-size: 20px !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan a,
.pv3-reference.pv3-force-utility #billing-panel .pv3-plan button,
.pv3-reference.pv3-force-utility #billing-panel .billing-card > button {
  min-height: 38px !important;
  border: 1px solid rgba(104, 211, 249, .34) !important;
  border-radius: 9px !important;
  color: rgba(232, 247, 252, .8) !important;
  background: rgba(3, 16, 27, .36) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan.is-featured a,
.pv3-reference.pv3-force-utility #billing-panel .pv3-plan.is-featured button {
  border-color: rgba(231, 186, 95, .58) !important;
  color: var(--pv4-gold-soft) !important;
  background: rgba(69, 48, 13, .2) !important;
  box-shadow: inset 0 1px rgba(255,246,218,.04) !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan em {
  top: 15px !important;
  right: 16px !important;
  padding: 4px 7px !important;
  color: rgba(245, 216, 158, .88) !important;
  background: rgba(95, 67, 17, .46) !important;
  font-size: 7px !important;
}

@media (max-width: 760px) {
  .pv3-reference.pv3-force-utility #billing-panel {
    display: block !important;
    min-height: 100svh !important;
    padding: 112px 14px 44px !important;
  }
  .pv3-reference.pv3-force-utility #billing-panel .billing-panel__head { margin-bottom: 20px !important; }
  .pv3-reference.pv3-force-utility #billing-title { font-size: clamp(52px, 15vw, 64px) !important; }
  .pv3-reference.pv3-force-utility #billing-panel .billing-panel__actions { top: 72px !important; right: 14px !important; }
  .pv3-reference.pv3-force-utility #billing-panel .studio-utility-panel__return {
    width: 34px !important;
    height: 34px !important;
    overflow: hidden;
    color: transparent !important;
  }
  .pv3-reference.pv3-force-utility #billing-panel .studio-utility-panel__return::before { margin: 0 !important; color: var(--pv4-cyan) !important; }
  .pv3-reference.pv3-force-utility #billing-panel .studio-utility-panel__return::after { content: none !important; }
  .pv3-reference.pv3-force-utility #billing-panel .billing-overview { margin-bottom: 20px !important; }
  .pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance {
    position: static !important;
    justify-content: center;
    margin: 0 auto 16px !important;
  }
  .pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain h3 { font-size: 19px !important; }
  .pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain p { font-size: 9px !important; }
  .pv3-reference.pv3-force-utility #billing-panel .billing-plans {
    display: flex !important;
    gap: 10px !important;
    width: calc(100vw - 14px) !important;
    margin-left: 0 !important;
    padding: 8px 18vw 14px 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pv3-reference.pv3-force-utility #billing-panel .billing-plans::-webkit-scrollbar { display: none; }
  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan,
  .pv3-reference.pv3-force-utility #billing-panel .billing-card {
    flex: 0 0 68vw !important;
    min-height: 222px !important;
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .pv2-hero__create::before,
  .pv3-reference .studio-wizard-actions__primary::before,
  .pv3-reference .primary-button::before { animation: none; }
}

/* Billing art direction: a compact creative-energy scene, not a settings page. */
.pv3-reference.pv3-force-utility #billing-panel {
  position: relative !important;
  width: min(1080px, 100%) !important;
  min-height: calc(100svh - 96px) !important;
  padding: clamp(38px, 5vh, 58px) 0 44px !important;
}

.pv3-reference #billing-panel .billing-panel__head {
  position: relative;
  display: block !important;
  margin-bottom: 18px !important;
  padding: 0 210px 22px 0 !important;
}

.pv3-reference #billing-title {
  font-size: clamp(58px, 6.4vw, 86px) !important;
  line-height: .88 !important;
}

.pv3-reference #billing-summary {
  max-width: 540px;
  margin-top: 14px !important;
  color: rgba(226, 241, 248, .62) !important;
  font-family: var(--pv4-serif) !important;
  font-size: 16px !important;
}

.pv3-reference #billing-panel .billing-panel__actions {
  position: absolute;
  top: 32px;
  right: 0;
}

.pv3-reference #billing-panel .billing-overview {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.pv3-reference #billing-panel .billing-overview__balance,
.pv3-reference #billing-panel .billing-overview__explain {
  min-height: 146px !important;
  padding: 20px 24px !important;
}

.pv3-reference #billing-panel .billing-overview__balance {
  position: relative;
  overflow: hidden;
  align-items: flex-start !important;
  text-align: left !important;
}

.pv3-reference #billing-panel .billing-overview__balance::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 8px;
  width: 82px;
  height: 82px;
  opacity: .34;
  background: url("/miniapp/static/assets/icons/impulses.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(37, 201, 255, .28));
}

.pv3-reference #billing-panel .billing-overview__balance strong {
  position: relative;
  z-index: 1;
  margin: 4px 0 0 !important;
  font-size: 68px !important;
}

.pv3-reference #billing-panel .billing-overview__balance small {
  position: relative;
  z-index: 1;
  max-width: 118px !important;
}

.pv3-reference #billing-panel .billing-overview__explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: end;
  column-gap: 24px;
}

.pv3-reference #billing-panel .billing-overview__explain h3 {
  grid-column: 1 / -1;
  margin-bottom: 8px !important;
  font-size: clamp(26px, 3vw, 36px) !important;
}

.pv3-reference #billing-panel .billing-overview__explain p {
  max-width: 560px;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.pv3-reference #billing-panel .billing-overview__actions {
  display: none !important;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 !important;
}

.pv3-reference #billing-panel .billing-overview__actions a,
.pv3-reference #billing-panel .billing-overview__actions button {
  min-height: 34px !important;
  padding: 0 13px !important;
  font-size: 10px !important;
}

.pv3-reference #billing-panel .billing-plans {
  gap: 12px !important;
}

.pv3-reference #billing-panel .pv3-plan,
.pv3-reference #billing-panel .billing-card {
  min-height: 196px !important;
  padding: 18px 20px !important;
}

.pv3-reference #billing-panel .pv3-plan::after,
.pv3-reference #billing-panel .billing-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  opacity: .46;
  background: url("/miniapp/static/assets/icons/impulses.svg") center / contain no-repeat;
}

.pv3-reference #billing-panel .pv3-plan p { margin-bottom: 7px !important; }
.pv3-reference #billing-panel .pv3-plan strong { font-size: 52px !important; }
.pv3-reference #billing-panel .pv3-plan h3 { margin: 0 0 7px !important; font-size: 20px !important; }
.pv3-reference #billing-panel .pv3-plan b { margin-bottom: 10px !important; font-size: 22px !important; }
.pv3-reference #billing-panel .pv3-plan a,
.pv3-reference #billing-panel .pv3-plan button { min-height: 38px !important; }

.pv3-reference #billing-panel .pv3-plan.is-featured a,
.pv3-reference #billing-panel .pv3-plan.is-featured button {
  border-color: rgba(245, 213, 149, .76) !important;
  color: #1b1307 !important;
  background: linear-gradient(180deg, #f1cf8a, #c79237) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 10px 28px rgba(213,159,62,.18) !important;
}

@media (max-width: 760px) {
  .pv3-reference.pv3-force-utility #billing-panel { padding-top: 82px !important; }
  .pv3-reference #billing-panel .billing-panel__head { padding: 0 58px 18px 0 !important; }
  .pv3-reference #billing-panel .billing-panel__actions { top: 0; }
  .pv3-reference #billing-title { font-size: clamp(52px, 15vw, 66px) !important; }
  .pv3-reference #billing-summary { margin-top: 10px !important; font-size: 14px !important; }
  .pv3-reference #billing-panel .billing-overview { grid-template-columns: 1fr !important; }
  .pv3-reference #billing-panel .billing-overview__balance { min-height: 122px !important; }
  .pv3-reference #billing-panel .billing-overview__balance strong { font-size: 58px !important; }
  .pv3-reference #billing-panel .billing-overview__explain { display: block; min-height: 0 !important; padding: 18px 20px !important; }
  .pv3-reference #billing-panel .billing-overview__explain h3 { font-size: 27px !important; }
  .pv3-reference #billing-panel .billing-overview__actions { justify-content: flex-start; margin-top: 14px !important; }
  .pv3-reference #billing-panel .billing-plans { padding-inline: 2px 16vw !important; }
  .pv3-reference #billing-panel .pv3-plan,
  .pv3-reference #billing-panel .billing-card { flex-basis: 72vw !important; min-height: 210px !important; }
}

/* Unified transparent scenes: let the artwork breathe, never frost it. */
body[data-studio-step="story"] .pv3-reference #lyrics_or_idea {
  min-height: clamp(210px, 31vh, 320px) !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid rgba(132, 218, 250, .2) !important;
  border-radius: 12px !important;
  color: rgba(242, 249, 251, .94) !important;
  background: rgba(1, 9, 17, .16) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 24px 80px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;
}

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea:focus {
  border-color: rgba(83, 210, 255, .48) !important;
  box-shadow: 0 0 0 1px rgba(44, 196, 247, .08), 0 0 48px rgba(27, 174, 224, .07) !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card,
body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip {
  border-color: rgba(141, 220, 250, .14) !important;
  background-color: rgba(1, 9, 17, .1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card.is-active,
body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip.is-active {
  border-color: rgba(72, 211, 255, .62) !important;
  box-shadow: 0 0 0 1px rgba(40, 195, 245, .08), 0 16px 56px rgba(0, 0, 0, .16) !important;
}

body[data-studio-step="sound"] .pv3-reference .chips:not([data-target="mood"]) .chip,
body[data-studio-step="sound"] .pv3-reference .chip-row:not([data-target="mood"]) .chip {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-color: rgba(135, 216, 247, .13) !important;
  color: rgba(217, 238, 246, .58) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
  width: min(660px, calc(100vw - 48px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 18px 20px 86px !important;
  box-sizing: border-box !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(137, 218, 250, .15) !important;
  border-radius: 11px !important;
  background: rgba(1, 9, 17, .12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip.is-active {
  color: rgba(238, 249, 252, .96) !important;
  background: rgba(28, 173, 222, .14) !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-card {
  width: min(560px, 100%) !important;
  margin: 14px auto 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(138, 217, 247, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 9px !important;
  white-space: normal !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-check span,
body[data-studio-step="voice"] .pv3-reference .voice-consent-card p {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-verify-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body[data-studio-step="voice"] .pv3-reference #custom-voice-verify-actions button {
  width: auto !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(118, 213, 248, .18) !important;
  border-radius: 9px !important;
  color: rgba(222, 240, 247, .7) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="advanced"] .pv3-reference #track-form {
  width: min(980px, calc(100vw - 64px)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
  width: 100% !important;
  max-height: calc(100svh - 244px) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-top: 1px solid rgba(139, 218, 248, .13) !important;
  border-bottom: 1px solid rgba(139, 218, 248, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  scrollbar-width: none;
  box-sizing: border-box !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel::-webkit-scrollbar { display: none; }

body[data-studio-step="advanced"] .pv3-reference .advanced-panel summary {
  min-height: 42px !important;
  padding: 12px 2px !important;
  color: rgba(215, 237, 245, .52) !important;
  background: transparent !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 2px 24px !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > * {
  min-width: 0 !important;
  margin: 0 !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .muted,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .field {
  grid-column: 1 / -1;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .inline-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .inline-grid:has(#performance_space_detail) {
  grid-column: 1 / -1 !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body .field:has(#lyrics_input_mode),
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body .field:has(#lyrics_mode) {
  display: none !important;
}

body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) {
  grid-column: 1 / -1 !important;
}

body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-option {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(132, 215, 247, .14) !important;
  border-radius: 9px !important;
  color: rgba(217, 237, 245, .62) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  white-space: normal !important;
}

body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-option.is-active {
  border-color: rgba(74, 205, 249, .42) !important;
  color: rgba(239, 248, 251, .9) !important;
  background: rgba(21, 151, 196, .09) !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body .field,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body input,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body select,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body input,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body select,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body textarea {
  min-height: 42px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(132, 215, 247, .16) !important;
  border-radius: 0 !important;
  color: rgba(237, 247, 250, .86) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body textarea {
  min-height: 62px !important;
  resize: vertical;
}

body[data-studio-step="advanced"] .pv3-reference .field:has(> #poem_txt_file) {
  display: none !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel,
.pv3-reference.pv3-force-utility #studio-help-panel {
  position: relative !important;
  width: min(1000px, calc(100vw - 64px)) !important;
  max-width: 100% !important;
  min-height: calc(100svh - 98px) !important;
  margin: 0 auto !important;
  padding: clamp(94px, 12vh, 128px) 8px 56px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  box-sizing: border-box !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel .studio-utility-panel__head,
.pv3-reference.pv3-force-utility #studio-help-panel .studio-utility-panel__head {
  align-items: flex-start !important;
  margin: 0 0 22px !important;
  padding: 0 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(135, 215, 247, .12) !important;
  background: transparent !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel .studio-utility-panel__return,
.pv3-reference.pv3-force-utility #studio-help-panel .studio-utility-panel__return {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(214, 237, 246, .56) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel .studio-utility-panel__return::before,
.pv3-reference.pv3-force-utility #studio-help-panel .studio-utility-panel__return::before {
  content: "\2190";
  margin-right: 9px;
  color: var(--pv4-cyan);
}

.pv3-reference.pv3-force-utility .studio-utility-panel__lead {
  max-width: 660px !important;
  color: rgba(217, 237, 245, .5) !important;
  font-family: var(--pv4-serif) !important;
  font-size: 15px !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list {
  gap: 0 34px !important;
  margin: 28px 0 24px !important;
}

.pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list > div {
  min-height: 84px !important;
  padding: 17px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(132, 214, 246, .11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps {
  gap: 0 !important;
  margin: 30px 0 26px !important;
  border-top: 1px solid rgba(132, 214, 246, .11) !important;
}

.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li {
  min-height: 108px !important;
  padding: 20px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(132, 214, 246, .11) !important;
  border-bottom: 1px solid rgba(132, 214, 246, .11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li:last-child {
  border-right: 0 !important;
}

.pv3-reference.pv3-force-utility #studio-help-panel > p:not(.eyebrow):not(.studio-utility-panel__lead) {
  max-width: 760px !important;
  color: rgba(211, 234, 243, .48) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-note {
  margin-top: 26px !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(226, 184, 99, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv2-auth-root {
  border: 1px solid rgba(137, 218, 250, .16) !important;
  border-radius: 12px !important;
  background: rgba(1, 9, 17, .12) !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.14) !important;
  backdrop-filter: none !important;
}

body.pv2-exact .pv3-reference .pv2-auth {
  grid-template-columns: minmax(260px, .72fr) minmax(420px, 1fr) !important;
  gap: clamp(44px, 7vw, 92px) !important;
  padding-inline: clamp(36px, 7vw, 110px) !important;
}

body.pv2-exact .pv3-reference .pv2-auth__intro {
  max-width: 390px !important;
}

body.pv2-exact .pv3-reference .pv2-auth__intro img {
  width: 92px !important;
  max-height: 64px !important;
}

body.pv2-exact .pv3-reference .pv2-auth__intro h2 {
  font-size: clamp(46px, 5vw, 68px) !important;
  line-height: .94 !important;
}

body.pv2-exact .pv3-reference .pv2-auth__mount {
  width: min(100%, 520px) !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate {
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__copy h2 {
  font-size: clamp(40px, 4vw, 54px) !important;
  line-height: .94 !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__lead {
  max-width: 470px !important;
  margin-top: 8px !important;
  color: rgba(214, 235, 243, .58) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__email {
  margin-top: 20px !important;
}

body.pv2-exact .pv3-reference .pv2-auth input {
  min-height: 48px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(127, 215, 248, .24) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-top: 14px !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__actions button {
  min-height: 42px !important;
  border: 1px solid rgba(124, 214, 248, .22) !important;
  border-radius: 9px !important;
  color: rgba(231, 245, 250, .78) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__actions .primary-button {
  border-color: rgba(64, 205, 252, .48) !important;
  color: rgba(241, 250, 252, .94) !important;
  background: rgba(13, 117, 157, .12) !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__note {
  margin: 12px 0 0 !important;
  color: rgba(203, 227, 237, .42) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__fallback {
  margin-top: 16px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(128, 214, 247, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__fallback-title {
  color: rgba(111, 210, 246, .64) !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
}

body.pv2-exact .pv3-reference .pv2-auth .auth-gate__link {
  align-self: center !important;
  color: rgba(228, 205, 163, .72) !important;
  background: transparent !important;
}

.pv3-reference .pv2-auth-root input,
.pv3-reference .pv2-auth-root button {
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 760px) {
  body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
    width: 100% !important;
    margin-top: 76px !important;
    padding: 16px 14px 96px !important;
    background: linear-gradient(180deg, transparent, rgba(1, 7, 14, .66) 28%, rgba(1, 7, 14, .82)) !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
    max-height: calc(100svh - 274px) !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header {
    padding-top: 54px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .studio-group-story > .field-group__header h3::after {
    font-size: clamp(38px, 11vw, 48px) !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body {
    padding-bottom: 136px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference #track-form {
    width: calc(100vw - 28px) !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body,
  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .inline-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-row::-webkit-scrollbar { display: none; }

  body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-option {
    width: 100% !important;
    min-height: 42px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .field:has(#performance_space_detail) .select-tap-option:last-child {
    grid-column: 1 / -1 !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel,
  .pv3-reference.pv3-force-utility #studio-help-panel {
    width: calc(100vw - 20px) !important;
    min-height: 100svh !important;
    padding: 92px 16px 52px !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-utility-panel__return,
  .pv3-reference.pv3-force-utility #studio-help-panel .studio-utility-panel__return {
    width: 34px !important;
    min-width: 34px !important;
    color: transparent !important;
    overflow: hidden;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-utility-panel__return::before,
  .pv3-reference.pv3-force-utility #studio-help-panel .studio-utility-panel__return::before {
    margin: 0 !important;
    color: var(--pv4-cyan) !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list {
    grid-template-columns: 1fr !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps::-webkit-scrollbar { display: none; }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li {
    min-width: 0 !important;
    border-right: 1px solid rgba(132, 214, 246, .11) !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li:nth-child(even) {
    border-right: 0 !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li:last-child {
    grid-column: 1 / -1 !important;
    border-right: 0 !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel h2,
  .pv3-reference.pv3-force-utility #studio-profile-panel h2 {
    font-size: clamp(48px, 14vw, 58px) !important;
    line-height: .92 !important;
  }

  body.pv2-exact .pv3-reference .pv2-auth {
    display: block !important;
    padding: 92px 20px 44px !important;
  }

  body.pv2-exact .pv3-reference .pv2-auth .auth-gate__actions {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .pv3-reference.pv3-force-utility #studio-profile-panel,
  .pv3-reference.pv3-force-utility #studio-help-panel {
    width: calc(100vw - 64px) !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel h2,
  .pv3-reference.pv3-force-utility #studio-help-panel h2 {
    font-size: clamp(52px, 7vw, 68px) !important;
  }

  .pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li {
    padding-inline: 10px !important;
    font-size: 11px !important;
  }
}

/* Cinematic background arc: every step is a full art scene, not a dark form. */
body[data-studio-step="story"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 14, .34), rgba(1, 7, 14, .12) 48%, rgba(1, 7, 14, .3)),
    linear-gradient(180deg, rgba(1, 7, 14, .06), rgba(1, 7, 14, .28)),
    url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/bg-studio-warm-dark.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

body[data-studio-step="sound"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(1, 7, 14, .06), rgba(1, 7, 14, .16) 58%, rgba(1, 7, 14, .4)),
    url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/bg-dark-water-texture.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

body[data-studio-step="voice"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 14, .08), rgba(1, 7, 14, .15) 48%, rgba(1, 7, 14, .42)),
    linear-gradient(180deg, rgba(1, 7, 14, .02), rgba(1, 7, 14, .28)),
    url("/miniapp/static/assets/studio/generated-v2/voice-recording-studio-v2.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

body[data-studio-step="advanced"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 14, .44), rgba(1, 7, 14, .22) 50%, rgba(1, 7, 14, .42)),
    linear-gradient(180deg, rgba(1, 7, 14, .06), rgba(1, 7, 14, .42)),
    url("/miniapp/static/assets/studio/pulse-redesign/01_backgrounds/bg-ice-lightning.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

body[data-studio-step="review"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(1, 7, 14, .3), rgba(1, 7, 14, .12) 50%, rgba(1, 7, 14, .32)),
    linear-gradient(180deg, rgba(1, 7, 14, .04), rgba(1, 7, 14, .38)),
    url("/miniapp/static/assets/studio/generated-v3/utility-aurora-wave-v3.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea,
body[data-studio-step="voice"] .pv3-reference .studio-voice-mode,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel,
body[data-studio-step="review"] .pv3-reference .studio-review-card {
  backdrop-filter: none !important;
}

/* Verification is a pair of quiet actions, not another heavy form panel. */
html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #custom_voice_verify_actions {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(520px, 100%) !important;
  margin: 10px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #custom_voice_verify_actions .secondary-button {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(115, 215, 241, .25) !important;
  border-radius: 9px !important;
  background: rgba(2, 12, 21, .2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: rgba(235, 248, 251, .82) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #custom_voice_verify_actions .secondary-button:hover {
  border-color: rgba(115, 215, 241, .52) !important;
  background: rgba(5, 29, 42, .36) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  body[data-studio-step="story"] .pv3-reference .pv2-studio,
  body[data-studio-step="sound"] .pv3-reference .pv2-studio,
  body[data-studio-step="voice"] .pv3-reference .pv2-studio,
  body[data-studio-step="advanced"] .pv3-reference .pv2-studio,
  body[data-studio-step="review"] .pv3-reference .pv2-studio {
    background-attachment: scroll !important;
  }

  body[data-studio-step="story"] .pv3-reference .pv2-studio {
    background-position: 58% center !important;
  }

  body[data-studio-step="voice"] .pv3-reference .pv2-studio {
    background-position: 32% center !important;
  }

  body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
    background: linear-gradient(180deg, transparent, rgba(1, 7, 14, .42) 34%, rgba(1, 7, 14, .6)) !important;
  }

  body[data-studio-step="voice"] .pv3-reference #track-form {
    min-height: auto !important;
    padding: 44px 0 112px !important;
  }

  body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 10px 28px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .pv2-studio {
    background-position: 58% center !important;
  }
}


/* source: pulseveter_v4_unified.css */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Final responsive clearance: keep the primary action visible above the
   persistent navigation and keep Studio Air out of the hero's content flow. */
.pv2-hero__dots {
  display: none !important;
}

.studio-start-title {
  display: grid;
  gap: 8px;
  width: min(620px, 100%);
  margin: 8px auto 22px;
  padding: 16px 18px;
  border: 1px solid rgba(84, 211, 246, .28);
  border-radius: 20px;
  background: rgba(1, 17, 29, .58);
}

.studio-start-title__label {
  color: #dff8ff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-start-title input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(84, 211, 246, .24);
  border-radius: 14px;
  color: #f4fbff;
  background: rgba(0, 10, 19, .58);
}

.studio-start-title__hint {
  color: rgba(205, 228, 238, .68);
  font-size: .76rem;
}

@media (max-width: 1024px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    width: min(430px, calc(100% - 20px)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 132px 20px calc(126px + env(safe-area-inset-bottom)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    position: absolute !important;
    right: 20px !important;
    bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    left: 20px !important;
    z-index: 12 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.pv5-player-active .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    bottom: calc(210px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 760px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: calc(54px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    width: min(292px, calc(100% - 16px)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 118px 16px calc(126px + env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__logo {
    width: clamp(72px, 22vw, 94px) !important;
    margin-top: 62px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__eyebrow {
    margin-top: 18px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero h1 {
    margin-top: 12px !important;
    font-size: clamp(2.65rem, 12vw, 4rem) !important;
    line-height: .98 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__lead {
    margin-top: 16px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    right: 16px !important;
    bottom: calc(126px + env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    min-height: 58px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__tracks {
    display: none !important;
  }

  .studio-start-title {
    margin: 4px 0 16px;
    padding: 13px 14px;
    border-radius: 16px;
  }
}

@keyframes pv7-stage-fade {
  from { opacity: .72; }
  to { opacity: 1; }
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/cormorant-garamond-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/cormorant-garamond-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/miniapp/static/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pv5-night: #010913;
  --pv5-cyan: #2acbff;
  --pv5-cyan-soft: #a6ecff;
  --pv5-gold: #e8c276;
  --pv5-text: #f3f8fb;
  --pv5-muted: rgba(218, 237, 246, .66);
  --pv5-line: rgba(132, 218, 251, .18);
  --pv5-line-strong: rgba(75, 209, 255, .48);
  --pv5-glass: rgba(2, 13, 23, .24);
  --pv5-glass-deep: rgba(2, 12, 21, .38);
  --pv5-serif: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --pv5-ui: "Manrope", "Segoe UI Variable Text", "Aptos", sans-serif;
  --pv3-serif: var(--pv5-serif);
  --pv3-ui: var(--pv5-ui);
  --pvx-serif: var(--pv5-serif);
  --pvx-ui: var(--pv5-ui);
  --pv-serif: var(--pv5-serif);
  --pv5-master-art: url("/miniapp/static/assets/studio/generated-v3/utility-aurora-wave-v3.webp");
}

/* Step 7 is the pre-generation review. Media appears only after Suno finishes. */
.pv3-reference .pv3-preflight {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  color: #effaff;
}

.pv3-reference .pv3-preflight__header {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: center;
}

.pv3-reference .pv3-preflight__header > p:first-child,
.pv3-reference .pv3-preflight__panel > span {
  color: #48d9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}

.pv3-reference .pv3-preflight__header h2 {
  margin: 8px 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 500;
  line-height: .98;
}

.pv3-reference .pv3-preflight__lead {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(220, 237, 247, .72);
  font-size: 15px;
  line-height: 1.55;
}

.pv3-reference .pv3-preflight__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.pv3-reference .pv3-preflight__tags span {
  padding: 7px 13px;
  border: 1px solid rgba(95, 215, 249, .25);
  border-radius: 999px;
  background: rgba(2, 19, 31, .42);
  color: rgba(232, 247, 253, .84);
  font-size: 12px;
}

.pv3-reference .pv3-preflight__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}

.pv3-reference .pv3-preflight__panel {
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(100, 218, 250, .23);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(4, 26, 40, .76), rgba(1, 12, 22, .58)),
    url("/miniapp/static/assets/studio/pulse-redesign/06_decor/decor-cyan-glow.jpg") center / cover;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 22px 60px rgba(0, 6, 12, .2);
}

.pv3-reference .pv3-preflight__panel--prompt {
  background:
    linear-gradient(145deg, rgba(4, 26, 40, .8), rgba(1, 12, 22, .64)),
    url("/miniapp/static/assets/studio/scene-aurora.jpg") center / cover;
}

.pv3-reference .pv3-preflight__panel p {
  margin: 18px 0 0;
  color: rgba(237, 248, 252, .9);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.48;
  white-space: pre-line;
}

.pv3-reference .pv3-preflight__panel--prompt p {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
}

.pv3-reference .pv3-preflight__note {
  margin: 14px 0 0;
  color: rgba(205, 226, 237, .58);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .pv3-reference .pv3-preflight {
    width: calc(100% - 24px);
  }

  .pv3-reference .pv3-preflight__header {
    margin-bottom: 16px;
  }

  .pv3-reference .pv3-preflight__grid {
    grid-template-columns: 1fr;
  }

  .pv3-reference .pv3-preflight__panel {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }

  body[data-studio-step="result"] .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv3-preflight {
    margin-top: 260px;
  }
}

/* Full-width, touch-friendly track controls on phones. */
@media (max-width: 620px) {
  .pv3-reference .track-card__top {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .pv3-reference .track-card__top > div:not(.cover) {
    display: contents;
  }

  .pv3-reference .track-card__top .track-title,
  .pv3-reference .track-card__top .track-meta {
    grid-column: 2;
    min-width: 0;
  }

  .pv3-reference .track-card__top .web-audio-variant,
  .pv3-reference .track-card__top .ai-disclosure-badge,
  .pv3-reference .track-card__top .track-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .pv3-reference .track-card__top .web-audio-variant:first-of-type {
    margin-top: 4px;
  }

  .pv3-reference .web-audio-player {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    width: 100%;
    padding: 9px 10px !important;
  }

  .pv3-reference .web-audio-player .audio-player__timeline {
    width: 100%;
    min-width: 0;
  }

  .pv3-reference .web-audio-player .audio-player__range,
  .pv5-mini-player__seek {
    width: 100%;
    height: 24px;
    margin: -7px 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: pan-x;
  }

  .pv3-reference .web-audio-player .audio-player__range::-webkit-slider-runnable-track,
  .pv5-mini-player__seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(70, 216, 252, .78), rgba(95, 178, 207, .26));
  }

  .pv3-reference .web-audio-player .audio-player__range::-webkit-slider-thumb,
  .pv5-mini-player__seek::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
    appearance: none;
    border: 3px solid rgba(1, 30, 45, .92);
    border-radius: 50%;
    background: #70e4ff;
    box-shadow: 0 0 0 1px rgba(119, 231, 255, .68), 0 0 18px rgba(55, 207, 244, .34);
  }

  .pv3-reference .web-audio-player .audio-player__range::-moz-range-track,
  .pv5-mini-player__seek::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(65, 206, 245, .42);
  }

  .pv3-reference .web-audio-player .audio-player__range::-moz-range-thumb,
  .pv5-mini-player__seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid rgba(1, 30, 45, .92);
    border-radius: 50%;
    background: #70e4ff;
  }
}

/*
 * Unified 2.0 art direction.
 * This file intentionally sits above the experimental visual layers and keeps
 * the existing DOM, IDs and application logic intact.
 */
html body.pv2-exact,
html body.pv3-reference-body,
.pv3-reference {
  color: var(--pv5-text) !important;
  background: var(--pv5-night) !important;
  font-family: var(--pv5-ui) !important;
}

html body.pv2-exact .pv3-reference .pv2-screen:not(.is-active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.pv2-exact .pv3-reference .pv2-screen.is-active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-studio .pv2-hero,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-studio .pv2-auth,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-studio .pv2-library,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-studio .pv2-utility {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-studio .pv2-studio {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-utility .pv2-hero,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-utility .pv2-auth,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-utility .pv2-studio,
html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-utility .pv2-library {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.pv2-exact.pv3-showcase .pv3-reference.pv3-force-utility .pv2-utility {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.pv3-reference::before {
  z-index: 12 !important;
  background:
    radial-gradient(circle at 50% 42%, transparent 18%, rgba(0, 5, 11, .08) 62%, rgba(0, 4, 10, .56) 100%),
    linear-gradient(180deg, rgba(0, 6, 13, .04), transparent 34%, rgba(0, 5, 11, .2)) !important;
}

.pv3-reference::after {
  opacity: .08 !important;
  mix-blend-mode: screen !important;
}

.pv3-reference h1,
.pv3-reference h2,
.pv3-reference h3,
.pv3-reference .studio-start-panel__head h2,
.pv3-reference .field-group__header h3,
.pv3-reference .studio-review-card h2 {
  color: var(--pv5-text) !important;
  font-family: var(--pv5-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 3px 30px rgba(0, 7, 15, .56) !important;
}

.pv3-reference p,
.pv3-reference label,
.pv3-reference small,
.pv3-reference .muted {
  color: var(--pv5-muted) !important;
}

.pv3-reference .eyebrow,
.pv3-reference .pv2-hero__eyebrow,
.pv3-reference .pv3-scene-caption span,
.pv3-reference .section__pill {
  color: var(--pv5-cyan) !important;
  font-family: var(--pv5-ui) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

/* One navigation language on every screen: transparent, thin and quiet. */
.pv3-reference .pv2-topbar {
  top: 20px !important;
  right: 28px !important;
  left: 28px !important;
  height: 42px !important;
}

.pv3-reference .pv2-topbar__menu,
.pv3-reference .pv2-help,
.pv3-reference .pv2-impulses,
.pv3-reference .pv2-languages,
.pv3-reference .pv3-showcase-nav {
  border: 1px solid var(--pv5-line) !important;
  color: rgba(239, 249, 253, .84) !important;
  background: rgba(2, 13, 23, .28) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 38px rgba(0, 0, 0, .14) !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv3-showcase-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pv3-reference .pv3-showcase-nav::-webkit-scrollbar {
  display: none;
}

.pv3-reference details.pv3-showcase-nav > summary {
  display: block !important;
  min-height: 30px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  list-style: none !important;
  color: rgba(239, 249, 253, .84) !important;
  font-size: 10px !important;
}

.pv3-reference details.pv3-showcase-nav > summary::-webkit-details-marker {
  display: none !important;
}

.pv3-reference details.pv3-showcase-nav:not([open]) > button {
  display: none !important;
}

.pv3-reference details.pv3-showcase-nav[open] > button {
  display: block !important;
}

.pv3-reference .pv3-viewport-nav {
  position: fixed;
  z-index: 440;
  top: 20px;
  left: 216px;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--pv5-line);
  border-radius: 11px;
  color: rgba(239, 249, 253, .86);
  background: rgba(2, 13, 23, .4);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 38px rgba(0, 0, 0, .18);
}

.pv3-reference .pv3-viewport-nav > summary {
  min-height: 30px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 10px;
}

.pv3-reference .pv3-viewport-nav > summary::-webkit-details-marker {
  display: none;
}

.pv3-reference .pv3-viewport-nav:not([open]) > button {
  display: none;
}

.pv3-reference .pv3-viewport-nav[open] > button {
  display: inline-block;
}

.pv3-reference .pv3-viewport-nav button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: rgba(214, 239, 248, .76);
  background: transparent;
  font-size: 10px;
}

.pv3-reference .pv3-viewport-nav button:hover,
.pv3-reference .pv3-viewport-nav button.is-active {
  color: #fff;
  background: rgba(20, 133, 177, .34);
}

.pv3-reference .pv3-viewport-stage {
  position: fixed;
  z-index: 400;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(34, 174, 218, .12), transparent 36%),
    #010811;
}

.pv3-reference .pv3-viewport-stage[hidden] {
  display: none;
}

.pv3-reference .pv3-viewport-stage__label {
  position: fixed;
  z-index: 2;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(223, 244, 251, .72);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pv3-reference .pv3-viewport-stage__frame {
  position: absolute;
  top: 72px;
  left: 50%;
  width: var(--pv3-preview-width);
  height: var(--pv3-preview-height);
  transform: translateX(-50%) scale(var(--pv3-preview-scale));
  transform-origin: top center;
  border: 1px solid rgba(105, 214, 248, .34);
  border-radius: 12px;
  background: #020b14;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .62), 0 0 42px rgba(35, 181, 226, .12);
}

/* The main menu is a small illustrated scene, not a technical sidebar. */
.pv3-reference .pv2-drawer {
  z-index: 150 !important;
  width: min(400px, calc(100vw - 18px)) !important;
  padding: 24px 22px 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(132, 218, 251, .2) !important;
  border-left: 0 !important;
  border-radius: 0 26px 26px 0 !important;
  background-color: #03111d !important;
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .1), rgba(1, 10, 18, .42) 48%, rgba(1, 8, 15, .78)),
    radial-gradient(circle at 70% 22%, rgba(37, 198, 245, .12), transparent 38%) !important;
  background-position: center, center, center 34% !important;
  background-size: cover !important;
  box-shadow: 24px 0 80px rgba(0, 4, 10, .34), inset -1px 0 rgba(255, 255, 255, .025) !important;
  backdrop-filter: none !important;
}

.pv3-reference.is-menu-open .pv2-topbar,
.pv3-reference.is-menu-open .pv3-showcase-nav,
.pv3-reference.is-menu-open .pv3-viewport-nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

.pv3-reference.is-menu-open .pv2-drawer {
  opacity: 1 !important;
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .1), rgba(1, 10, 18, .42) 48%, rgba(1, 8, 15, .78)),
    radial-gradient(circle at 70% 22%, rgba(37, 198, 245, .12), transparent 38%),
    var(--pv-drawer-art, linear-gradient(transparent, transparent)) !important;
}

.pv3-reference .pv2-drawer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 58%, rgba(0, 7, 13, .38)),
    radial-gradient(circle at 18% 84%, rgba(30, 177, 223, .1), transparent 34%);
}

.pv3-reference .pv2-drawer__head {
  min-height: 70px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(139, 218, 251, .14) !important;
}

.pv3-reference .pv2-drawer__brand {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 12px !important;
}

.pv3-reference .pv2-drawer__brand > span {
  position: relative;
  display: grid !important;
  flex: 0 0 48px !important;
  place-content: center !important;
  width: 48px !important;
  height: 48px !important;
  overflow: hidden !important;
  border: 1px solid rgba(103, 222, 255, .34) !important;
  border-radius: 50% !important;
  background: rgba(2, 17, 29, .28) !important;
  box-shadow: 0 0 28px rgba(35, 197, 242, .12), inset 0 1px rgba(255, 255, 255, .06) !important;
}

.pv3-reference .pv2-drawer__brand > span img {
  position: absolute !important;
  top: -8px !important;
  left: -18px !important;
  display: block !important;
  width: 78px !important;
  max-width: none !important;
  height: 78px !important;
  object-fit: contain !important;
  filter: saturate(1.08) brightness(1.12) drop-shadow(0 0 8px rgba(37, 205, 247, .32)) !important;
}

.pv3-reference .pv2-drawer__brand > span::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 69, 84, 0), rgba(7, 69, 84, .96) 45%);
}

.pv3-reference .pv2-drawer__brand div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.pv3-reference .pv2-drawer__brand strong {
  color: #f6fbfd !important;
  font-family: var(--pv5-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.pv3-reference .pv2-drawer__brand small {
  overflow: hidden !important;
  color: rgba(165, 223, 242, .6) !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.pv3-reference .pv2-drawer__head > button {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(139, 218, 251, .2) !important;
  color: rgba(231, 248, 253, .86) !important;
  background: rgba(2, 15, 25, .24) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv2-drawer nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 20px !important;
}

.pv3-reference .pv2-drawer nav button {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 84px !important;
  padding: 42px 13px 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(132, 218, 251, .17) !important;
  border-radius: 15px !important;
  color: rgba(232, 246, 251, .8) !important;
  background: rgba(2, 14, 24, .22) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .022), 0 12px 30px rgba(0, 0, 0, .08) !important;
  backdrop-filter: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.pv3-reference .pv2-drawer nav button::before {
  content: "○";
  position: absolute;
  top: 11px;
  left: 13px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(102, 218, 251, .21);
  border-radius: 50%;
  color: var(--pv5-cyan-soft);
  background: rgba(6, 50, 69, .18);
  font-family: var(--pv5-ui);
  font-size: 12px;
  font-weight: 400;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="hero"]::before { content: "⌂"; }
.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"]::before { content: "✦"; }
.pv3-reference .pv2-drawer nav [data-pv2-screen="tracks"]::before { content: "♫"; }
.pv3-reference .pv2-drawer nav [data-pv2-open="billing"]::before { content: "+"; }
.pv3-reference .pv2-drawer nav [data-pv2-open="profile"]::before { content: "◯"; }
.pv3-reference .pv2-drawer nav [data-pv2-open="help"]::before { content: "?"; }

.pv3-reference .pv2-drawer nav [data-pv2-open="help"] {
  align-items: center !important;
  grid-column: 1 / -1 !important;
  min-height: 54px !important;
  padding: 0 46px 0 52px !important;
  border-radius: 999px !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-open="help"]::before {
  top: 50% !important;
  left: 13px !important;
  transform: translateY(-50%) !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"] {
  align-items: center !important;
  order: -1 !important;
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
  padding: 0 46px 0 54px !important;
  border-color: rgba(102, 222, 255, .58) !important;
  border-radius: 999px !important;
  color: #f8fdff !important;
  background: linear-gradient(180deg, rgba(28, 174, 220, .7), rgba(4, 89, 128, .66)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 12px 34px rgba(0, 137, 190, .16) !important;
  font-size: 14px !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"]::before {
  top: 50% !important;
  left: 16px !important;
  transform: translateY(-50%) !important;
  border-color: rgba(192, 242, 255, .34) !important;
  background: rgba(0, 42, 65, .2) !important;
}

.pv3-reference .pv2-drawer nav button:hover,
.pv3-reference .pv2-drawer nav button.is-active {
  border-color: rgba(83, 215, 255, .52) !important;
  color: #fff !important;
  background-color: rgba(5, 65, 88, .3) !important;
  box-shadow: inset 0 0 0 1px rgba(54, 199, 241, .05), 0 0 28px rgba(27, 175, 217, .08) !important;
}

.pv3-reference .pv2-drawer nav button.is-active::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee1ff;
  box-shadow: 0 0 11px rgba(70, 215, 255, .8);
}

.pv3-reference .pv2-drawer__foot {
  position: absolute !important;
  right: 24px !important;
  bottom: 22px !important;
  left: 24px !important;
  margin: 0 !important;
  color: rgba(189, 228, 241, .46) !important;
  font-family: var(--pv5-serif) !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: .01em !important;
  text-align: center !important;
}

.pv3-reference .pv2-drawer-shade {
  z-index: 140 !important;
  background:
    radial-gradient(circle at 22% 38%, rgba(20, 142, 181, .08), transparent 34%),
    rgba(0, 6, 12, .68) !important;
  backdrop-filter: none !important;
}

/* Final menu treatment: only floating controls over the current scene. */
.pv3-reference .pv2-drawer {
  width: min(320px, calc(100vw - 54px)) !important;
  height: auto !important;
  padding: 20px 14px !important;
  border: 0 !important;
  border-radius: 0 0 24px 0 !important;
  background:
    radial-gradient(circle at 16% 0, rgba(72, 216, 243, .2), transparent 38%),
    linear-gradient(145deg, rgba(7, 67, 82, .97), rgba(4, 39, 53, .96)) !important;
  box-shadow: 18px 20px 56px rgba(0, 20, 29, .12) !important;
}

.pv3-reference .pv2-drawer::before {
  content: none !important;
  display: none !important;
}

.pv3-reference .pv2-drawer__head {
  min-height: 56px !important;
  padding: 0 2px 14px !important;
  border-bottom: 0 !important;
}

.pv3-reference .pv2-drawer__brand {
  gap: 10px !important;
}

.pv3-reference .pv2-drawer__brand > span {
  flex-basis: 40px !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(1, 14, 23, .18) !important;
}

.pv3-reference .pv2-drawer__brand strong {
  font-size: 19px !important;
  text-shadow: 0 2px 18px rgba(0, 5, 10, .72) !important;
}

.pv3-reference .pv2-drawer__brand small {
  font-size: 7px !important;
  text-shadow: 0 2px 12px rgba(0, 5, 10, .86) !important;
}

.pv3-reference .pv2-drawer nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.pv3-reference .pv2-drawer nav button,
.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"],
.pv3-reference .pv2-drawer nav [data-pv2-open="help"] {
  order: initial !important;
  display: flex !important;
  align-items: center !important;
  grid-column: auto !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 42px 0 50px !important;
  border: 1px solid rgba(148, 224, 250, .2) !important;
  border-radius: 999px !important;
  color: rgba(240, 250, 253, .9) !important;
  background: rgba(2, 18, 29, .18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 28px rgba(0, 4, 9, .08) !important;
  font-size: 12px !important;
  text-shadow: 0 2px 12px rgba(0, 5, 10, .82) !important;
}

.pv3-reference .pv2-drawer nav button::before,
.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"]::before,
.pv3-reference .pv2-drawer nav [data-pv2-open="help"]::before {
  content: "" !important;
  top: 50% !important;
  left: 12px !important;
  width: 30px !important;
  height: 30px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 0 8px rgba(48, 205, 249, .18));
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="hero"]::before {
  background-image: url("/miniapp/static/assets/icons/home.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"]::before {
  background-image: url("/miniapp/static/assets/icons/create-track.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="tracks"]::before {
  background-image: url("/miniapp/static/assets/icons/my-tracks.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-open="billing"]::before {
  background-image: url("/miniapp/static/assets/icons/impulses.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-open="profile"]::before {
  background-image: url("/miniapp/static/assets/icons/profile.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-open="help"]::before {
  background-image: url("/miniapp/static/assets/icons/help.svg") !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="studio"] {
  border-color: rgba(91, 218, 255, .55) !important;
  background: linear-gradient(90deg, rgba(10, 124, 165, .5), rgba(8, 81, 112, .18)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 113, 157, .1) !important;
}

.pv3-reference .pv2-drawer nav button:hover,
.pv3-reference .pv2-drawer nav button.is-active {
  border-color: rgba(80, 216, 255, .62) !important;
  background: rgba(5, 83, 111, .28) !important;
}

.pv3-reference .pv2-drawer__foot {
  display: none !important;
}

.pv3-reference .pv2-drawer-shade {
  background: rgba(4, 35, 47, .06) !important;
}

.pv3-reference .pv2-topbar__menu,
.pv3-reference .pv2-impulses,
.pv3-reference .pv2-languages,
.pv3-reference .pv3-showcase-nav {
  border-radius: 11px !important;
}

.pv3-reference .pv2-help {
  border-radius: 50% !important;
}

.pv3-reference .pv2-languages button.is-active,
.pv3-reference .pv3-showcase-nav button.is-active {
  color: #f8fdff !important;
  background: rgba(20, 133, 177, .3) !important;
  box-shadow: inset 0 0 0 1px rgba(61, 211, 255, .14) !important;
}

/* A single Baikal world across the application. */
.pv3-reference .pv2-hero,
.pv3-reference .pv2-studio,
.pv3-reference .pv2-library,
.pv3-reference .pv2-utility,
.pv3-reference .pv2-auth {
  background-color: var(--pv5-night) !important;
  background-image:
    linear-gradient(180deg, rgba(0, 7, 14, .06), rgba(0, 7, 14, .18) 58%, rgba(0, 5, 11, .54)),
    var(--pv5-master-art) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* The two narrative rooms come directly from the reference, with the same grade. */
body[data-studio-step="story"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(0, 7, 14, .34), rgba(0, 7, 14, .06) 52%, rgba(0, 7, 14, .22)),
    linear-gradient(180deg, rgba(0, 7, 14, .08), rgba(0, 7, 14, .34)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
  background-position: center bottom !important;
}

body[data-studio-step="voice"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(90deg, rgba(0, 7, 14, .04), rgba(0, 7, 14, .22) 48%, rgba(0, 7, 14, .58)),
    linear-gradient(180deg, rgba(0, 7, 14, .04), rgba(0, 7, 14, .28)),
    url("/miniapp/static/assets/studio/generated-v2/voice-recording-studio-v2.webp") !important;
  background-position: left center !important;
}

/* Remove the bright ice detour: tuning and review stay in the same lake scene. */
body[data-studio-step="start"] .pv3-reference .pv2-studio,
body[data-studio-step="sound"] .pv3-reference .pv2-studio,
body[data-studio-step="advanced"] .pv3-reference .pv2-studio,
body[data-studio-step="review"] .pv3-reference .pv2-studio,
body[data-studio-step="result"] .pv3-reference .pv2-studio {
  background-image:
    linear-gradient(180deg, rgba(0, 7, 14, .08), rgba(0, 7, 14, .2) 56%, rgba(0, 5, 11, .58)),
    var(--pv5-master-art) !important;
  background-position: center !important;
}

.pv3-reference .pv2-studio,
.pv3-reference .pv2-library,
.pv3-reference .pv2-utility {
  padding: 74px 28px 84px !important;
}

.pv3-reference .pv2-studio__mount,
.pv3-reference .pv2-library__mount,
.pv3-reference .pv2-utility__mount {
  width: min(1120px, 100%) !important;
  margin-inline: auto !important;
}

html body.pv2-exact .pv3-reference .pv2-studio-root,
html body.pv2-exact .pv3-reference .pv2-library__mount > *,
html body.pv2-exact .pv3-reference .pv2-utility__mount > * {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv3-scene-caption {
  top: 27px !important;
}

.pv3-reference .pv3-scene-caption strong {
  color: rgba(231, 244, 249, .56) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

/* Hero now uses the exact same world and proportions as the inner screens. */
.pv3-reference .pv2-hero__content {
  width: min(640px, calc(100% - 44px)) !important;
  padding-top: 66px !important;
}

.pv3-reference .pv2-hero__logo {
  width: clamp(92px, 7.6vw, 122px) !important;
  margin-bottom: 9px !important;
}

.pv3-reference .pv2-hero h1 {
  margin: 12px 0 16px !important;
  font-size: clamp(50px, 4.9vw, 70px) !important;
  line-height: .98 !important;
}

.pv3-reference .pv2-hero h1 span {
  color: var(--pv5-cyan-soft) !important;
  text-shadow: 0 0 38px rgba(35, 196, 246, .18) !important;
}

.pv3-reference .pv2-hero__lead {
  margin-bottom: 24px !important;
  color: rgba(231, 244, 249, .72) !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}

.pv3-reference .pv2-hero__create {
  min-width: 258px !important;
  min-height: 54px !important;
  border-radius: 13px !important;
}

/* Shared transparent surface: the image remains visible, never frosted. */
.pv3-reference .studio-scenario-card,
.pv3-reference input,
.pv3-reference textarea,
.pv3-reference select,
.pv3-reference .studio-voice-mode,
.pv3-reference .advanced-panel,
.pv3-reference .studio-review-card,
.pv3-reference .track-card,
.pv3-reference .tracks-retention-note,
.pv3-reference #billing-panel .billing-overview__balance,
.pv3-reference #billing-panel .billing-overview__explain,
.pv3-reference #billing-panel .pv3-plan,
.pv3-reference #billing-panel .billing-card,
.pv3-reference #studio-profile-panel .studio-profile-list > div,
.pv3-reference #studio-help-panel .studio-help-steps li,
.pv3-reference #studio-help-panel .studio-help-note,
.pv3-reference .pv2-auth-root {
  border-color: var(--pv5-line) !important;
  background: var(--pv5-glass) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .022), 0 18px 54px rgba(0, 0, 0, .12) !important;
  backdrop-filter: none !important;
}

.pv3-reference input:focus,
.pv3-reference textarea:focus,
.pv3-reference select:focus {
  border-color: var(--pv5-line-strong) !important;
  background: rgba(2, 13, 23, .34) !important;
  box-shadow: 0 0 0 3px rgba(42, 203, 255, .07), 0 18px 54px rgba(0, 0, 0, .14) !important;
}

/* The same editorial rhythm for every studio page. */
.pv3-reference .studio-start-panel,
.pv3-reference #track-form > .field-group,
.pv3-reference .studio-review-panel,
.pv3-reference .studio-result-panel {
  width: min(1000px, 100%) !important;
  min-height: calc(100svh - 158px) !important;
  margin-inline: auto !important;
}

.pv3-reference .studio-start-panel__head,
.pv3-reference .field-group__header {
  max-width: 720px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.pv3-reference .studio-start-panel__head h2,
.pv3-reference .field-group__header h3,
.pv3-reference .studio-review-card h2 {
  font-size: clamp(42px, 4.1vw, 58px) !important;
  line-height: .98 !important;
}

.pv3-reference .studio-start-panel__head p,
.pv3-reference .field-group__header p,
.pv3-reference .studio-review-card > p {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Start: compact transparent choices, no blurred dashboard cards. */
body[data-studio-step="start"] .pv3-reference .studio-start-panel {
  justify-content: center !important;
  padding-top: 24px !important;
}

.pv3-reference .studio-scenario-grid {
  width: min(760px, 100%) !important;
  gap: 10px !important;
  margin-top: 26px !important;
}

.pv3-reference .studio-scenario-card {
  min-height: 88px !important;
  border-radius: 13px !important;
}

.pv3-reference .studio-scenario-card:hover,
.pv3-reference .studio-scenario-card.is-active {
  border-color: var(--pv5-line-strong) !important;
  background: rgba(3, 25, 39, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(42, 203, 255, .07), 0 0 30px rgba(17, 171, 220, .08) !important;
}

/* Story: one clear transparent writing surface. */
body[data-studio-step="story"] .pv3-reference #track-form {
  width: min(820px, 100%) !important;
}

body[data-studio-step="story"] .pv3-reference #lyrics_or_idea {
  min-height: clamp(210px, 31vh, 280px) !important;
  padding: 24px 26px !important;
  border: 1px solid rgba(149, 225, 252, .24) !important;
  border-radius: 13px !important;
  background: rgba(2, 12, 21, .2) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .02), 0 20px 54px rgba(0, 0, 0, .1) !important;
  backdrop-filter: none !important;
  font-family: var(--pv5-serif) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

body[data-studio-step="story"] .pv3-reference .studio-group-start > .pv3-event-picker:not([hidden]) {
  display: grid !important;
  width: min(760px, 100%) !important;
  gap: 14px !important;
  margin: 4px auto 10px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(149, 225, 252, .2) !important;
  border-radius: 13px !important;
  background: rgba(2, 12, 21, .18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .02), 0 18px 50px rgba(0, 0, 0, .1) !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv3-event-picker[hidden] {
  display: none !important;
}

.pv3-reference .pv3-event-picker__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.pv3-reference .pv3-event-picker__head > span {
  color: rgba(241, 250, 253, .92) !important;
  font-family: var(--pv5-serif) !important;
  font-size: 20px !important;
}

.pv3-reference .pv3-event-picker__head small,
.pv3-reference .pv3-event-picker__custom > span {
  color: var(--pv5-cyan) !important;
  font-family: var(--pv5-ui) !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.pv3-reference .pv3-event-picker .template-strip__chips {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.pv3-reference .pv3-event-picker .template-chip {
  min-height: 40px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(132, 218, 251, .17) !important;
  border-radius: 999px !important;
  color: rgba(235, 248, 253, .82) !important;
  background: rgba(2, 13, 23, .2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv3-event-picker .template-chip:hover,
.pv3-reference .pv3-event-picker .template-chip.is-active {
  border-color: rgba(84, 215, 255, .56) !important;
  color: #f8fdff !important;
  background: rgba(11, 109, 148, .28) !important;
}

.pv3-reference .pv3-event-picker__custom {
  display: grid !important;
  gap: 7px !important;
}

.pv3-reference .pv3-event-picker__custom input {
  min-height: 44px !important;
  padding-inline: 16px !important;
  border-radius: 10px !important;
}

/* Sound: reference image cards plus one quiet genre rail. */
body[data-studio-step="sound"] .pv3-reference #track-form {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-event-picker {
  display: none !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference .studio-wizard-actions {
  position: static !important;
  width: min(1080px, calc(100% - 24px)) !important;
  margin: 16px auto max(18px, env(safe-area-inset-bottom)) !important;
  padding: 0 !important;
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  background: transparent !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference #track-form > .studio-group-start {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 12px !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-group-sound {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-mood-selection {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: fit-content !important;
  min-height: 28px !important;
  margin: 2px auto 10px !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(85, 215, 255, .34) !important;
  border-radius: 999px !important;
  color: rgba(229, 246, 252, .84) !important;
  background: rgba(3, 39, 54, .22) !important;
  box-shadow: 0 0 22px rgba(28, 182, 225, .08) !important;
  backdrop-filter: none !important;
  font-size: 10px !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-mood-selection[hidden] {
  display: none !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-mood-selection span {
  color: var(--pv5-cyan) !important;
  font-size: 8px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-mood-selection strong {
  color: #f7fcff !important;
  font-weight: 500 !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-custom-style {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(620px, 100%) !important;
  margin: 6px auto 2px !important;
  padding: 7px 8px 7px 16px !important;
  border: 1px solid rgba(113, 218, 249, .2) !important;
  border-radius: 999px !important;
  color: rgba(118, 224, 252, .9) !important;
  background: rgba(2, 18, 29, .24) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference .field:has(> #mood) > .pv3-custom-style {
  display: grid !important;
  order: 4 !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-custom-style input {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(113, 218, 249, .14) !important;
  border-radius: 999px !important;
  color: #f5fbfd !important;
  background: rgba(1, 11, 19, .32) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-custom-style input::placeholder {
  color: rgba(184, 217, 229, .48) !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-custom-style input:focus {
  border-color: rgba(76, 220, 255, .58) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 203, 255, .06) !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-genre-preset-title {
  margin: 8px auto 5px !important;
  color: rgba(91, 218, 251, .78) !important;
  font-size: 8px !important;
  letter-spacing: .14em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-visual {
  width: min(920px, 100%) !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card {
  min-height: clamp(190px, 29vh, 238px) !important;
  border-radius: 13px !important;
  background-color: rgba(2, 13, 23, .16) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16) !important;
  backdrop-filter: none !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .88) 100%),
    url("/miniapp/static/assets/studio/generated-v2/mood-cards-strip-v2.webp") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 500% 100% !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip:nth-child(1) {
  background-position: center, 0% center !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip:nth-child(2) {
  background-position: center, 25% center !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip:nth-child(3) {
  background-position: center, 50% center !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip:nth-child(4) {
  background-position: center, 75% center !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip:nth-child(5) {
  background-position: center, 100% center !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-mood-card.is-active {
  border-color: var(--pv5-cyan) !important;
  box-shadow: 0 0 0 2px rgba(42, 203, 255, .1), 0 0 28px rgba(42, 203, 255, .18) !important;
}

body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip.is-active,
body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip[aria-pressed="true"],
body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip[data-selected="true"] {
  z-index: 2 !important;
  border: 3px solid rgba(91, 225, 255, .98) !important;
  box-shadow:
    0 0 0 4px rgba(42, 203, 255, .12),
    0 0 42px rgba(42, 203, 255, .38),
    0 22px 52px rgba(0, 0, 0, .22) !important;
  transform: translateY(-7px) scale(1.015) !important;
  user-select: none !important;
}

body[data-studio-step="sound"] .pv3-reference [data-target="mood"]:has(.chip.is-active) .chip:not(.is-active),
body[data-studio-step="sound"] .pv3-reference [data-target="mood"]:has(.chip[data-selected="true"]) .chip:not([data-selected="true"]) {
  opacity: .62 !important;
  filter: saturate(.72) brightness(.76) !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip.is-active::after,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[aria-pressed="true"]::after,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-selected="true"]::after {
  content: "✓" !important;
  position: absolute !important;
  inset: 12px auto auto 12px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(208, 248, 255, .86) !important;
  border-radius: 50% !important;
  color: #05202b !important;
  background: linear-gradient(145deg, #dff9ff, #61dcff) !important;
  box-shadow: 0 0 20px rgba(61, 217, 255, .48) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body[data-studio-step="sound"] .pv3-reference .chips:not([data-target="mood"]) .chip,
body[data-studio-step="sound"] .pv3-reference .chip-row:not([data-target="mood"]) .chip {
  min-height: 34px !important;
  border: 1px solid rgba(132, 218, 251, .15) !important;
  border-radius: 999px !important;
  background: rgba(2, 13, 23, .18) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Voice: preserve the reference microphone and keep controls weightless. */
body[data-studio-step="voice"] .pv3-reference #track-form {
  align-items: center !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
  width: min(650px, 56%) !important;
  margin: 0 3% 0 auto !important;
  padding: 18px 16px 76px !important;
  background: transparent !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .studio-voice-step {
  width: min(620px, 54%) !important;
  min-height: auto !important;
  margin: 0 2% 0 auto !important;
  padding: 12px 12px 82px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header {
  margin-bottom: 10px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .studio-voice-step > .field-group__header h3::after {
  font-size: clamp(38px, 3.6vw, 50px) !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip {
  min-height: 38px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #custom-voice-panel::before {
  height: 62px !important;
  margin: 2px 0 8px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #record-custom-voice {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference #upload-custom-voice {
  margin-top: 2px !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .voice-consent-card {
  gap: 5px !important;
  margin-top: 7px !important;
  padding-top: 7px !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  margin-inline: auto !important;
  padding: 4px !important;
  border: 1px solid var(--pv5-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding-inline: 12px !important;
  border-radius: 9px !important;
  text-align: center !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-mode .chip.is-active {
  border-color: rgba(77, 210, 255, .42) !important;
  background: linear-gradient(180deg, rgba(23, 160, 205, .42), rgba(7, 91, 126, .34)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09) !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-suno.hidden,
body[data-studio-step="voice"] .pv3-reference .studio-voice-custom.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-voice-suno:not(.hidden),
body[data-studio-step="voice"] .pv3-reference .studio-voice-custom:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-studio-step="voice"] .pv3-reference .voice-consent-card {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Tuning: transparent two-column instrument panel, not a technical sheet. */
body[data-studio-step="advanced"] .pv3-reference #track-form {
  width: min(980px, 100%) !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
  max-height: min(46vh, 335px) !important;
  padding: 12px 0 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--pv5-line) !important;
  border-bottom: 1px solid rgba(132, 218, 251, .1) !important;
  border-radius: 0 !important;
  background: rgba(2, 13, 23, .16) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body input,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body select,
body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body textarea,
body[data-studio-step="advanced"] .pv3-reference .select-tap-option {
  background: rgba(2, 13, 23, .18) !important;
  backdrop-filter: none !important;
}

/* Review and result use the same transparent release language as the reference. */
body[data-studio-step="review"] .pv3-reference .studio-review-card {
  width: min(900px, 100%) !important;
  padding: 20px 28px 26px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list__row,
body[data-studio-step="review"] .pv3-reference .studio-review-list > * {
  border-color: rgba(132, 218, 251, .12) !important;
  background: transparent !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list__row {
  min-height: 44px !important;
  padding-block: 4px !important;
}

body[data-studio-step="review"] .pv3-reference .studio-review-list {
  row-gap: 0 !important;
}

body[data-studio-step="result"] .pv3-reference .pv3-demo-player,
body[data-studio-step="result"] .pv3-reference .pv3-demo-release__choices button {
  border-color: var(--pv5-line) !important;
  background: rgba(2, 13, 23, .22) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Utility pages remain the benchmark, now without any leftover frost. */
.pv3-reference .pv2-library .tracks-retention-note,
.pv3-reference .pv2-library .track-card,
.pv3-reference.pv3-force-utility #billing-panel .billing-overview__balance,
.pv3-reference.pv3-force-utility #billing-panel .billing-overview__explain,
.pv3-reference.pv3-force-utility #billing-panel .pv3-plan,
.pv3-reference.pv3-force-utility #billing-panel .billing-card,
.pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list > div,
.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-steps li,
.pv3-reference.pv3-force-utility #studio-help-panel .studio-help-note {
  background: rgba(2, 13, 23, .22) !important;
  backdrop-filter: none !important;
}

.pv3-reference.pv3-force-utility #billing-panel .pv3-plan.is-featured,
.pv3-reference.pv3-force-utility #billing-panel .billing-card.is-recommended {
  border-color: rgba(232, 194, 118, .68) !important;
  background: rgba(31, 25, 16, .26) !important;
}

.pv3-reference #billing-panel .billing-plans {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.pv3-reference #billing-panel .pv3-plan {
  min-height: 246px !important;
  padding: 18px !important;
}

.pv3-reference #billing-panel .pv3-plan strong {
  font-size: 48px !important;
}

.pv3-reference #billing-panel .pv3-plan h3 {
  font-size: 19px !important;
}

/* One button hierarchy everywhere. */
.pv3-reference .studio-wizard-actions__primary,
.pv3-reference .primary-button,
.pv3-reference .pv2-hero__create {
  border: 1px solid rgba(117, 225, 255, .78) !important;
  color: #f8fdff !important;
  background: linear-gradient(180deg, rgba(43, 198, 244, .92), rgba(5, 100, 149, .92)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 0 0 3px rgba(42, 203, 255, .06), 0 12px 30px rgba(0, 137, 194, .18) !important;
}

.pv3-reference .studio-wizard-actions button {
  min-height: 44px !important;
  border-radius: 999px !important;
}

.pv3-reference .studio-wizard-actions {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .studio-wizard-actions__back,
.pv3-reference .secondary-button,
.pv3-reference .ghost-button {
  border: 1px solid var(--pv5-line) !important;
  color: rgba(232, 245, 250, .74) !important;
  background: rgba(2, 13, 23, .18) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.pv3-reference .studio-stepper::before {
  background: linear-gradient(90deg, rgba(42, 203, 255, .08), rgba(42, 203, 255, .52), rgba(42, 203, 255, .08)) !important;
}

.pv3-reference .studio-stepper__index {
  background: rgba(2, 13, 23, .42) !important;
  backdrop-filter: none !important;
}

.pv3-reference .studio-stepper__item.is-active .studio-stepper__index {
  background: rgba(27, 162, 210, .92) !important;
  box-shadow: 0 0 24px rgba(42, 203, 255, .42) !important;
}

/* Keep progress and navigation in separate rows at every viewport. */
@media (min-width: 721px) {
  body:not([data-studio-step="start"]) .pv3-reference .studio-stepper {
    bottom: 82px !important;
    width: min(500px, calc(100% - 460px)) !important;
  }

  body:not([data-studio-step="start"]) .pv3-reference .studio-start-panel,
  body:not([data-studio-step="start"]) .pv3-reference #track-form > .field-group,
  body:not([data-studio-step="start"]) .pv3-reference .studio-review-panel,
  body:not([data-studio-step="start"]) .pv3-reference .studio-result-panel {
    padding-bottom: 132px !important;
  }
}

@media (max-width: 720px) {
  body:not([data-studio-step="start"]) .pv3-reference .studio-stepper {
    position: relative !important;
    z-index: 4 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 24px) !important;
    margin: 12px auto 8px !important;
    transform: none !important;
  }
}

/* A restrained scene transition rather than unrelated page jumps. */
.pv3-reference .pv2-screen.is-active .pv2-hero__content,
.pv3-reference .pv2-screen.is-active .pv2-studio__mount,
.pv3-reference .pv2-screen.is-active .pv2-library__mount,
.pv3-reference .pv2-screen.is-active .pv2-utility__mount {
  animation: pv5-scene-enter .48s cubic-bezier(.22, .75, .24, 1) both;
}

@keyframes pv5-scene-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .pv3-reference .pv3-viewport-nav {
    top: 58px;
    right: 12px;
    left: auto;
  }

  .pv3-reference .pv3-viewport-nav[open] {
    right: 12px;
    left: 12px;
    flex-wrap: wrap;
  }

  .pv3-reference .pv3-viewport-stage__frame {
    top: 96px;
  }

  .pv3-reference .pv2-drawer {
    width: min(304px, calc(100vw - 48px)) !important;
    padding: 16px 12px !important;
    border-radius: 0 0 22px 0 !important;
  }

  .pv3-reference .pv2-drawer nav {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .pv3-reference .pv2-drawer nav button {
    min-height: 46px !important;
    padding: 0 38px 0 48px !important;
  }

  .pv3-reference .pv2-drawer__foot {
    display: none !important;
  }

  .pv3-reference::after { opacity: .055 !important; }

  .pv3-reference .pv2-topbar {
    top: 12px !important;
    right: 20px !important;
    left: 12px !important;
  }

  .pv3-reference .pv3-showcase-nav:not([open]) {
    right: auto !important;
    width: 76px !important;
    max-width: 76px !important;
    overflow: hidden !important;
  }

  .pv3-reference .pv3-showcase-nav[open] {
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .pv3-reference .pv2-hero,
  .pv3-reference .pv2-studio,
  .pv3-reference .pv2-library,
  .pv3-reference .pv2-utility,
  .pv3-reference .pv2-auth {
    background-attachment: scroll !important;
  }

  .pv3-reference .pv2-studio,
  .pv3-reference .pv2-library,
  .pv3-reference .pv2-utility {
    scrollbar-width: none;
  }

  .pv3-reference .pv2-studio::-webkit-scrollbar,
  .pv3-reference .pv2-library::-webkit-scrollbar,
  .pv3-reference .pv2-utility::-webkit-scrollbar {
    display: none;
  }

  .pv3-reference .pv2-hero {
    background-position: 58% center !important;
  }

  .pv3-reference .pv2-hero__content {
    width: calc(100% - 30px) !important;
    padding-top: 90px !important;
  }

  .pv3-reference .pv2-hero__logo {
    width: 100px !important;
  }

  .pv3-reference .pv2-hero h1 {
    font-size: clamp(42px, 11.5vw, 54px) !important;
  }

  .pv3-reference .pv2-studio,
  .pv3-reference .pv2-library,
  .pv3-reference .pv2-utility {
    padding: 102px 12px 104px !important;
  }

  .pv3-reference .pv2-utility__mount {
    padding: 0 !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel {
    min-height: auto !important;
    padding: 24px 0 44px !important;
    align-content: start !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .billing-plans {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scrollbar-width: none;
  }

  .pv3-reference.pv3-force-utility #billing-panel .billing-plans::-webkit-scrollbar {
    display: none;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan,
  .pv3-reference.pv3-force-utility #billing-panel .billing-card {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 218px !important;
    padding: 14px !important;
    scroll-snap-align: none !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan:last-of-type {
    grid-column: 1 / -1 !important;
    min-height: 190px !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan strong {
    font-size: 42px !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan h3 {
    margin-bottom: 8px !important;
    font-size: 16px !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan span {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan b {
    margin-bottom: 10px !important;
    font-size: 21px !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan a,
  .pv3-reference.pv3-force-utility #billing-panel .pv3-plan button {
    width: 100% !important;
    min-height: 38px !important;
    padding-inline: 8px !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel,
  .pv3-reference.pv3-force-utility #studio-help-panel {
    width: 100% !important;
    min-height: auto !important;
    padding: 20px 14px 46px !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel h2,
  .pv3-reference.pv3-force-utility #studio-help-panel h2 {
    font-size: clamp(44px, 13vw, 52px) !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list > div {
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 14px 8px !important;
  }

  .pv3-reference.pv3-force-utility #studio-profile-panel .studio-profile-list dd {
    font-size: 16px !important;
    overflow-wrap: anywhere;
  }

  .pv3-reference .studio-start-panel,
  .pv3-reference #track-form > .field-group,
  .pv3-reference .studio-review-panel,
  .pv3-reference .studio-result-panel {
    min-height: calc(100svh - 128px) !important;
    padding: 14px 4px 82px !important;
  }

  .pv3-reference .studio-start-panel__head h2,
  .pv3-reference .field-group__header h3,
  .pv3-reference .studio-review-card h2 {
    font-size: clamp(36px, 10.4vw, 46px) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv3-reference .studio-start-panel__head {
    padding-inline: 6px !important;
  }

  .pv3-reference .studio-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv3-reference .studio-scenario-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .pv3-reference .studio-scenario-card {
    min-height: 94px !important;
    padding: 12px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv3-reference .studio-scenario-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
  }

  .pv3-reference .studio-scenario-card__title {
    font-size: 15px !important;
  }

  body[data-studio-step="story"] .pv3-reference .pv2-studio {
    background-position: 66% center !important;
  }

  body[data-studio-step="story"] .pv3-reference #lyrics_or_idea {
    min-height: 260px !important;
    padding: 20px !important;
  }

  body[data-studio-step="story"] .pv3-reference .studio-group-start > .pv3-event-picker:not([hidden]) {
    padding: 15px !important;
  }

  .pv3-reference .pv3-event-picker__head {
    display: grid !important;
    gap: 4px !important;
  }

  .pv3-reference .pv3-event-picker .template-strip__chips {
    display: flex !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
    scrollbar-width: none;
  }

  .pv3-reference .pv3-event-picker .template-strip__chips::-webkit-scrollbar {
    display: none;
  }

  .pv3-reference .pv3-event-picker .template-chip {
    flex: 0 0 auto !important;
  }

  body[data-studio-step="sound"] .pv3-reference .studio-mood-visual {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: calc(100vw - 24px) !important;
    margin-inline: calc(50% - 50vw + 12px) !important;
    gap: 8px !important;
    padding: 8px 16px 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference #track-form {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 20px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .pv2-studio-root #track-form > .studio-group-start {
    display: block !important;
    min-height: 178px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference .studio-group-sound,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference .studio-group-start {
    min-height: auto !important;
    height: auto !important;
    padding: 8px 10px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="mood"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    min-height: 0 !important;
    height: 202px !important;
    margin-top: 8px !important;
    padding-block: 8px 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body[data-studio-step="sound"] .pv3-reference .pv3-custom-style {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: calc(100vw - 32px) !important;
    margin: 4px calc(50% - 50vw + 16px) 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body[data-studio-step="sound"] .pv3-reference .pv3-custom-style > span {
    padding-inline: 4px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip {
    flex: 0 0 clamp(126px, 36vw, 150px) !important;
    width: clamp(126px, 36vw, 150px) !important;
    min-width: clamp(126px, 36vw, 150px) !important;
    max-width: 150px !important;
    min-height: 180px !important;
    height: 180px !important;
    scroll-snap-align: start !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="genre"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: calc(100vw - 32px) !important;
    height: auto !important;
    margin: 0 calc(50% - 50vw + 16px) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="genre"]::-webkit-scrollbar,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="mood"]::-webkit-scrollbar {
    display: none;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv3-reference [data-target="genre"] .chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    white-space: normal !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body[data-studio-step="sound"] .pv3-reference .pv3-genre-preset-title {
    width: calc(100vw - 32px) !important;
    margin: 8px calc(50% - 50vw + 16px) 6px !important;
    text-align: left !important;
  }

  body[data-studio-step="sound"] .pv3-reference .studio-mood-card {
    flex: 0 0 clamp(126px, 36vw, 150px) !important;
    width: clamp(126px, 36vw, 150px) !important;
    min-width: clamp(126px, 36vw, 150px) !important;
    max-width: 150px !important;
    min-height: 180px !important;
    height: 180px !important;
    scroll-snap-align: start;
  }

  body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip.is-active,
  body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip[aria-pressed="true"],
  body[data-studio-step="sound"] .pv3-reference [data-target="mood"] .chip[data-selected="true"] {
    transform: translateY(-3px) scale(1.01) !important;
  }

  body[data-studio-step="voice"] .pv3-reference .pv2-studio {
    background-position: 24% center !important;
  }

  body[data-studio-step="voice"] .pv3-reference #track-form {
    padding: 28px 0 108px !important;
  }

  body[data-studio-step="voice"] .pv3-reference .studio-voice-step {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 18px 8px 30px !important;
    background: linear-gradient(180deg, rgba(1, 8, 15, .18), rgba(1, 8, 15, .48)) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv3-reference .studio-voice-step {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 8px 24px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="voice"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .pv2-studio-root #track-form > .studio-voice-step {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 8px 24px !important;
    box-sizing: border-box !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-start-panel,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active #track-form,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="advanced"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active #track-form > .studio-group-story,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-review-panel,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="result"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-result-panel {
    min-height: 0 !important;
    height: calc(100svh - 206px) !important;
    margin-block: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv3-reference .studio-start-panel::-webkit-scrollbar,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"] .pv3-reference #track-form::-webkit-scrollbar,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="advanced"] .pv3-reference .studio-group-story::-webkit-scrollbar,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv3-reference .studio-review-panel::-webkit-scrollbar,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="result"] .pv3-reference .studio-result-panel::-webkit-scrollbar {
    display: none;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="result"] .pv3-reference .pv3-demo-release {
    padding-bottom: 20px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
    max-height: 44svh !important;
    padding-inline: 4px !important;
    box-sizing: border-box !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body,
  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .inline-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-studio-step="review"] .pv3-reference .studio-review-card {
    min-height: 0 !important;
    height: calc(100svh - 390px) !important;
    max-height: calc(100svh - 340px) !important;
    padding: 14px 8px 70px !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }


  body[data-studio-step="review"] .pv3-reference .studio-review-card::-webkit-scrollbar {
    display: none;
  }

  .pv3-reference .studio-wizard-actions {
    position: static !important;
    width: calc(100% - 24px) !important;
    margin: 12px auto max(14px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    background: transparent !important;
  }

  .pv3-reference .studio-wizard-actions__back,
  .pv3-reference .studio-wizard-actions__primary {
    min-width: 0 !important;
  }
}

/* Stable, readable scenario artwork. Hover never shifts or zooms the image. */
.pv3-reference .studio-scenario-card {
  transform: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.pv3-reference .studio-scenario-card:hover,
.pv3-reference .studio-scenario-card:focus-visible,
.pv3-reference .studio-scenario-card.is-active {
  transform: none !important;
  background-position: inherit !important;
  background-size: cover !important;
  filter: brightness(1.08) saturate(1.06) !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .76), rgba(1, 12, 22, .12)),
    url("/miniapp/static/assets/studio/scene-aurora.jpg") !important;
  background-position: center 46% !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .78), rgba(1, 12, 22, .12)),
    url("/miniapp/static/assets/studio/scene-lantern.jpg") !important;
  background-position: center 54% !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .76), rgba(1, 12, 22, .08)),
    url("/miniapp/static/assets/studio/scene-flower.jpg") !important;
  background-position: center 46% !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .78), rgba(1, 12, 22, .1)),
    url("/miniapp/static/assets/studio/pulse-redesign/03_genre_cards/genre-orchestral.jpg") !important;
  background-position: center 61% !important;
}

.pv3-reference .pv2-drawer nav .pv3-connect-menu {
  border-color: rgba(75, 213, 255, .36) !important;
  color: rgba(244, 252, 255, .96) !important;
  background: linear-gradient(90deg, rgba(10, 129, 168, .22), rgba(3, 23, 35, .12)) !important;
}

.pv3-reference .pv2-drawer nav .pv3-connect-menu::before {
  background-image: url("/miniapp/static/assets/icons/profile.svg") !important;
}

body.pv3-connect-open {
  overflow: hidden !important;
}

.pv3-connect-modal[hidden] {
  display: none !important;
}

.pv3-connect-modal {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.pv3-connect-modal__shade {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 7, 13, .68);
}

.pv3-connect-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(920px, 100%);
  max-height: min(88svh, 820px);
  gap: 20px;
  padding: clamp(24px, 4vw, 46px);
  overflow-y: auto;
  border: 1px solid rgba(115, 222, 255, .28);
  border-radius: 28px;
  color: rgba(240, 250, 253, .94);
  background:
    linear-gradient(125deg, rgba(1, 18, 29, .9), rgba(3, 44, 58, .66)),
    var(--pv5-master-art) center / cover;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .06);
  scrollbar-width: thin;
}

.pv3-connect-modal__close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(142, 224, 252, .2);
  border-radius: 50%;
  color: rgba(239, 250, 253, .78);
  background: rgba(2, 17, 27, .28);
  font-size: 24px;
}

.pv3-connect-modal__head {
  display: grid;
  max-width: 720px;
  gap: 8px;
  padding-right: 48px;
}

.pv3-connect-modal__head p {
  margin: 0;
  color: var(--pv5-cyan);
  font-family: var(--pv5-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.pv3-connect-modal__head h2 {
  margin: 0;
  color: rgba(247, 252, 253, .98);
  font-family: var(--pv5-serif);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  line-height: .98;
}

.pv3-connect-modal__head > span {
  max-width: 650px;
  color: rgba(208, 232, 240, .66);
  font-size: 14px;
  line-height: 1.6;
}

.pv3-connect-modal__services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pv3-connect-modal__services article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 174px;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(132, 218, 251, .18);
  border-radius: 18px;
  background: rgba(1, 13, 22, .18);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.pv3-connect-modal__services article.is-connected {
  border-color: rgba(96, 225, 193, .42);
  background: linear-gradient(145deg, rgba(19, 115, 101, .18), rgba(1, 13, 22, .12));
}

.pv3-connect-modal__services article > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(91, 221, 255, .42);
  border-radius: 50%;
  color: #8fe9ff;
  background: rgba(6, 111, 145, .2);
  font-style: normal;
  font-weight: 800;
}

.pv3-connect-modal__services article > div {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 6px;
}

.pv3-connect-modal__services strong {
  color: rgba(246, 252, 253, .96);
  font-size: 16px;
}

.pv3-connect-modal__services article > div span {
  color: rgba(198, 225, 235, .58);
  font-size: 11px;
  line-height: 1.5;
}

.pv3-connect-modal__services article > b,
.pv3-connect-modal__services article > button,
.pv3-connect-modal__services article > a {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  min-height: 40px;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(106, 218, 255, .28);
  border-radius: 999px;
  color: rgba(237, 249, 252, .86);
  background: rgba(4, 70, 95, .18);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.pv3-connect-modal__services article > b {
  color: rgba(205, 229, 237, .58);
  font-weight: 600;
}

.pv3-connect-modal__services .is-connected:is(button, a) {
  pointer-events: none;
  border-color: rgba(99, 225, 193, .32);
  color: #9cebd6;
  background: rgba(19, 115, 101, .15);
}

.pv3-connect-modal__auth:empty {
  display: none;
}

.pv3-connect-modal__auth .auth-gate {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid rgba(132, 218, 251, .16) !important;
  border-radius: 18px !important;
  background: rgba(1, 13, 22, .16) !important;
  box-shadow: none !important;
}

body.studio-wizard-enabled.pv3-connect-open .pv3-connect-modal__auth > #auth-panel,
body.studio-wizard-enabled.pv3-connect-open .pv3-connect-modal__auth > #auth-gate {
  display: block !important;
}

.pv3-connect-modal__auth .auth-gate__copy,
.pv3-connect-modal__auth .auth-gate__fallback,
.pv3-connect-modal__auth .auth-gate__note {
  display: none !important;
}

.pv3-connect-modal__auth .auth-gate__email {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.pv3-connect-modal__auth .auth-gate__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.pv3-connect-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
  color: rgba(202, 228, 237, .52);
  font-size: 11px;
}

.pv3-connect-modal__foot button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(116, 222, 255, .26);
  border-radius: 999px;
  color: rgba(237, 249, 252, .84);
  background: rgba(2, 30, 44, .2);
}

/* Studio Air is a real application room, not a decorative release mockup. */
.pv3-reference .pv2-air {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 96px 28px 100px;
  background-color: var(--pv5-night) !important;
  background-image:
    linear-gradient(180deg, rgba(0, 7, 14, .08), rgba(0, 7, 14, .24) 58%, rgba(0, 5, 11, .62)),
    var(--pv5-master-art) !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Performance contract: one lightweight transition and no full-screen filters. */
html {
  scroll-behavior: auto;
}

body.pv2-exact {
  overscroll-behavior-y: auto;
  touch-action: pan-y pinch-zoom;
}

.pv3-reference .pv2-screen.is-active {
  animation: pv7-screen-enter 560ms cubic-bezier(.22, 1, .36, 1) both !important;
  filter: none !important;
  clip-path: none !important;
}

.pv3-reference .studio-stage-transition {
  animation: pv7-stage-enter 500ms cubic-bezier(.22, 1, .36, 1) both !important;
  filter: none !important;
  clip-path: none !important;
}

.pv3-reference .pv2-screen.is-active :is(
  .studio-start-panel,
  .studio-story-card,
  .studio-mood-grid,
  .studio-voice-layout,
  .studio-review-panel,
  .studio-result-panel
) {
  animation: none !important;
}

@keyframes pv7-screen-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pv7-stage-enter {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

:is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms ease,
    box-shadow 260ms ease,
    background-color 220ms ease !important;
}

:is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next])::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% auto -40% -45%;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-180%, 0, 0) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(163, 237, 255, .72), transparent);
  animation: pv7-button-light 5.8s cubic-bezier(.22, 1, .36, 1) 900ms infinite;
}

:is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next]):active {
  transform: translate3d(0, 1px, 0) scale(.985);
}

@keyframes pv7-button-light {
  0%, 68% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-18deg); }
  72% { opacity: .75; }
  84% { opacity: 0; transform: translate3d(620%, 0, 0) skewX(-18deg); }
  100% { opacity: 0; transform: translate3d(620%, 0, 0) skewX(-18deg); }
}

@media (max-width: 760px), (pointer: coarse) {
  .pv3-reference .pv2-screen.is-active {
    animation-duration: 420ms !important;
    transform: none;
  }

  .pv3-reference .studio-stage-transition {
    animation-duration: 400ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .pv2-screen.is-active,
  .pv3-reference .studio-stage-transition,
  :is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next])::after {
    animation: none !important;
  }

  :is(.primary-button, .studio-wizard-next, .studio-next, [data-studio-next]) {
    transition-duration: 1ms !important;
  }
}

.pv3-reference .pv2-air__intro,
.pv3-reference .pv2-air__mount,
.pv3-reference .pv2-air__empty {
  width: min(1080px, 100%);
  margin-inline: auto;
}

.pv3-reference .pv2-air__intro {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 32px;
  text-align: center;
}

.pv3-reference .pv2-air__intro p {
  margin: 0;
  color: #39d5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}

.pv3-reference .pv2-air__intro h2 {
  max-width: 820px;
  margin: 0;
  color: #f4f7f7;
  font-family: var(--pv5-serif);
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
}

.pv3-reference .pv2-air__intro span {
  max-width: 620px;
  color: rgba(213, 232, 239, .64);
  font-size: 14px;
  line-height: 1.6;
}

.pv3-reference .pv2-air__mount .studio-air-host {
  display: block !important;
  margin: 0 !important;
}

.pv3-reference .pv2-air__mount .studio-air-host:empty {
  display: none !important;
}

.pv3-reference .pv2-air__empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 250px;
  padding: 64px 28px;
  border: 1px solid rgba(123, 215, 247, .2);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(145deg, rgba(4, 30, 44, .3), rgba(1, 11, 20, .14));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.pv3-reference .pv2-air__mount:has(.studio-air-host:not(:empty)) + .pv2-air__empty {
  display: none;
}

.pv3-reference .pv2-air__empty::before {
  content: "◉";
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(57, 213, 255, .38);
  border-radius: 50%;
  color: #62ddff;
  font-size: 23px;
  box-shadow: 0 0 34px rgba(29, 186, 230, .14);
}

.pv3-reference .pv2-air__empty strong {
  color: #f3f8f9;
  font-family: var(--pv5-serif);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 400;
}

.pv3-reference .pv2-air__empty span {
  max-width: 520px;
  color: rgba(205, 228, 236, .58);
  line-height: 1.6;
}

.pv3-reference .pv2-air .studio-air-card {
  display: grid !important;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 210px;
  padding: 30px !important;
  border: 1px solid rgba(123, 215, 247, .22) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(4, 30, 44, .3), rgba(1, 11, 20, .16)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 28px 70px rgba(0, 5, 10, .22) !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv2-air .studio-air-card__identity {
  max-width: none !important;
}

.pv3-reference .pv2-air .studio-air-card__mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(57, 213, 255, .36);
  border-radius: 50%;
  color: #60dcff;
  background: rgba(4, 35, 49, .36);
}

.pv3-reference .pv2-air .studio-air-card audio {
  width: 100% !important;
  min-width: 0 !important;
}

.pv3-reference .pv2-air .studio-air-card__reactions {
  justify-self: end;
}

.pv3-reference .pv2-air .studio-air-comments-panel {
  grid-column: 1 / -1;
  width: 100%;
}

.pv3-reference .pv2-air .studio-air-comments-panel__body,
.pv3-reference .pv2-air .studio-air-comment-form {
  background: transparent !important;
}

.pv3-reference .pv2-drawer nav [data-pv2-screen="air"]::before {
  content: "◉";
}

@media (max-width: 760px) {
  .pv3-reference .pv2-air {
    padding: 108px 14px 104px;
    background-attachment: scroll;
  }

  .pv3-reference .pv2-air__intro {
    margin-bottom: 22px;
  }

  .pv3-reference .pv2-air__intro h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .pv3-reference .pv2-air__empty {
    min-height: 230px;
    padding: 44px 20px;
    border-radius: 22px;
  }

  .pv3-reference .pv2-air .studio-air-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  .pv3-reference .pv2-air .studio-air-card__reactions {
    justify-self: start;
  }
}

/* Persistent Studio Air overlay, matching the production behavior. */
.pv3-reference .pv2-air-overlay {
  position: fixed;
  z-index: 72;
  top: 76px;
  left: 50%;
  width: min(1080px, calc(100% - 48px));
  transform: translateX(-50%);
  pointer-events: none;
}

.pv3-reference .pv2-air-overlay:has(.studio-air-host:empty) {
  display: none;
}

.pv3-reference .pv2-air-overlay .studio-air-host {
  width: 100%;
  margin: 0 !important;
  pointer-events: auto;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
  display: grid !important;
  grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.35fr) auto auto;
  align-items: center;
  gap: 12px 18px;
  min-height: 70px;
  padding: 10px 14px !important;
  border: 1px solid rgba(112, 215, 249, .24) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(100deg, rgba(4, 37, 51, .88), rgba(1, 15, 25, .8)),
    var(--pv5-master-art) center 48% / cover !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 20px 52px rgba(0, 5, 10, .3) !important;
  backdrop-filter: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity {
  min-width: 0 !important;
  max-width: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity h3,
.pv3-reference .pv2-air-overlay .studio-air-card__identity p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv3-reference .pv2-air-overlay .studio-air-card__mark {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(63, 213, 255, .34);
  border-radius: 50%;
  color: #65ddff;
  background: rgba(5, 42, 57, .46);
}

.pv3-reference .pv2-air-overlay .studio-air-card audio {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px;
}

.pv3-reference .pv2-air-overlay .studio-air-card__summary,
.pv3-reference .pv2-air-overlay .studio-air-card__until {
  margin: 0 !important;
  color: rgba(209, 231, 238, .58);
  font-size: 11px;
  white-space: nowrap;
}

.pv3-reference .pv2-air-overlay .studio-air-card__reactions {
  display: flex;
  gap: 6px;
  margin: 0;
}

.pv3-reference .pv2-air-overlay .studio-air-reaction,
.pv3-reference .pv2-air-overlay .studio-air-comments-panel > summary {
  min-height: 34px;
  border: 1px solid rgba(112, 215, 249, .2);
  border-radius: 999px;
  color: rgba(227, 241, 246, .75);
  background: rgba(1, 14, 23, .24);
}

.pv3-reference .pv2-air-overlay .studio-air-comments-panel {
  grid-column: 1 / -1;
  width: 100%;
}

.pv3-reference .pv2-air-overlay .studio-air-comments-panel__body {
  display: grid;
  gap: 10px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  padding: 12px 4px 4px;
  background: transparent !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
  padding-top: 150px !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
  padding-top: 170px !important;
}

@media (max-width: 760px) {
  .pv3-reference .pv2-air-overlay {
    top: 88px;
    width: calc(100% - 24px);
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card audio {
    grid-column: 1 / -1;
    order: 5;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__summary,
  .pv3-reference .pv2-air-overlay .studio-air-card__until {
    display: none;
  }

  .pv3-reference .pv2-air-overlay .studio-air-comments-panel {
    order: 6;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    padding-top: 238px !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 246px !important;
  }
}

@media (max-width: 760px) {
  .pv3-connect-modal {
    align-items: end;
    padding: 8px;
  }

  .pv3-connect-modal__panel {
    max-height: 92svh;
    gap: 14px;
    padding: 24px 14px max(18px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 12px 12px;
  }

  .pv3-connect-modal__head {
    padding-right: 42px;
  }

  .pv3-connect-modal__head h2 {
    font-size: clamp(34px, 10.5vw, 46px);
  }

  .pv3-connect-modal__services {
    grid-template-columns: 1fr;
  }

  .pv3-connect-modal__services article {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    min-height: 86px;
    align-items: center;
    padding: 12px;
  }

  .pv3-connect-modal__services article > i {
    width: 38px;
    height: 38px;
  }

  .pv3-connect-modal__services article > b,
  .pv3-connect-modal__services article > button,
  .pv3-connect-modal__services article > a {
    grid-column: auto;
    min-width: 98px;
    min-height: 36px;
    align-self: center;
  }

  .pv3-connect-modal__auth .auth-gate {
    padding: 14px !important;
  }

  .pv3-connect-modal__auth .auth-gate__actions {
    grid-template-columns: 1fr !important;
  }

  .pv3-connect-modal__foot {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 2026-07-28 visual integration pass: real data and showcase states. */
@media (max-width: 1120px) {
  .pv3-reference .pv3-scene-caption {
    display: none !important;
  }
}

.pv3-reference .studio-scenario-card {
  border-color: rgba(124, 218, 250, .25) !important;
  background:
    linear-gradient(145deg, rgba(4, 29, 43, .66), rgba(1, 12, 22, .48)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .04),
    0 18px 50px rgba(0, 6, 12, .2) !important;
}

.pv3-reference .studio-scenario-card:hover,
.pv3-reference .studio-scenario-card.is-active {
  border-color: rgba(78, 218, 255, .72) !important;
  background:
    linear-gradient(145deg, rgba(4, 48, 66, .72), rgba(2, 21, 34, .54)) !important;
}

.pv3-reference #billing-panel .billing-plans__intro {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 4px 2px 10px !important;
  border-bottom: 1px solid rgba(124, 218, 250, .14) !important;
  color: rgba(220, 239, 246, .62) !important;
}

.pv3-reference #billing-panel .billing-plans__intro strong {
  color: #edf8fc !important;
  font-family: var(--pv5-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}

.pv3-reference #billing-panel .billing-plans__intro span {
  font-size: 11px !important;
  text-align: right !important;
}

.pv3-reference #billing-panel .billing-card {
  min-height: 244px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(155deg, rgba(4, 29, 44, .54), rgba(1, 12, 22, .38)) !important;
  backdrop-filter: none !important;
}

.pv3-reference #billing-panel .billing-card__top {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

.pv3-reference #billing-panel .billing-card__icon {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(73, 209, 250, .24) !important;
  border-radius: 11px !important;
  background: rgba(4, 35, 49, .28) !important;
}

.pv3-reference #billing-panel .billing-card__icon::before {
  content: "ϟ";
  color: #52d9ff;
  font-family: var(--pv5-serif);
  font-size: 25px;
}

.pv3-reference #billing-panel .billing-card__title {
  min-width: 0 !important;
}

.pv3-reference #billing-panel .billing-card__title strong {
  display: block !important;
  overflow: hidden !important;
  color: #f2f8fa !important;
  font-family: var(--pv5-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
}

.pv3-reference #billing-panel .billing-card__title small {
  color: rgba(108, 218, 250, .75) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.pv3-reference #billing-panel .billing-card__badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  color: #201604 !important;
  background: #dfbd75 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.pv3-reference #billing-panel .billing-card > p {
  position: relative !important;
  z-index: 1 !important;
  margin: 18px 0 12px !important;
  color: rgba(214, 234, 241, .62) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.pv3-reference #billing-panel .billing-card__meta {
  position: relative !important;
  z-index: 1 !important;
  margin: auto 0 12px !important;
}

.pv3-reference #billing-panel .billing-card__meta span {
  color: #f1d398 !important;
  font-family: var(--pv5-serif) !important;
  font-size: 25px !important;
}

.pv3-reference #billing-panel .billing-card > button {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

.pv3-reference .pv3-demo-release__note {
  display: block;
  margin-top: 12px;
  color: rgba(209, 231, 238, .46);
  font-size: 9px;
  letter-spacing: .14em;
  text-align: right;
  text-transform: uppercase;
}

.pv3-reference .pv3-air-demo .studio-air-card__identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.pv3-reference .pv3-air-demo .studio-air-card__identity small {
  color: #49d8ff !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
}

.pv3-reference .pv3-air-demo .studio-air-card__identity h3 {
  margin: 1px 0 !important;
  color: #f1f8fa !important;
  font-family: var(--pv5-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.pv3-reference .pv3-air-demo .studio-air-card__identity p {
  margin: 0 !important;
  color: rgba(209, 231, 238, .5) !important;
  font-size: 9px !important;
}

.pv3-reference .pv3-air-demo__wave {
  height: 34px;
  overflow: hidden;
  border-inline: 1px solid rgba(72, 209, 250, .12);
  background: linear-gradient(90deg, transparent, rgba(28, 179, 226, .08), transparent);
}

.pv3-reference .pv3-air-demo__wave i {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #34cfff 4px 5px, transparent 5px 9px);
  mask: linear-gradient(0deg, transparent 4%, #000 48%, transparent 96%);
  opacity: .68;
}

@media (max-width: 1200px) and (min-width: 761px) {
  .pv3-reference #billing-panel .billing-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .pv3-reference #billing-panel .billing-plans__intro {
    display: grid !important;
    gap: 3px !important;
    padding-inline: 4px !important;
  }

  .pv3-reference #billing-panel .billing-plans__intro span {
    font-size: 9px !important;
    text-align: left !important;
  }

  .pv3-reference.pv3-force-utility #billing-panel .billing-card:last-of-type {
    grid-column: 1 / -1 !important;
    min-height: 190px !important;
  }

  .pv3-reference #billing-panel .billing-card__top {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .pv3-reference #billing-panel .billing-card__icon {
    width: 30px !important;
    height: 30px !important;
  }

  .pv3-reference #billing-panel .billing-card__title strong {
    font-size: 17px !important;
  }

  .pv3-reference #billing-panel .billing-card > p {
    margin-top: 12px !important;
    font-size: 9px !important;
  }

  .pv3-reference .pv3-air-demo__wave {
    grid-column: 1 / -1;
    order: 5;
    height: 22px;
  }

  .pv3-reference .pv3-air-demo .studio-air-card__reactions {
    justify-self: end !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .pv2-screen.is-active .pv2-hero__content,
  .pv3-reference .pv2-screen.is-active .pv2-studio__mount,
  .pv3-reference .pv2-screen.is-active .pv2-library__mount,
  .pv3-reference .pv2-screen.is-active .pv2-utility__mount {
    animation: none !important;
  }
}

/*
 * Final mobile track layout. Keep this after every visual layer so the older
 * two-column library rules cannot squeeze players beside the cover.
 */
@media (max-width: 620px) {
  .pv3-reference .track-card__top {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .pv3-reference .track-card__top > div:not(.cover) {
    display: contents !important;
  }

  .pv3-reference .track-card__top .track-title,
  .pv3-reference .track-card__top .track-meta {
    grid-column: 2 !important;
    min-width: 0;
  }

  .pv3-reference .track-card__top .web-audio-variant,
  .pv3-reference .track-card__top .ai-disclosure-badge,
  .pv3-reference .track-card__top .track-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
  }

  .pv3-reference .track-card__top .web-audio-variant:first-of-type {
    margin-top: 5px;
  }

  .pv3-reference .web-audio-player {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0;
    padding: 9px 10px !important;
  }

  .pv3-reference .web-audio-player .audio-player__timeline {
    width: 100%;
    min-width: 0;
  }

  .pv3-reference .web-audio-player .audio-player__range,
  .pv5-mini-player__seek {
    width: 100%;
    height: 28px !important;
    margin: -8px 0 !important;
    appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: pan-x;
  }

  .pv3-reference .web-audio-player .audio-player__range::-webkit-slider-runnable-track,
  .pv5-mini-player__seek::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(75, 220, 255, .9), rgba(74, 174, 207, .3));
  }

  .pv3-reference .web-audio-player .audio-player__range::-webkit-slider-thumb,
  .pv5-mini-player__seek::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -8px;
    appearance: none;
    border: 3px solid rgba(1, 27, 42, .96);
    border-radius: 50%;
    background: #8cecff;
    box-shadow:
      0 0 0 1px rgba(133, 236, 255, .75),
      0 0 18px rgba(55, 207, 244, .38);
  }

  .pv3-reference .web-audio-player .audio-player__range::-moz-range-track,
  .pv5-mini-player__seek::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(72, 210, 249, .55);
  }

  .pv3-reference .web-audio-player .audio-player__range::-moz-range-thumb,
  .pv5-mini-player__seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid rgba(1, 27, 42, .96);
    border-radius: 50%;
    background: #8cecff;
  }
}

.studio-wizard-actions__primary[data-busy="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: wait;
  opacity: 1;
}

.studio-wizard-actions__primary[data-busy="true"]::before {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(1, 25, 38, 0.28);
  border-top-color: #001521;
  border-radius: 50%;
  content: "";
  animation: pv5-spin 760ms linear infinite;
}

.studio-result-route {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(760px, 100%);
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(74, 211, 255, 0.2);
  border-radius: 18px;
  color: rgba(220, 240, 247, 0.78);
  background: rgba(0, 24, 40, 0.58);
  text-align: left;
}

.studio-result-route__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(68, 216, 255, 0.38);
  border-radius: 50%;
  color: #42d7ff;
}

.studio-result-route p {
  margin: 0 !important;
  line-height: 1.45;
}

.studio-result-route strong {
  color: #f1f9fc;
}

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

/* Refined track variants: browser-native audio chrome stays hidden. */
.pv3-reference .web-audio-variant {
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-color: rgba(77, 203, 242, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(115deg, rgba(0, 24, 40, 0.68), rgba(0, 10, 22, 0.46)),
    radial-gradient(circle at 18% 0, rgba(50, 204, 246, 0.08), transparent 46%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.pv3-reference .web-audio-variant__head,
.pv3-reference .web-audio-variant__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pv3-reference .web-audio-variant__title {
  display: grid;
  gap: 2px;
}

.pv3-reference .web-audio-variant__title > span {
  color: #eaf8fd;
  font-family: var(--pv-serif);
  font-size: 1.08rem;
}

.pv3-reference .web-audio-variant__title small {
  color: rgba(180, 216, 229, 0.56);
  font-size: .67rem;
  letter-spacing: .05em;
}

.pv3-reference .web-audio-variant__actions {
  justify-content: flex-end;
}

.pv3-reference .web-audio-variant__download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  place-items: center;
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(80, 207, 246, 0.24);
  border-radius: 12px;
  color: #8fe8ff;
  text-decoration: none;
  background: rgba(0, 28, 46, 0.52);
}

.pv3-reference .web-audio-variant__download small {
  color: inherit;
  font: 700 .68rem/1 var(--pv5-ui);
}

.pv3-reference .web-audio-player {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 12px 8px;
  border: 1px solid rgba(78, 207, 246, 0.16);
  border-radius: 17px;
  background: rgba(0, 11, 24, 0.38);
}

.pv3-reference .web-audio-player .audio-player__toggle {
  width: 40px;
  height: 40px;
  border-color: rgba(63, 213, 255, 0.38);
  border-radius: 50%;
  color: #c9f5ff;
  background: rgba(0, 40, 61, 0.7);
  box-shadow: none;
}

.pv3-reference .web-audio-player.is-playing .audio-player__toggle {
  color: #00151f;
  background: linear-gradient(145deg, #78e7ff, #1db7df);
  box-shadow: 0 0 22px rgba(42, 203, 245, 0.22);
}

.pv3-reference .web-audio-player .audio-player__timeline {
  gap: 2px;
}

.pv3-reference .web-audio-player__wave {
  display: flex;
  align-items: center;
  height: 22px;
  gap: 3px;
  overflow: hidden;
  opacity: .52;
}

.pv3-reference .web-audio-player__wave i {
  flex: 1 1 2px;
  min-width: 1px;
  max-width: 3px;
  height: var(--wave);
  border-radius: 999px;
  background: linear-gradient(180deg, #6fe7ff, rgba(29, 164, 210, 0.28));
  transform-origin: center;
}

.pv3-reference .web-audio-player.is-playing .web-audio-player__wave i {
  animation: pv5-wave 920ms ease-in-out infinite alternate;
  animation-delay: calc(var(--wave) * -22ms);
}

.pv3-reference .web-audio-player .audio-player__range {
  height: 3px;
  accent-color: #41d5fa;
}

.pv3-reference .web-audio-player .audio-player__times {
  margin-top: 1px;
  color: rgba(199, 227, 237, 0.54);
  font-size: .65rem;
}

.pv3-reference .pv2-air-overlay .studio-air-card > audio {
  display: none !important;
}

@keyframes pv5-wave {
  from { transform: scaleY(.55); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 620px) {
  .pv3-reference .web-audio-variant {
    padding: 10px;
    border-radius: 17px;
  }

  .pv3-reference .web-audio-variant__title small {
    display: none;
  }

  .pv3-reference .web-audio-player__wave {
    gap: 2px;
  }
}

/* Studio Air as a restrained radio capsule, not a second audio player. */
.pv3-reference .pv2-air-overlay {
  top: 76px !important;
  right: 28px !important;
  left: auto !important;
  width: min(720px, calc(100% - 56px)) !important;
  transform: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(205px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 62px !important;
  padding: 8px 12px !important;
  overflow: visible;
  border: 1px solid rgba(99, 216, 250, 0.22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(100deg, rgba(0, 32, 50, 0.82), rgba(0, 15, 28, 0.66)),
    var(--pv5-master-art) center 46% / cover !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 18px 50px rgba(0, 5, 12, 0.28) !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 220px;
  width: 190px;
  height: 28px;
  background: repeating-linear-gradient(
    90deg,
    rgba(70, 215, 252, 0.52) 0 2px,
    transparent 2px 7px
  );
  content: "";
  opacity: .34;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  transform: translateY(-50%) scaleY(.72);
  animation: pv5-air-breathe 2.8s ease-in-out infinite alternate;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  max-width: 255px !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity small,
.pv3-reference .pv2-air-overlay .studio-air-card__identity .track-item__eyebrow {
  color: #42d9ff !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity h3 {
  margin: 1px 0 0 !important;
  color: #f1f9fc !important;
  font-family: var(--pv-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity p {
  color: rgba(199, 226, 236, 0.55) !important;
  font-size: .65rem !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__mark {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  border-color: rgba(79, 218, 255, 0.48) !important;
  color: #8eebff !important;
  background: rgba(0, 42, 62, 0.64) !important;
  box-shadow: 0 0 24px rgba(39, 200, 241, 0.14);
}

.pv3-reference .pv2-air-overlay .studio-air-card__mark::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(78, 218, 255, 0.18);
  border-radius: inherit;
  content: "";
  animation: pv5-air-ring 2.2s ease-out infinite;
}

.pv3-reference .pv2-air-overlay .studio-air-card__reactions {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin: 0 !important;
}

.pv3-reference .pv2-air-overlay .studio-air-reaction,
.pv3-reference .pv2-air-overlay .studio-air-comments-panel > summary {
  min-height: 38px !important;
  padding: 0 15px !important;
  border-color: rgba(89, 208, 245, 0.18) !important;
  color: rgba(228, 242, 247, 0.78) !important;
  background: rgba(0, 17, 29, 0.34) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
  padding-top: 126px !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
  padding-top: 132px !important;
}

@keyframes pv5-air-ring {
  0% { opacity: .65; transform: scale(.82); }
  72%, 100% { opacity: 0; transform: scale(1.26); }
}

@keyframes pv5-air-breathe {
  from { opacity: .2; transform: translateY(-50%) scaleY(.48); }
  to { opacity: .42; transform: translateY(-50%) scaleY(.9); }
}

@media (max-width: 760px) {
  .pv3-reference .pv2-air-overlay {
    top: 72px !important;
    right: 8px !important;
    width: calc(100% - 16px) !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    border-radius: 17px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact::after {
    display: none;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity {
    gap: 8px !important;
    max-width: 150px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__mark {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity h3 {
    font-size: .92rem !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity small,
  .pv3-reference .pv2-air-overlay .studio-air-card__identity .track-item__eyebrow {
    font-size: .48rem !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity p {
    display: none !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-reaction,
  .pv3-reference .pv2-air-overlay .studio-air-comments-panel > summary {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: .68rem !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-comments-panel > summary {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 142px !important;
  }
}

/* 2026-07-28 resumed visual pass. */
.pv3-reference .studio-scenario-card {
  min-height: 118px !important;
  padding: 16px 18px !important;
  background-position: center !important;
  background-size: cover !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .9), rgba(1, 12, 22, .34)),
    url("/miniapp/static/assets/studio/scene-aurora.jpg") !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .9), rgba(1, 12, 22, .3)),
    url("/miniapp/static/assets/studio/generated-v2/story-poetic-room-v2.webp") !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .9), rgba(1, 12, 22, .28)),
    url("/miniapp/static/assets/studio/scene-lantern.jpg") !important;
}

.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"] {
  background-image:
    linear-gradient(90deg, rgba(1, 12, 22, .9), rgba(1, 12, 22, .28)),
    url("/miniapp/static/assets/studio/scene-ripple.jpg") !important;
}

.pv3-reference #billing-panel .billing-card {
  border-color: rgba(111, 214, 247, .28) !important;
  background-image:
    linear-gradient(145deg, rgba(3, 23, 36, .92), rgba(1, 11, 20, .84)),
    url("/miniapp/static/assets/studio/pulse-redesign/06_decor/decor-cyan-glow.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    0 20px 54px rgba(0, 5, 10, .28) !important;
}

.pv3-reference #billing-panel .billing-card.is-recommended {
  background-image:
    linear-gradient(145deg, rgba(30, 27, 22, .9), rgba(2, 14, 23, .86)),
    url("/miniapp/static/assets/studio/pulse-redesign/06_decor/decor-gold-glow.jpg") !important;
}

/* Air is a compact player, not a full-width banner over the current task. */
.pv3-reference .pv2-air-overlay {
  top: 68px !important;
  right: 24px !important;
  left: auto !important;
  width: min(680px, calc(100% - 48px)) !important;
  transform: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
  grid-template-columns: minmax(170px, .75fr) minmax(240px, 1.2fr) auto !important;
  gap: 10px !important;
  min-height: 64px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card audio {
  width: 100% !important;
  height: 34px !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__reactions {
  align-items: center !important;
}

.pv3-reference .pv2-air-overlay .studio-air-comments-panel {
  grid-column: auto !important;
  width: auto !important;
}

.pv3-reference .pv2-air-overlay .studio-air-comments-panel__body {
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 14px !important;
  border: 1px solid rgba(112, 215, 249, .22);
  border-radius: 14px;
  background: rgba(2, 16, 27, .96) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv3-scene-caption {
  display: none !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
  padding-top: 118px !important;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
  padding-top: 142px !important;
}

/* Progress and actions live after the scene content, never on top of it. */
body:not([data-studio-step="start"]) .pv3-reference .studio-stepper {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  width: min(560px, calc(100% - 32px)) !important;
  margin: 14px auto 8px !important;
  transform: none !important;
}

body:not([data-studio-step="start"]) .pv3-reference .studio-wizard-actions {
  position: relative !important;
  z-index: 5 !important;
  inset: auto !important;
  width: min(1080px, calc(100% - 32px)) !important;
  margin: 0 auto max(20px, env(safe-area-inset-bottom)) !important;
  padding: 0 !important;
  transform: none !important;
}

body:not([data-studio-step="start"]) .pv3-reference .studio-start-panel,
body:not([data-studio-step="start"]) .pv3-reference #track-form > .field-group,
body:not([data-studio-step="start"]) .pv3-reference .studio-review-panel,
body:not([data-studio-step="start"]) .pv3-reference .studio-result-panel {
  padding-bottom: 28px !important;
}

body[data-studio-step="sound"] .pv3-reference .studio-group-sound,
body[data-studio-step="sound"] .pv3-reference .field:has(> #mood) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
}

body[data-studio-step="sound"] .pv3-reference [data-target="mood"],
body[data-studio-step="sound"] .pv3-reference .studio-mood-visual {
  margin-bottom: 0 !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-custom-style {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body[data-studio-step="sound"] .pv3-reference .pv3-genre-preset-title {
  margin-top: 4px !important;
}

@media (max-width: 760px) {
  .pv3-reference .studio-scenario-card {
    min-height: 112px !important;
    padding: 12px !important;
  }

  .pv3-reference .pv2-air-overlay {
    top: 88px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 100px !important;
    padding: 8px 9px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card audio {
    grid-column: 1 / -1 !important;
    order: 5 !important;
    height: 32px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__reactions {
    justify-self: end !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    padding-top: 192px !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 204px !important;
  }
}
/* Real preparation result inside the 2.0 wizard. */
.pv3-reference .studio-result-panel .studio-result-status {
  display: block;
  width: min(980px, 100%);
  margin: 18px auto 0;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(91, 214, 255, 0.24);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(1, 25, 42, 0.78), rgba(1, 11, 24, 0.56)),
    radial-gradient(circle at 86% 12%, rgba(44, 198, 255, 0.12), transparent 42%);
  box-shadow: 0 22px 70px rgba(0, 7, 18, 0.34);
  backdrop-filter: none;
}

.pv3-reference .studio-result-status > .section__header {
  display: none;
}

.pv3-reference .studio-result-status .status-list {
  display: grid;
  gap: 18px;
}

.pv3-reference .studio-result-status .lyrics-editor {
  width: 100%;
  min-height: 220px;
  padding: 20px;
  border: 1px solid rgba(112, 217, 255, 0.22);
  border-radius: 20px;
  color: #eefaff;
  background: rgba(0, 10, 22, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  resize: vertical;
}

.pv3-reference .studio-result-status .result-prompt {
  padding: 18px;
  border: 1px solid rgba(112, 217, 255, 0.16);
  border-radius: 22px;
  background: rgba(0, 15, 29, 0.42);
}

.pv3-reference .studio-result-status .result-prompt__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.pv3-reference .studio-result-status .result-prompt__head h3 {
  margin: 3px 0 0;
  color: #f2f9fc;
  font-family: var(--pv-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 400;
}

.pv3-reference .studio-result-status .result-prompt__hint {
  margin: 0 0 12px;
  color: rgba(211, 231, 240, 0.72);
}

.pv3-reference .studio-result-status .result-prompt__editor {
  min-height: 130px;
}

@media (max-width: 720px) {
  .pv3-reference .studio-result-panel .studio-result-status {
    margin-top: 10px;
    padding: 14px;
    border-radius: 22px;
  }

  .pv3-reference .studio-result-status .result-prompt__head {
    align-items: stretch;
    flex-direction: column;
  }

  .pv3-reference .studio-result-status .result-prompt__head .ghost-button {
    width: 100%;
  }

  .pv3-reference .studio-result-status .result-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) {
  display: block !important;
  height: calc(100svh - 178px) !important;
  padding: 6px 12px 118px !important;
  overflow-y: auto !important;
}

body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) > .studio-review-card--result {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 20px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) > .studio-review-card--result h2 {
  margin: 2px 0 4px !important;
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  line-height: 0.98 !important;
}

body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) > .studio-review-card--result > p:last-child {
  margin: 8px auto 0 !important;
}

@media (max-width: 720px) {
  body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) {
    height: calc(100svh - 138px) !important;
    padding: 0 4px 96px !important;
  }

  body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) > .studio-review-card--result {
    padding: 6px 12px 10px !important;
  }

  body[data-studio-step="result"] .pv3-reference .studio-result-panel:has(.studio-result-status:not(.hidden)) > .studio-review-card--result h2 {
    font-size: clamp(1.8rem, 10vw, 2.7rem) !important;
  }
}

.web-audio-variant {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(86, 205, 246, 0.18);
  border-radius: 18px;
  background: rgba(0, 17, 31, 0.48);
}

.web-audio-variant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(221, 240, 247, 0.82);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.web-audio-variant audio {
  width: 100%;
}

/* Start scenarios: keep one clear, stable crop in every interaction state. */
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card {
  min-height: 142px;
  transform: none !important;
  filter: none !important;
  background-color: rgba(0, 15, 28, 0.88) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card:hover,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card:focus-visible {
  transform: none !important;
  filter: none !important;
  border-color: rgba(74, 218, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(74, 218, 255, 0.12),
    0 16px 34px rgba(0, 7, 18, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card.is-active {
  transform: none !important;
  filter: none !important;
  border-color: rgba(107, 225, 255, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(107, 225, 255, 0.2),
    0 0 28px rgba(24, 184, 231, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"],
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"]:hover,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"]:focus-visible,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="GPT_LYRICS"].is-active {
  background-image:
    linear-gradient(90deg, rgba(0, 13, 25, 0.86) 0%, rgba(0, 13, 25, 0.56) 48%, rgba(0, 13, 25, 0.14) 100%),
    url("/miniapp/static/assets/studio/card-previews/idea.webp") !important;
  background-position: center, center 46% !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"],
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"]:hover,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"]:focus-visible,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="READY_POEM"].is-active {
  background-image:
    linear-gradient(90deg, rgba(0, 13, 25, 0.88) 0%, rgba(0, 13, 25, 0.58) 48%, rgba(0, 13, 25, 0.12) 100%),
    url("/miniapp/static/assets/studio/card-previews/poem.webp") !important;
  background-position: center, right 58% !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"],
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"]:hover,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"]:focus-visible,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="SUNO_LYRICS"].is-active {
  background-image:
    linear-gradient(90deg, rgba(0, 13, 25, 0.86) 0%, rgba(0, 13, 25, 0.54) 47%, rgba(0, 13, 25, 0.1) 100%),
    url("/miniapp/static/assets/studio/card-previews/greeting.webp") !important;
  background-position: center, right 54% !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"],
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"]:hover,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"]:focus-visible,
html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card[data-studio-scenario="INSTRUMENTAL"].is-active {
  background-image:
    linear-gradient(90deg, rgba(0, 13, 25, 0.88) 0%, rgba(0, 13, 25, 0.56) 48%, rgba(0, 13, 25, 0.1) 100%),
    url("/miniapp/static/assets/studio/card-previews/instrumental.webp") !important;
  background-position: center, right center !important;
  background-size: 100% 100%, auto 100% !important;
}

@media (max-width: 720px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference .studio-scenario-card {
    min-height: 132px;
  }
}

/* The 2.0 wizard supplies its own concise guidance next to the active field. */
body.pv2-exact #text-mode-hint,
body.pv2-exact #text-block-muted {
  display: none !important;
}

/* MAX keeps a native header above the webview, so reserve room below fixed navigation. */
@media (max-width: 760px) {
  html.studio-host-max body .pv2-screen {
    min-height: calc(100svh + 92px);
    padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }

  html.studio-host-max body .pv2-hero__content {
    padding-bottom: calc(176px + env(safe-area-inset-bottom)) !important;
  }

  html.studio-host-max body .pv2-studio,
  html.studio-host-max body .pv2-library,
  html.studio-host-max body .pv2-utility {
    padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile Air: reserve its measured height instead of covering screen content. */
@media (max-width: 760px) {
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    padding-top: max(72px, var(--pv2-air-safe-top, 224px)) !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: max(58px, var(--pv2-air-safe-top, 224px)) !important;
  }
}

/* Shared bottom player for library tracks and Studio Air. */
.pv5-mini-player {
  position: fixed;
  z-index: 13000;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 48px minmax(150px, 1fr) auto minmax(160px, 1.7fr) auto 38px;
  align-items: center;
  gap: 12px;
  width: min(920px, calc(100% - 32px));
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid rgba(88, 215, 255, 0.32);
  border-radius: 22px;
  color: #eaf8ff;
  background:
    linear-gradient(90deg, rgba(0, 25, 42, 0.78), rgba(0, 12, 25, 0.68)),
    radial-gradient(circle at 30% 0, rgba(32, 193, 244, 0.16), transparent 44%);
  box-shadow: 0 18px 55px rgba(0, 4, 12, 0.48), inset 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 28px));
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.pv5-mini-player.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.pv5-mini-player__toggle,
.pv5-mini-player__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(78, 211, 255, 0.42);
  border-radius: 50%;
  color: #dff8ff;
  background: rgba(0, 35, 55, 0.72);
  cursor: pointer;
}

.pv5-mini-player__toggle {
  color: #001521;
  background: linear-gradient(145deg, #76e5ff, #18addc);
  box-shadow: 0 0 24px rgba(37, 199, 246, 0.24);
}

.pv5-mini-player__close {
  width: 34px;
  height: 34px;
  border-color: rgba(111, 203, 231, 0.2);
  font-size: 1.35rem;
}

.pv5-mini-player__meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pv5-mini-player__eyebrow {
  color: #38d3ff;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.pv5-mini-player__title {
  overflow: hidden;
  color: #f0f9fc;
  font-family: var(--pv-serif);
  font-size: 1.15rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv5-mini-player__seek {
  width: 100%;
  height: 4px;
  accent-color: #35d3ff;
  cursor: pointer;
}

.pv5-mini-player__time {
  color: rgba(218, 238, 246, 0.7);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

body.pv5-player-active .studio-wizard-actions,
body.pv5-player-active .pv2-bottom-nav {
  margin-bottom: 88px !important;
}

body.pv5-player-active .pv2-library__mount,
body.pv5-player-active .tracks-list {
  padding-bottom: 112px !important;
  scroll-padding-bottom: 112px;
}

/* Deliberate transitions between the 2.0 screens and wizard stages. */
.pv3-reference .pv2-screen.is-active {
  animation: pv5-screen-enter 680ms cubic-bezier(.16, 1, .3, 1) both;
}

.pv3-reference .studio-start-panel,
.pv3-reference #track-form > .field-group,
.pv3-reference .studio-review-panel,
.pv3-reference .studio-result-panel {
  animation: pv5-stage-enter 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.pv3-reference .pv2-screen.is-active h1,
.pv3-reference .pv2-screen.is-active h2,
.pv3-reference .pv2-screen.is-active .pv3-scene-caption {
  animation: pv5-content-enter 720ms 80ms cubic-bezier(.16, 1, .3, 1) both;
}

.pv3-reference .pv2-screen.is-active .studio-scenario-grid,
.pv3-reference .pv2-screen.is-active .tracks-list,
.pv3-reference .pv2-screen.is-active .studio-review-list,
.pv3-reference .pv2-screen.is-active .pv3-preflight__grid {
  animation: pv5-content-enter 760ms 150ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes pv5-screen-enter {
  from {
    opacity: 0;
    clip-path: inset(12px 0 0 0);
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes pv5-stage-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pv5-content-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  .pv5-mini-player {
    grid-template-columns: 42px minmax(0, 1fr) auto 32px;
    gap: 8px;
    width: calc(100% - 18px);
    min-height: 66px;
    padding: 8px 9px;
    border-radius: 20px;
  }

  .pv5-mini-player__toggle {
    width: 40px;
    height: 40px;
  }

  .pv5-mini-player__seek {
    grid-column: 2 / 5;
    grid-row: 2;
  }

  .pv5-mini-player__duration {
    display: none;
  }

  .pv5-mini-player__current {
    justify-self: end;
  }

  body.pv5-player-active .studio-wizard-actions,
  body.pv5-player-active .pv2-bottom-nav {
    margin-bottom: 84px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv5-mini-player,
  .pv3-reference .pv2-screen.is-active,
  .pv3-reference .studio-start-panel,
  .pv3-reference #track-form > .field-group,
  .pv3-reference .studio-review-panel,
  .pv3-reference .studio-result-panel,
  .pv3-reference .pv2-screen.is-active h1,
  .pv3-reference .pv2-screen.is-active h2,
  .pv3-reference .pv2-screen.is-active .pv3-scene-caption,
  .pv3-reference .pv2-screen.is-active .studio-scenario-grid,
  .pv3-reference .pv2-screen.is-active .tracks-list,
  .pv3-reference .pv2-screen.is-active .studio-review-list,
  .pv3-reference .pv2-screen.is-active .pv3-preflight__grid {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Final 2.0 system: audio, navigation, transitions and account surfaces. */
:root {
  --pv5-serif: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --pv5-ui: "Manrope", "Segoe UI Variable Text", "Aptos", sans-serif;
}

.pv3-reference .pv2-topbar {
  font-family: var(--pv5-ui) !important;
}

.pv3-reference .pv2-impulses {
  gap: 7px !important;
  padding-inline: 12px !important;
}

.pv3-reference .pv2-impulses__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(51, 211, 255, .36));
}

.pv3-reference .pv2-impulses strong {
  color: var(--pv5-gold) !important;
  font-family: var(--pv5-serif) !important;
  font-size: 1.15rem !important;
}

.pv3-reference .web-audio-player__wave {
  width: 100%;
}

.pv3-reference .web-audio-player__wave i {
  flex: 1 1 0 !important;
  max-width: none !important;
}

.pv3-reference .web-audio-player .audio-player__range,
.pv5-mini-player__seek {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(75, 220, 255, .95) 0 var(--seek-progress, 0%),
    rgba(96, 164, 189, .3) var(--seek-progress, 0%) 100%
  );
}

.pv3-reference .web-audio-player .audio-player__range::-webkit-slider-runnable-track,
.pv5-mini-player__seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: transparent;
}

.pv3-reference .web-audio-player .audio-player__range::-webkit-slider-thumb,
.pv5-mini-player__seek::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  border: 3px solid rgba(1, 27, 42, .96);
  border-radius: 50%;
  background: #8cecff;
  box-shadow: 0 0 0 1px rgba(133, 236, 255, .68), 0 0 16px rgba(55, 207, 244, .34);
}

/* Studio Air owns one compact play/pause control and never shows native chrome. */
.pv3-reference .pv2-air-overlay {
  position: absolute !important;
  top: 78px !important;
  right: auto !important;
  left: 50% !important;
  width: min(760px, calc(100% - 48px)) !important;
  transform: translateX(-50%) !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  gap: 10px !important;
  min-height: 62px !important;
  padding: 7px 9px !important;
  overflow: visible !important;
  border: 1px solid rgba(90, 216, 251, .24) !important;
  border-radius: 19px !important;
  background:
    linear-gradient(100deg, rgba(1, 32, 49, .88), rgba(1, 13, 25, .74)),
    var(--pv5-master-art) center 45% / cover !important;
  box-shadow: 0 18px 54px rgba(0, 5, 13, .34), inset 0 1px rgba(255, 255, 255, .05) !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact::after {
  right: 250px !important;
  width: min(230px, 30%) !important;
  opacity: .24 !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__identity {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: none !important;
}

.pv3-reference .studio-air-card__play {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(93, 223, 255, .56);
  border-radius: 50%;
  color: #071823;
  background: linear-gradient(145deg, #8deaff, #24b9e2);
  box-shadow: 0 0 22px rgba(42, 202, 241, .2);
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms ease;
}

.pv3-reference .studio-air-card__play:hover {
  transform: scale(1.045);
  box-shadow: 0 0 30px rgba(42, 202, 241, .3);
}

.pv3-reference .studio-air-card__play.is-playing {
  color: #dff9ff;
  background: rgba(0, 38, 57, .86);
}

.pv3-reference .pv2-air-overlay .studio-air-card audio,
.pv3-reference .pv2-air-overlay .studio-air-card__audio {
  display: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__until {
  display: none !important;
}

.pv3-reference .pv2-air-overlay .studio-air-card__reactions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.pv3-reference .studio-air-guide {
  position: relative;
  z-index: 5;
}

.pv3-reference .studio-air-guide > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(84, 206, 244, .18);
  border-radius: 999px;
  color: rgba(218, 239, 246, .74);
  background: rgba(0, 16, 28, .34);
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.pv3-reference .studio-air-guide > summary::-webkit-details-marker {
  display: none;
}

.pv3-reference .studio-air-guide > div {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(310px, calc(100vw - 28px));
  padding: 15px;
  border: 1px solid rgba(90, 213, 249, .24);
  border-radius: 16px;
  color: rgba(228, 242, 248, .82);
  background: rgba(1, 16, 28, .97);
  box-shadow: 0 24px 65px rgba(0, 3, 10, .52);
}

.pv3-reference .studio-air-guide p {
  margin: 0 0 11px;
  font-size: .78rem;
  line-height: 1.5;
}

.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
.pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
  padding-top: 158px !important;
}

/* Compact lower player is reserved for a selected library track. */
.pv5-mini-player {
  grid-template-columns: 38px minmax(120px, .9fr) auto minmax(130px, 1.35fr) auto 28px !important;
  gap: 8px !important;
  width: min(680px, calc(100% - 24px)) !important;
  min-height: 54px !important;
  padding: 6px 8px !important;
  border-radius: 18px !important;
}

.pv5-mini-player__toggle {
  width: 36px !important;
  height: 36px !important;
}

.pv5-mini-player__close {
  width: 27px !important;
  height: 27px !important;
  font-size: 1rem !important;
}

.pv5-mini-player__eyebrow {
  font-size: .52rem !important;
}

.pv5-mini-player__title {
  font-size: .98rem !important;
}

.pv5-mini-player__seek {
  height: 18px !important;
  margin: 0 !important;
}

/* Slow optical dissolves replace abrupt clipping between screens. */
.pv3-reference .pv2-screen.is-active {
  animation: pv5-premium-screen 900ms cubic-bezier(.16, 1, .3, 1) both !important;
}

.pv3-reference .studio-start-panel,
.pv3-reference #track-form > .field-group,
.pv3-reference .studio-review-panel,
.pv3-reference .studio-result-panel {
  animation: pv5-premium-panel 760ms cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes pv5-premium-screen {
  from {
    opacity: 0;
    filter: saturate(.82) brightness(.78);
    transform: translateY(7px) scale(.997);
  }
  to {
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes pv5-premium-panel {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Profile becomes the single account and delivery hub. */
.pv3-reference .studio-profile-connections {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.pv3-reference .studio-profile-connections header {
  max-width: 720px;
}

.pv3-reference .studio-profile-connections h3 {
  margin: 4px 0 5px;
  color: #f2f9fc;
  font-family: var(--pv5-serif);
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  font-weight: 400;
}

.pv3-reference .studio-profile-connections header > span {
  color: var(--pv5-muted);
  font-size: .84rem;
}

.pv3-reference .studio-profile-connections__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pv3-reference .studio-profile-connections__grid article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(93, 209, 245, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(3, 29, 44, .64), rgba(1, 13, 24, .46));
}

.pv3-reference .studio-profile-connections__grid article.is-connected {
  border-color: rgba(88, 220, 185, .3);
  background: linear-gradient(145deg, rgba(5, 43, 47, .6), rgba(1, 16, 27, .46));
}

.pv3-reference .studio-profile-connections__grid i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(81, 214, 255, .34);
  border-radius: 50%;
  color: #7fe7ff;
  font-style: normal;
  font-weight: 800;
}

.pv3-reference .studio-profile-connections__grid div {
  display: grid;
  align-content: center;
  min-width: 0;
}

.pv3-reference .studio-profile-connections__grid strong {
  color: #eef9fc;
  font-family: var(--pv5-serif);
  font-size: 1.15rem;
  font-weight: 400;
}

.pv3-reference .studio-profile-connections__grid div span {
  color: rgba(198, 225, 235, .62);
  font-size: .7rem;
  line-height: 1.35;
}

.pv3-reference .studio-profile-connections__grid button,
.pv3-reference .studio-profile-connections__grid a {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid rgba(76, 207, 247, .26);
  border-radius: 999px;
  color: #dff7fd;
  background: rgba(0, 25, 39, .5);
  font: 700 .75rem/1 var(--pv5-ui);
  text-decoration: none;
  cursor: pointer;
}

.pv3-reference .studio-profile-connections__grid :is(button:disabled, a[aria-disabled="true"]) {
  color: rgba(157, 229, 207, .75);
  border-color: rgba(86, 215, 180, .2);
  cursor: default;
  pointer-events: none;
}

.pv3-reference .studio-profile-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.pv3-reference .studio-profile-legal a {
  padding: 8px 12px;
  border: 1px solid rgba(93, 203, 239, .16);
  border-radius: 999px;
  color: rgba(206, 233, 242, .67);
  font-size: .7rem;
  text-decoration: none;
}

.pv3-reference[data-utility="profile"] .pv2-utility :is(#billing-panel, #studio-help-panel, #studio-drafts-panel),
.pv3-reference[data-utility="billing"] .pv2-utility :is(#studio-profile-panel, #studio-help-panel, #studio-drafts-panel),
.pv3-reference[data-utility="help"] .pv2-utility :is(#billing-panel, #studio-profile-panel, #studio-drafts-panel),
.pv3-reference[data-utility="drafts"] .pv2-utility :is(#billing-panel, #studio-profile-panel, #studio-help-panel) {
  display: none !important;
}

.pv3-reference[data-utility="profile"] .pv2-utility #studio-profile-panel,
.pv3-reference[data-utility="billing"] .pv2-utility #billing-panel,
.pv3-reference[data-utility="help"] .pv2-utility #studio-help-panel,
.pv3-reference[data-utility="drafts"] .pv2-utility #studio-drafts-panel {
  display: block !important;
}

@media (max-width: 760px) {
  .pv3-reference .pv2-impulses span {
    display: none !important;
  }

  .pv3-reference .pv2-impulses {
    min-width: 54px !important;
    padding-inline: 9px !important;
  }

  .pv3-reference .pv2-air-overlay {
    top: 70px !important;
    width: calc(100% - 16px) !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 72px !important;
    padding: 6px 8px !important;
    border-radius: 17px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .pv3-reference .studio-air-card__play {
    width: 34px;
    height: 34px;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity h3 {
    font-size: .88rem !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__reactions {
    gap: 4px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-reaction,
  .pv3-reference .pv2-air-overlay .studio-air-comments-panel > summary {
    min-height: 30px !important;
    padding-inline: 8px !important;
    font-size: .62rem !important;
  }

  .pv3-reference .studio-air-guide {
    grid-column: 1 / -1;
  }

  .pv3-reference .studio-air-guide > summary {
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 0;
    color: rgba(105, 221, 252, .78);
    background: transparent;
    font-size: .61rem;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 164px !important;
  }

  .pv5-mini-player {
    grid-template-columns: 36px minmax(0, 1fr) auto 26px !important;
    gap: 7px !important;
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    border-radius: 17px !important;
  }

  .pv5-mini-player__toggle {
    width: 34px !important;
    height: 34px !important;
  }

  .pv5-mini-player__seek {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    height: 14px !important;
  }

  .pv5-mini-player__current {
    justify-self: end;
    font-size: .65rem;
  }

  .pv5-mini-player__duration {
    display: none !important;
  }

  .pv3-reference .studio-profile-connections__grid {
    grid-template-columns: 1fr;
  }
}

/* One slow optical transition prevents competing child animations from jerking. */
.pv3-reference .pv2-screen.is-active {
  animation: pv5-cinematic-dissolve 1250ms cubic-bezier(.22, .72, .22, 1) both !important;
  transform-origin: 50% 42%;
}

.pv3-reference .pv2-screen.is-active h1,
.pv3-reference .pv2-screen.is-active h2,
.pv3-reference .pv2-screen.is-active .pv3-scene-caption,
.pv3-reference .pv2-screen.is-active .studio-scenario-grid,
.pv3-reference .pv2-screen.is-active .tracks-list,
.pv3-reference .pv2-screen.is-active .studio-review-list,
.pv3-reference .pv2-screen.is-active .pv3-preflight__grid,
.pv3-reference .studio-start-panel,
.pv3-reference #track-form > .field-group,
.pv3-reference .studio-review-panel,
.pv3-reference .studio-result-panel {
  animation: none !important;
}

@keyframes pv5-cinematic-dissolve {
  0% {
    opacity: 0;
    filter: blur(2px) brightness(.88);
    transform: scale(.994);
  }
  42% {
    opacity: .58;
    filter: blur(.7px) brightness(.96);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

.pv3-reference .field.is-studio-required > label::after {
  content: " *";
  color: #66dcff;
  font-family: "Manrope", sans-serif;
}

.pv3-reference .studio-required-message {
  margin: 8px 0 0;
  color: #ffd19a;
  font: 650 12px/1.45 "Manrope", sans-serif;
  letter-spacing: .02em;
}

.pv3-reference .field.is-field-error input,
.pv3-reference .field.is-field-error textarea,
.pv3-reference .field.is-field-error select {
  border-color: rgba(255, 186, 99, .92) !important;
  box-shadow:
    0 0 0 3px rgba(255, 177, 77, .13),
    0 0 24px rgba(255, 177, 77, .09) !important;
}

/* A single typographic voice across navigation, forms, utilities and players. */
.pv3-reference,
.pv3-reference button,
.pv3-reference input,
.pv3-reference textarea,
.pv3-reference select,
.pv3-reference option,
.pv3-reference summary,
.pv3-reference label,
.pv3-reference p,
.pv3-reference small,
.pv3-reference a,
.pv3-reference dt,
.pv3-reference dd {
  font-family: var(--pv5-ui) !important;
  font-stretch: normal !important;
}

.pv3-reference button,
.pv3-reference summary {
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

.pv3-reference input,
.pv3-reference textarea,
.pv3-reference select {
  font-weight: 450 !important;
  letter-spacing: -.012em !important;
}

.pv3-reference p,
.pv3-reference label,
.pv3-reference small,
.pv3-reference dd {
  letter-spacing: -.008em;
}

.pv3-reference h1,
.pv3-reference h2,
.pv3-reference h3,
.pv3-reference h1 *,
.pv3-reference h2 *,
.pv3-reference h3 *,
.pv3-reference .pv2-drawer__brand strong,
.pv3-reference .pv3-plan__price,
.pv3-reference .studio-result-title {
  font-family: var(--pv5-serif) !important;
  font-optical-sizing: auto;
}

.pv3-reference .pv2-drawer nav button {
  font-family: var(--pv5-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.012em !important;
}

.pv3-reference .pv2-topbar button,
.pv3-reference .pv2-languages,
.pv3-reference .studio-wizard-actions button,
.pv3-reference .chip,
.pv3-reference .ghost-button,
.pv3-reference .secondary-button,
.pv3-reference .primary-button {
  font-family: var(--pv5-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
}

.pv3-reference .eyebrow,
.pv3-reference .pv2-hero__eyebrow,
.pv3-reference .pv3-scene-caption span,
.pv3-reference .section__pill {
  font-family: var(--pv5-ui) !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
}

/* Optional production fields stay available on the mood screen without cluttering it. */
body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning {
  width: min(920px, 100%);
  margin: 12px auto 0;
  border: 1px solid rgba(100, 213, 246, .2);
  border-radius: 18px;
  background: rgba(0, 17, 29, .34);
  overflow: clip;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 16px;
  color: rgba(232, 246, 251, .9);
  cursor: pointer;
  list-style: none;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary::-webkit-details-marker {
  display: none;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary::after {
  content: "+";
  color: var(--pv5-cyan);
  font-size: 1.25rem;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning[open] > summary::after {
  content: "−";
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary small {
  margin-left: auto;
  color: rgba(185, 217, 228, .58);
  font-size: .72rem;
  font-weight: 500;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning__body {
  display: grid;
  gap: 16px;
  padding: 4px 16px 18px;
}

body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning__body > .field,
body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning__body > .inline-grid {
  display: grid !important;
}

/* Desktop Air is one slim row directly below the top controls. */
@media (min-width: 761px) {
  .pv3-reference.pv2-exact-shell--web .pv2-topbar__menu {
    min-width: 128px !important;
    min-height: 50px !important;
    gap: 13px !important;
    padding-inline: 19px !important;
    border-radius: 15px !important;
  }

  .pv3-reference.pv2-exact-shell--web .pv2-topbar__menu span,
  .pv3-reference.pv2-exact-shell--web .pv2-topbar__menu span::before,
  .pv3-reference.pv2-exact-shell--web .pv2-topbar__menu span::after {
    width: 20px !important;
    height: 1.5px !important;
  }

  .pv3-reference.pv2-exact-shell--web .pv2-topbar__menu strong {
    font-size: 14px !important;
  }

  .pv3-reference .pv2-air-overlay {
    top: 58px !important;
    width: min(1040px, calc(100% - 40px)) !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(240px, 1fr) auto auto auto !important;
    min-height: 54px !important;
    padding: 5px 8px !important;
    border-radius: 17px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__play {
    width: 36px !important;
    height: 36px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity h3 {
    font-size: 1rem !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity p {
    line-height: 1.05 !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-guide {
    grid-column: auto !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 124px !important;
  }
}

@media (max-width: 760px) {
  body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning {
    width: calc(100vw - 32px);
    margin-inline: calc(50% - 50vw + 16px);
  }

  body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3px 10px;
  }

  body[data-studio-step="sound"] .pv3-reference .pv3-sound-tuning > summary small {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
}

/* Keep Studio Air in the mobile layout flow so it can never cover the brand. */
@media (max-width: 900px) {
  .pv3-reference .pv2-air-overlay {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 16px) !important;
    margin: 66px 8px 0 !important;
    transform: none !important;
    z-index: 24 !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-host {
    margin: 0 !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    height: auto !important;
    min-height: calc(100% - 180px) !important;
    justify-content: center !important;
    padding: 28px 0 128px !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-studio,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-library,
  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-utility {
    padding-top: 28px !important;
  }
}

/* On the Mini App hero, Air lives below the logo in the same document flow. */
@media (max-width: 900px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content:has(.pv2-air-overlay .studio-air-host:not(:empty)) {
    min-height: 100% !important;
    justify-content: flex-start !important;
    padding: 84px 0 122px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content > .pv2-air-overlay {
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    margin: 12px 0 18px !important;
  }
}

/* Mobile comments are a compact, independently scrollable Air popover. */
@media (max-width: 900px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-comments-panel[open] {
    position: relative !important;
    z-index: 60 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-comments-panel__body {
    position: absolute !important;
    z-index: 61 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(336px, calc(100vw - 28px)) !important;
    max-height: min(42svh, 360px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 16px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comment-form {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comment-form label > span {
    font-size: .76rem !important;
    line-height: 1.2 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comment-form input {
    min-height: 36px !important;
    font-size: 16px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comment-form .secondary-button {
    min-height: 38px !important;
    font-size: .9rem !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comments {
    gap: 8px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comments li {
    gap: 2px !important;
    padding-top: 8px !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comments strong {
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-comments span {
    font-size: .82rem !important;
    line-height: 1.35 !important;
  }
}

/* One calm type scale for the Mini App track library and its audio actions. */
@media (max-width: 900px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item {
    gap: 12px !important;
    padding: 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item h3 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.14 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item__eyebrow {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item__status,
  .pv3-reference.pv2-exact-shell--mini .pv2-library .ai-disclosure-badge {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-preview {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-preview__label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-preview__hint {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-preview__download {
    color: #8fe8ff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-preview__favorite {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-player__toggle {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .audio-player__times {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .track-item__actions > .secondary-button,
  .pv3-reference.pv2-exact-shell--mini .pv2-library .studio-air-publish {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .studio-air-publish-options {
    display: grid !important;
    gap: 8px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-library .studio-air-publish-options > span {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* MAX uses a native shell on phones and tablets; fixed navigation must never cover actions. */
@media (max-width: 1024px) {
  html.studio-host-max body .pv2-screen {
    min-height: calc(100svh + 150px) !important;
    padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(154px + env(safe-area-inset-bottom));
  }

  html.studio-host-max body .pv2-hero__content {
    padding-bottom: calc(216px + env(safe-area-inset-bottom)) !important;
  }

  html.studio-host-max body .pv2-studio,
  html.studio-host-max body .pv2-library,
  html.studio-host-max body .pv2-utility {
    padding-bottom: calc(172px + env(safe-area-inset-bottom)) !important;
  }
}

.pv3-reference .studio-draft-resume {
  width: min(360px, 100%);
  margin-top: 20px;
}

body.studio-instrumental-flow .pv3-reference [data-studio-step-target="voice"] {
  display: none !important;
}

.pv3-reference .studio-stage-transition {
  animation: pv5-stage-dissolve 880ms cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes pv5-stage-dissolve {
  0% {
    opacity: .32;
    transform: translateY(14px) scale(.997);
  }
  46% {
    opacity: .82;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .studio-stage-transition {
    animation: none !important;
  }
}

/* Lightweight one-file-per-mood art avoids loading the former multi-megabyte strip. */
html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-value="Меланхоличное"] {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .9) 100%),
    url("/miniapp/static/assets/studio/mood-cards-v2/melancholic.webp") !important;
  background-position: center !important;
  background-size: 100% 100%, cover !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-value="Романтичное"] {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .9) 100%),
    url("/miniapp/static/assets/studio/mood-cards-v2/romantic.webp") !important;
  background-position: center !important;
  background-size: 100% 100%, cover !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-value="Воодушевляющее"] {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .9) 100%),
    url("/miniapp/static/assets/studio/mood-cards-v2/inspiring.webp") !important;
  background-position: center !important;
  background-size: 100% 100%, cover !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-value="Мечтательное"] {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .9) 100%),
    url("/miniapp/static/assets/studio/mood-cards-v2/dreamy.webp") !important;
  background-position: center !important;
  background-size: 100% 100%, cover !important;
}

html body.pv2-exact.studio-wizard-enabled[data-studio-step="sound"] .pv2-exact-shell.pv3-reference [data-target="mood"] .chip[data-value="Энергичное"] {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 18, .02) 34%, rgba(1, 9, 17, .9) 100%),
    url("/miniapp/static/assets/studio/mood-cards-v2/energetic.webp") !important;
  background-position: center !important;
  background-size: 100% 100%, cover !important;
}

/* MAX: navigation hugs the webview edge; an active player stacks above it. */
html.studio-host-max body .pv2-bottom-nav {
  bottom: max(2px, env(safe-area-inset-bottom)) !important;
  margin-bottom: 0 !important;
}

html.studio-host-max body.pv5-player-active .pv2-bottom-nav {
  margin-bottom: 0 !important;
}

html.studio-host-max body.pv5-player-active .pv5-mini-player.is-visible {
  bottom: calc(118px + env(safe-area-inset-bottom)) !important;
}

/*
 * MAX renders its own native chrome outside the webview. Keep the scrollable
 * screen above our dock instead of allowing the fixed dock to cover content.
 */
@media (max-width: 1024px) {
  html.studio-host-max body .pv2-screen {
    inset: 0 0 calc(118px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 28px !important;
    scroll-padding-bottom: 28px !important;
  }

  html.studio-host-max body.pv5-player-active .pv2-screen {
    bottom: calc(196px + env(safe-area-inset-bottom)) !important;
  }

  html.studio-host-max body .pv2-hero__content,
  html.studio-host-max body .pv2-studio,
  html.studio-host-max body .pv2-library,
  html.studio-host-max body .pv2-utility {
    padding-bottom: 32px !important;
  }

  html.studio-host-max body .studio-start-panel,
  html.studio-host-max body #track-form,
  html.studio-host-max body .studio-review-panel,
  html.studio-host-max body .studio-result-panel,
  html.studio-host-max body .studio-utility-panel {
    scroll-margin-bottom: 28px;
  }

  body.is-keyboard-open .pv2-bottom-nav,
  body.is-keyboard-open .footer-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 18px)) !important;
  }

  body.is-keyboard-open .pv2-screen {
    bottom: 0 !important;
    scroll-padding-bottom: 24px !important;
  }
}

/* Focus mode: keep only the active editor visible above the mobile keyboard. */
@media (max-width: 1024px) {
  body.is-editor-focus.is-keyboard-open .pv2-topbar,
  body.is-editor-focus.is-keyboard-open .pv2-air-overlay,
  body.is-editor-focus.is-keyboard-open .pv3-scene-caption,
  body.is-editor-focus.is-keyboard-open .studio-stepper,
  body.is-editor-focus.is-keyboard-open .studio-wizard-actions,
  body.is-editor-focus.is-keyboard-open .pv2-bottom-nav,
  body.is-editor-focus.is-keyboard-open .footer-bar,
  body.is-editor-focus.is-keyboard-open .pv5-mini-player {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-screen.is-active {
    inset: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0, rgba(18, 104, 139, .22), transparent 52%),
      #020b14 !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio {
    min-height: var(--pv-keyboard-viewport-height, 52vh) !important;
    padding: 0 !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio * {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio :is(
    .field-group,
    .advanced-panel,
    .pv3-sound-tuning,
    .studio-review-card
  ):has(:focus) {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio :is(.field, .copy-card, .pv3-custom-style):has(:focus),
  body.is-editor-focus.is-keyboard-open .pv2-studio :is(.field, .copy-card, .pv3-custom-style):has(:focus) * {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio :is(.field, .copy-card, .pv3-custom-style):has(:focus) {
    position: fixed !important;
    z-index: 120 !important;
    inset: 8px 8px auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: auto !important;
    height: calc(var(--pv-keyboard-viewport-height, 52vh) - 16px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(77, 207, 248, .34) !important;
    border-radius: 18px !important;
    background: rgba(1, 13, 23, .96) !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .04) !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio :is(.field, .copy-card):has(textarea:focus) textarea {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    overflow: auto !important;
    scroll-padding-block: 32px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio .field:has(input:focus) input {
    min-height: 58px !important;
    margin-block: auto !important;
    font-size: 16px !important;
  }

  body.is-editor-focus.is-keyboard-open .pv2-studio :is(.chips, .muted, .field-counter, .editable-lyrics-card__actions, .editable-lyrics-card__footnote) {
    display: none !important;
  }
}

/* Review uses the page scroller instead of a cramped nested pane. */
@media (max-width: 760px) {
  body[data-studio-step="review"] .pv3-reference .pv2-studio,
  body[data-studio-step="review"] .pv3-reference .pv2-studio__mount,
  body[data-studio-step="review"] .pv3-reference .studio-wizard-root,
  body[data-studio-step="review"] .pv3-reference .studio-review-panel,
  body[data-studio-step="review"] .pv3-reference .studio-review-card,
  body[data-studio-step="review"] .pv3-reference .studio-review-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-studio-step="review"] .pv3-reference .studio-review-panel {
    padding-bottom: 18px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-review-panel {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-studio-step="review"] .pv3-reference .studio-review-card {
    padding: 12px 14px !important;
  }

  body[data-studio-step="review"] .pv3-reference .studio-review-list__row {
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.5fr) !important;
    gap: 12px !important;
    padding-block: 9px !important;
  }
}

/* Mini App Air remains fully functional but no longer consumes the first screen. */
@media (max-width: 760px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: 64px !important;
    width: calc(100% - 14px) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    gap: 4px 6px !important;
    padding: 5px 7px !important;
    border-radius: 15px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity {
    grid-template-columns: 31px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__play {
    width: 31px !important;
    height: 31px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity h3 {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity p,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity small {
    display: none !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-reaction,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-comments-panel > summary {
    min-height: 27px !important;
    padding-inline: 7px !important;
    font-size: .58rem !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-guide {
    position: absolute !important;
    right: 7px !important;
    bottom: -24px !important;
    width: auto !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-guide > summary {
    min-height: 22px !important;
    padding-inline: 8px !important;
    font-size: .56rem !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-hero__content,
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: 128px !important;
  }

  .pv3-reference.pv2-exact-shell--mini :is(.pv2-studio h1, .pv2-studio h2, .advanced-panel > summary) {
    font-size: clamp(1.9rem, 10vw, 2.8rem) !important;
    line-height: 1.02 !important;
  }

  .pv3-reference.pv2-exact-shell--mini :is(.field, .advanced-panel, .pv3-sound-tuning) {
    font-size: 16px;
  }
}

/* One calm transition; avoid blur and competing transforms on mobile GPUs. */
.pv3-reference .pv2-screen.is-active {
  animation: pv6-screen-enter 760ms cubic-bezier(.22, 1, .36, 1) both !important;
}

.pv3-reference .studio-stage-transition {
  animation: pv6-stage-enter 720ms cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes pv6-screen-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pv6-stage-enter {
  from { opacity: .18; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.studio-impulses-dialog {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 7, 13, .72);
  transition: opacity 360ms ease, visibility 360ms ease;
}

.studio-impulses-dialog.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.studio-impulses-dialog__panel {
  position: relative;
  width: min(560px, 100%);
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(88, 213, 251, .3);
  border-radius: 26px;
  color: #edf9ff;
  background:
    radial-gradient(circle at 90% 0, rgba(41, 190, 235, .18), transparent 42%),
    linear-gradient(145deg, rgba(3, 28, 43, .98), rgba(1, 12, 22, .99));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .06);
  transform: translateY(14px) scale(.985);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.studio-impulses-dialog.is-open .studio-impulses-dialog__panel {
  transform: translateY(0) scale(1);
}

.studio-impulses-dialog__panel h2 {
  margin: 8px 0 14px;
  font-family: var(--pv5-display, Georgia, serif);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 400;
  line-height: .98;
}

.studio-impulses-dialog__panel > p:not(.eyebrow) {
  color: rgba(205, 229, 238, .74);
  line-height: 1.55;
}

.studio-impulses-dialog__api-message {
  padding: 10px 12px;
  border-left: 2px solid #55d7ff;
  color: rgba(209, 239, 248, .88) !important;
  background: rgba(45, 180, 224, .08);
}

.studio-impulses-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(96, 212, 246, .22);
  border-radius: 50%;
  color: #dff7ff;
  background: rgba(1, 13, 23, .56);
  font-size: 1.35rem;
}

.studio-impulses-dialog__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 520px) {
  .studio-impulses-dialog__actions {
    grid-template-columns: 1fr;
  }
}

/* The review card expands naturally; the outer screen remains the only scroller. */
@media (max-width: 760px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active :is(
    .pv2-studio__mount,
    .pv2-studio-root,
    .studio-review-panel,
    .studio-review-card,
    .studio-review-list
  ) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="review"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-wizard-actions {
    position: relative !important;
    inset: auto !important;
    margin-top: 18px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile tuning and Mini App Air: one page scroller, compact typography and clear controls. */
@media (max-width: 760px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="advanced"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="advanced"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active :is(
    .pv2-studio__mount,
    .studio-wizard-root,
    #track-form,
    .studio-group-story,
    .advanced-panel,
    .advanced-panel__body
  ) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="advanced"] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .pv2-studio-root #track-form > .studio-group-story {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .studio-group-story {
    padding: 0 14px 18px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel > summary {
    min-height: 58px !important;
    padding: 14px 48px 14px 16px !important;
    font-size: 1.12rem !important;
    line-height: 1.18 !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body {
    padding: 4px 14px 18px !important;
  }

  body[data-studio-step="advanced"] .pv3-reference .advanced-panel__body > .muted {
    margin: 0 0 16px !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: 112px !important;
    z-index: 24 !important;
    width: calc(100% - 16px) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    min-height: 58px !important;
    padding: 6px 8px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-guide {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .pv3-reference.pv2-exact-shell--mini .studio-air-guide > summary {
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: .58rem !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-hero__content,
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: 190px !important;
  }
}

/* Final Mini App Air layout: a compact fixed capsule below the controls.
   It never participates in the Hero's flex stack, so the brand and title keep
   their intended hierarchy on Telegram and MAX viewports. */
@media (max-width: 760px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    position: fixed !important;
    top: calc(86px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 72 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    min-height: 52px !important;
    padding: 5px 8px !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    min-height: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 176px 0 calc(132px + env(safe-area-inset-bottom)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: 154px !important;
  }
}

/* Authoritative mobile layout. Keep this block last so legacy layers cannot
   enlarge Air or move the wizard controls back into the document flow. */
@media (max-width: 760px) {
  .pv3-reference .pv2-screen.is-active,
  .pv3-reference .pv2-screen.is-active :is(.pv2-hero__content, .pv2-studio__mount, .pv2-library__mount, .pv2-utility__mount) {
    transform: none !important;
  }

  .pv3-reference .pv2-screen.is-active {
    animation: none !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    position: fixed !important;
    top: calc(76px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: auto !important;
    width: min(292px, calc(100% - 16px)) !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 72 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(4, 28px) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 6px !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__play {
    width: 30px !important;
    height: 30px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity h3 {
    font-size: .75rem !important;
    line-height: 1 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__reactions {
    display: contents !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay :is(
    .studio-air-reaction,
    .studio-air-comments-panel > summary,
    .studio-air-guide > summary
  ) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    width: auto !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: .6rem !important;
    line-height: 1 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay :is(.studio-air-comments-panel, .studio-air-guide) {
    position: static !important;
    grid-column: auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay :is(
    .studio-air-comments-panel__body,
    .studio-air-guide > div
  ) {
    position: fixed !important;
    z-index: 190 !important;
    top: calc(126px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    width: min(340px, calc(100vw - 16px)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    padding-top: 132px !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: 124px !important;
    padding-bottom: calc(196px + env(safe-area-inset-bottom)) !important;
  }

  .pv3-reference .studio-wizard-actions {
    position: fixed !important;
    z-index: 82 !important;
    right: 10px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(82, 207, 244, .24) !important;
    border-radius: 18px !important;
    background: rgba(1, 13, 23, .94) !important;
    box-shadow: 0 16px 42px rgba(0, 5, 12, .4) !important;
    backdrop-filter: none !important;
  }

  .pv3-reference .studio-wizard-actions__secondary,
  .pv3-reference .studio-wizard-actions__primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  .pv3-reference .studio-wizard-actions__primary {
    grid-column: 2 !important;
  }

  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__secondary[hidden],
  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__primary[hidden],
  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__clear,
  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__ghost {
    display: none !important;
  }

  .pv3-reference .studio-stage-transition {
    animation: pv7-stage-fade 420ms cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

@media (max-width: 760px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step] .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active .studio-wizard-actions {
    position: fixed !important;
    z-index: 82 !important;
    right: 10px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    display: grid !important;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 7px !important;
    transform: none !important;
    background: rgba(1, 13, 23, .94) !important;
  }

  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__secondary,
  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  html body.pv2-exact.studio-wizard-enabled .pv2-exact-shell.pv3-reference .studio-wizard-actions__primary {
    grid-column: 2 !important;
  }
}

/* Authoritative final responsive clearance. */
.pv2-hero__dots { display: none !important; }

.studio-start-title {
  display: grid !important;
  gap: 8px !important;
  width: min(620px, 100%) !important;
  margin: 8px auto 22px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(84, 211, 246, .28) !important;
  border-radius: 20px !important;
  background: rgba(1, 17, 29, .58) !important;
}

.studio-start-title input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(84, 211, 246, .24) !important;
  border-radius: 14px !important;
  color: #f4fbff !important;
  background: rgba(0, 10, 19, .58) !important;
}

@media (max-width: 1024px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 10px !important;
    left: auto !important;
    width: min(430px, calc(100% - 20px)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 132px 20px calc(126px + env(safe-area-inset-bottom)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    position: absolute !important;
    right: 20px !important;
    bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    left: 20px !important;
    z-index: 12 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.pv5-player-active .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    bottom: calc(210px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 760px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    top: calc(54px + env(safe-area-inset-top)) !important;
    right: 8px !important;
    width: min(292px, calc(100% - 16px)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 118px 16px calc(126px + env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__logo {
    width: clamp(72px, 22vw, 94px) !important;
    margin-top: 62px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__eyebrow { margin-top: 18px !important; }
  .pv3-reference.pv2-exact-shell--mini .pv2-hero h1 {
    margin-top: 12px !important;
    font-size: clamp(2.65rem, 12vw, 4rem) !important;
    line-height: .98 !important;
  }
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__lead { margin-top: 16px !important; }
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    right: 16px !important;
    bottom: calc(126px + env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    min-height: 58px !important;
  }
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__tracks { display: none !important; }
  .studio-start-title {
    margin: 4px 0 16px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay :is(
    .studio-air-card__until,
    .studio-air-card__identity .track-item__eyebrow,
    .studio-air-card__identity .muted
  ) {
    display: none !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity > div {
    min-width: 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__identity h3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Phone and tablet Hero: every content block owns a grid row. This avoids
   overlap in Telegram/MAX WebViews whose usable height changes at runtime. */
@media (max-width: 1024px) {
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(18px, 1fr) auto !important;
    align-content: stretch !important;
    justify-items: center !important;
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 128px 20px calc(122px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__logo {
    grid-row: 1 !important;
    margin: 18px auto 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__eyebrow {
    grid-row: 2 !important;
    margin: 14px 0 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero h1 {
    grid-row: 3 !important;
    margin: 10px 0 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__lead {
    grid-row: 4 !important;
    margin: 14px 0 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create,
  body.pv5-player-active .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    position: relative !important;
    grid-row: 6 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: end !important;
    width: min(100%, 600px) !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    padding: 116px 16px calc(116px + env(safe-area-inset-bottom)) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__logo {
    width: clamp(68px, 20vw, 88px) !important;
    margin-top: 14px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__eyebrow {
    margin-top: 12px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero h1 {
    margin-top: 8px !important;
    font-size: clamp(2.35rem, 10.5vw, 3.45rem) !important;
    line-height: 1 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__lead {
    margin-top: 12px !important;
    font-size: clamp(.88rem, 4vw, 1.05rem) !important;
    line-height: 1.45 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    min-height: 58px !important;
  }
}

/* Mobile shell contract: header, Air, content and one bottom action slot. */
@media (max-width: 760px) {
  :root {
    --pv6-nav-space: calc(84px + env(safe-area-inset-bottom));
    --pv6-player-space: 66px;
  }

  .pv3-reference {
    --pv6-header-top: max(10px, env(safe-area-inset-top));
    --pv6-header-height: 44px;
    --pv6-air-top: calc(var(--pv6-header-top) + var(--pv6-header-height) + 8px);
    --pv6-nav-space: calc(84px + env(safe-area-inset-bottom));
    --pv6-action-space: calc(72px + env(safe-area-inset-bottom));
    --pv6-player-space: 66px;
  }

  .pv3-reference .pv2-topbar {
    z-index: 100 !important;
    top: var(--pv6-header-top) !important;
    right: 10px !important;
    left: 10px !important;
    height: var(--pv6-header-height) !important;
  }

  .pv3-reference .pv2-air-overlay,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    position: fixed !important;
    z-index: 88 !important;
    top: var(--pv6-air-top) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 5px 7px !important;
    border-radius: 17px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__play {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity small,
  .pv3-reference .pv2-air-overlay .studio-air-card__identity p {
    display: none !important;
  }

  .pv3-reference .pv2-air-overlay .studio-air-card__identity h3 {
    overflow: hidden !important;
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__reactions {
    display: contents !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-reaction,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-comments-panel > summary,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-guide > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: .7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-comments-panel,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-guide {
    position: static !important;
    grid-column: auto !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-comments-panel > summary {
    max-width: 76px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-guide > summary {
    width: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-guide > summary::after {
    content: "?" !important;
    color: rgba(195, 239, 253, .9) !important;
    font-family: var(--pv5-ui) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
  }

  .pv3-reference .pv2-air-overlay :is(.studio-air-comments-panel, .studio-air-guide)[open] > :last-child {
    position: fixed !important;
    z-index: 140 !important;
    top: calc(var(--pv6-air-top) + 52px) !important;
    right: 10px !important;
    left: 10px !important;
    max-height: min(46dvh, 360px) !important;
    overflow-y: auto !important;
  }

  .pv3-reference .pv2-screen,
  html.studio-host-max body .pv3-reference .pv2-screen,
  html.studio-host-telegram body .pv3-reference .pv2-screen {
    inset: 0 0 var(--pv6-nav-space) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scroll-padding-block: 116px var(--pv6-nav-space) !important;
  }

  .pv3-reference .pv2-screen.is-active {
    transform: none !important;
    animation: pv6-mobile-screen-enter 520ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  .pv3-reference .pv2-studio,
  .pv3-reference .pv2-library,
  .pv3-reference .pv2-utility {
    padding: 76px 10px 18px !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: var(--pv2-air-safe-top, 124px) !important;
  }

  .pv3-reference .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini:has(.pv2-air-overlay .studio-air-host:not(:empty)) .pv2-hero__content {
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(20px, 1fr) auto !important;
    align-content: stretch !important;
    justify-items: center !important;
    min-height: 100% !important;
    height: auto !important;
    padding: var(--pv2-air-safe-top, 76px) 16px 18px !important;
    overflow: visible !important;
  }

  .pv3-reference .pv2-hero__logo,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__logo {
    width: clamp(64px, 19vw, 82px) !important;
    margin: 12px auto 0 !important;
  }

  .pv3-reference .pv2-hero__eyebrow,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__eyebrow {
    margin-top: 10px !important;
  }

  .pv3-reference .pv2-hero h1,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero h1 {
    margin-top: 8px !important;
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
    line-height: 1 !important;
  }

  .pv3-reference .pv2-hero__lead,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__lead {
    margin-top: 10px !important;
    font-size: clamp(.86rem, 3.8vw, 1rem) !important;
    line-height: 1.42 !important;
  }

  .pv3-reference .pv2-hero__create,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__create,
  body.pv5-player-active .pv3-reference.pv2-exact-shell--mini .pv2-hero__create {
    position: relative !important;
    grid-row: 6 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: end !important;
    width: min(100%, 600px) !important;
    min-height: 56px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .pv3-reference .pv2-bottom-nav {
    z-index: 90 !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 6px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="start"] .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-screen.pv2-studio.is-active .studio-wizard-actions,
  .pv3-reference:not([data-screen="studio"]) .studio-wizard-actions {
    display: none !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 18px)) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-studio {
    padding-bottom: 20px !important;
    scroll-padding-bottom: 20px !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-screen.is-active {
    bottom: var(--pv6-action-space) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-screen.pv2-studio.is-active .studio-wizard-actions {
    position: fixed !important;
    z-index: 94 !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: none !important;
  }

  .pv5-mini-player,
  html.studio-host-max body.pv5-player-active .pv5-mini-player.is-visible {
    right: 8px !important;
    bottom: calc(var(--pv6-nav-space) + 4px) !important;
    left: 8px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto auto 30px !important;
    grid-template-rows: 28px 18px !important;
    gap: 1px 7px !important;
    width: auto !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    border-radius: 18px !important;
    transform: translateY(calc(100% + var(--pv6-nav-space) + 28px)) !important;
  }

  .pv5-mini-player.is-visible,
  html.studio-host-max body.pv5-player-active .pv5-mini-player.is-visible {
    transform: translateY(0) !important;
  }

  .pv5-mini-player__toggle {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    height: 38px !important;
  }

  .pv5-mini-player__meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .pv5-mini-player__eyebrow { display: none !important; }
  .pv5-mini-player__title { font-size: .9rem !important; }
  .pv5-mini-player__current { grid-column: 3 !important; grid-row: 1 !important; }
  .pv5-mini-player__duration { grid-column: 4 !important; grid-row: 1 !important; }
  .pv5-mini-player__close { grid-column: 5 !important; grid-row: 1 / 3 !important; }
  .pv5-mini-player__seek {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 18px !important;
  }

  body.pv5-player-active .pv3-reference .pv2-screen {
    bottom: calc(var(--pv6-nav-space) + var(--pv6-player-space)) !important;
    scroll-padding-bottom: 18px !important;
  }

  body.pv5-player-active .pv3-reference .pv2-hero__content,
  body.pv5-player-active .pv3-reference .pv2-library,
  body.pv5-player-active .pv3-reference .pv2-utility {
    padding-bottom: 18px !important;
  }

  html body.pv2-exact.pv5-player-active.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv2-exact-shell.pv3-reference[data-screen="studio"] .pv2-screen.is-active {
    bottom: calc(var(--pv6-action-space) + var(--pv6-player-space)) !important;
  }

  html body.pv2-exact.pv5-player-active.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv5-mini-player.is-visible {
    bottom: calc(var(--pv6-action-space) + 4px) !important;
  }

  body.is-keyboard-open .pv3-reference .pv2-screen.is-active,
  body.pv3-showcase .pv3-reference .pv2-screen.is-active {
    bottom: 0 !important;
  }

  body.pv3-showcase.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"]) .pv3-reference[data-screen="studio"] .pv2-screen.is-active {
    bottom: var(--pv6-action-space) !important;
  }
}

@keyframes pv6-mobile-screen-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .pv3-reference {
    --pv6-fold-header-bottom: calc(20px + env(safe-area-inset-top) + 44px);
  }

  .pv3-reference .pv2-air-overlay,
  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay {
    position: fixed !important;
    z-index: 88 !important;
    top: calc(var(--pv6-fold-header-bottom) + 12px) !important;
    right: auto !important;
    left: 50% !important;
    width: min(680px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card.studio-air-card--compact {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 7px 10px !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay .studio-air-card__reactions {
    display: contents !important;
  }

  .pv3-reference.pv2-exact-shell--mini .pv2-air-overlay :is(.studio-air-comments-panel, .studio-air-guide) {
    position: static !important;
    grid-column: auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  .pv3-reference:has(.pv2-air-overlay .studio-air-host:not(:empty)) :is(
    .pv2-hero__content,
    .pv2-studio,
    .pv2-library,
    .pv2-utility
  ) {
    padding-top: var(--pv2-air-safe-top, 154px) !important;
  }

  .pv3-reference .pv2-screen,
  .pv3-reference .pv2-studio,
  .pv3-reference .pv2-library,
  .pv3-reference .pv2-utility {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .pv3-reference .pv2-hero__content,
  .pv3-reference.pv2-exact-shell--mini .pv2-hero__content {
    min-height: 100dvh !important;
    height: auto !important;
    padding-bottom: 34px !important;
  }

  .pv3-reference .pv2-screen.is-active {
    transform: none !important;
    animation: pv6-mobile-screen-enter 560ms cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .pv3-reference .pv2-hero__logo { width: 54px !important; margin-top: 4px !important; }
  .pv3-reference .pv2-hero__eyebrow { margin-top: 6px !important; font-size: 8px !important; }
  .pv3-reference .pv2-hero h1 { margin-top: 6px !important; font-size: clamp(2rem, 9.4vw, 2.7rem) !important; }
  .pv3-reference .pv2-hero__lead { margin-top: 7px !important; font-size: .8rem !important; }
  .pv3-reference .pv2-hero__create { min-height: 50px !important; }
}

@media (max-width: 1024px) {
  html body.pv2-exact.is-editor-focus.is-keyboard-open .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active #track-form :is(
    .field,
    .copy-card,
    .pv3-custom-style
  ):has(:focus) {
    position: fixed !important;
    z-index: 150 !important;
    inset: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: calc(100% - 16px) !important;
    height: calc(var(--pv-keyboard-viewport-height, 52vh) - 16px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    backdrop-filter: none !important;
  }

  html body.pv2-exact.is-editor-focus.is-keyboard-open .pv2-exact-shell.pv3-reference .pv2-screen.pv2-studio.is-active #track-form :is(
    .field,
    .copy-card
  ):has(textarea:focus) textarea {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* Inline title editing is shared by Web App and Mini App. */
.track-title-editor[hidden] {
  display: none !important;
}

.track-title-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(96, 218, 251, .24);
  border-radius: 16px;
  background: rgba(1, 14, 25, .72);
}

.track-title-editor input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(118, 222, 249, .28);
  border-radius: 12px;
  color: #f4fbff;
  background: rgba(0, 8, 16, .72);
  font: 500 16px/1.35 "Manrope", sans-serif;
}

/* Mobile text entry owns the viewport; wizard navigation returns after blur. */
@media (max-width: 720px) {
  .track-title-editor {
    grid-template-columns: 1fr 1fr;
  }

  .track-title-editor input {
    grid-column: 1 / -1;
  }

html body.is-text-entry-active .studio-wizard-actions {
    display: none !important;
  }
}

/* READY_POEM author-editing permission */
.improve-structure-field {
  display: none;
  position: relative;
}

body[data-scenario="READY_POEM"] .improve-structure-field,
body.is-poem-flow .improve-structure-field {
  display: block;
}

html body.studio-wizard-enabled[data-studio-step="story"].is-poem-flow
  .pv3-reference .studio-group-start .improve-structure-field {
  display: block !important;
}

.improve-structure-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(65, 207, 245, .24);
  border-radius: 16px;
  background: rgba(1, 20, 33, .46);
}

.improve-structure-control input {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 auto;
  accent-color: #43cff5;
}

.improve-structure-control label {
  flex: 0 1 auto;
  margin: 0;
  cursor: pointer;
}

.improve-structure-help {
  display: inline-grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(91, 215, 248, .42);
  border-radius: 50%;
  color: #b9efff;
  background: rgba(3, 35, 51, .78);
  font: 700 15px/1 inherit;
}

.improve-structure-tooltip {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 8px);
  max-width: min(520px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid rgba(91, 215, 248, .35);
  border-radius: 14px;
  color: #dcecf3;
  background: rgba(0, 15, 27, .97);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
  font-size: clamp(13px, 2.8vw, 15px);
  line-height: 1.45;
}

.improve-structure-tooltip[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .improve-structure-tooltip {
    position: fixed;
    z-index: 180;
    inset-inline: 16px;
    top: max(calc(env(safe-area-inset-top, 0px) + 112px), 120px);
    bottom: auto;
    max-width: none;
    max-height: min(48dvh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .05);
  }
}

/* Web writing desk: use the canvas instead of leaving a small editor floating in it. */
@media (min-width: 900px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference .pv2-screen.pv2-studio.is-active #track-form {
    width: min(1080px, calc(100vw - 112px)) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference #track-form > .studio-group-start,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference .studio-group-start .field:has(#lyrics_or_idea) {
    width: 100% !important;
    max-width: none !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference #lyrics_or_idea {
    width: 100% !important;
    min-height: clamp(320px, 42vh, 430px) !important;
    max-height: min(48vh, 460px) !important;
    padding: 28px 32px !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference #lyrics-length-hint,
  html body.pv2-exact.studio-wizard-enabled[data-studio-step="story"]
    .pv2-exact-shell--web.pv3-reference .improve-structure-field {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Final cascade authority for premium motion. Keep this block last. */
.pv3-reference .pv2-screen.is-active {
  animation: pv7-screen-enter 560ms cubic-bezier(.22, 1, .36, 1) both !important;
  filter: none !important;
  clip-path: none !important;
}

.pv3-reference .studio-stage-transition {
  animation: pv7-stage-enter 500ms cubic-bezier(.22, 1, .36, 1) both !important;
  filter: none !important;
  clip-path: none !important;
}

@media (max-width: 760px), (pointer: coarse) {
  .pv3-reference .pv2-screen.is-active {
    animation: pv7-screen-enter 420ms cubic-bezier(.22, 1, .36, 1) both !important;
  }

  .pv3-reference .studio-stage-transition {
    animation: pv7-stage-enter 400ms cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv3-reference .pv2-screen.is-active,
  .pv3-reference .studio-stage-transition {
    animation: none !important;
  }
}

/* Fold and split-screen: keep advanced controls readable without nested clipping. */
@media (min-width: 601px) and (max-width: 1024px) {
  body.pv3-reference-body .advanced-panel__body {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: visible !important;
  }

  body.pv3-reference-body .advanced-panel__body > * {
    min-width: 0 !important;
    width: 100% !important;
    grid-column: 1 !important;
  }

  body.pv3-reference-body .advanced-panel__body > * + * {
    margin-top: 16px !important;
  }
}

@media (max-width: 600px) {
  body.pv3-reference-body .advanced-panel__body,
  body.pv3-reference-body .advanced-panel__body .inline-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile WebView actions belong to the document flow and must never cover fields. */
@media (max-width: 760px) {
  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"])
    .pv2-exact-shell.pv3-reference[data-screen="studio"]
    .pv2-screen.pv2-studio.is-active {
    bottom: 0 !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  html body.pv2-exact.studio-wizard-enabled[data-studio-step]:not([data-studio-step="start"])
    .pv2-exact-shell.pv3-reference[data-screen="studio"]
    .pv2-screen.pv2-studio.is-active .studio-wizard-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    width: calc(100% - 20px) !important;
    margin: 18px auto max(18px, env(safe-area-inset-bottom)) !important;
    padding: 6px !important;
    transform: none !important;
  }
}
/* Duration control: compact, precise and touch-friendly in WebView. */
.pv3-reference .studio-stepper__item {
  min-width: 0 !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-stepper__item {
  display: grid !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-stepper__index {
  font-size: 12px !important;
}

body[data-studio-step="voice"] .pv3-reference .studio-stepper__index::after {
  content: none !important;
}

body:not([data-studio-step="start"]) .pv3-reference .studio-wizard-actions,
body:not([data-studio-step="start"]) .pv3-reference .studio-wizard-actions > button {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not([data-studio-step="start"]) .pv3-reference .studio-wizard-actions__primary {
  white-space: normal !important;
  text-align: center !important;
}

.duration-field .duration-control {
  padding: 14px 16px 13px;
  border: 1px solid rgba(88, 209, 245, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(2, 15, 29, 0.72), rgba(2, 10, 21, 0.46));
}

.duration-control__heading,
.duration-control__row {
  display: flex;
  align-items: center;
}

.duration-control__heading {
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.duration-control__heading label {
  margin: 0;
}

.duration-control__reset {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(190, 216, 226, 0.72);
  background: transparent;
  font-size: 21px;
  line-height: 1;
}

.duration-control__reset:active {
  color: #65dcff;
  transform: rotate(-25deg) scale(0.94);
}

.duration-control__row {
  gap: 16px;
}

.duration-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(90deg, rgba(137, 178, 192, 0.24) 0 2px, transparent 2px 9.09%);
  accent-color: #48d4ff;
  cursor: pointer;
}

.duration-control input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(111, 174, 195, 0.25);
}

.duration-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 32px;
  margin-top: -14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6be1ff, #21b8eb);
  box-shadow: 0 0 18px rgba(66, 210, 255, 0.42);
}

.duration-control input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(111, 174, 195, 0.25);
}

.duration-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6be1ff, #21b8eb);
  box-shadow: 0 0 18px rgba(66, 210, 255, 0.42);
}

.duration-control input[type="range"].is-auto {
  opacity: 0.58;
}

.duration-control output {
  flex: 0 0 54px;
  color: #f4fbff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .duration-field .duration-control {
    padding: 12px 14px;
  }

  .duration-control__row {
    gap: 12px;
  }

  .duration-control output {
    flex-basis: 48px;
    font-size: 21px;
  }
}