:root {
  --ink: #101427;
  --muted: #657086;
  --line: rgba(15, 23, 42, 0.13);
  --paper: #f7fbff;
  --white: #ffffff;
  --coral: #ff486f;
  --aqua: #00c8ff;
  --mint: #34e59b;
  --lemon: #ffe45c;
  --blue: #3157ff;
  --violet: #8a5cff;
  --brand-red: #ff4f8b;
  --brand-blue: #2f6fff;
  --brand-violet: #8b5cf6;
  --brand-cyan: #20bde9;
  --grad-action: linear-gradient(135deg, #ff4f8b 0%, #8b5cf6 48%, #2f6fff 100%);
  --grad-icon: linear-gradient(145deg, #ff6ba7 0%, #8b5cf6 52%, #2f6fff 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 79, 139, 0.18), rgba(139, 92, 246, 0.18), rgba(47, 111, 255, 0.18));
  --grad-line: linear-gradient(135deg, rgba(255, 79, 139, 0.56), rgba(139, 92, 246, 0.58), rgba(47, 111, 255, 0.56));
  --sm-item-error-text: #ef3f68;
  --sm-item-error-border: rgba(244, 63, 94, 0.18);
  --sm-item-error-bg:
    linear-gradient(90deg, rgba(255, 79, 139, 0.025), rgba(139, 92, 246, 0.018)),
    rgba(255, 255, 255, 0.76);
  --sm-item-error-pill-border: rgba(244, 63, 94, 0.22);
  --sm-item-error-pill-bg: rgba(255, 245, 248, 0.68);
  --sm-item-error-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.025);
  --brand-glow: 0 14px 28px rgba(139, 92, 246, 0.18), 0 7px 18px rgba(255, 79, 139, 0.12);
  --shadow: 0 22px 70px rgba(13, 23, 54, 0.18);
  --desktop-panel-height: min(620px, calc(100svh - 132px));
  --desktop-panel-min-height: 430px;
  --desktop-player-panel-height: min(576px, calc(100svh - 166px));
  --desktop-player-panel-min-height: 390px;
  --desktop-chrome-scale: 1;
  --site-header-height: calc(clamp(56px, 8.2svh, 74px) * var(--desktop-chrome-scale));
  --site-header-padding-y: calc(clamp(6px, 1.25svh, 14px) * var(--desktop-chrome-scale));
  --site-header-x: calc(clamp(18px, 4vw, 56px) * var(--desktop-chrome-scale));
  --site-header-gap: calc(24px * var(--desktop-chrome-scale));
  --site-brand-font-size: calc(clamp(17px, 2.15svh, 20px) * var(--desktop-chrome-scale));
  --site-brand-logo-size: calc(clamp(32px, 5.1svh, 44px) * var(--desktop-chrome-scale));
  --site-nav-font-size: calc(clamp(15px, 1.68svh, 16px) * var(--desktop-chrome-scale));
  --site-nav-gap: calc(clamp(24px, 4vw, 46px) * var(--desktop-chrome-scale));
  --site-nav-pad-x: calc(10px * var(--desktop-chrome-scale));
  --site-action-height: calc(clamp(32px, 4.2svh, 40px) * var(--desktop-chrome-scale));
  --site-account-height: calc(clamp(36px, 4.63svh, 44px) * var(--desktop-chrome-scale));
  --site-account-avatar-size: calc(clamp(28px, 3.58svh, 34px) * var(--desktop-chrome-scale));
  --site-control-icon-size: calc(clamp(16px, 2.3svh, 18px) * var(--desktop-chrome-scale));
  --site-language-font-size: calc(clamp(11px, 1.47svh, 13px) * var(--desktop-chrome-scale));
  --ui-button-font-size: calc(clamp(12px, 1.9svh, 16px) * var(--desktop-chrome-scale));
  --ui-button-icon-size: calc(clamp(16px, 2.3svh, 20px) * var(--desktop-chrome-scale));
  --player-shell-x: calc(clamp(10px, 1.5vw, 18px) * var(--desktop-chrome-scale));
  --player-shell-bottom: calc(clamp(8px, 1.7svh, 16px) * var(--desktop-chrome-scale));
  --player-shell-padding-y: calc(clamp(7px, 1.05svh, 10px) * var(--desktop-chrome-scale));
  --player-cover-size: calc(clamp(42px, 5.7svh, 54px) * var(--desktop-chrome-scale));
  --player-title-font-size: calc(clamp(12px, 1.48svh, 14px) * var(--desktop-chrome-scale));
  --player-meta-font-size: calc(clamp(10px, 1.27svh, 12px) * var(--desktop-chrome-scale));
  --player-primary-control-size: calc(clamp(34px, 4.45svh, 42px) * var(--desktop-chrome-scale));
  --player-secondary-control-size: calc(clamp(30px, 3.8svh, 36px) * var(--desktop-chrome-scale));
  --player-primary-icon-size: calc(var(--player-primary-control-size) * 0.52);
  --player-secondary-icon-size: calc(var(--player-secondary-control-size) * 0.5);
  --player-control-gap: calc(8px * var(--desktop-chrome-scale));
  --create-workspace-scale: 1;
  --create-workspace-unscaled-height: 100%;
  --overlay-content-scale: 1;
  --overlay-content-unscaled-height: calc(100dvh - 24px);
  --workspace-content-scale: 1;
  --workspace-content-unscaled-height: 100%;
  --qa-content-scale: 1;
}

/* Hide the entire scenario page when this locale has no visible content.
   Author styles on .page-section would otherwise override the UA hidden rule. */
.seo-topic-demo-page[hidden] {
  display: none;
}

.seo-topic-demo-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 91, 180, 0.10), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(62, 111, 255, 0.12), transparent 30%),
    #f8f9ff;
}

.seo-topic-demo-shell {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 0;
  padding-block: 0;
}

.seo-topic-demo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.seo-topic-demo-head h2,
.seo-topic-demo-head p {
  margin: 0;
}

.seo-topic-demo-head h2 {
  margin-top: 9px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.seo-topic-demo-head p {
  max-width: 700px;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}

.seo-topic-demo-badge,
.seo-topic-demo-live {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid rgba(67, 85, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 5px 10px;
  color: #3f52c9;
  font-size: 11px;
  font-weight: 800;
}

.seo-topic-demo-live::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #28b77a;
  box-shadow: 0 0 0 4px rgba(40, 183, 122, 0.12);
  content: "";
}

.seo-topic-demo-tabs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 3px 2px 7px;
  scrollbar-width: thin;
}

.seo-topic-demo-tabs button {
  flex: 0 0 auto;
  border: 1px solid rgba(91, 83, 212, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  padding: 9px 15px;
  color: #4d5372;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.seo-topic-demo-tabs button:hover {
  border-color: rgba(81, 76, 230, 0.46);
  color: #302fa4;
}

.seo-topic-demo-tabs button[aria-selected="true"] {
  border-color: transparent;
  background: #4e63ed;
  color: #fff;
  box-shadow: 0 10px 24px rgba(65, 75, 205, 0.2);
}

.seo-topic-demo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: clamp(340px, 46vh, 460px);
  overflow: hidden;
  border: 1px solid rgba(111, 112, 187, 0.18);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.78);
  padding: clamp(26px, 5vw, 58px);
  box-shadow: 0 28px 70px rgba(54, 62, 121, 0.12);
  backdrop-filter: blur(16px);
}

.seo-topic-demo-panel[hidden] {
  display: none;
}

@media (min-width: 681px) {
  .seo-topic-demo-panel[data-image-position="left"] {
    grid-template-columns: minmax(320px, 0.94fr) minmax(0, 1.06fr);
  }
  .seo-topic-demo-panel[data-image-position="left"] .seo-topic-demo-art { order: -1; }
}

[data-seo-content-mode="published"] [data-seo-demo-badge],
[data-seo-content-mode="published"] [data-seo-demo-live] { display: none; }
[data-seo-content-mode] .seo-topic-demo-panel {
  min-height: min(340px, 50svh);
  max-height: max(260px, calc(100svh - 290px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}
[data-seo-content-mode] .seo-topic-demo-body p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  overflow-wrap: anywhere;
}
[data-seo-content-mode] :is(h3, .seo-topic-demo-copy > p) { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  [data-seo-content-mode] .seo-topic-demo-panel {
    min-height: 0;
    max-height: max(220px, calc(var(--mobile-workspace-height, 100svh) - 210px));
  }
}

.seo-topic-demo-copy {
  min-width: 0;
}

.seo-topic-demo-keyword {
  display: block;
  color: #6d55de;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.seo-topic-demo-copy h3 {
  max-width: 17ch;
  margin: 9px 0 13px;
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.seo-topic-demo-copy > p,
.seo-topic-demo-body p {
  color: var(--ink-muted);
  line-height: 1.62;
}

.seo-topic-demo-copy > p {
  margin: 0;
  font-size: 16px;
}

.seo-topic-demo-body {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}

.seo-topic-demo-body p {
  margin: 0;
  font-size: 13px;
}

.seo-topic-demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  border-radius: 12px;
  background: #4e63ed;
  padding: 10px 18px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(57, 74, 213, 0.23);
}

.seo-topic-demo-art {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 260px;
}

.seo-topic-demo-art img {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(58, 47, 129, 0.13));
}

@media (max-width: 680px) {
  .seo-topic-demo-shell {
    align-content: start;
    gap: 12px;
    min-height: var(--mobile-workspace-height, 100svh);
    padding: 22px 14px 18px;
  }

  .seo-topic-demo-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .seo-topic-demo-head h2 {
    font-size: 25px;
  }

  .seo-topic-demo-head p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
  }

  .seo-topic-demo-tabs {
    gap: 6px;
  }

  .seo-topic-demo-tabs button {
    padding: 7px 11px;
    font-size: 11px;
  }

  .seo-topic-demo-panel {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    border-radius: 18px;
    padding: 18px;
  }

  .seo-topic-demo-copy h3 {
    max-width: none;
    margin-block: 6px 8px;
    font-size: 24px;
  }

  .seo-topic-demo-copy > p {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .seo-topic-demo-body {
    margin-top: 8px;
  }

  .seo-topic-demo-body p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .seo-topic-demo-cta {
    min-height: 38px;
    margin-top: 12px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .seo-topic-demo-art {
    min-height: 0;
  }

  .seo-topic-demo-art img {
    max-height: min(190px, 24svh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-topic-demo-tabs button,
  .seo-topic-demo-cta {
    scroll-behavior: auto;
    transition: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: #f7fbff;
}

/* Shared locale picker: one implementation for headers, drawers, and standalone flows. */
.i18n-language-menu {
  position: fixed;
  z-index: 13000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-height: min(430px, calc(100svh - 24px));
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(121, 92, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 32px rgba(57, 41, 112, 0.18);
}

.i18n-language-menu[hidden] {
  display: none;
}

.i18n-language-menu button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #11182d;
  text-align: start;
  cursor: pointer;
}

.i18n-language-menu button:hover,
.i18n-language-menu button:focus-visible {
  border-color: rgba(113, 83, 255, 0.28);
  background: rgba(113, 83, 255, 0.08);
  outline: none;
}

.i18n-language-menu button.is-active {
  border-color: rgba(239, 71, 151, 0.38);
  background: linear-gradient(135deg, rgba(239, 71, 151, 0.12), rgba(70, 104, 255, 0.1));
}

.i18n-language-menu button span {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 750;
}

.i18n-floating-language {
  position: fixed;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 12000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(121, 92, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #11182d;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(57, 41, 112, 0.12);
  cursor: pointer;
}

.i18n-floating-language svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

html[data-locale] button,
html[data-locale] a,
html[data-locale] label,
html[data-locale] .profile-card,
html[data-locale] .pricing-card {
  min-width: 0;
}

html[data-locale] button,
html[data-locale] a,
html[data-locale] .profile-card-head,
html[data-locale] .profile-card-note {
  overflow-wrap: anywhere;
}

html[data-locale="de-DE"] .solid-button,
html[data-locale="de-DE"] .ghost-button,
html[data-locale="fr-FR"] .solid-button,
html[data-locale="fr-FR"] .ghost-button,
html[data-locale="pt-BR"] .solid-button,
html[data-locale="pt-BR"] .ghost-button {
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 680px) {
  .i18n-language-menu {
    grid-template-columns: 1fr;
    max-height: min(420px, calc(100svh - 24px));
  }

  .i18n-floating-language {
    inset-block-start: 12px;
    inset-inline-end: 12px;
  }
}

body {
  scroll-snap-type: y mandatory;
}

main {
  position: relative;
  z-index: auto;
}

body.player-open .intro-shell,
body.player-open .create-layout,
body.player-open .history-layout,
body.player-open .how-section .content-shell,
body.player-open .qa-layout,
body.player-open .site-footer {
  transform-origin: top center;
  transform: translateY(-6px);
  transition: transform 0.28s ease;
}

body.player-open .library-dashboard.history-layout {
  transform: none;
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 27%, rgba(255, 72, 111, 0.15), transparent 15%),
    radial-gradient(circle at 12% 33%, rgba(0, 200, 255, 0.22), transparent 18%),
    radial-gradient(circle at 82% 52%, rgba(52, 229, 155, 0.2), transparent 17%),
    radial-gradient(circle at 18% 72%, rgba(138, 92, 255, 0.18), transparent 18%),
    radial-gradient(circle at 72% 88%, rgba(255, 228, 92, 0.22), transparent 17%),
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #fff8f4 24%,
      #f4fbff 42%,
      #f9f7ff 62%,
      #effcff 80%,
      #fff8ee 100%
    );
}

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

button {
  cursor: pointer;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.track-row.has-error,
.library-song-row.has-error,
.library-v6-song-row.has-error,
.voice-list-item.is-expired,
.voice-list-item.needs-revalidation {
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.track-row.has-error:hover,
.library-song-row.has-error:hover,
.library-v6-song-row.has-error:hover {
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
}

.queue-error,
.track-error,
.status-label.is-error,
.expiry-pill.is-expired,
.expiry-pill.is-error,
.track-row.has-error .expiry-pill,
.library-song-row.has-error .expiry-pill,
.library-v6-song-row.has-error .expiry-pill,
.voice-expiry.is-error,
.library-v6-main em.is-error {
  color: var(--sm-item-error-text) !important;
}

.track-row.has-error .expiry-pill,
.library-song-row.has-error .expiry-pill,
.library-v6-song-row.has-error .expiry-pill,
.expiry-pill.is-expired,
.expiry-pill.is-error,
.voice-expiry.is-error {
  border-color: var(--sm-item-error-pill-border);
  background: var(--sm-item-error-pill-bg);
}

.track-row.has-error .expiry-pill svg,
.library-song-row.has-error .expiry-pill svg,
.library-v6-song-row.has-error .expiry-pill svg,
.expiry-pill.is-expired svg,
.expiry-pill.is-error svg {
  color: var(--sm-item-error-text) !important;
  stroke: currentColor;
}

.global-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.38;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.cursor-glow {
  display: none;
}

@media (max-width: 768px) {
  .global-canvas {
    display: none;
  }
}

@media (max-width: 520px) {
  .model-voice-stack {
    justify-items: stretch;
    width: min(100%, 230px);
  }

  .model-select-pill,
  .custom-voice-button {
    width: 100%;
  }

  .custom-voice-button {
    max-width: none;
  }

  .voice-modal-shell {
    align-items: end;
    padding: 10px;
  }

  .voice-modal {
    width: 100%;
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 24px 18px;
    border-radius: 14px;
  }

  .voice-modal:has(.voice-record-stage) {
    padding: clamp(12px, 2.5dvh, 18px);
  }

  .voice-list-item {
    grid-template-columns: 44px minmax(0, 1fr) 36px 36px;
    gap: 10px;
    height: 112px;
  }

  .voice-record-head {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-inline: 34px;
  }

  .voice-device-field {
    width: min(100%, 220px);
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 8px;
  }

  .voice-rerecord-button,
  .voice-record-finish {
    padding-inline: 10px;
    font-size: 13px;
  }

  .voice-edit-button {
    grid-column: 3;
    grid-row: 1;
  }

  .voice-delete-button {
    grid-column: 4;
    grid-row: 1;
  }

  .voice-detail-actions {
    grid-template-columns: 1fr;
  }

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

  .voice-tips-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 7px;
    min-height: 92px;
    padding: 9px 7px;
    text-align: left;
  }

  .voice-tips-grid i {
    grid-row: auto;
    width: 30px;
    height: 30px;
    align-self: center;
    justify-self: center;
  }

  .voice-tips-grid strong,
  .voice-tips-grid span {
    grid-column: 2;
    text-align: left;
  }

  .voice-tips-grid strong {
    font-size: 12px;
    line-height: 1.22;
  }

  .voice-tips-grid span {
    display: block;
    font-size: 10px;
    line-height: 1.28;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid article {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 82px;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid i {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    align-self: center;
    justify-self: center;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid span {
    display: block;
    grid-column: 2;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
    grid-column: 2;
    text-align: left;
  }

  .voice-choice-actions .solid-button,
  .voice-choice-actions .ghost-button,
  .voice-step-actions .solid-button,
  .voice-step-actions .ghost-button {
    width: min(160px, calc(50% - 8px));
    gap: 6px;
    padding: 0 12px;
    font-size: clamp(12px, 3vw, 14px);
  }

  .voice-language-pill {
    position: static;
    justify-self: center;
  }

  .voice-phrase {
    min-height: 96px;
  }
}

/* PAYMENT_FLOW_RESPONSIVE_START
   Checkout confirmation and result pages are independent from the fixed-height
   profile workspace so browser zoom and short mobile viewports cannot clip them. */
html.payment-flow-document {
  min-height: 100%;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

body.payment-flow-body {
  min-height: 100%;
  overflow-x: hidden;
  scroll-snap-type: none;
}

.payment-flow-page {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  padding: clamp(20px, 4vh, 48px) clamp(16px, 4vw, 48px);
  background:
    radial-gradient(circle at 14% 18%, rgba(0, 200, 255, 0.1), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(255, 72, 111, 0.1), transparent 36%),
    rgba(250, 252, 255, 0.78);
}

.payment-flow-shell {
  width: min(640px, 100%);
  min-width: 0;
  margin: auto;
}

.payment-flow-card {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100svh - 40px);
  max-height: calc(100dvh - 40px);
  padding: clamp(22px, 4vh, 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(49, 87, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 24px 64px rgba(13, 23, 54, 0.12), 0 10px 28px rgba(139, 84, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-overflow-scrolling: touch;
}

.payment-status-card {
  width: min(520px, 100%);
  margin: auto;
  text-align: center;
}

.payment-checkout-card {
  width: min(640px, 100%);
}

.payment-flow-card .auth-modal-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 2px;
}

.payment-flow-card .auth-modal-mark .brand-logo {
  width: 34px;
  height: 34px;
}

.payment-flow-card .section-kicker {
  margin: 0;
  text-align: center;
}

.payment-flow-card h1 {
  margin: 0;
  font-size: clamp(26px, 4vh, 36px);
  line-height: 1.12;
  text-align: center;
}

.payment-flow-card .payment-flow-title {
  justify-self: center;
  width: 100%;
  text-align: center;
}

.payment-flow-card > p:not(.section-kicker) {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

.payment-flow-card .profile-meta {
  gap: 0;
  width: 100%;
  margin: 4px 0 0;
}

.payment-flow-card .profile-meta > div {
  display: grid;
  grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 16px;
  min-height: 42px;
  padding: 8px 0;
}

.payment-flow-card .profile-meta dt,
.payment-flow-card .profile-meta dd {
  font-size: 13px;
  line-height: 1.35;
}

.payment-flow-card .profile-meta dd {
  text-align: right;
  overflow-wrap: anywhere;
}

.payment-flow-card .profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.payment-flow-card .profile-actions.is-single-action {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}

.payment-flow-card .profile-actions [hidden] {
  display: none !important;
}

.payment-flow-card .profile-actions .solid-button,
.payment-flow-card .profile-actions .ghost-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  text-align: center;
}

@media (max-width: 680px) {
  .payment-flow-page {
    min-height: 100svh;
    min-height: 100dvh;
    padding:
      max(14px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(14px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .payment-flow-card {
    gap: 9px;
    max-height: calc(100svh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 18px 16px;
  }

  .payment-flow-card .auth-modal-mark {
    width: 44px;
    height: 44px;
  }

  .payment-flow-card .auth-modal-mark .brand-logo {
    width: 30px !important;
    height: 30px !important;
  }

  .payment-flow-card h1 {
    font-size: 26px;
  }

  .payment-flow-card > p:not(.section-kicker) {
    font-size: 13px;
    line-height: 1.5;
  }

  .payment-flow-card .profile-meta > div {
    grid-template-columns: minmax(88px, 0.75fr) minmax(0, 1.25fr);
    gap: 10px;
    min-height: 38px;
    padding: 6px 0;
  }

  .payment-flow-card .profile-meta dt,
  .payment-flow-card .profile-meta dd {
    font-size: 12px;
  }

}

@media (max-width: 380px) {
  .payment-flow-card .profile-actions {
    grid-template-columns: 1fr;
  }

  .payment-flow-card .profile-meta > div {
    grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1.3fr);
  }
}

@media (max-height: 640px) {
  .payment-flow-page {
    place-items: start center;
    padding-block: 12px;
  }

  .payment-flow-card {
    max-height: calc(100svh - 24px);
    max-height: calc(100dvh - 24px);
    padding-block: 16px;
  }

}
/* PAYMENT_FLOW_RESPONSIVE_END */

.motif-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.music-motif {
  position: absolute;
  display: flex;
  align-items: end;
  gap: 7px;
  min-height: 76px;
  padding: 15px 18px;
  border: 1px solid rgba(49, 87, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 16px 36px rgba(13, 23, 54, 0.06);
  backdrop-filter: blur(10px);
  opacity: 0.44;
}

.page-section > .content-shell,
.intro-shell,
.create-layout,
.history-layout,
.qa-layout,
.site-footer {
  position: relative;
  z-index: 4;
  transform-origin: top center;
  transition: transform 0.28s ease;
}

.page-section > .motif-field {
  z-index: 0;
}

.music-motif span {
  width: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--coral), var(--aqua));
  opacity: 0.68;
  transform-origin: bottom;
  animation: cornerBars 1.37s infinite ease-in-out alternate;
}

.music-motif span:nth-child(1) { height: 24px; animation-duration: 1.13s; animation-delay: -0.18s; }
.music-motif span:nth-child(2) { height: 34px; animation-duration: 1.71s; animation-delay: -0.64s; }
.music-motif span:nth-child(3) { height: 52px; animation-duration: 1.29s; animation-delay: -0.36s; }
.music-motif span:nth-child(4) { height: 41px; animation-duration: 1.92s; animation-delay: -0.82s; }
.music-motif span:nth-child(5) { height: 61px; animation-duration: 1.48s; animation-delay: -0.51s; }

.motif-a {
  left: clamp(210px, 26vw, 370px);
  bottom: clamp(30px, 6vh, 72px);
  transform: scale(0.58) rotate(-2deg);
  opacity: 0.22;
}

.motif-b {
  right: clamp(210px, 24vw, 340px);
  top: clamp(92px, 12vh, 122px);
  transform: scale(0.44) rotate(4deg);
  opacity: 0.18;
}

.motif-b span:nth-child(1) { height: 42px; animation-duration: 1.46s; animation-delay: -0.38s; }
.motif-b span:nth-child(2) { height: 25px; animation-duration: 1.08s; animation-delay: -0.74s; }
.motif-b span:nth-child(3) { height: 62px; animation-duration: 1.82s; animation-delay: -0.22s; }
.motif-b span:nth-child(4) { height: 36px; animation-duration: 1.31s; animation-delay: -0.91s; }
.motif-b span:nth-child(5) { height: 49px; animation-duration: 1.63s; animation-delay: -0.57s; }

.motif-c {
  right: clamp(220px, 28vw, 410px);
  bottom: clamp(34px, 7vh, 84px);
  transform: scale(0.46) rotate(2deg);
  opacity: 0.17;
}

.motif-c span:nth-child(1) { height: 31px; animation-duration: 1.76s; animation-delay: -0.52s; }
.motif-c span:nth-child(2) { height: 56px; animation-duration: 1.24s; animation-delay: -0.2s; }
.motif-c span:nth-child(3) { height: 38px; animation-duration: 1.57s; animation-delay: -0.86s; }
.motif-c span:nth-child(4) { height: 64px; animation-duration: 1.11s; animation-delay: -0.43s; }
.motif-c span:nth-child(5) { height: 28px; animation-duration: 1.94s; animation-delay: -0.67s; }

.motif-d {
  left: clamp(22px, 5vw, 70px);
  top: clamp(12px, 4vh, 36px);
  transform: scale(0.62) rotate(-4deg);
  opacity: 0.2;
}

.motif-d span:nth-child(1) { height: 54px; animation-duration: 1.2s; animation-delay: -0.71s; }
.motif-d span:nth-child(2) { height: 39px; animation-duration: 1.88s; animation-delay: -0.31s; }
.motif-d span:nth-child(3) { height: 22px; animation-duration: 1.36s; animation-delay: -0.95s; }
.motif-d span:nth-child(4) { height: 58px; animation-duration: 1.69s; animation-delay: -0.16s; }
.motif-d span:nth-child(5) { height: 45px; animation-duration: 1.07s; animation-delay: -0.48s; }

.motif-e {
  right: clamp(24px, 6vw, 86px);
  top: clamp(18px, 4vh, 36px);
  bottom: auto;
  transform: scale(0.62) rotate(5deg);
  opacity: 0.2;
}

.motif-e span:nth-child(1) { height: 28px; animation-duration: 1.41s; animation-delay: -0.29s; }
.motif-e span:nth-child(2) { height: 47px; animation-duration: 1.18s; animation-delay: -0.63s; }
.motif-e span:nth-child(3) { height: 33px; animation-duration: 1.78s; animation-delay: -0.45s; }

.motif-f {
  left: clamp(18px, 4vw, 64px);
  bottom: clamp(42px, 9vh, 96px);
  transform: scale(0.66) rotate(3deg);
  opacity: 0.26;
}

.motif-g {
  right: clamp(20px, 4vw, 68px);
  top: clamp(96px, 14vh, 140px);
  transform: scale(0.78) rotate(-3deg);
  opacity: 0.24;
}

.motif-h {
  right: clamp(92px, 14vw, 190px);
  bottom: clamp(28px, 7vh, 72px);
  transform: scale(0.52) rotate(7deg);
  opacity: 0.22;
}

.motif-i {
  left: clamp(18px, 4vw, 60px);
  top: clamp(4px, 2vh, 18px);
  transform: scale(0.46) rotate(-5deg);
  opacity: 0.16;
}

.motif-j {
  right: clamp(26px, 6vw, 86px);
  top: clamp(8px, 3vh, 28px);
  transform: scale(0.5) rotate(4deg);
  opacity: 0.16;
}

@keyframes cornerBars {
  0% {
    transform: scaleY(0.5) translateY(2px);
  }
  42% {
    transform: scaleY(1.05) translateY(-3px);
  }
  to {
    transform: scaleY(0.72) translateY(1px);
    opacity: 0.92;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--site-header-gap);
  min-height: var(--site-header-height);
  padding: var(--site-header-padding-y) var(--site-header-x);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 34px rgba(13, 23, 54, 0.08);
  backdrop-filter: blur(22px);
}

.brand,
.header-actions,
.main-nav,
.hero-metrics,
.panel-head,
.mode-tabs,
.option-row,
.submit-row,
.section-title-row,
.billing-toggle,
.footer-bottom {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  min-width: 0;
  font-weight: 900;
  font-size: var(--site-brand-font-size);
  line-height: 1;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: var(--grad-icon);
}

.brand-logo {
  width: var(--site-brand-logo-size);
  height: var(--site-brand-logo-size);
  flex: 0 0 auto;
  border-radius: 8px;
  box-shadow: var(--brand-glow);
}

.main-nav {
  justify-content: center;
  gap: var(--site-nav-gap);
  min-width: 0;
  width: 100%;
  color: #101427;
  font-size: var(--site-nav-font-size);
  font-weight: 900;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 11rem;
  min-height: var(--site-action-height);
  padding: 0 var(--site-nav-pad-x);
  border-radius: 8px;
  line-height: 1.15;
  text-align: center;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.main-nav a:hover {
  color: var(--blue);
  background: rgba(49, 87, 255, 0.08);
}

@media (min-width: 1081px) {
  .main-nav {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr);
    gap: 0;
  }

  .main-nav a:nth-child(1) { grid-column: 2; }
  .main-nav a:nth-child(2) { grid-column: 4; }
  .main-nav a:nth-child(3) { grid-column: 6; }
  .main-nav a:nth-child(4) { grid-column: 8; }
}

@media (min-width: 1081px) {
  html:lang(zh) .main-nav,
  html:lang(ja) .main-nav,
  html:lang(ko) .main-nav {
    grid-template-columns:
      minmax(0, 2fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 2fr);
  }
}

@media (min-width: 1401px) {
  .main-nav {
    grid-template-columns:
      minmax(0, 2fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 1fr) max-content
      minmax(0, 2fr);
  }
}

.menu-toggle {
  display: none;
  place-items: center;
  justify-self: start;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(139, 84, 255, 0.24);
  border-radius: 8px;
  color: var(--brand-blue);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad-line) border-box;
  box-shadow: var(--brand-glow);
}

.header-actions {
  gap: 10px;
  min-width: 0;
  min-height: var(--site-action-height);
}

@media (min-width: 981px) and (max-width: 1400px) {
  .site-header {
    --site-header-x: clamp(16px, 2vw, 28px);
    --site-header-gap: clamp(10px, 1.4vw, 18px);
    --site-nav-gap: clamp(4px, 1vw, 12px);
    --site-nav-pad-x: clamp(4px, 0.7vw, 8px);
  }

  .main-nav a {
    max-width: 9.5rem;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .site-header {
    --site-header-gap: 10px;
    --site-nav-gap: 4px;
    --site-nav-pad-x: 4px;
  }

  .brand,
  .header-actions {
    gap: 7px;
  }

  .site-header .language-button {
    min-width: 64px;
    padding-inline: 8px;
  }

  .site-header .account-button {
    gap: 6px;
    padding-right: 8px;
  }

  .site-header .account-label {
    min-width: 70px;
  }

  .main-nav a {
    max-width: 8rem;
  }
}

@media (min-width: 981px) and (max-width: 1080px) {
  .site-header {
    --site-brand-font-size: 18px;
    --site-nav-font-size: 13px;
  }

  .main-nav a {
    max-width: 7rem;
  }
}

.icon-button,
.language-button,
.ghost-button,
.solid-button,
.generate-button,
.mode-tab,
.style-chip,
.play-small,
.billing-toggle button {
  border: 0;
  border-radius: 8px;
  min-height: var(--site-action-height);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  color: #6b5bff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(248, 251, 255, 0.78)) padding-box,
    var(--grad-line) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(79, 93, 255, 0.08);
}

.language-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.74svh, 7px);
  min-width: 72px;
  padding: 0 clamp(8px, 1.26svh, 12px);
  border: 1px solid transparent;
  color: #1b2440;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 249, 255, 0.8)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 8px 18px rgba(79, 93, 255, 0.08);
}

.language-button span {
  font-size: var(--site-language-font-size);
  font-weight: 900;
}

.site-header .language-button svg,
.site-header .language-button > i {
  width: var(--site-control-icon-size);
  height: var(--site-control-icon-size);
  flex: 0 0 var(--site-control-icon-size);
}

.account-button {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.05svh, 10px);
  min-height: var(--site-account-height);
  padding: clamp(2px, 0.42svh, 4px) clamp(8px, 1.26svh, 12px) clamp(2px, 0.42svh, 4px) 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.82)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 10px 24px rgba(79, 93, 255, 0.1);
}

.account-avatar,
.profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  background: var(--grad-icon);
  font-weight: 950;
}

.account-avatar {
  width: var(--site-account-avatar-size);
  height: var(--site-account-avatar-size);
  font-size: clamp(12px, 1.68svh, 16px);
}

.account-label {
  display: grid;
  justify-items: start;
  gap: clamp(1px, 0.32svh, 3px);
  min-width: clamp(68px, 8.63svh, 82px);
  line-height: 1.1;
}

.account-tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: clamp(14px, 1.9svh, 18px);
  padding: 0 clamp(5px, 0.74svh, 7px);
  border-radius: 999px;
  color: #667085;
  background: rgba(226, 232, 240, 0.72);
  font-size: clamp(9px, 1.05svh, 10px);
  font-weight: 950;
  white-space: nowrap;
}

.account-tier-badge.membership-tier-creator {
  color: #a84f78;
  background: rgba(244, 192, 220, 0.42);
}

.account-tier-badge.membership-tier-studio {
  color: #465bc4;
  background: rgba(183, 203, 250, 0.46);
}

.account-credit-line {
  display: flex;
  align-items: baseline;
  gap: clamp(4px, 0.63svh, 6px);
  color: var(--muted);
  font-size: clamp(9px, 1.05svh, 10px);
  font-weight: 800;
  white-space: nowrap;
}

.account-credit-line small {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.account-credit-line b {
  color: var(--ink);
  font-size: clamp(11px, 1.26svh, 12px);
  font-weight: 950;
}

.ghost-button,
.solid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-size: var(--ui-button-font-size);
  font-weight: 800;
}

.auto-marquee {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.auto-marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-width: max-content;
  will-change: transform;
}

.auto-marquee.is-overflowing .auto-marquee-content {
  animation: songmuse-title-marquee var(--marquee-duration, 8s) linear infinite;
}

.auto-marquee:not(.is-overflowing) .auto-marquee-content {
  gap: 0;
  transform: translateX(0);
}

.auto-marquee:not(.is-overflowing) .auto-marquee-item[aria-hidden="true"] {
  display: none;
}

.auto-marquee-item {
  flex: 0 0 auto;
  min-width: max-content;
}

.auto-marquee .auto-marquee-content,
.auto-marquee .auto-marquee-item {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.auto-marquee:hover .auto-marquee-content {
  animation-play-state: paused;
}

@keyframes songmuse-title-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .auto-marquee.is-overflowing .auto-marquee-content {
    animation: none;
    transform: translateX(0);
  }
}

.ghost-button {
  color: #4e46d9;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(247, 245, 255, 0.78)) padding-box,
    var(--grad-line) border-box;
  border: 1px solid transparent;
}

.solid-button,
.generate-button {
  color: #fff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
}

button:disabled:not(.track-main):not(.record-cover),
button[aria-disabled="true"]:not(.track-main):not(.record-cover),
a[aria-disabled="true"],
.is-disabled {
  cursor: not-allowed !important;
  color: #8790a3 !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.96), rgba(226, 232, 240, 0.9)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.42), rgba(203, 213, 225, 0.34)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  filter: grayscale(1) saturate(0.32);
  opacity: 1 !important;
  pointer-events: none;
}

.icon-button:disabled svg,
.record-cover:disabled svg,
.generate-button:disabled svg,
.solid-button[aria-disabled="true"] svg,
.ghost-button[aria-disabled="true"] svg,
.is-disabled svg {
  color: #94a3b8;
  stroke: currentColor;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(16, 20, 39, 0.18);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 29;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(320px, calc(100vw - 42px));
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 255, 0.92)),
    linear-gradient(135deg, rgba(0, 200, 255, 0.1), rgba(255, 72, 111, 0.08));
  border-right: 1px solid rgba(49, 87, 255, 0.16);
  box-shadow: 24px 0 70px rgba(13, 23, 54, 0.18);
  backdrop-filter: blur(24px);
  transform: translateX(-104%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.26s ease,
    visibility 0s linear 0.26s;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.drawer-nav,
.drawer-actions {
  display: grid;
  gap: 10px;
}

.drawer-nav {
  margin-top: 12px;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font-weight: 900;
}

.drawer-nav a:hover {
  color: var(--blue);
  background: rgba(49, 87, 255, 0.08);
}

.drawer-actions {
  margin-top: auto;
}

.drawer-membership-summary {
  display: none;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 246, 251, 0.94), rgba(242, 248, 255, 0.92)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 10px 24px rgba(79, 93, 255, 0.08);
}

body.is-authenticated .drawer-membership-summary {
  display: grid;
}

.drawer-membership-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: var(--grad-icon);
  box-shadow: 0 7px 16px rgba(99, 91, 255, 0.2);
}

.drawer-membership-icon svg {
  width: 17px;
  height: 17px;
}

.drawer-membership-copy,
.drawer-membership-credit {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.drawer-membership-copy small,
.drawer-membership-credit small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.drawer-membership-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-membership-credit {
  justify-items: end;
  padding-left: 12px;
  border-left: 1px solid rgba(49, 87, 255, 0.12);
}

.drawer-membership-credit strong {
  color: #4f46e5;
  font-size: 16px;
  font-weight: 950;
}

.drawer-membership-summary[data-membership-tier="creator"] .drawer-membership-copy strong {
  color: #a84f78;
}

.drawer-membership-summary[data-membership-tier="studio"] .drawer-membership-copy strong {
  color: #465bc4;
}

.drawer-actions .ghost-button,
.drawer-actions .solid-button,
.drawer-actions .language-button {
  justify-content: center;
  width: 100%;
}

.drawer-actions .ghost-button {
  min-height: 42px;
  gap: 8px;
}

.drawer-profile-link,
.drawer-logout-link {
  display: none;
}

body.is-authenticated .drawer-profile-link,
body.is-authenticated .drawer-logout-link {
  display: inline-flex;
}

body.is-authenticated .drawer-actions .auth-link {
  display: none;
}

body:not(.auth-state-ready) .start-gate-button,
body.is-authenticated .start-gate-button,
body.has-generated-songs .start-gate-button,
.start-gate-button[hidden] {
  display: none !important;
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-open .mobile-drawer {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.26s ease,
    visibility 0s linear 0s;
}

.auth-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.auth-modal-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 200, 255, 0.18), transparent 34%),
    radial-gradient(circle at 72% 78%, rgba(255, 72, 111, 0.16), transparent 34%),
    rgba(16, 20, 39, 0.32);
  backdrop-filter: blur(8px);
}

.auth-modal {
  position: relative;
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid rgba(49, 87, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 255, 0.9)),
    linear-gradient(135deg, rgba(0, 200, 255, 0.12), rgba(255, 72, 111, 0.08));
  box-shadow: 0 28px 90px rgba(13, 23, 54, 0.24);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.24s ease;
}

.auth-modal-shell[aria-hidden="false"] .auth-modal {
  transform: translateY(0) scale(1);
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.auth-modal-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.auth-modal-mark .brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.auth-modal-mark strong {
  color: var(--ink);
  font-size: 19px;
}

.auth-modal h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-bottom: 20px;
  font-size: 30px;
}

.auth-modal h2 > strong {
  color: #ef3f91;
}

.auth-modal-copy,
.auth-modal-foot {
  color: var(--muted);
  line-height: 1.7;
}

.auth-modal-copy {
  margin-bottom: 20px;
}

.auth-legal-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 8px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(49, 87, 255, 0.16);
  border-radius: 8px;
  color: #4b5875;
  background: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.6;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-legal-consent.needs-attention {
  border-color: rgba(236, 72, 111, 0.6);
  background: rgba(255, 240, 245, 0.9);
  box-shadow: 0 0 0 3px rgba(236, 72, 111, 0.09);
}

.auth-legal-consent input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--brand-violet);
}

.auth-legal-consent label {
  cursor: pointer;
}

.auth-legal-consent a,
.voice-consent-line a {
  color: #5368df;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-legal-status {
  min-height: 1.6em;
  margin: 4px 0 10px;
  color: #c43658;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.auth-legal-status[hidden] {
  display: block;
  visibility: hidden;
}

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

.auth-provider-reserved[hidden] {
  display: none;
}

.auth-provider {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 900;
  font-size: 13px;
  text-align: center;
}

.auth-provider-google.primary {
  color: #fff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
}

.auth-provider-apple {
  color: #fff;
  border-color: rgba(16, 20, 39, 0.2);
  background: linear-gradient(135deg, #111827, #2f3545);
  box-shadow: 0 9px 22px rgba(16, 20, 39, 0.16);
}

.auth-provider.is-unconfigured {
  cursor: not-allowed;
  opacity: 0.55;
}

.auth-provider svg {
  width: 18px;
  height: 18px;
}

.auth-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}

.auth-more-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.auth-more-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.auth-email-panel {
  padding-top: 14px;
  border-top: 1px solid rgba(49, 87, 255, 0.12);
}

.auth-email-form {
  display: grid;
  gap: 9px;
}

.auth-email-form[hidden],
.auth-email-panel[hidden] {
  display: none;
}

.auth-email-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.auth-email-form label svg {
  width: 16px;
  height: 16px;
  color: #4c63e9;
}

.auth-email-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(49, 87, 255, 0.2);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.auth-email-form input:focus {
  border-color: rgba(111, 77, 255, 0.68);
  box-shadow: 0 0 0 3px rgba(111, 77, 255, 0.1);
}

.auth-code-input {
  text-align: center;
  font-size: 22px !important;
  font-weight: 900;
  letter-spacing: 8px;
}

.auth-email-submit {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: var(--grad-action);
  box-shadow: 0 8px 20px rgba(112, 78, 255, 0.18);
  font-weight: 900;
}

.auth-email-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.auth-email-form small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.auth-human-challenge {
  --human-progress: 0%;
  --human-piece-left: 20px;
  --human-background-image: linear-gradient(135deg, #ffe9f4, #e8f3ff);
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(100, 88, 240, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 243, 249, 0.92), rgba(240, 247, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.auth-human-challenge[hidden] {
  display: none;
}

.auth-human-challenge header,
.auth-human-challenge header > span {
  display: flex;
  align-items: center;
}

.auth-human-challenge header {
  justify-content: space-between;
  gap: 10px;
}

.auth-human-challenge header > span {
  gap: 7px;
  color: #263451;
  font-size: 12px;
}

.auth-human-challenge header svg {
  width: 16px;
  height: 16px;
  color: #6f56e8;
}

.auth-human-challenge header button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(100, 88, 240, 0.16);
  border-radius: 7px;
  color: #64708a;
  background: rgba(255, 255, 255, 0.7);
}

.auth-human-challenge header button svg {
  width: 14px;
  height: 14px;
}

.auth-human-track {
  position: relative;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(75, 91, 169, 0.16);
  border-radius: 8px;
  background-image:
    linear-gradient(90deg, rgba(8, 14, 32, 0.08), rgba(255, 255, 255, 0.03)),
    var(--human-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.auth-human-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--human-progress);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 79, 139, 0.12), rgba(47, 111, 255, 0.14));
}

.auth-human-slot,
.auth-human-piece {
  --human-shape-mask: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 60%);
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: var(--human-shape-mask);
  mask-image: var(--human-shape-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: rgba(39, 29, 91, 0.98);
  filter: drop-shadow(0 4px 5px rgba(5, 9, 28, 0.42));
}

.auth-human-slot::before,
.auth-human-piece::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  -webkit-mask-image: var(--human-shape-mask);
  mask-image: var(--human-shape-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.98))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.98))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.98))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.98));
}

.auth-human-slot {
  z-index: 1;
}

.auth-human-slot::before {
  background: rgba(7, 12, 31, 0.82);
}

.auth-human-decoy {
  opacity: 0.78;
}

.auth-human-piece {
  left: var(--human-piece-left);
  z-index: 3;
}

.auth-human-piece::before {
  background-image: var(--human-background-image);
  background-position: var(--human-piece-background-position, center);
  background-repeat: no-repeat;
  background-size: var(--human-piece-background-size, 100% 100%);
}

.auth-human-slot[data-shape="circle"],
.auth-human-piece[data-shape="circle"] {
  --human-shape-mask: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 60%);
}

.auth-human-slot[data-shape="diamond"],
.auth-human-piece[data-shape="diamond"] {
  --human-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 7 93 50 50 93 7 50Z'/%3E%3C/svg%3E");
}

.auth-human-slot[data-shape="triangle"],
.auth-human-piece[data-shape="triangle"] {
  --human-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 7 95 90H5Z'/%3E%3C/svg%3E");
}

.auth-human-slot[data-shape="hexagon"],
.auth-human-piece[data-shape="hexagon"] {
  --human-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M25 7h50l22 43-22 43H25L3 50Z'/%3E%3C/svg%3E");
}

.auth-human-slot[data-shape="cross"],
.auth-human-piece[data-shape="cross"] {
  --human-shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M35 7h30v28h28v30H65v28H35V65H7V35h28Z'/%3E%3C/svg%3E");
}

.auth-human-track input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}

.auth-human-track input[type="range"]::-webkit-slider-runnable-track {
  height: 56px;
  background: transparent;
}

.auth-human-track input[type="range"]::-webkit-slider-thumb {
  width: 40px;
  height: 40px;
  margin-top: 8px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
}

.auth-human-track input[type="range"]::-moz-range-track {
  height: 56px;
  background: transparent;
}

.auth-human-track input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.auth-human-track input[type="range"]:disabled {
  cursor: wait;
  opacity: 0.62;
}

.auth-human-challenge > small {
  min-height: 18px;
  color: #657086;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
}

.auth-human-challenge.is-loading .auth-human-slot,
.auth-human-challenge.is-loading .auth-human-piece {
  opacity: 0.38;
}

.auth-human-challenge.is-error {
  border-color: rgba(236, 72, 111, 0.28);
}

.auth-human-challenge.is-error > small {
  color: #c43658;
}

.auth-human-challenge.is-verified {
  border-color: rgba(0, 178, 128, 0.28);
  background: rgba(235, 255, 248, 0.86);
}

.auth-human-challenge.is-verified > small,
.auth-human-challenge.is-verified header svg {
  color: #087b5e;
}

.auth-code-sent {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.auth-code-sent strong {
  display: block;
  color: var(--ink);
}

.auth-email-secondary {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.auth-email-secondary button {
  padding: 3px 4px;
  border: 0;
  color: #5064dc;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.auth-email-secondary button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.auth-email-status {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 7px;
  color: #405276;
  background: rgba(238, 245, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.auth-email-status[data-kind="error"] {
  border-color: rgba(236, 72, 111, 0.24);
  color: #c43658;
  background: rgba(255, 240, 245, 0.86);
}

.auth-email-status[data-kind="success"] {
  border-color: rgba(0, 178, 128, 0.22);
  color: #087b5e;
  background: rgba(235, 255, 248, 0.82);
}

.auth-provider:disabled {
  color: rgba(16, 20, 39, 0.45);
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.46);
}

.auth-provider em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.auth-modal-foot {
  margin: 16px 0 0;
  font-size: 12px;
}

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

@media (max-width: 680px) {
  .auth-modal-shell {
    place-items: end center;
    padding: 12px;
  }

  .auth-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 24px 20px max(22px, env(safe-area-inset-bottom));
    transform: translateY(28px);
  }

  .auth-modal h2 {
    font-size: 25px;
  }

  .auth-provider {
    gap: 7px;
    min-height: 48px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .auth-email-form input {
    font-size: 16px;
  }
}

.app-dialog-shell {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.app-dialog-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 200, 255, 0.16), transparent 32%),
    radial-gradient(circle at 72% 78%, rgba(255, 72, 111, 0.14), transparent 34%),
    rgba(16, 20, 39, 0.26);
  backdrop-filter: blur(7px);
}

.app-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  width: min(380px, 100%);
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.92)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 24px 70px rgba(13, 23, 54, 0.22), 0 12px 34px rgba(139, 84, 255, 0.12);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

.app-dialog-shell[aria-hidden="false"] .app-dialog {
  transform: translateY(0) scale(1);
}

.app-dialog-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--grad-icon);
  box-shadow: var(--brand-glow);
}

.app-dialog-mark img {
  width: 26px;
  height: 26px;
}

.app-dialog-copy {
  min-width: 0;
}

.app-dialog-copy .section-kicker {
  margin-bottom: 4px;
}

.app-dialog h2 {
  margin: 0 0 6px;
  font-size: 19px;
}

.app-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.app-dialog-fields {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}

.app-dialog-fields[hidden] {
  display: none;
}

.app-dialog-fields label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.app-dialog-fields input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(92, 96, 246, 0.28);
  border-radius: 8px;
  outline: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  font: inherit;
  font-weight: 820;
}

.app-dialog-fields input:focus {
  border-color: rgba(85, 99, 245, 0.72);
  box-shadow: 0 0 0 3px rgba(202, 93, 230, 0.12);
}

.app-dialog-fields small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.app-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.app-dialog-actions .ghost-button,
.app-dialog-actions .solid-button {
  min-height: 36px;
  padding: 0 16px;
}

.app-dialog-actions .solid-button {
  min-width: 86px;
}

body.app-dialog-open {
  overflow: hidden;
}

.global-loading-shell {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.global-loading-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.global-loading-shell.is-creation-scope {
  inset:
    var(--global-loading-scope-top, 0)
    var(--global-loading-scope-right, 0)
    var(--global-loading-scope-bottom, 0)
    var(--global-loading-scope-left, 0);
  overflow: hidden;
  border-radius: 0 14px 14px 0;
}

.global-loading-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 39, 0.32);
  backdrop-filter: blur(8px);
}

.global-loading-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.94)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 28px 76px rgba(13, 23, 54, 0.24), 0 14px 36px rgba(139, 84, 255, 0.13);
  text-align: center;
}

.global-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(139, 84, 255, 0.18);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: global-loading-spin 0.75s linear infinite;
}

.global-loading-card strong {
  font-size: 17px;
}

.global-loading-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
}

body.global-loading-open:not(.creation-loading-open) {
  overflow: hidden;
}

html.creation-loading-open,
body.creation-loading-open {
  overscroll-behavior: none;
}

body.creation-loading-open .creation-progress {
  pointer-events: none;
  touch-action: none;
}

body.creation-loading-open .site-header {
  z-index: 364;
}

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

@media (max-width: 680px) {
  .global-loading-shell.is-creation-scope {
    bottom: 0;
    z-index: 362;
    border-radius: 0 8px 8px 0;
  }
}

html.page-scroll-locked,
body.page-scroll-locked,
html.modal-page-locked,
body.modal-page-locked,
html.modal-page-restoring,
body.modal-page-restoring {
  overflow: hidden;
  overscroll-behavior: none;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

body.page-scroll-locked {
  position: fixed !important;
  top: calc(-1 * var(--page-scroll-lock-y, 0px)) !important;
  right: 0;
  left: 0;
  width: 100%;
}

.voice-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.22s ease;
}

.voice-modal-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.voice-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 79, 139, 0.18), transparent 32%),
    radial-gradient(circle at 82% 74%, rgba(47, 111, 255, 0.16), transparent 34%),
    rgba(8, 12, 24, 0.58);
  backdrop-filter: blur(10px);
}

.voice-modal {
  position: relative;
  width: min(780px, 100%);
  height: min(720px, calc(100dvh - 36px));
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 32px;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 12px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 79, 139, 0.13), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(47, 111, 255, 0.16), transparent 34%),
    #202a39;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.voice-modal-content {
  display: grid;
  height: 100%;
  min-height: 0;
  overscroll-behavior: contain;
}

.voice-modal-content:has(.voice-list) {
  --voice-row-height: 122px;
  grid-template-rows: auto var(--voice-row-height) minmax(0, 1fr);
  row-gap: 18px;
}

.voice-modal:has(.voice-record-stage) {
  overflow: hidden;
  padding: clamp(14px, 3dvh, 30px);
}

.voice-modal:has(.voice-record-stage) .voice-modal-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  min-height: 0;
}

.voice-modal-shell[aria-hidden="false"] .voice-modal {
  transform: translateY(0) scale(1);
}

.voice-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(235, 241, 255, 0.78);
  background: transparent;
}

.voice-modal-back {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  color: rgba(235, 241, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
}

.voice-modal-back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.voice-step-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  text-align: center;
}

.voice-step-head h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
}

.voice-step-head p {
  max-width: 560px;
  margin: 0;
  color: rgba(219, 226, 241, 0.72);
  line-height: 1.5;
}

.voice-create-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--voice-row-height, 122px);
  margin-bottom: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--grad-action);
  text-align: left;
  box-shadow: 0 18px 40px rgba(255, 79, 139, 0.22);
}

.voice-create-card svg {
  width: 30px;
  height: 30px;
}

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

.voice-create-card strong {
  font-size: 18px;
}

.voice-create-card small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.84);
}

.voice-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 14px;
  padding-right: 4px;
  border-top: 1px dashed rgba(216, 227, 255, 0.2);
}

.voice-refresh-note {
  display: inline-flex;
  place-self: start center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 999px;
  color: #64718a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.voice-refresh-note span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.voice-refresh-note svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: var(--brand-violet);
  animation: voiceSpin 0.9s linear infinite;
}

.voice-list-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 40px 40px;
  align-items: center;
  gap: 12px;
  height: 122px;
  padding: 13px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
}

.voice-list-item.is-selected {
  outline: 1px solid rgba(52, 229, 155, 0.64);
  background: rgba(52, 229, 155, 0.12);
}

.voice-list-item.is-expired {
  opacity: 1;
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.voice-play-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
    var(--grad-icon);
  box-shadow: 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-identity-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  opacity: 0.72;
}

.voice-identity-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-left-color: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.voice-identity-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.voice-identity-core svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.voice-identity-bars {
  position: absolute;
  right: 6px;
  bottom: 7px;
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 14px;
}

.voice-identity-bars span {
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.voice-identity-bars span:nth-child(1) {
  height: 6px;
}

.voice-identity-bars span:nth-child(2) {
  height: 11px;
}

.voice-identity-bars span:nth-child(3) {
  height: 8px;
}

.voice-identity-bars span:nth-child(4) {
  height: 13px;
}

.voice-list-item.is-selected .voice-play-button {
  box-shadow: 0 0 0 2px rgba(34, 211, 136, 0.22), 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-list-item.is-expired .voice-play-button {
  filter: grayscale(0.35) saturate(0.72);
  opacity: 0.72;
}

.voice-item-main {
  min-width: 0;
}

.voice-item-main strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-expiry {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #cbd8f2;
  background: rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.voice-expiry.is-error {
  color: var(--sm-item-error-text);
  border-color: var(--sm-item-error-pill-border);
  background: var(--sm-item-error-pill-bg);
}

.voice-use-button,
.voice-edit-button,
.voice-delete-button {
  height: 38px;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.custom-asset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.custom-asset-row .custom-voice-button {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 38px;
  min-height: 38px;
}

.custom-asset-note {
  margin: -4px 0 2px;
  color: #64718a;
  font-size: 12px;
  line-height: 1.35;
}

.persona-list .voice-list-item {
  grid-template-columns: 48px minmax(0, 1fr) auto 40px 40px;
}

.persona-preview-button {
  border: 1px solid rgba(255, 255, 255, 0.52);
  cursor: pointer;
}

.persona-preview-button svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  stroke-width: 2.7;
}

.persona-preview-button.is-playing {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
    linear-gradient(135deg, #ff4f8b, #8b5cf6 48%, #2f6fff);
  box-shadow: 0 0 0 3px rgba(255, 79, 139, 0.12), 0 14px 28px rgba(139, 92, 246, 0.22);
}

.persona-detail-card,
.persona-save-form {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.persona-modal-content:has(.persona-save-form) {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 16px;
}

.persona-modal-content:has(.persona-save-form) .voice-step-head {
  margin-bottom: 0;
}

.persona-save-form {
  grid-template-rows: minmax(0, 1fr) max-content;
  overflow: hidden;
}

.persona-save-fields {
  display: grid;
  grid-template-rows: max-content minmax(110px, 0.8fr) minmax(120px, 1.2fr);
  min-height: 0;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.persona-save-fields > label {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
}

.persona-save-fields > label:first-child {
  grid-template-rows: auto 44px;
}

.persona-save-form input,
.persona-save-form textarea {
  min-height: 0;
}

.persona-detail-actions {
  margin-top: 0;
}

.persona-detail-actions .ghost-button,
.persona-detail-actions .solid-button {
  min-height: 48px;
}

.persona-detail-card .persona-keywords-box,
.persona-save-form .persona-keywords-box {
  min-height: 132px;
  line-height: 1.55;
  overflow: auto;
  resize: none;
}

.persona-preview-audio {
  width: 100%;
}

.voice-saving-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: min(420px, 64dvh);
  gap: 10px;
  text-align: center;
}

.voice-saving-card h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
}

.voice-failed-card > svg {
  width: 54px;
  height: 54px;
  color: #ff5f7c;
}

.voice-failed-card .solid-button {
  min-width: 180px;
  margin-top: 8px;
}

.voice-saving-card p:last-child {
  max-width: 420px;
  margin: 0;
  color: rgba(219, 226, 241, 0.74);
}

.voice-spinner {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #ff4f8b;
  border-right-color: #2f6fff;
  border-radius: 50%;
  animation: voiceSpin 0.9s linear infinite;
}

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

.voice-detail-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.voice-detail-field {
  display: grid;
  gap: 7px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.voice-detail-field input,
.voice-detail-field textarea,
.voice-detail-field code {
  width: 100%;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  font: inherit;
  font-weight: 850;
}

.voice-detail-field input,
.voice-detail-field textarea {
  padding: 12px 13px;
}

.voice-detail-field textarea {
  resize: none;
}

.voice-detail-field code {
  display: block;
  padding: 10px 12px;
  overflow: hidden;
  color: rgba(235, 241, 255, 0.86);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-detail-field small {
  justify-self: end;
  color: rgba(219, 226, 241, 0.52);
}

.voice-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-detail-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(235, 241, 255, 0.76);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.voice-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.voice-detail-actions button {
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}

.voice-detail-actions.persona-detail-actions {
  grid-template-columns: 1fr;
}

.voice-reverify-button {
  justify-self: start;
}

.voice-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  height: var(--voice-row-height, 122px);
  padding: 22px;
  border: 1px dashed rgba(216, 227, 255, 0.22);
  border-radius: 10px;
  color: rgba(219, 226, 241, 0.72);
  text-align: center;
}

.voice-upload-zone,
.voice-consent-card,
.voice-tips-grid article,
.voice-wave-card,
.voice-record-pad {
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.voice-upload-zone {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 20px;
  border-style: dashed;
  text-align: center;
}

.voice-upload-zone h3,
.voice-upload-zone p {
  margin: 0;
}

.voice-upload-zone p,
.voice-recording-status,
.voice-tips-grid span {
  color: rgba(219, 226, 241, 0.7);
}

.voice-choice-actions,
.voice-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 360px);
  margin-inline: auto;
}

.voice-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 332px);
  margin-inline: auto;
}

.voice-choice-actions .solid-button,
.voice-choice-actions .ghost-button,
.voice-step-actions .solid-button,
.voice-step-actions .ghost-button {
  min-height: 44px;
  padding: 0 22px;
}

.voice-file-label {
  cursor: pointer;
}

.voice-consent-card {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 79, 139, 0.52);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.12), rgba(47, 111, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 12px 30px rgba(255, 79, 139, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: voiceConsentBreath 2.2s ease-in-out infinite;
}

.voice-consent-card.needs-attention {
  border-color: rgba(255, 79, 139, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.2), rgba(139, 92, 246, 0.16), rgba(47, 111, 255, 0.12));
  box-shadow: 0 0 0 3px rgba(255, 79, 139, 0.14), 0 18px 42px rgba(255, 79, 139, 0.15);
}

.voice-consent-card:has(#voiceConsentInput:checked) {
  border-color: rgba(52, 229, 155, 0.56);
  background:
    linear-gradient(135deg, rgba(52, 229, 155, 0.12), rgba(47, 111, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  animation: none;
}

@keyframes voiceConsentBreath {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 0 0 rgba(255, 79, 139, 0.14), 0 12px 30px rgba(255, 79, 139, 0.08);
  }
  50% {
    border-color: rgba(255, 79, 139, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 4px rgba(255, 79, 139, 0.12), 0 18px 46px rgba(255, 79, 139, 0.18);
  }
}

.voice-consent-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.55;
}

.voice-consent-line input {
  accent-color: var(--brand-violet);
  transform: translateY(2px);
}

.voice-consent-line a {
  position: relative;
  z-index: 1;
}

.voice-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.6dvh, 12px);
  margin-top: clamp(6px, 1.6dvh, 16px);
}

.voice-tips-grid article {
  display: grid;
  grid-template-columns: clamp(30px, 5.5dvh, 42px) minmax(0, 1fr);
  gap: clamp(7px, 1.3dvh, 10px);
  padding: clamp(8px, 1.6dvh, 14px);
  align-items: center;
}

.voice-tips-grid i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: clamp(30px, 5dvh, 38px);
  height: clamp(30px, 5dvh, 38px);
  align-self: center;
  justify-self: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.voice-tips-grid strong,
.voice-tips-grid span {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  text-align: left;
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: break-word;
}

.voice-tips-grid strong {
  align-self: end;
  color: #fff;
  font-size: clamp(13px, 1.9dvh, 15px);
  line-height: 1.35;
}

.voice-tips-grid span {
  display: block;
  align-self: start;
  font-size: clamp(12px, 1.65dvh, 14px);
  line-height: 1.5;
}

.voice-wave-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.voice-trim-time {
  justify-self: center;
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--grad-action);
  font-weight: 900;
}

.voice-wave-canvas {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 132px;
  border: 1px solid rgba(34, 211, 136, 0.88);
  border-radius: 8px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.voice-wave-canvas.is-dragging {
  z-index: 8;
  cursor: grabbing;
}

body.voice-trim-dragging {
  overflow: hidden;
  touch-action: none;
}

.voice-wave-canvas.is-trim-locked {
  cursor: default;
  border-style: dashed;
  opacity: 0.86;
}

.voice-trim-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.voice-trim-play {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(216, 227, 255, 0.2);
  border-radius: 999px;
  color: #172033;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.voice-trim-play svg {
  width: 20px;
  height: 20px;
}

#voiceTrimPlaybackTime {
  min-width: 48px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 14px;
  font-weight: 900;
}

.voice-record-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  align-items: start;
  gap: 12px;
  padding-inline: 44px;
  margin-bottom: clamp(6px, 1.5dvh, 18px);
  text-align: center;
}

.voice-record-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 3.1dvh, 25px);
}

.voice-record-subtitle {
  margin: 5px 0 0;
  color: rgba(235, 241, 255, 0.68);
  font-size: 13px;
  font-weight: 820;
}

.voice-record-tools {
  display: grid;
  gap: 8px;
}

.voice-record-left {
  display: grid;
  align-content: start;
}

.voice-device-field {
  display: grid;
  gap: 5px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.voice-device-field select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-device-field select option {
  color: #172033;
  background: #fff;
}

.voice-refresh-phrase {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-color: rgba(139, 92, 246, 0.38);
  color: rgba(255, 255, 255, 0.94);
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.22), rgba(139, 92, 246, 0.2), rgba(47, 111, 255, 0.18)),
    rgba(20, 30, 48, 0.72);
  backdrop-filter: blur(10px);
}

.voice-refresh-phrase:disabled {
  border-color: rgba(216, 227, 255, 0.12);
  color: rgba(235, 241, 255, 0.58);
  background: rgba(255, 255, 255, 0.065);
  opacity: 1;
  cursor: not-allowed;
}

.voice-record-stage {
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.55dvh, 14px);
  min-height: 0;
  padding: clamp(2px, 0.9dvh, 8px) 0 clamp(5px, 1.4dvh, 16px);
}

.voice-record-time {
  color: rgba(235, 241, 255, 0.7);
  font-size: clamp(16px, 2.8dvh, 22px);
  font-weight: 800;
}

.voice-record-stage p {
  margin: 0;
  color: rgba(235, 241, 255, 0.82);
  font-size: clamp(13px, 2.1dvh, 17px);
  font-weight: 760;
  text-align: center;
}

.voice-phrase-wrap {
  position: relative;
  width: min(100%, 620px);
}

.voice-live-canvas {
  width: 100%;
  height: clamp(48px, 14dvh, 112px);
  border-bottom: 1px dashed rgba(216, 227, 255, 0.16);
}

.voice-panel-controls {
  display: grid;
  grid-template-columns: minmax(0, 130px) clamp(68px, 12dvh, 96px) minmax(0, 130px);
  align-items: center;
  justify-content: center;
  column-gap: clamp(20px, 4.2dvh, 32px);
  row-gap: 10px;
  width: 100%;
}

.voice-record-main {
  justify-self: center;
}

.voice-record-main svg {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.94);
  stroke-width: 2.8;
  filter: drop-shadow(0 2px 4px rgba(190, 18, 60, 0.22));
}

.voice-rerecord-button,
.voice-record-play,
.voice-record-finish,
.voice-verify-upload {
  min-height: 46px;
}

.voice-record-finish:disabled,
.voice-record-play:disabled,
.voice-rerecord-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.voice-verify-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 168px));
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.voice-verify-upload {
  justify-self: center;
  margin-top: -2px;
  width: 100%;
}

.voice-phrase-compact {
  min-height: clamp(52px, 10dvh, 78px);
  width: 100%;
  padding: clamp(10px, 2dvh, 18px);
  padding-right: clamp(108px, 22vw, 132px);
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  font-size: clamp(18px, 4vw, 30px);
}

.voice-phrase-compact.is-loading {
  color: rgba(235, 241, 255, 0.62);
  font-size: clamp(16px, 3vw, 22px);
}

.voice-step-actions {
  margin-top: 18px;
}

.voice-step-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.voice-step-dots span {
  width: 58px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
}

.voice-step-dots span.active {
  background: rgba(255, 255, 255, 0.86);
}

.voice-validation-head {
  position: relative;
}

.voice-language-pill {
  position: absolute;
  right: 12px;
  top: 0;
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 900;
}

.voice-phrase {
  min-height: 118px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 950;
  text-align: center;
}

.voice-record-pad {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 24px 18px;
  border-style: dashed;
}

.voice-record-pad p {
  margin: 0;
  color: rgba(219, 226, 241, 0.72);
}

.voice-record-button {
  width: clamp(62px, 11dvh, 86px);
  height: clamp(62px, 11dvh, 86px);
  border: clamp(6px, 1dvh, 8px) solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: #ff404b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 18px 34px rgba(255, 64, 75, 0.22);
}

.voice-record-button.is-recording,
[data-record-source].is-recording,
[data-record-verify].is-recording {
  animation: voicePulse 1s infinite ease-in-out;
}

@keyframes voicePulse {
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgba(255, 64, 75, 0.14);
  }
}

.voice-modal-backdrop {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 79, 139, 0.16), transparent 32%),
    radial-gradient(circle at 84% 74%, rgba(47, 111, 255, 0.16), transparent 34%),
    rgba(245, 249, 255, 0.72);
  backdrop-filter: blur(14px);
}

.voice-modal {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.92)),
    radial-gradient(circle at 18% 4%, rgba(255, 79, 139, 0.1), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(47, 111, 255, 0.1), transparent 36%);
  box-shadow: 0 34px 90px rgba(47, 84, 158, 0.2);
}

.voice-modal-close,
.voice-modal-back {
  color: var(--muted);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.9)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.28), rgba(139, 92, 246, 0.24), rgba(47, 111, 255, 0.24)) border-box;
  box-shadow: 0 12px 28px rgba(47, 84, 158, 0.13);
}

.voice-modal-back:hover,
.voice-modal-close:hover {
  color: var(--brand-violet);
  background:
    linear-gradient(180deg, #fff, rgba(247, 250, 255, 0.96)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.16);
}

.voice-step-head h2,
.voice-saving-card h2,
.voice-record-head h2,
.voice-item-main strong,
.voice-upload-zone h3,
.voice-tips-grid strong,
.voice-phrase {
  color: var(--ink);
}

.voice-step-head p,
.voice-saving-card p:last-child,
.voice-empty,
.voice-upload-zone p,
.voice-recording-status,
.voice-tips-grid span,
.voice-record-subtitle,
.voice-record-time,
.voice-record-stage p,
.voice-record-pad p,
#voiceTrimPlaybackTime {
  color: var(--muted);
}

.voice-list {
  border-top-color: rgba(47, 111, 255, 0.14);
}

.voice-list-item,
.voice-empty,
.voice-upload-zone,
.voice-tips-grid article,
.voice-wave-card,
.voice-record-pad,
.voice-detail-panel,
.voice-phrase-compact {
  border: 1px solid rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 255, 0.72));
  box-shadow: 0 14px 32px rgba(47, 84, 158, 0.08);
}

.voice-list-item.is-selected {
  outline: 0;
  border: 1px solid rgba(34, 211, 136, 0.58);
  background:
    linear-gradient(135deg, rgba(236, 255, 248, 0.94), rgba(244, 250, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 14px 32px rgba(47, 84, 158, 0.08);
}

.voice-list-item.is-expired {
  opacity: 1;
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.voice-play-button {
  color: #fff;
  background: var(--grad-icon);
  box-shadow: 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-expiry {
  color: #65728c;
  background: rgba(238, 244, 255, 0.94);
  border: 1px solid rgba(47, 111, 255, 0.13);
}

.voice-expiry.is-error {
  color: var(--sm-item-error-text);
  background: var(--sm-item-error-pill-bg);
  border-color: var(--sm-item-error-pill-border);
}

.voice-use-button,
.voice-edit-button,
.voice-delete-button,
.voice-refresh-phrase,
.voice-language-pill {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 255, 0.84));
  box-shadow: 0 10px 24px rgba(47, 84, 158, 0.08);
}

.voice-use-button:hover,
.voice-edit-button:hover,
.voice-delete-button:hover,
.voice-refresh-phrase:hover {
  color: var(--brand-violet);
  border-color: rgba(139, 92, 246, 0.32);
}

.voice-refresh-phrase:disabled {
  color: #9aa5b8;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(241, 245, 249, 0.88);
}

.voice-consent-card {
  border-color: rgba(255, 79, 139, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 246, 250, 0.92), rgba(245, 249, 255, 0.88));
  box-shadow: 0 12px 30px rgba(255, 79, 139, 0.08);
}

.voice-consent-card:has(#voiceConsentInput:checked) {
  border-color: rgba(34, 211, 136, 0.5);
  background:
    linear-gradient(135deg, rgba(236, 255, 248, 0.9), rgba(245, 249, 255, 0.86));
}

.voice-consent-line {
  color: var(--ink);
}

.voice-tips-grid i {
  color: var(--brand-violet);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.12), rgba(47, 111, 255, 0.12));
}

.voice-detail-field {
  color: var(--muted);
}

.voice-detail-field input,
.voice-detail-field textarea,
.voice-detail-field code,
.voice-device-field select {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background: rgba(255, 255, 255, 0.9);
}

.voice-detail-field code {
  color: var(--muted);
}

.voice-detail-field small,
.voice-detail-meta span,
.voice-device-field {
  color: var(--muted);
}

.voice-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(47, 111, 255, 0.16);
  color: #334155;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 242, 255, 0.9));
  box-shadow: 0 8px 18px rgba(47, 84, 158, 0.08);
}

.voice-spinner {
  border-color: rgba(47, 111, 255, 0.16);
  border-top-color: #ff4f8b;
  border-right-color: #2f6fff;
}

.voice-live-canvas {
  border-bottom-color: rgba(47, 111, 255, 0.16);
}

.voice-wave-canvas {
  background:
    linear-gradient(90deg, rgba(255, 79, 139, 0.08), rgba(47, 111, 255, 0.08));
}

.voice-step-dots span {
  background: rgba(47, 111, 255, 0.16);
}

.voice-step-dots span.active {
  background: var(--grad-action);
}

.voice-modal .icon-button svg,
.voice-modal .ghost-button svg,
.voice-modal .voice-use-button svg,
.voice-modal .voice-edit-button svg,
.voice-modal .voice-delete-button svg,
.voice-modal .voice-modal-close svg,
.voice-modal .voice-modal-back svg {
  color: currentColor;
  stroke: currentColor;
}

.voice-modal-close,
.voice-modal-back,
.voice-edit-button,
.voice-delete-button {
  color: #6b5bff;
}

.voice-tips-grid,
.voice-modal:has(.voice-record-stage) .voice-tips-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.voice-tips-grid article,
.voice-modal:has(.voice-record-stage) .voice-tips-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  gap: 4px 12px;
  min-height: 92px;
  padding: 14px 16px;
  text-align: left;
}

.voice-tips-grid i,
.voice-tips-grid svg,
.voice-modal:has(.voice-record-stage) .voice-tips-grid i,
.voice-modal:has(.voice-record-stage) .voice-tips-grid svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  color: var(--ink);
  stroke: currentColor;
  background: transparent;
}

.voice-tips-grid strong,
.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  grid-column: 2;
  min-width: 0;
  text-align: left;
}

.voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
  align-self: end;
  font-size: 15px;
  line-height: 1.35;
}

.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  display: block;
  align-self: start;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-height: 720px) {
  .voice-modal:has(.voice-record-stage) {
    padding: 12px 16px;
  }

  .voice-device-field {
    gap: 3px;
    font-size: 11px;
  }

  .voice-device-field select {
    min-height: 34px;
  }

  .voice-live-canvas {
    height: 52px;
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 116px) 64px minmax(0, 116px);
    column-gap: 22px;
  }

  .voice-rerecord-button,
  .voice-record-play,
  .voice-record-finish,
  .voice-verify-upload {
    min-height: 38px;
    font-size: 12px;
  }

  .voice-step-dots {
    margin-top: 8px;
  }
}

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

.voice-modal:has(#voiceValidationPhrase) .voice-modal-content {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.voice-modal:has(#voiceValidationPhrase) .voice-record-stage {
  align-content: center;
}

.voice-modal:has(#voiceValidationPhrase) .voice-step-dots {
  align-self: end;
}

@media (max-width: 680px) {
  .model-voice-stack {
    justify-items: stretch;
    width: min(100%, 230px);
  }

  .model-select-pill,
  .custom-voice-button {
    width: 100%;
  }

  .custom-asset-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .style-custom-voice-button {
    width: 100%;
    max-width: none;
  }

  .voice-modal-shell {
    align-items: end;
    padding: 10px;
  }

  .voice-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 24px 18px;
    border-radius: 14px;
  }

  .voice-modal-content:has(.voice-list) {
    --voice-row-height: 96px;
    row-gap: 12px;
  }

  .voice-create-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
  }

  .voice-create-card svg {
    width: 25px;
    height: 25px;
  }

  .voice-create-card strong {
    font-size: 15px;
  }

  .voice-create-card small {
    font-size: 12px;
  }

  .voice-modal:has(.voice-record-stage) {
    padding: clamp(12px, 2.5dvh, 18px);
  }

  .voice-list-item {
    grid-template-columns: 44px minmax(0, 1fr) 36px 36px;
    gap: 10px;
    height: var(--voice-row-height, 96px);
    padding: 10px 12px;
  }

  .voice-empty {
    height: var(--voice-row-height, 96px);
    padding: 12px;
  }

  .voice-empty strong {
    font-size: 14px;
  }

  .voice-empty span {
    font-size: 12px;
  }

  .voice-record-head {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-head {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.04fr) minmax(0, 0.92fr);
    align-items: start;
    gap: 8px;
    padding: 30px 34px 0;
    margin-bottom: 4px;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-left,
  .voice-modal:has(#voiceValidationPhrase) .voice-record-tools {
    width: 100%;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-head h2 {
    font-size: clamp(17px, 4.2vw, 21px);
    line-height: 1.08;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-subtitle {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  .voice-record-tools {
    width: min(100%, 360px);
    justify-content: center;
  }

  .voice-device-field {
    width: 100%;
    min-width: 0;
    gap: 3px;
    font-size: 10px;
  }

  .voice-device-field select {
    min-width: 0;
    min-height: 32px;
    padding-inline: 7px;
    font-size: 11px;
  }

  .voice-refresh-phrase {
    min-width: 72px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .voice-verify-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 8px;
  }

  .voice-rerecord-button,
  .voice-record-play,
  .voice-record-finish {
    padding-inline: 10px;
    font-size: 13px;
  }

  .voice-edit-button {
    grid-column: 3;
    grid-row: 1;
  }

  .voice-delete-button {
    grid-column: 4;
    grid-row: 1;
  }

  .voice-detail-actions {
    grid-template-columns: 1fr;
  }

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

  .voice-tips-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 7px;
    min-height: 92px;
    padding: 9px 7px;
    text-align: left;
  }

  .voice-tips-grid i {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    align-self: center;
    justify-self: center;
  }

  .voice-tips-grid strong,
  .voice-tips-grid span {
    grid-column: 2;
    text-align: left;
  }

  .voice-tips-grid strong {
    font-size: 12px;
    line-height: 1.22;
  }

  .voice-tips-grid span {
    display: block;
    font-size: 10px;
    line-height: 1.28;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid article {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 82px;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid i {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    align-self: center;
    justify-self: center;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid span {
    display: block;
    grid-column: 2;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
    grid-column: 2;
    text-align: left;
  }

  .voice-choice-actions .solid-button,
  .voice-choice-actions .ghost-button,
  .voice-step-actions .solid-button,
  .voice-step-actions .ghost-button {
    width: 100%;
  }

  .voice-language-pill {
    position: static;
    justify-self: center;
  }
}

@media (max-height: 680px), (max-width: 420px) {
  .voice-modal:has(.voice-record-stage) .voice-modal-content {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .voice-record-head {
    margin-bottom: 6px;
  }

  .voice-record-head h2 {
    font-size: clamp(18px, 5vw, 22px);
  }

  .voice-record-subtitle {
    margin-top: 2px;
    font-size: 12px;
  }
}

.auth-provider.primary {
  color: #fff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
}

.auth-provider:disabled {
  color: rgba(16, 20, 39, 0.45);
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.46);
}

.auth-provider em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.auth-modal-foot {
  margin: 16px 0 0;
  font-size: 12px;
}

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

.app-dialog-shell {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.app-dialog-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 200, 255, 0.16), transparent 32%),
    radial-gradient(circle at 72% 78%, rgba(255, 72, 111, 0.14), transparent 34%),
    rgba(16, 20, 39, 0.26);
  backdrop-filter: blur(7px);
}

.app-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  width: min(380px, 100%);
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.92)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 24px 70px rgba(13, 23, 54, 0.22), 0 12px 34px rgba(139, 84, 255, 0.12);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

.app-dialog-shell[aria-hidden="false"] .app-dialog {
  transform: translateY(0) scale(1);
}

.app-dialog-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--grad-icon);
  box-shadow: var(--brand-glow);
}

.app-dialog-mark img {
  width: 26px;
  height: 26px;
}

.app-dialog-copy {
  min-width: 0;
}

.app-dialog-copy .section-kicker {
  margin-bottom: 4px;
}

.app-dialog h2 {
  margin: 0 0 6px;
  font-size: 19px;
}

.app-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.app-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.app-dialog-actions .ghost-button,
.app-dialog-actions .solid-button {
  min-height: 36px;
  padding: 0 16px;
}

.app-dialog-actions .solid-button {
  min-width: 86px;
}

body.app-dialog-open {
  overflow: hidden;
}

.voice-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.voice-modal-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.voice-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 79, 139, 0.18), transparent 32%),
    radial-gradient(circle at 82% 74%, rgba(47, 111, 255, 0.16), transparent 34%),
    rgba(8, 12, 24, 0.58);
  backdrop-filter: blur(10px);
}

.voice-modal {
  position: relative;
  width: min(780px, 100%);
  height: min(720px, calc(100dvh - 36px));
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 12px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 79, 139, 0.13), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(47, 111, 255, 0.16), transparent 34%),
    #202a39;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.voice-modal-content {
  display: grid;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.voice-modal-content:has(.voice-list) {
  --voice-row-height: 122px;
  grid-template-rows: auto var(--voice-row-height) minmax(0, 1fr);
  row-gap: 18px;
}

.voice-modal:has(.voice-record-stage) {
  overflow: hidden;
  padding: clamp(14px, 3dvh, 30px);
}

.voice-modal:has(.voice-record-stage) .voice-modal-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  min-height: 0;
}

.voice-modal-shell[aria-hidden="false"] .voice-modal {
  transform: translateY(0) scale(1);
}

.voice-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(235, 241, 255, 0.78);
  background: transparent;
}

.voice-modal-back {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  color: rgba(235, 241, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
}

.voice-modal-back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.voice-step-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  text-align: center;
}

.voice-step-head h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
}

.voice-step-head p {
  max-width: 560px;
  margin: 0;
  color: rgba(219, 226, 241, 0.72);
  line-height: 1.5;
}

.voice-create-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--voice-row-height, 122px);
  margin-bottom: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--grad-action);
  text-align: left;
  box-shadow: 0 18px 40px rgba(255, 79, 139, 0.22);
}

.voice-create-card svg {
  width: 30px;
  height: 30px;
}

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

.voice-create-card strong {
  font-size: 18px;
}

.voice-create-card small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.84);
}

.voice-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 14px;
  padding-right: 4px;
  border-top: 1px dashed rgba(216, 227, 255, 0.2);
}

.voice-list-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 40px 40px;
  align-items: center;
  gap: 12px;
  height: 122px;
  padding: 13px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
}

.voice-list-item.is-selected {
  outline: 1px solid rgba(52, 229, 155, 0.64);
  background: rgba(52, 229, 155, 0.12);
}

.voice-list-item.is-expired {
  opacity: 1;
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.voice-play-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 24%),
    var(--grad-icon);
  box-shadow: 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-identity-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  opacity: 0.72;
}

.voice-identity-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-left-color: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.voice-identity-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.voice-identity-core svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.voice-identity-bars {
  position: absolute;
  right: 6px;
  bottom: 7px;
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 14px;
}

.voice-identity-bars span {
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.voice-identity-bars span:nth-child(1) {
  height: 6px;
}

.voice-identity-bars span:nth-child(2) {
  height: 11px;
}

.voice-identity-bars span:nth-child(3) {
  height: 8px;
}

.voice-identity-bars span:nth-child(4) {
  height: 13px;
}

.voice-list-item.is-selected .voice-play-button {
  box-shadow: 0 0 0 2px rgba(34, 211, 136, 0.22), 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-list-item.is-expired .voice-play-button {
  filter: grayscale(0.35) saturate(0.72);
  opacity: 0.72;
}

.voice-item-main {
  min-width: 0;
}

.voice-item-main strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-expiry {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #cbd8f2;
  background: rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.voice-expiry.is-error {
  color: var(--sm-item-error-text);
  border-color: var(--sm-item-error-pill-border);
  background: var(--sm-item-error-pill-bg);
}

.voice-use-button,
.voice-edit-button,
.voice-delete-button {
  height: 38px;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.voice-saving-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: min(420px, 64dvh);
  gap: 10px;
  text-align: center;
}

.voice-saving-card h2 {
  margin: 0;
  color: #fff;
  font-size: 25px;
}

.voice-failed-card > svg {
  width: 54px;
  height: 54px;
  color: #ff5f7c;
}

.voice-failed-card .solid-button {
  min-width: 180px;
  margin-top: 8px;
}

.voice-saving-card p:last-child {
  max-width: 420px;
  margin: 0;
  color: rgba(219, 226, 241, 0.74);
}

.voice-spinner {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #ff4f8b;
  border-right-color: #2f6fff;
  border-radius: 50%;
  animation: voiceSpin 0.9s linear infinite;
}

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

.voice-detail-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.voice-detail-field {
  display: grid;
  gap: 7px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.voice-detail-field input,
.voice-detail-field textarea,
.voice-detail-field code {
  width: 100%;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  font: inherit;
  font-weight: 850;
}

.voice-detail-field input,
.voice-detail-field textarea {
  padding: 12px 13px;
}

.voice-detail-field textarea {
  resize: none;
}

.voice-detail-field code {
  display: block;
  padding: 10px 12px;
  overflow: hidden;
  color: rgba(235, 241, 255, 0.86);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-detail-field small {
  justify-self: end;
  color: rgba(219, 226, 241, 0.52);
}

.voice-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-detail-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(235, 241, 255, 0.76);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.voice-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.voice-detail-actions.persona-detail-actions {
  grid-template-columns: 1fr;
}

.voice-reverify-button {
  justify-self: start;
}

.voice-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  height: var(--voice-row-height, 122px);
  padding: 22px;
  border: 1px dashed rgba(216, 227, 255, 0.22);
  border-radius: 10px;
  color: rgba(219, 226, 241, 0.72);
  text-align: center;
}

.voice-upload-zone,
.voice-consent-card,
.voice-tips-grid article,
.voice-wave-card,
.voice-record-pad {
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.voice-upload-zone {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 20px;
  border-style: dashed;
  text-align: center;
}

.voice-upload-zone h3,
.voice-upload-zone p {
  margin: 0;
}

.voice-upload-zone p,
.voice-recording-status,
.voice-tips-grid span {
  color: rgba(219, 226, 241, 0.7);
}

.voice-choice-actions,
.voice-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 360px);
  margin-inline: auto;
}

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

.voice-choice-actions button {
  min-width: 0;
  white-space: normal;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.voice-choice-actions .solid-button,
.voice-choice-actions .ghost-button,
.voice-step-actions .solid-button,
.voice-step-actions .ghost-button {
  width: 100%;
  min-height: 0;
  height: 44px;
  padding: 5px 12px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: normal;
  line-height: 1.18;
  overflow-wrap: anywhere;
  font-size: clamp(12px, 2.5vw, 14px);
}

.voice-choice-actions .solid-button svg,
.voice-choice-actions .ghost-button svg,
.voice-step-actions .solid-button svg,
.voice-step-actions .ghost-button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.voice-file-label {
  cursor: pointer;
}

.voice-consent-card {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 79, 139, 0.52);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.12), rgba(47, 111, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 12px 30px rgba(255, 79, 139, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: voiceConsentBreath 2.2s ease-in-out infinite;
}

.voice-consent-card.needs-attention {
  border-color: rgba(255, 79, 139, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.2), rgba(139, 92, 246, 0.16), rgba(47, 111, 255, 0.12));
  box-shadow: 0 0 0 3px rgba(255, 79, 139, 0.14), 0 18px 42px rgba(255, 79, 139, 0.15);
}

.voice-consent-card:has(#voiceConsentInput:checked) {
  border-color: rgba(52, 229, 155, 0.56);
  background:
    linear-gradient(135deg, rgba(52, 229, 155, 0.12), rgba(47, 111, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  animation: none;
}

@keyframes voiceConsentBreath {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 0 0 rgba(255, 79, 139, 0.14), 0 12px 30px rgba(255, 79, 139, 0.08);
  }
  50% {
    border-color: rgba(255, 79, 139, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 4px rgba(255, 79, 139, 0.12), 0 18px 46px rgba(255, 79, 139, 0.18);
  }
}

.voice-consent-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.55;
}

.voice-consent-line span {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.voice-consent-line input {
  accent-color: var(--brand-violet);
  transform: translateY(2px);
}

.voice-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.6dvh, 12px);
  margin-top: clamp(6px, 1.6dvh, 16px);
}

.voice-tips-grid article {
  display: grid;
  grid-template-columns: clamp(30px, 5.5dvh, 42px) minmax(0, 1fr);
  gap: clamp(7px, 1.3dvh, 10px);
  padding: clamp(8px, 1.6dvh, 14px);
  align-items: center;
}

.voice-tips-grid i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: clamp(30px, 5dvh, 38px);
  height: clamp(30px, 5dvh, 38px);
  align-self: center;
  justify-self: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.voice-tips-grid strong,
.voice-tips-grid span {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  text-align: left;
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: break-word;
}

.voice-tips-grid strong {
  align-self: end;
  color: #fff;
  font-size: clamp(13px, 1.9dvh, 15px);
  line-height: 1.35;
}

.voice-tips-grid span {
  display: block;
  align-self: start;
  font-size: clamp(12px, 1.65dvh, 14px);
  line-height: 1.5;
}

.voice-wave-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.voice-trim-time {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--grad-action);
  font-weight: 900;
}

.voice-wave-canvas {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 132px;
  border: 1px solid rgba(34, 211, 136, 0.88);
  border-radius: 8px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.voice-wave-canvas.is-dragging {
  z-index: 8;
  cursor: grabbing;
}

body.voice-trim-dragging {
  overflow: hidden;
  touch-action: none;
}

.voice-wave-canvas.is-trim-locked {
  cursor: default;
  border-style: dashed;
  opacity: 0.86;
}

.voice-trim-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.voice-trim-play {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(216, 227, 255, 0.2);
  border-radius: 999px;
  color: #172033;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.voice-trim-play svg {
  width: 20px;
  height: 20px;
}

#voiceTrimPlaybackTime {
  min-width: 48px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 14px;
  font-weight: 900;
}

.voice-record-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  align-items: start;
  gap: 12px;
  padding-inline: 44px;
  margin-bottom: clamp(6px, 1.5dvh, 18px);
  text-align: center;
}

.voice-record-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 3.1dvh, 25px);
}

.voice-record-subtitle {
  margin: 5px 0 0;
  color: rgba(235, 241, 255, 0.68);
  font-size: 13px;
  font-weight: 820;
}

.voice-record-tools {
  display: grid;
  gap: 8px;
}

.voice-record-left {
  display: grid;
  align-content: start;
}

.voice-device-field {
  display: grid;
  gap: 5px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.voice-device-field select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(216, 227, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-device-field select option {
  color: #172033;
  background: #fff;
}

.voice-refresh-phrase {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-color: rgba(139, 92, 246, 0.38);
  color: rgba(255, 255, 255, 0.94);
  min-height: 34px;
  padding-inline: 10px;
  font-size: 12px;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.22), rgba(139, 92, 246, 0.2), rgba(47, 111, 255, 0.18)),
    rgba(20, 30, 48, 0.72);
  backdrop-filter: blur(10px);
}

.voice-refresh-phrase:disabled {
  border-color: rgba(216, 227, 255, 0.12);
  color: rgba(235, 241, 255, 0.58);
  background: rgba(255, 255, 255, 0.065);
  opacity: 1;
  cursor: not-allowed;
}

.voice-record-stage {
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.55dvh, 14px);
  min-height: 0;
  padding: clamp(2px, 0.9dvh, 8px) 0 clamp(5px, 1.4dvh, 16px);
}

.voice-record-time {
  color: rgba(235, 241, 255, 0.7);
  font-size: clamp(16px, 2.8dvh, 22px);
  font-weight: 800;
}

.voice-record-stage p {
  margin: 0;
  color: rgba(235, 241, 255, 0.82);
  font-size: clamp(13px, 2.1dvh, 17px);
  font-weight: 760;
  text-align: center;
}

.voice-phrase-wrap {
  position: relative;
  width: min(100%, 620px);
}

.voice-live-canvas {
  width: 100%;
  height: clamp(48px, 14dvh, 112px);
  border-bottom: 1px dashed rgba(216, 227, 255, 0.16);
}

.voice-panel-controls {
  display: grid;
  grid-template-columns: minmax(0, 130px) clamp(68px, 12dvh, 96px) minmax(0, 130px);
  align-items: center;
  justify-content: center;
  column-gap: clamp(20px, 4.2dvh, 32px);
  row-gap: 10px;
  width: 100%;
}

.voice-record-main {
  justify-self: center;
}

.voice-record-main svg {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.94);
  stroke-width: 2.8;
  filter: drop-shadow(0 2px 4px rgba(190, 18, 60, 0.22));
}

.voice-rerecord-button,
.voice-record-play,
.voice-record-finish,
.voice-verify-upload {
  height: 46px;
  min-height: 0;
}

.voice-record-finish:disabled,
.voice-record-play:disabled,
.voice-rerecord-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.voice-verify-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 168px));
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.voice-verify-actions button {
  min-width: 0;
  padding-inline: 10px;
  white-space: normal;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.voice-verify-upload {
  justify-self: center;
  margin-top: -2px;
  width: 100%;
}

.voice-phrase-compact {
  min-height: clamp(52px, 10dvh, 78px);
  width: 100%;
  padding: clamp(10px, 2dvh, 18px);
  padding-right: clamp(108px, 22vw, 132px);
  border: 1px solid rgba(216, 227, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  font-size: clamp(18px, 4vw, 30px);
}

.voice-phrase-compact.is-loading {
  color: rgba(235, 241, 255, 0.62);
  font-size: clamp(16px, 3vw, 22px);
}

.voice-step-actions {
  margin-top: 18px;
}

.voice-step-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.voice-step-dots span {
  width: 58px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
}

.voice-step-dots span.active {
  background: rgba(255, 255, 255, 0.86);
}

.voice-validation-head {
  position: relative;
}

.voice-language-pill {
  position: absolute;
  right: 12px;
  top: 0;
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 900;
}

.voice-phrase {
  min-height: 118px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 950;
  text-align: center;
}

.voice-record-pad {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 24px 18px;
  border-style: dashed;
}

.voice-record-pad p {
  margin: 0;
  color: rgba(219, 226, 241, 0.72);
}

.voice-record-button {
  width: clamp(62px, 11dvh, 86px);
  height: clamp(62px, 11dvh, 86px);
  border: clamp(6px, 1dvh, 8px) solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: #ff404b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 18px 34px rgba(255, 64, 75, 0.22);
}

.voice-record-button.is-recording,
[data-record-source].is-recording,
[data-record-verify].is-recording {
  animation: voicePulse 1s infinite ease-in-out;
}

@keyframes voicePulse {
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgba(255, 64, 75, 0.14);
  }
}

.voice-modal-backdrop {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 79, 139, 0.16), transparent 32%),
    radial-gradient(circle at 84% 74%, rgba(47, 111, 255, 0.16), transparent 34%),
    rgba(245, 249, 255, 0.72);
  backdrop-filter: blur(14px);
}

.voice-modal {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.92)),
    radial-gradient(circle at 18% 4%, rgba(255, 79, 139, 0.1), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(47, 111, 255, 0.1), transparent 36%);
  box-shadow: 0 34px 90px rgba(47, 84, 158, 0.2);
}

.voice-modal-close,
.voice-modal-back {
  color: var(--muted);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.9)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.28), rgba(139, 92, 246, 0.24), rgba(47, 111, 255, 0.24)) border-box;
  box-shadow: 0 12px 28px rgba(47, 84, 158, 0.13);
}

.voice-modal-back:hover,
.voice-modal-close:hover {
  color: var(--brand-violet);
  background:
    linear-gradient(180deg, #fff, rgba(247, 250, 255, 0.96)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.16);
}

.voice-step-head h2,
.voice-saving-card h2,
.voice-record-head h2,
.voice-item-main strong,
.voice-upload-zone h3,
.voice-tips-grid strong,
.voice-phrase {
  color: var(--ink);
}

.voice-step-head p,
.voice-saving-card p:last-child,
.voice-empty,
.voice-upload-zone p,
.voice-recording-status,
.voice-tips-grid span,
.voice-record-subtitle,
.voice-record-time,
.voice-record-stage p,
.voice-record-pad p,
#voiceTrimPlaybackTime {
  color: var(--muted);
}

.voice-list {
  border-top-color: rgba(47, 111, 255, 0.14);
}

.voice-list-item,
.voice-empty,
.voice-upload-zone,
.voice-tips-grid article,
.voice-wave-card,
.voice-record-pad,
.voice-detail-panel,
.voice-phrase-compact {
  border: 1px solid rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 255, 0.72));
  box-shadow: 0 14px 32px rgba(47, 84, 158, 0.08);
}

.voice-list-item.is-selected {
  outline: 0;
  border: 1px solid rgba(34, 211, 136, 0.58);
  background:
    linear-gradient(135deg, rgba(236, 255, 248, 0.94), rgba(244, 250, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 14px 32px rgba(47, 84, 158, 0.08);
}

.voice-list-item.is-expired {
  opacity: 1;
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.voice-play-button {
  color: #fff;
  background: var(--grad-icon);
  box-shadow: 0 12px 26px rgba(92, 102, 255, 0.18);
}

.voice-expiry {
  color: #65728c;
  background: rgba(238, 244, 255, 0.94);
  border: 1px solid rgba(47, 111, 255, 0.13);
}

.voice-expiry.is-error {
  color: var(--sm-item-error-text);
  background: var(--sm-item-error-pill-bg);
  border-color: var(--sm-item-error-pill-border);
}

.voice-use-button,
.voice-edit-button,
.voice-delete-button,
.voice-refresh-phrase,
.voice-language-pill {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 255, 0.84));
  box-shadow: 0 10px 24px rgba(47, 84, 158, 0.08);
}

.voice-use-button:hover,
.voice-edit-button:hover,
.voice-delete-button:hover,
.voice-refresh-phrase:hover {
  color: var(--brand-violet);
  border-color: rgba(139, 92, 246, 0.32);
}

.voice-refresh-phrase:disabled {
  color: #9aa5b8;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(241, 245, 249, 0.88);
}

.voice-consent-card {
  border-color: rgba(255, 79, 139, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 246, 250, 0.92), rgba(245, 249, 255, 0.88));
  box-shadow: 0 12px 30px rgba(255, 79, 139, 0.08);
}

.voice-consent-card:has(#voiceConsentInput:checked) {
  border-color: rgba(34, 211, 136, 0.5);
  background:
    linear-gradient(135deg, rgba(236, 255, 248, 0.9), rgba(245, 249, 255, 0.86));
}

.voice-consent-line {
  color: var(--ink);
}

.voice-tips-grid i {
  color: var(--brand-violet);
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.12), rgba(47, 111, 255, 0.12));
}

.voice-detail-field {
  color: var(--muted);
}

.voice-detail-field input,
.voice-detail-field textarea,
.voice-detail-field code,
.voice-device-field select {
  color: var(--ink);
  border-color: rgba(47, 111, 255, 0.16);
  background: rgba(255, 255, 255, 0.9);
}

.voice-detail-field code {
  color: var(--muted);
}

.voice-detail-field small,
.voice-detail-meta span,
.voice-device-field {
  color: var(--muted);
}

.voice-detail-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(47, 111, 255, 0.16);
  color: #334155;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 242, 255, 0.9));
  box-shadow: 0 8px 18px rgba(47, 84, 158, 0.08);
}

.voice-spinner {
  border-color: rgba(47, 111, 255, 0.16);
  border-top-color: #ff4f8b;
  border-right-color: #2f6fff;
}

.voice-live-canvas {
  border-bottom-color: rgba(47, 111, 255, 0.16);
}

.voice-wave-canvas {
  background:
    linear-gradient(90deg, rgba(255, 79, 139, 0.08), rgba(47, 111, 255, 0.08));
}

.voice-step-dots span {
  background: rgba(47, 111, 255, 0.16);
}

.voice-step-dots span.active {
  background: var(--grad-action);
}

.voice-modal .icon-button svg,
.voice-modal .ghost-button svg,
.voice-modal .voice-use-button svg,
.voice-modal .voice-edit-button svg,
.voice-modal .voice-delete-button svg,
.voice-modal .voice-modal-close svg,
.voice-modal .voice-modal-back svg {
  color: currentColor;
  stroke: currentColor;
}

.voice-modal-close,
.voice-modal-back,
.voice-edit-button,
.voice-delete-button {
  color: #6b5bff;
}

.voice-tips-grid,
.voice-modal:has(.voice-record-stage) .voice-tips-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.voice-tips-grid article,
.voice-modal:has(.voice-record-stage) .voice-tips-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  gap: 4px 12px;
  min-height: 92px;
  padding: 14px 16px;
  text-align: left;
}

.voice-tips-grid i,
.voice-tips-grid svg,
.voice-modal:has(.voice-record-stage) .voice-tips-grid i,
.voice-modal:has(.voice-record-stage) .voice-tips-grid svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  color: var(--ink);
  stroke: currentColor;
  background: transparent;
}

.voice-tips-grid strong,
.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  grid-column: 2;
  min-width: 0;
  text-align: left;
}

.voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
  align-self: end;
  font-size: 15px;
  line-height: 1.35;
}

.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  display: block;
  align-self: start;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-height: 720px) {
  .voice-modal:has(.voice-record-stage) {
    padding: 12px 16px;
  }

  .voice-device-field {
    gap: 3px;
    font-size: 11px;
  }

  .voice-device-field select {
    min-height: 34px;
  }

  .voice-live-canvas {
    height: 52px;
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 116px) 64px minmax(0, 116px);
    column-gap: 22px;
  }

  .voice-rerecord-button,
  .voice-record-play,
  .voice-record-finish,
  .voice-verify-upload {
    height: 38px;
    min-height: 0;
    font-size: 12px;
  }

  .voice-step-dots {
    margin-top: 8px;
  }
}

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

.voice-modal:has(#voiceValidationPhrase) .voice-modal-content {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.voice-modal:has(#voiceValidationPhrase) .voice-record-stage {
  align-content: center;
}

.voice-modal:has(#voiceValidationPhrase) .voice-step-dots {
  align-self: end;
}

@media (max-width: 680px) {
  .model-voice-stack {
    justify-items: stretch;
    width: min(100%, 230px);
  }

  .model-select-pill,
  .custom-voice-button {
    width: 100%;
  }

  .style-custom-voice-button {
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .voice-modal-shell {
    align-items: end;
    padding: 10px;
  }

  .voice-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 24px 18px;
    border-radius: 14px;
  }

  .voice-modal-content:has(.voice-list) {
    --voice-row-height: 96px;
    row-gap: 12px;
  }

  .voice-create-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
  }

  .voice-create-card svg {
    width: 25px;
    height: 25px;
  }

  .voice-create-card strong {
    font-size: 15px;
  }

  .voice-create-card small {
    font-size: 12px;
  }

  .voice-modal:has(.voice-record-stage) {
    padding: clamp(12px, 2.5dvh, 18px);
  }

  .voice-list-item {
    grid-template-columns: 44px minmax(0, 1fr) 36px 36px;
    gap: 10px;
    height: var(--voice-row-height, 96px);
    padding: 10px 12px;
  }

  .voice-empty {
    height: var(--voice-row-height, 96px);
    padding: 12px;
  }

  .voice-empty strong {
    font-size: 14px;
  }

  .voice-empty span {
    font-size: 12px;
  }

  .voice-record-head {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-head {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.04fr) minmax(0, 0.92fr);
    align-items: start;
    gap: 8px;
    padding: 30px 34px 0;
    margin-bottom: 4px;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-left,
  .voice-modal:has(#voiceValidationPhrase) .voice-record-tools {
    width: 100%;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-head h2 {
    font-size: clamp(17px, 4.2vw, 21px);
    line-height: 1.08;
  }

  .voice-modal:has(#voiceValidationPhrase) .voice-record-subtitle {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  .voice-record-tools {
    width: min(100%, 360px);
    justify-content: center;
  }

  .voice-device-field {
    width: 100%;
    min-width: 0;
    gap: 3px;
    font-size: 10px;
  }

  .voice-device-field select {
    min-width: 0;
    min-height: 32px;
    padding-inline: 7px;
    font-size: 11px;
  }

  .voice-refresh-phrase {
    min-width: 72px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .voice-verify-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 8px;
  }

  .voice-rerecord-button,
  .voice-record-play,
  .voice-record-finish {
    padding-inline: 10px;
    font-size: 13px;
  }

  .voice-edit-button {
    grid-column: 3;
    grid-row: 1;
  }

  .voice-delete-button {
    grid-column: 4;
    grid-row: 1;
  }

  .voice-detail-actions {
    grid-template-columns: 1fr;
  }

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

  .voice-tips-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 7px;
    min-height: 92px;
    padding: 9px 7px;
    text-align: left;
  }

  .voice-tips-grid i {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    align-self: center;
    justify-self: center;
  }

  .voice-tips-grid strong,
  .voice-tips-grid span {
    grid-column: 2;
    text-align: left;
  }

  .voice-tips-grid strong {
    font-size: 12px;
    line-height: 1.22;
  }

  .voice-tips-grid span {
    display: block;
    font-size: 10px;
    line-height: 1.28;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid article {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 82px;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid i {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    align-self: center;
    justify-self: center;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid span {
    display: block;
    grid-column: 2;
    text-align: left;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
    grid-column: 2;
    text-align: left;
  }

  .voice-choice-actions .solid-button,
  .voice-choice-actions .ghost-button,
  .voice-step-actions .solid-button,
  .voice-step-actions .ghost-button {
    width: 100%;
    gap: 6px;
    padding: 5px 9px;
    font-size: clamp(12px, 3vw, 14px);
    white-space: normal;
    line-height: 1.16;
  }

  .voice-language-pill {
    position: static;
    justify-self: center;
  }
}

.voice-step-actions .solid-button,
.voice-step-actions .ghost-button {
  width: 100%;
}

@media (max-height: 680px), (max-width: 420px) {
  .voice-modal:has(.voice-record-stage) .voice-modal-content {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .voice-record-head {
    margin-bottom: 6px;
  }

  .voice-record-head h2 {
    font-size: clamp(18px, 5vw, 22px);
  }

  .voice-record-subtitle {
    margin-top: 2px;
    font-size: 12px;
  }

  .voice-record-tools {
    gap: 6px;
  }

  .voice-device-field {
    gap: 2px;
    font-size: 10px;
  }

  .voice-device-field select {
    min-height: 32px;
  }

  .voice-phrase-compact {
    min-height: 48px;
    padding: 9px 92px 9px 10px;
    font-size: clamp(16px, 4.2vw, 24px);
  }

  .voice-record-time {
    font-size: 16px;
  }

  .voice-record-stage p {
    font-size: 12px;
  }

  .voice-live-canvas {
    height: 48px;
  }

  .voice-panel-controls {
    grid-template-columns: minmax(0, 108px) 58px minmax(0, 108px);
    column-gap: 22px;
    row-gap: 7px;
  }

  .voice-record-button {
    width: 58px;
    height: 58px;
  }

  .voice-rerecord-button,
  .voice-record-play,
  .voice-record-finish,
  .voice-verify-upload {
    height: 34px;
    min-height: 0;
    font-size: 11px;
  }
}

.voice-tips-grid,
.voice-modal:has(.voice-record-stage) .voice-tips-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.voice-tips-grid article,
.voice-modal:has(.voice-record-stage) .voice-tips-grid article {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  gap: 4px 12px;
  min-height: 92px;
  padding: 14px 16px;
  text-align: left;
}

.voice-tips-grid i,
.voice-tips-grid svg,
.voice-modal:has(.voice-record-stage) .voice-tips-grid i,
.voice-modal:has(.voice-record-stage) .voice-tips-grid svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  color: var(--ink);
  stroke: currentColor;
  background: transparent;
}

.voice-tips-grid strong,
.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  grid-column: 2;
  text-align: left;
}

.voice-tips-grid strong,
.voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
  align-self: end;
  font-size: 15px;
  line-height: 1.35;
}

.voice-tips-grid span,
.voice-modal:has(.voice-record-stage) .voice-tips-grid span {
  align-self: start;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .voice-tips-grid,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid {
    gap: 8px;
    margin-top: 8px;
  }

  .voice-tips-grid article,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 82px;
    padding: 9px 8px;
    gap: 3px 8px;
  }

  .voice-tips-grid i,
  .voice-tips-grid svg,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid i,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid svg {
    width: 18px;
    height: 18px;
  }

  .voice-tips-grid strong,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
    font-size: 12px;
    line-height: 1.22;
  }

  .voice-tips-grid span,
  .voice-modal:has(.voice-record-stage) .voice-tips-grid span {
    font-size: 10px;
    line-height: 1.28;
  }
}

.page-section {
  position: relative;
  z-index: auto;
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding: 96px clamp(18px, 4vw, 56px) 42px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: transparent;
}

body.player-open .page-section {
  padding-bottom: max(42px, 88px);
}

@media (min-width: 681px) {
  body.player-open .page-section {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding-top: 78px;
    padding-bottom: 112px;
  }
}

.page-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(49, 87, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.55));
}

.intro-page {
  background: transparent;
}

.intro-page::before {
  background-image:
    linear-gradient(rgba(49, 87, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 62%, transparent 100%);
}

.intro-shell {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
}

.intro-shell .hero-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(790px, 100%);
  margin: 32px auto 24px;
}

.hero-muse-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr);
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(122, 93, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(39, 53, 106, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hero-muse-form:focus-within {
  border-color: rgba(139, 92, 246, 0.54);
  box-shadow: 0 22px 52px rgba(70, 76, 154, 0.16), 0 8px 22px rgba(255, 79, 139, 0.1);
  transform: translateY(-2px);
}

.hero-muse-input-shell {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 7px 14px;
  border: 1px solid rgba(47, 111, 255, 0.15);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.92);
  cursor: text;
}

.hero-muse-input-shell > svg {
  width: 22px;
  height: 22px;
  color: var(--brand-violet);
  stroke-width: 1.9;
}

.hero-muse-field {
  display: grid;
  min-width: 0;
  text-align: left;
}

.hero-muse-label {
  color: #4e5680;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

#heroMuseInput {
  width: 100%;
  min-width: 0;
  height: 45px;
  min-height: 45px;
  resize: none;
  overflow-wrap: anywhere;
  padding: 3px 0 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 21px;
  font-weight: 650;
  letter-spacing: 0;
}

#heroMuseInput::placeholder {
  color: #798399;
  font-weight: 550;
  opacity: 1;
}

.hero-cta {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(79, 75, 207, 0.24), 0 8px 20px rgba(255, 79, 139, 0.16);
  filter: saturate(1.08);
}

.hero-cta:active {
  transform: translateY(0);
}

.hero-cta:focus-visible,
#heroMuseInput:focus-visible {
  outline: 3px solid rgba(32, 189, 233, 0.34);
  outline-offset: 3px;
}

.hero-muse-scenes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 9px 12px 0;
  color: #68728a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
}

.hero-muse-scenes svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--brand-violet);
  stroke-width: 2;
}

.hero-muse-scenes span,
.hero-muse-scenes svg,
.hero-muse-scenes [data-lucide] {
  display: block;
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}

.hero-muse-scenes.is-changing span,
.hero-muse-scenes.is-changing svg,
.hero-muse-scenes.is-changing [data-lucide] {
  opacity: 0;
  transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-muse-scenes span,
  .hero-muse-scenes svg,
  .hero-muse-scenes [data-lucide] {
    transition: none;
  }
}

.intro-shell .hero-metrics {
  justify-content: center;
}

.hero {
  position: relative;
  min-height: 91vh;
  overflow: hidden;
  padding: 112px clamp(18px, 4vw, 56px) 36px;
  background:
    linear-gradient(120deg, rgba(0, 200, 255, 0.16), transparent 32%),
    linear-gradient(300deg, rgba(255, 72, 111, 0.16), transparent 34%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 56%, #fff6ec 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(49, 87, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.7) 54%, transparent 100%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, #ffffff);
}

.tech-field {
  position: absolute;
  inset: 82px 0 0;
  pointer-events: none;
  z-index: 0;
}

.signal-panel {
  position: absolute;
  display: flex;
  align-items: end;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(49, 87, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 54px rgba(0, 200, 255, 0.13);
  backdrop-filter: blur(12px);
  opacity: 0.56;
}

.signal-panel span {
  width: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--coral), var(--aqua));
  animation: signalPulse 1.2s infinite ease-in-out alternate;
}

.signal-panel span:nth-child(1) { height: 28px; }
.signal-panel span:nth-child(2) { height: 62px; animation-delay: 0.12s; }
.signal-panel span:nth-child(3) { height: 42px; animation-delay: 0.24s; }
.signal-panel span:nth-child(4) { height: 76px; animation-delay: 0.36s; }
.signal-panel span:nth-child(5) { height: 36px; animation-delay: 0.48s; }
.signal-panel span:nth-child(6) { height: 54px; animation-delay: 0.6s; }

.panel-a {
  right: clamp(14px, 3vw, 52px);
  top: clamp(118px, 14vh, 158px);
  transform: scale(0.66) rotate(2deg);
}

.panel-b {
  left: clamp(18px, 4vw, 58px);
  bottom: clamp(42px, 8vh, 96px);
  transform: scale(0.56) rotate(-3deg);
  opacity: 0.34;
}

.sound-rings {
  position: absolute;
  left: clamp(14px, 3vw, 44px);
  top: clamp(8px, 3vh, 30px);
  width: 132px;
  height: 132px;
  opacity: 0.28;
}

.sound-rings span {
  position: absolute;
  border: 1px solid rgba(138, 92, 255, 0.28);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-18deg);
}

.sound-rings span:nth-child(1) {
  inset: 0;
  border-color: rgba(255, 72, 111, 0.28);
}

.sound-rings span:nth-child(2) {
  inset: 30px;
  border-color: rgba(0, 200, 255, 0.34);
}

.sound-rings span:nth-child(3) {
  inset: 56px;
  border-color: rgba(52, 229, 155, 0.36);
}

.album-stack {
  position: absolute;
  right: clamp(12px, 3vw, 44px);
  bottom: clamp(42px, 8vh, 98px);
  width: 126px;
  height: 126px;
  opacity: 0.38;
}

.album-stack span {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(13, 23, 54, 0.16);
}

.album-stack span:nth-child(1) {
  left: 0;
  top: 22px;
  background: linear-gradient(135deg, var(--lemon), var(--coral));
  transform: rotate(-12deg);
}

.album-stack span:nth-child(2) {
  left: 24px;
  top: 4px;
  background: linear-gradient(135deg, var(--aqua), var(--blue));
  transform: rotate(8deg);
}

.album-stack span:nth-child(3) {
  left: 38px;
  top: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent),
    linear-gradient(135deg, var(--mint), var(--violet));
  transform: rotate(18deg);
}

@keyframes signalPulse {
  to {
    transform: scaleY(0.48);
    filter: hue-rotate(34deg);
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(390px, 540px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
}

.hero-copy {
  max-width: 660px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 0.96;
  font-weight: 950;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.04;
}

h3 {
  margin-bottom: 8px;
}

.hero-subtitle {
  max-width: 580px;
  color: #293247;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.7;
}

.hero-metrics {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-metrics span {
  padding: 10px 14px;
  border: 1px solid rgba(16, 20, 38, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(13, 23, 54, 0.08);
}

.hero-metrics strong {
  color: var(--coral);
}

.studio-panel {
  position: relative;
  height: 100%;
  padding: clamp(14px, 2vh, 20px);
  border: 1px solid rgba(49, 87, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.76)),
    linear-gradient(135deg, rgba(0, 200, 255, 0.12), rgba(255, 72, 111, 0.1));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.extend-modal-shell {
  padding-block: 12px;
}

.extend-modal {
  width: min(1180px, calc(100vw - 32px));
  height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.92)),
    radial-gradient(circle at 16% 20%, rgba(255, 79, 139, 0.14), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(47, 111, 255, 0.16), transparent 34%);
}

.extend-modal-content {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.extend-step-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.extend-step-head h2 {
  margin-bottom: 6px;
  font-size: 32px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.extend-step-head p:not(.section-kicker) {
  margin: 0;
  color: #647086;
  font-weight: 700;
  line-height: 1.6;
}

.extend-modal-pages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  gap: 14px;
  overflow: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: none;
  padding: 1px 4px 1px 1px;
}

.extend-page {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  scroll-snap-align: none;
}

.extend-page-compose {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.extend-page-style {
  align-items: stretch;
}

.extend-form-panel,
.extend-style-panel,
.extend-source-card,
.extend-mood-card {
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 251, 255, 0.82));
}

.extend-form-panel,
.extend-style-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.extend-style-panel {
  --field-text-size: 13px;
}

.extend-form-panel {
  gap: 8px;
  padding: 12px;
  font-size: 12px;
}

.extend-form-panel input,
.extend-form-panel textarea {
  font-size: 14px;
}

.extend-form-panel input[type="text"] {
  height: 40px;
}

.extend-form-panel textarea {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
}

.extend-form-panel .field-block {
  gap: 6px;
  margin-bottom: 0;
  min-height: 0;
}

.extend-form-panel .field-block:has(#extendTitle) {
  flex: 0 0 auto;
}

.extend-form-panel .field-block:has(#extendPrompt),
.extend-form-panel .field-block:has(#extendLyrics) {
  flex: 1 1 0;
}

.extend-form-panel .field-block:has(#extendPrompt) {
  flex-grow: 1.05;
  min-height: 146px;
}

.extend-form-panel .field-block:has(#extendLyrics) {
  flex-grow: 1.35;
  min-height: 116px;
}

.extend-form-panel .field-line {
  gap: 6px;
}

.extend-form-panel .text-tool-button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.extend-form-panel .inspiration-tags {
  gap: 6px;
}

.extend-form-panel .extend-inspiration-row {
  --extend-inspiration-gap: 6px;
  --extend-inspiration-height: 26px;
  width: 100%;
  max-height: calc((var(--extend-inspiration-height) * 2) + var(--extend-inspiration-gap));
  align-items: center;
  align-content: flex-start;
  gap: var(--extend-inspiration-gap);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.extend-form-panel .extend-inspiration-row .text-tool-button,
.extend-form-panel .extend-inspiration-row .inspiration-tag {
  min-width: 0;
  height: var(--extend-inspiration-height);
  min-height: var(--extend-inspiration-height);
  max-height: var(--extend-inspiration-height);
  flex: 0 1 auto;
  white-space: nowrap;
}

.extend-form-panel .extend-inspiration-row .text-tool-button {
  max-width: 46%;
  padding-inline: 8px;
  overflow: hidden;
}

.extend-form-panel .extend-inspiration-row .text-tool-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.extend-form-panel .extend-inspiration-row.is-compact .text-tool-button,
.extend-form-panel .extend-inspiration-row.is-compact .inspiration-tag {
  padding-inline: 5px;
  font-size: 10px;
}

.extend-form-panel .extend-inspiration-row.is-tight .text-tool-button,
.extend-form-panel .extend-inspiration-row.is-tight .inspiration-tag {
  gap: 3px;
  padding-inline: 4px;
  font-size: 8.5px;
  letter-spacing: 0;
}

.extend-form-panel .inspiration-tag {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.extend-source-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  container: extend-source / inline-size;
}

.extend-source-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.extend-source-head h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.extend-source-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-right: clamp(8px, 2.2vw, 26px);
  min-width: 0;
  flex: 0 0 auto;
}

.extend-source-play {
  flex: 0 0 auto;
}

.ghost-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 999px;
  color: #5f54f5;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.ghost-chip-button svg {
  width: 15px;
  height: 15px;
}

.extend-wave-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.08), rgba(34, 211, 238, 0.08)),
    rgba(255, 255, 255, 0.76);
  overflow: hidden;
}

.extend-wave-card::before,
.extend-wave-card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 1;
  height: 18px;
  pointer-events: none;
}

.extend-wave-card::before {
  top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent);
}

.extend-wave-card::after {
  bottom: 10px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.52), transparent);
}

.extend-time-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.6ch;
  width: 5.6ch;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  border-radius: 8px;
  color: #ffffff;
  font: inherit;
  font-weight: 950;
  text-align: center;
  background: linear-gradient(135deg, #ec4e9a, #7c5cff, #2f6fff);
  box-shadow: 0 12px 22px rgba(139, 92, 246, 0.2);
}

.extend-time-inline input.extend-time-pill {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  box-sizing: border-box;
}

.extend-time-pill:focus {
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.22),
    0 12px 22px rgba(139, 92, 246, 0.2);
}

.extend-time-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  color: #364258;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.extend-wave-canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 84px;
  border: 1px solid rgba(16, 185, 129, 0.72);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 79, 139, 0.09), rgba(47, 111, 255, 0.1), rgba(34, 211, 238, 0.09));
  cursor: ew-resize;
  touch-action: none;
}

.extend-mood-card {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
}

.extend-chip-group button:not(.style-chip):not(.instrument-chip) {
  height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: 999px;
  color: #374158;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.extend-chip-group button.active:not(.style-chip):not(.instrument-chip) {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #ec4e9a, #7c5cff, #2f6fff);
  box-shadow: 0 10px 18px rgba(124, 92, 255, 0.2);
}

.extend-submit-button {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
}

.extend-title-language-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(max-content, 34%);
  gap: 10px;
  align-items: end;
}

.extend-language-mount,
.extend-mixer-mount {
  min-width: 0;
  min-height: 0;
}

.extend-language-mount > .extend-shared-language-field {
  width: 100%;
  margin: 0;
}

.extend-language-mount select {
  width: 100%;
}

.extend-form-panel .textarea-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.extend-form-panel .textarea-shell textarea {
  width: 100%;
  height: 100%;
}

.extend-mixer-mount {
  height: 100%;
}

.extend-mixer-mount > .extend-shared-mixer {
  width: 100%;
  height: 100%;
  max-height: none;
}

.extend-shared-mixer .mixer-persona-entry,
.extend-shared-mixer .studio-custom-voice-button {
  display: none;
}

.extend-shared-mixer .cost-note {
  display: none;
}

.extend-shared-mixer .mixer-voice-actions-row {
  grid-template-columns: minmax(0, 1fr);
}

.style-lab-panel .custom-voice-button[hidden] {
  display: none;
}

@media (max-width: 680px), (min-width: 681px) and (max-width: 980px) and (max-height: 720px) {
  .extend-modal {
    width: min(100vw - 14px, 540px);
    height: calc(100svh - 14px);
    max-height: calc(100svh - 14px);
  }

  .extend-modal-content {
    height: 100%;
    gap: 10px;
    overflow: hidden;
  }

  .extend-step-head {
    padding: 0 42px;
  }

  .extend-step-head h2 {
    margin-bottom: 3px;
    font-size: 24px;
  }

  .extend-step-head p:not(.section-kicker) {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .extend-modal-pages {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 0;
  }

  .extend-page {
    flex: 0 0 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .extend-form-panel,
  .extend-style-panel {
    padding: 12px;
  }

  .extend-form-panel {
    gap: 6px;
    padding: 8px;
    font-size: 11px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .extend-form-panel input,
  .extend-form-panel textarea {
    font-size: 13px;
  }

  .extend-form-panel input[type="text"] {
    height: 36px;
  }

  .extend-form-panel .text-tool-button {
    min-height: 26px;
    padding: 0 9px;
    font-size: 10.5px;
  }

  .extend-form-panel .inspiration-tag {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  .extend-form-panel textarea {
    min-height: 0;
  }

  .extend-form-panel .field-block:has(#extendPrompt),
  .extend-form-panel .field-block:has(#extendLyrics),
  .extend-form-panel .textarea-shell {
    overflow: hidden;
  }

  .extend-form-panel .textarea-shell textarea {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .extend-title-language-row {
    grid-template-columns: minmax(0, 1fr) minmax(max-content, 38%);
    gap: 7px;
  }

  .extend-source-card,
  .extend-mood-card {
    padding: 6px;
  }

  .extend-source-card {
    gap: 5px;
  }

  .extend-source-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .extend-source-head h3 {
    font-size: 16px;
  }

  .extend-source-controls {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: 0;
  }

  .extend-source-play {
    width: 34px;
    height: 34px;
  }

  .extend-wave-card {
    gap: 4px;
    padding: 6px;
  }

  .extend-time-inline {
    gap: 5px;
    font-size: 10.5px;
  }

  .extend-time-pill {
    min-width: 5.6ch;
    width: 5.6ch;
    min-height: 28px;
    padding: 0 7px;
    font-size: 12px;
  }

  .extend-time-inline input.extend-time-pill {
    flex-basis: 56px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
  }

  .extend-wave-canvas {
    height: 46px;
  }

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

  .extend-chip-group {
    gap: 7px;
  }

  .extend-chip-group button:not(.style-chip):not(.instrument-chip) {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
}

@media (min-width: 681px) and (max-height: 720px) {
  .extend-modal-shell {
    padding: 7px;
  }
}

.create-page {
  background: transparent;
}

.create-layout {
  position: relative;
  z-index: 2;
  container: create-workspace / inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  height: var(--desktop-panel-height);
  min-height: 500px;
  max-height: var(--desktop-panel-height);
}

.create-layout > .studio-panel,
.create-layout > .style-lab-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: none;
}

.create-layout.no-history {
  grid-template-columns: minmax(420px, 560px);
  justify-content: center;
}

.create-layout.no-history .result-panel {
  display: none;
}

.result-panel,
.style-lab-panel,
.lyrics-stage-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  max-height: calc(100vh - 150px);
  overflow: hidden;
  padding: clamp(14px, 2vh, 18px);
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.88));
  box-shadow: 0 18px 48px rgba(13, 23, 54, 0.08);
}

.style-lab-panel {
  --right-control-gap: 10px;
  --field-text-size: 13px;
  gap: clamp(10px, 1.4vh, 14px);
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 249, 255, 0.82)),
    radial-gradient(circle at 20% 20%, rgba(255, 79, 139, 0.14), transparent 32%),
    radial-gradient(circle at 86% 14%, rgba(47, 111, 255, 0.14), transparent 34%);
}

@media (min-width: 681px) {
  .create-page {
    padding-top: clamp(76px, 10vh, 92px);
    padding-bottom: clamp(18px, 3vh, 28px);
  }

  .create-layout {
    height: var(--desktop-panel-height);
    min-height: 0;
    max-height: var(--desktop-panel-height);
    gap: clamp(18px, 3vw, 42px);
  }

  body.player-open .create-layout,
  body.player-open .history-layout {
    height: var(--desktop-player-panel-height);
    min-height: var(--desktop-player-panel-min-height);
    max-height: var(--desktop-player-panel-height);
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel {
    min-height: 0;
    overflow: hidden;
  }

  .create-layout > .studio-panel {
    display: flex;
    flex-direction: column;
  }

  .create-layout > .studio-panel .field-block {
    flex: 0 0 auto;
  }

  .create-layout > .studio-panel .lyrics-field {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    margin-bottom: 0;
    overflow: hidden;
  }

  .create-layout > .studio-panel .lyrics-field .textarea-shell {
    flex: 1 1 0;
    min-height: 0;
  }

  .create-layout > .studio-panel .lyrics-field textarea {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .create-layout > .studio-panel .lyrics-field .studio-lyrics-actions {
    flex: 0 0 auto;
    margin-top: 8px;
  }

  .style-lab-panel {
    --field-text-size: 12px;
    gap: clamp(7px, 1vh, 10px);
    padding: clamp(12px, 1.6vh, 16px);
    overflow: hidden;
  }

  .style-lab-panel h3,
  .extend-style-panel h3 {
    margin-bottom: 4px;
    font-size: clamp(21px, 2vw, 24px);
  }

  .style-lab-panel p,
  .extend-style-panel p {
    font-size: 12px;
    line-height: 1.38;
  }

  .style-lab-panel .chips-group,
  .extend-style-panel .chips-group {
    gap: 7px;
    margin-bottom: 0;
  }

  .style-lab-panel .style-chip,
  .style-lab-panel .instrument-chip,
  .extend-style-panel .extend-style-chip,
  .extend-style-panel .extend-instrument-chip {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .style-lab-panel .mood-map,
  .extend-style-panel .mood-map {
    min-height: clamp(138px, 22vh, 172px);
  }

  .style-lab-panel .mood-readout,
  .extend-style-panel .mood-readout {
    gap: 8px;
  }

  .style-lab-panel .mood-readout span,
  .extend-style-panel .mood-readout span {
    padding: 7px 10px;
    font-size: 12px;
  }

  .style-lab-panel .right-control-grid,
  .extend-style-panel .right-control-grid {
    gap: 9px;
  }

  .style-lab-panel .field-block,
  .extend-style-panel .field-block {
    gap: 5px;
    margin-bottom: 0;
  }

  .style-lab-panel select,
  .extend-style-panel select {
    height: 40px;
  }

  .style-submit-row {
    gap: 7px;
  }

  .style-submit-row .generate-button {
    min-height: 40px;
  }

  .style-submit-row .cost-note {
    font-size: 11px;
    line-height: 1.35;
  }
}

.style-lab-panel h3,
.extend-style-panel h3,
.lyrics-stage-panel h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.style-lab-panel p,
.extend-style-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.style-lab-chips {
  margin-bottom: 0;
}

.field-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.text-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.96), rgba(139, 92, 246, 0.94), rgba(39, 177, 255, 0.96)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)) border-box;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.2);
  font-size: 12px;
  font-weight: 900;
}

.text-tool-button :where(span, svg, i),
.generate-button :where(span, svg, i),
.solid-button :where(span, svg, i) {
  color: inherit;
  stroke: currentColor;
}

.text-tool-button > svg,
.text-tool-button > i {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 1.35em;
}

.text-tool-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255, 79, 139, 0.18), 0 10px 24px rgba(39, 177, 255, 0.16);
}

.text-tool-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

#inspirationButton:disabled .lucide-loader-circle {
  animation: global-loading-spin 0.75s linear infinite;
  transform-origin: center;
}

.inspiration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

.inspiration-tags:empty {
  display: none;
}

.studio-inspiration-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.studio-inspiration-row .text-tool-button {
  flex: 0 0 auto;
}

.studio-inspiration-row .inspiration-tags {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

.inspiration-tag {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #2f3654;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.84)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.55), rgba(139, 92, 246, 0.5), rgba(39, 177, 255, 0.5)) border-box;
  box-shadow: 0 8px 18px rgba(49, 87, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
  text-transform: capitalize;
}

.inspiration-tag:hover {
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.18);
}

.mood-map {
  position: relative;
  min-height: 178px;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(247, 251, 255, 0.68)) padding-box,
    radial-gradient(circle at 82% 18%, rgba(255, 79, 139, 0.15), transparent 34%) padding-box,
    radial-gradient(circle at 20% 82%, rgba(32, 189, 233, 0.16), transparent 36%) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.36), rgba(139, 92, 246, 0.34), rgba(47, 111, 255, 0.34)) border-box;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 12px 28px rgba(49, 87, 255, 0.06);
  touch-action: none;
  user-select: none;
}

.mood-map:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.24);
  outline-offset: 3px;
}

.mood-map::before,
.mood-map::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.mood-map::before {
  inset: 0;
  background:
    linear-gradient(0deg, rgba(47, 111, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(139, 92, 246, 0.2) calc(50% - 0.5px), rgba(139, 92, 246, 0.2) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(139, 92, 246, 0.2) calc(50% - 0.5px), rgba(139, 92, 246, 0.2) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

.mood-map::after {
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 6px;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.18) 50%, transparent 72%);
  opacity: 0.72;
  animation: moodBreath 4.6s ease-in-out infinite;
}

.mood-axis {
  position: absolute;
  z-index: 2;
  color: rgba(39, 49, 74, 0.66);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.mood-axis-x {
  left: 50%;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
  white-space: nowrap;
}

.mood-axis-y {
  left: 10px;
  top: 50%;
  display: grid;
  width: 44px;
  height: 112px;
  grid-template-rows: repeat(4, auto);
  place-items: center;
  align-content: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  line-height: 1.05;
  transform: translateY(-50%);
}

.mood-axis-y em {
  display: grid;
  width: 100%;
  color: rgba(39, 49, 74, 0.76);
  font-style: normal;
  text-align: center;
}

.mood-axis-y b {
  display: grid;
  width: 100%;
  font-style: normal;
  text-align: center;
}

.mood-axis-y i {
  display: grid;
  width: 100%;
  font-style: normal;
  justify-items: center;
  text-align: center;
  line-height: 1;
}

.mood-axis-x em {
  color: rgba(39, 49, 74, 0.76);
  font-style: normal;
}

.mood-axis-x b,
.mood-axis-x i {
  font-style: normal;
}

.mood-quadrant {
  position: absolute;
  z-index: 1;
  display: none;
  padding: 0;
  color: rgba(39, 49, 74, 0.3);
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
}

.mood-quadrant.top-left { top: 12px; left: 64px; }
.mood-quadrant.top-right { top: 12px; right: 14px; }
.mood-quadrant.bottom-left { bottom: 42px; left: 64px; }
.mood-quadrant.bottom-right { right: 14px; bottom: 42px; }

.mood-trace {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 28px rgba(255, 79, 139, 0.035),
    0 0 0 56px rgba(47, 111, 255, 0.026);
  opacity: 0.78;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.18s ease, top 0.18s ease;
  animation: moodTraceBreath 3.4s ease-in-out infinite;
}

.mood-dot {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: var(--grad-action);
  box-shadow:
    0 0 0 5px rgba(139, 92, 246, 0.08),
    0 8px 18px rgba(139, 92, 246, 0.24),
    0 2px 0 rgba(255, 255, 255, 0.7) inset;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: left 0.16s ease, top 0.16s ease, box-shadow 0.16s ease;
  animation: moodPulse 2.4s ease-in-out infinite;
}

.mood-map.is-dragging {
  cursor: grabbing;
}

.mood-map.is-dragging .mood-dot {
  box-shadow:
    0 0 0 8px rgba(255, 79, 139, 0.12),
    0 10px 24px rgba(255, 79, 139, 0.24),
    0 2px 0 rgba(255, 255, 255, 0.7) inset;
  transition: none;
  animation: none;
}

@keyframes moodBreath {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.82; }
}

@keyframes moodTraceBreath {
  0%, 100% { box-shadow: 0 0 0 24px rgba(255, 79, 139, 0.03), 0 0 0 48px rgba(47, 111, 255, 0.02); }
  50% { box-shadow: 0 0 0 34px rgba(255, 79, 139, 0.045), 0 0 0 66px rgba(47, 111, 255, 0.03); }
}

@keyframes moodPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.08), 0 8px 18px rgba(139, 92, 246, 0.24), 0 2px 0 rgba(255, 255, 255, 0.7) inset; }
  50% { box-shadow: 0 0 0 9px rgba(47, 111, 255, 0.06), 0 10px 22px rgba(255, 79, 139, 0.2), 0 2px 0 rgba(255, 255, 255, 0.7) inset; }
}

.mood-map {
  position: relative;
  isolation: auto;
  min-height: 178px;
  border: 1px solid rgba(49, 87, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(57, 191, 255, 0.09), rgba(255, 79, 139, 0.09)),
    linear-gradient(0deg, rgba(84, 91, 120, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 91, 120, 0.08) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  box-shadow: none;
  cursor: crosshair;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.mood-map::before,
.mood-map::after {
  content: "";
  position: absolute;
  z-index: auto;
  background: rgba(49, 87, 255, 0.18);
  pointer-events: none;
  animation: none;
}

.mood-map::before {
  left: 50%;
  top: 12px;
  right: auto;
  bottom: 12px;
  width: 1px;
  height: auto;
  border: 0;
  border-radius: 0;
}

.mood-map::after {
  left: 12px;
  right: 12px;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 1px;
  border: 0;
  border-radius: 0;
  opacity: 1;
}

.mood-axis {
  position: absolute;
  z-index: 1;
  color: rgba(39, 49, 74, 0.62);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.mood-axis-x {
  left: 14px;
  right: 14px;
  bottom: 10px;
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  transform: none;
  white-space: normal;
}

.mood-axis-y {
  left: 12px;
  top: 16px;
  display: grid;
  width: auto;
  min-width: 40px;
  min-height: 0;
  gap: 2px;
  justify-items: stretch;
  padding: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.05;
  transform: none;
}

.mood-axis-y em {
  display: block;
  width: auto;
  margin-bottom: 2px;
  color: rgba(39, 49, 74, 0.72);
  font-style: normal;
  text-align: left;
}

.mood-axis-y b {
  display: block;
  width: auto;
  font-style: normal;
  text-align: left;
}

.mood-axis-y i {
  display: block;
  width: auto;
  font-style: normal;
  text-align: center;
}

.mood-axis-x em,
.mood-axis-x b,
.mood-axis-x i {
  font-style: normal;
}

.mood-quadrant,
.mood-trace {
  display: none;
}

.mood-dot {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: var(--grad-action);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.3);
  cursor: crosshair;
  transform: translate(-50%, -50%);
  transition: left 0.16s ease, top 0.16s ease, box-shadow 0.16s ease;
  animation: none;
}

.mood-map.is-dragging {
  cursor: crosshair;
}

.mood-map.is-dragging .mood-dot {
  box-shadow: 0 12px 34px rgba(255, 79, 139, 0.28);
  transition: none;
  animation: none;
}

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

.mood-readout span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  color: #33394a;
  background: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.mood-readout b {
  min-width: 0;
  color: var(--blue);
  font-size: 0.92em;
  text-align: right;
  white-space: nowrap;
}

.right-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--right-control-gap);
}

.style-submit-row {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.range-field {
  margin-bottom: 0;
}

.range-field span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.range-field b {
  color: var(--blue);
}

.range-field input[type="range"] {
  accent-color: var(--brand-violet);
}

.structure-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.structure-chip {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: #33394a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.structure-chip.active {
  color: #ffffff;
  border-color: transparent;
  background: var(--grad-action);
  box-shadow: 0 10px 22px rgba(139, 92, 246, 0.18);
}

.mood-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mood-suggestions span {
  padding: 6px 9px;
  border: 1px solid rgba(47, 111, 255, 0.14);
  border-radius: 999px;
  color: #27314a;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 900;
}

.history-page {
  background: transparent;
}

.history-layout {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  height: var(--desktop-panel-height);
  min-height: var(--desktop-panel-min-height);
  max-height: var(--desktop-panel-height);
}

.history-layout > .result-panel,
.history-layout > .lyrics-stage-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: none;
}

.lyrics-stage-panel {
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(247, 250, 255, 0.86));
}

.history-prompt-box {
  display: flex;
  min-height: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255, 79, 139, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.07), rgba(139, 92, 246, 0.07), rgba(47, 111, 255, 0.07)),
    rgba(255, 255, 255, 0.66);
}

.history-prompt-box span {
  color: var(--brand-violet);
  font-size: 12px;
  font-weight: 950;
}

.history-prompt-box div {
  min-height: 0;
  overflow-y: auto;
  color: #465168;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.7;
  white-space: pre-wrap;
}

.synced-lyrics {
  display: grid;
  gap: 8px;
  min-height: 0;
  flex: 2 1 0;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.synced-lyrics p {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #647086;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.75;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.synced-lyrics p.active {
  color: #111827;
  background:
    linear-gradient(90deg, rgba(255, 79, 139, 0.12), rgba(139, 92, 246, 0.12), rgba(47, 111, 255, 0.12));
  transform: translateX(2px);
}

.result-panel h2 {
  line-height: normal;
}

.result-panel h2,
.result-panel h3 {
  margin-bottom: 14px;
  font-size: 24px;
}

.history-mini {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.history-mini h3,
.history-mini p {
  margin: 0;
}

.history-mini p {
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px dashed rgba(49, 87, 255, 0.22);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
}

.empty-state p {
  margin: 0;
  line-height: 1.55;
}

.studio-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.28), transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 72, 111, 0.22), transparent) 0 0 / 1px 100% no-repeat;
}

.panel-head {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(6px, 0.9vh, 10px);
}

.panel-head h1 {
  font-weight: 700;
}

.panel-head h1,
.panel-head h2 {
  margin: 0;
  font-size: 28px;
}

.panel-heading-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.panel-heading-copy.is-seo-subtitle-hidden .panel-seo-subtitle {
  display: none !important;
}

.panel-seo-subtitle {
  max-width: 40ch;
  margin: 0;
  overflow-wrap: anywhere;
  color: #66728a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.credit-pill,
.model-select-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #7d4100;
  background: #fff0b8;
  font-size: 13px;
  font-weight: 900;
}

.model-select-pill {
  color: #18223a;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(255, 74, 145, 0.78), rgba(111, 82, 255, 0.82), rgba(32, 198, 255, 0.72)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px rgba(94, 89, 255, 0.12);
}

.model-select-pill svg {
  width: 16px;
  height: 16px;
  color: #ff4a91;
}

.model-select-pill span {
  white-space: nowrap;
}

.model-select-pill em {
  position: absolute;
  top: -9px;
  right: -8px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(20, 184, 166, 0.18);
}

.model-select-pill em.is-vip {
  background: linear-gradient(135deg, #ec4e9a, #8a5cf6 58%, #326cff);
  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.22);
}

.model-select-pill select {
  width: auto;
  min-width: 7ch;
  height: 28px;
  padding: 0 0 0 8px;
  border: 0;
  border-radius: 7px;
  color: #3154ff;
  background: rgba(246, 248, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
  field-sizing: content;
}

.model-select-pill.is-locked select {
  color: #8d95aa;
  background: #f2f4f8;
}

/* Native options include access tiers; the fixed closed face only shows the model. */
#studio .model-select-control {
  position: relative;
  display: inline-grid;
  min-width: 0;
  max-width: none;
  overflow: visible;
  border-radius: 7px;
  font-size: clamp(11px, 1.6cqh, 13px);
}

#studio .model-select-control select {
  width: calc(4.9em + 22px);
  padding-inline: 4px;
  field-sizing: fixed;
  opacity: 0;
  cursor: pointer;
}

#studio .model-select-control select,
#studio .model-select-control option {
  text-align: left;
  text-align-last: left;
}

#studio .model-select-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  max-width: none;
  padding: 0 4px 0 8px;
  border-radius: inherit;
  color: #3154ff;
  background: rgba(246, 248, 255, 0.92);
  font-size: inherit;
  pointer-events: none;
}

#musicModelDisplay {
  font: inherit;
  white-space: nowrap;
}

#studio .model-select-caption svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: inherit;
}

#studio .model-select-pill.is-locked .model-select-caption {
  color: #8d95aa;
  background: #f2f4f8;
}

#studio .model-select-control:has(select:focus-visible) {
  outline: 2px solid #3154ff;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  #studio .model-select-control {
    font-size: 12px;
  }
}

.model-voice-stack {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.instrumental-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: max-content;
  min-width: 0;
  min-height: 32px;
  padding: 0 9px 0 12px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 999px;
  color: #223052;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.88)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 12px 24px rgba(94, 89, 255, 0.08);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  user-select: none;
}

.instrumental-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.instrumental-toggle i {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(100, 113, 138, 0.18);
  box-shadow: inset 0 0 0 1px rgba(100, 113, 138, 0.18);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.instrumental-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 5px 12px rgba(31, 45, 78, 0.2);
  transition: transform 0.18s ease;
}

.instrumental-toggle:has(input:checked) {
  color: #ffffff;
  background: linear-gradient(135deg, #ec4e9a, #8a5cf6 54%, #326cff);
  border-color: transparent;
}

.instrumental-toggle:has(input:checked) i {
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.instrumental-toggle:has(input:checked) i::after {
  transform: translateX(18px);
}

.creation-mode-toggles {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.studio-panel.is-instrumental .lyrics-field,
.extend-form-panel.is-instrumental .lyrics-field,
.studio-panel.is-instrumental .studio-language-field,
.extend-form-panel.is-instrumental .extend-language-mount,
.studio-panel.is-instrumental .studio-voice-actions-row,
.style-lab-panel.is-instrumental .studio-voice-actions-row,
.style-lab-panel.is-instrumental .voice-field,
.style-lab-panel.is-instrumental .style-custom-voice-button {
  display: none;
}

.studio-title-language-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, max-content);
  align-items: end;
  gap: 10px;
  margin-bottom: clamp(8px, 1.2vh, 12px);
  min-width: 0;
}

.studio-title-language-row > .field-block {
  min-width: 0;
  margin: 0;
}

.studio-title-language-row .studio-language-field,
.studio-title-language-row .studio-language-field select {
  white-space: nowrap;
}

.studio-title-language-row .studio-language-field select {
  width: auto;
  min-width: 112px;
}

.studio-voice-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.studio-voice-actions-row .studio-voice-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.studio-voice-actions-row .studio-voice-field select,
.studio-voice-actions-row .studio-custom-voice-button {
  width: 100%;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
}

.studio-voice-actions-row .custom-asset-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  min-width: 0;
}

.studio-clear-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: clamp(8px, 1.2vh, 12px);
  min-width: 0;
}

.studio-clear-row .clear-studio-button {
  min-height: 32px;
}

.studio-panel.is-instrumental .studio-title-language-row {
  grid-template-columns: minmax(0, 1fr);
}

.studio-panel.is-instrumental .prompt-field {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  margin-bottom: 0;
}

.studio-panel.is-instrumental .prompt-field .textarea-shell {
  flex: 1 1 auto;
}

.studio-panel.is-instrumental .prompt-field textarea {
  min-height: 0;
  max-height: none;
}

body.instrumental-mode-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(246, 251, 255, 0.72);
  backdrop-filter: blur(2px);
  pointer-events: all;
}

body.instrumental-mode-loading::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(139, 92, 246, 0.18);
  border-top-color: #8a5cf6;
  border-right-color: #2f6fff;
  border-radius: 50%;
  animation: global-loading-spin 0.7s linear infinite;
}

.custom-voice-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  max-width: 220px;
  padding: 0 12px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 999px;
  color: #223052;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.88)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 12px 24px rgba(94, 89, 255, 0.1);
  font-size: 13px;
  font-weight: 900;
}

.custom-voice-button svg {
  width: 15px;
  height: 15px;
  color: #ff4f8b;
}

.custom-voice-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-voice-button em {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--grad-action);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.22);
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.custom-voice-button:is(.is-locked, :disabled, [aria-disabled="true"]) {
  color: #5f6878;
  background:
    linear-gradient(180deg, rgba(232, 236, 242, 0.98), rgba(216, 222, 231, 0.96)) padding-box,
    linear-gradient(135deg, rgba(113, 124, 142, 0.62), rgba(169, 178, 191, 0.66)) border-box;
  border-color: rgba(118, 128, 145, 0.46);
  box-shadow: inset 0 1px 2px rgba(58, 68, 84, 0.09);
  cursor: not-allowed;
  filter: grayscale(0.28);
  pointer-events: auto !important;
}

.custom-voice-button:is(.is-locked, :disabled, [aria-disabled="true"]) svg {
  color: #747d8d;
  opacity: 0.76;
  filter: grayscale(1);
}

.custom-voice-button:is(.is-locked, :disabled, [aria-disabled="true"]) em {
  color: #f6f7f9;
  background: #7b8493;
  box-shadow: none;
}

.custom-voice-button.has-selected-voice {
  color: #fff;
}

.style-custom-persona-button.has-selected-voice:not(.is-locked):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent;
  background: linear-gradient(135deg, #e9439d 0%, #7657f5 58%, #4f68ff 100%);
  box-shadow:
    0 9px 20px rgba(119, 77, 234, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.studio-custom-voice-button.has-selected-voice:not(.is-locked):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent;
  background: linear-gradient(135deg, #13bfc0 0%, #3978f6 100%);
  box-shadow:
    0 9px 20px rgba(35, 126, 222, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.custom-voice-button.has-selected-voice:not(.is-locked):not(:disabled):not([aria-disabled="true"]) svg {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(25, 27, 75, 0.22));
}

.custom-voice-button.has-selected-voice:not(.is-locked):not(:disabled):not([aria-disabled="true"]) em {
  color: #5a4bd8;
  background: #fff;
  box-shadow: 0 5px 12px rgba(57, 48, 142, 0.2);
}

.style-custom-voice-button {
  justify-self: start;
  width: calc((100% - var(--right-control-gap, 10px)) / 2);
  max-width: calc((100% - var(--right-control-gap, 10px)) / 2);
  min-height: 38px;
  margin-top: -4px;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  color: #3d4354;
  background: #f2f5f8;
  font-weight: 850;
}

.mode-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}

.field-block {
  --field-text-size: 13px;
  display: grid;
  gap: 7px;
  margin-bottom: clamp(9px, 1.4vh, 14px);
}

.field-block span,
.field-label {
  color: #33394a;
  font-size: var(--field-text-size, 13px);
  font-weight: 900;
}

.text-tool-button > span,
.generate-button > span,
.solid-button > span,
.field-block .text-tool-button > span,
.field-block .generate-button > span,
.field-block .solid-button > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.text-tool-button > svg,
.generate-button > svg,
.solid-button > svg,
.field-block .text-tool-button > svg,
.field-block .generate-button > svg,
.field-block .solid-button > svg {
  color: inherit;
  stroke: currentColor;
}

textarea,
select,
input[type="text"],
input[type="range"] {
  width: 100%;
}

textarea,
select,
input[type="text"] {
  border: 1px solid rgba(49, 87, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

input[type="text"] {
  height: 44px;
  padding: 0 14px;
  font-size: var(--field-text-size, 13px);
  font-weight: 750;
}

.studio-panel .song-title-field {
  gap: 5px;
}

.studio-panel #songTitle {
  height: 38px;
  padding-inline: 12px;
  font-size: var(--field-text-size, 13px);
}

textarea {
  min-height: clamp(76px, 12vh, 108px);
  padding: 13px 14px 36px;
  overflow-y: auto;
  overscroll-behavior: contain;
  resize: vertical;
  font-size: var(--field-text-size, 13px);
  line-height: 1.55;
}

.textarea-shell {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
}

.textarea-shell textarea {
  height: 100%;
}

.textarea-counter {
  position: absolute;
  left: auto;
  right: 13px;
  bottom: 8px;
  z-index: 1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  opacity: 0.82;
  text-align: right;
}

.clear-studio-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(116, 126, 148, 0.24);
  border-radius: 999px;
  color: #69738b;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(235, 239, 247, 0.76));
  box-shadow: 0 8px 16px rgba(80, 91, 120, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.clear-studio-button:hover {
  color: #3e485f;
  border-color: rgba(116, 126, 148, 0.34);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(226, 232, 242, 0.86));
}

.clear-studio-button svg {
  width: 14px;
  height: 14px;
}

select {
  height: 44px;
  padding: 0 12px;
}

.hidden {
  display: none;
}

.chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: clamp(9px, 1.4vh, 14px);
}

.style-chip,
.instrument-chip {
  min-height: 30px;
  padding: 0 10px;
  color: #2f3546;
  background: #eef3f0;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.style-chip.active,
.instrument-chip.active {
  color: #04252b;
  background: linear-gradient(135deg, #bdf4ef, #e8ff87);
  border-color: rgba(32, 197, 216, 0.42);
}

.instrument-chip {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.84)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.42), rgba(139, 92, 246, 0.38), rgba(39, 177, 255, 0.38)) border-box;
}

.instrument-chip.active {
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.14);
}

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

.option-row {
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}

.toggle-line {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #3b4253;
  font-size: 13px;
  font-weight: 800;
}

.submit-row {
  justify-content: space-between;
  gap: 12px;
}

.generate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 0 18px;
  font-size: var(--ui-button-font-size);
  font-weight: 950;
}

.generate-button > svg,
.generate-button > i {
  width: var(--ui-button-icon-size);
  height: var(--ui-button-icon-size);
  flex: 0 0 var(--ui-button-icon-size);
}

#lyricsForm {
  --lyrics-inspiration-tag-height: 30px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

#lyricsForm > .panel-head,
#lyricsForm > .panel-head > div {
  min-width: 0;
}

#lyricsForm > .panel-head h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.2;
}

#lyricsForm > .field-block:has(#lyricsTopic) {
  grid-template-rows: max-content max-content minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
}

#lyricsForm #lyricsInspirationTags {
  align-items: center;
  align-content: flex-start;
}

#lyricsForm #lyricsInspirationTags .inspiration-tag {
  flex: 0 0 auto;
  height: var(--lyrics-inspiration-tag-height);
  min-height: var(--lyrics-inspiration-tag-height);
  max-height: var(--lyrics-inspiration-tag-height);
}

#lyricsForm #lyricsTopic {
  height: 100%;
  min-height: 0;
  max-height: none;
  resize: none;
}

#lyricsForm > .generate-button {
  height: var(--site-action-height);
  min-height: var(--site-action-height);
  max-height: var(--site-action-height);
  align-self: end;
}

.intro-page .hero-cta {
  height: 60px;
  min-height: 60px;
}

.generate-button:disabled {
  cursor: not-allowed;
}

.cost-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.content-shell {
  position: relative;
  z-index: 3;
  width: min(1140px, calc(100% - 36px));
  margin: 0 auto;
}

@media (min-width: 681px) {
  :root {
    --desktop-tool-panel-height: min(650px, calc(100svh - 110px));
  }

  .split-tool,
  .pricing-page > .content-shell,
  .library-shell {
    height: var(--desktop-tool-panel-height);
    min-height: 0;
    max-height: var(--desktop-tool-panel-height);
  }
}

.queue-band,
.gallery-section,
.pricing-section {
  padding: 72px 0;
}

.queue-band {
  background:
    linear-gradient(180deg, #ffffff, #f5fbff);
}

.result-page {
  min-height: calc(100vh - 72px);
  padding-top: 140px;
}

.back-button {
  margin-top: 18px;
}

.queue-layout {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 36px;
  align-items: center;
}

.queue-layout p {
  color: var(--muted);
  line-height: 1.7;
}

.queue-list {
  display: grid;
  flex: 1;
  gap: 12px;
  align-content: start;
  grid-auto-rows: 76px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(49, 87, 255, 0.36) transparent;
}

.queue-list:has(> .empty-state:only-child) {
  display: flex;
  padding-right: 0;
}

.queue-list:has(> .empty-state:only-child) > .empty-state {
  flex: 1;
  justify-content: center;
  min-height: 160px;
}

.track-row {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(78px, auto);
  gap: 10px;
  align-items: center;
  height: 76px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.track-row.has-error {
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.track-row.has-error .record-cover,
.track-row.has-error .track-actions {
  align-self: center;
}

.track-row:hover {
  border-color: rgba(49, 87, 255, 0.3);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.track-row.is-playing {
  border-color: rgba(139, 84, 255, 0.5);
  background:
    linear-gradient(90deg, rgba(255, 76, 125, 0.1), rgba(139, 84, 255, 0.1), rgba(34, 103, 255, 0.1)),
    rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 3px 0 0 rgba(107, 91, 255, 0.88),
    0 12px 30px rgba(49, 87, 255, 0.12);
  overflow: visible;
}

.playing-badge {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 1em;
  inset-block-start: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
  translate: 0 -33.333%;
  pointer-events: none;
}

.record-cover {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02)) padding-box,
    var(--grad-icon) border-box;
  background-position: center;
  background-size: cover;
}

.record-cover:disabled,
.track-main:disabled,
.track-save:disabled,
.track-favorite:disabled,
.track-delete:disabled {
  cursor: default;
  opacity: 0.64;
}

.track-main:disabled {
  color: inherit !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none;
}

.record-cover:disabled {
  color: #8a94a7 !important;
  border-color: rgba(148, 163, 184, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.86), rgba(230, 236, 245, 0.78)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.32), rgba(203, 213, 225, 0.28)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  filter: grayscale(0.55) saturate(0.72);
  opacity: 1;
}

.track-row.is-expired .track-main,
.library-song-row.is-expired .track-main {
  color: #6f7a90;
}

.track-row.is-expired .expiry-pill.is-expired,
.library-song-row.is-expired .expiry-pill.is-expired,
.expiry-pill.is-expired {
  color: var(--sm-item-error-text) !important;
  border-color: var(--sm-item-error-pill-border);
  background: var(--sm-item-error-pill-bg);
}

.queue-error,
.track-error,
.status-label.is-error,
.expiry-pill.is-expired,
.expiry-pill.is-error,
.track-row.has-error .expiry-pill,
.library-song-row.has-error .expiry-pill {
  color: var(--sm-item-error-text) !important;
}

.track-row.has-error .expiry-pill,
.library-song-row.has-error .expiry-pill,
.expiry-pill.is-error {
  border-color: var(--sm-item-error-pill-border);
  background: var(--sm-item-error-pill-bg);
}

.track-row.has-error .expiry-pill svg,
.library-song-row.has-error .expiry-pill svg,
.expiry-pill.is-expired svg,
.expiry-pill.is-error svg {
  color: var(--sm-item-error-text) !important;
  stroke: currentColor;
}

.record-cover svg {
  width: 26px;
  height: 26px;
}

.track-main {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 0;
  border: 0;
  text-align: left;
  color: inherit;
  background: transparent;
}

.track-main strong,
.track-main span,
.track-main small,
.track-main em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-main strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 950;
}

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

.version-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  color: #ffffff !important;
  background: linear-gradient(135deg, #172035, #29324a);
  box-shadow: 0 6px 14px rgba(18, 28, 48, 0.16);
  font-size: 10px !important;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: lowercase;
}

.track-main span,
.track-main small {
  color: var(--muted);
  font-size: 12px;
}

.track-date-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.track-date-line time {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expiry-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(74, 111, 255, 0.18);
  border-radius: 999px;
  color: #3557d8;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.expiry-pill svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.expiry-pill.is-expired {
  border-color: var(--sm-item-error-pill-border);
  color: var(--sm-item-error-text);
  background: var(--sm-item-error-pill-bg);
}

.track-main em:not(.track-error) {
  color: #b4233c;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.track-side-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex: 1 1 118px;
  max-width: 180px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 139, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: #c92a4b;
  font-size: clamp(10px, 1.8vw, 12px);
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.track-error svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.track-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.track-save,
.track-favorite,
.track-delete {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-color: rgba(49, 87, 255, 0.12);
  color: #667086;
  background: rgba(255, 255, 255, 0.72);
}

.track-save.active {
  border-color: rgba(139, 92, 246, 0.2);
  color: var(--brand-violet);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 139, 0.08), 0 8px 18px rgba(139, 92, 246, 0.08);
}

.track-favorite.active {
  color: #ff2f66;
  background: rgba(255, 72, 111, 0.12);
}

.history-library-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  margin: -6px 0 2px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.84), rgba(139, 92, 246, 0.84), rgba(47, 111, 255, 0.84)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 10px 22px rgba(139, 92, 246, 0.15);
  font-size: 12px;
  font-weight: 950;
}

.history-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.history-panel-head h3 {
  margin-bottom: 0;
  font-size: var(--i18n-fit-font-size, 24px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.history-panel-head > div {
  flex: 1 1 0;
  min-width: 0;
}

.history-panel-head .history-library-link {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  margin: 0 0 4px;
  padding-block: 5px;
}

.history-library-link > span {
  min-width: 0;
  font-size: var(--i18n-fit-font-size, 12px);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.history-library-link svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}

.track-delete:hover {
  color: #b4233c;
  background: rgba(255, 72, 111, 0.1);
}

@media (min-width: 681px) and (hover: hover) and (pointer: fine) {
  .track-save:not(:disabled) {
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .track-save:not(:disabled):hover {
    border-color: rgba(117, 79, 244, 0.36);
    color: #6f50ee;
    background: rgba(241, 237, 255, 0.96);
    box-shadow: 0 7px 16px rgba(111, 80, 238, 0.14);
  }
}

.track-wave {
  width: 40px;
  justify-content: center;
}

.track-progress {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: min(190px, 100%);
  margin-top: 2px;
}

.track-progress span {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.13);
}

.track-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-action);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.26);
  transition: width 0.24s ease;
}

.track-progress b {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
}

.track-progress-inline {
  align-self: center;
}

.queue-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 255, 0.96));
  box-shadow: 0 12px 34px rgba(13, 23, 54, 0.06);
}

.queue-item h3,
.queue-item p {
  margin: 0;
}

.queue-item p {
  color: var(--muted);
  font-size: 14px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint);
}

.status-dot.working {
  background: var(--brand-red);
  box-shadow: 0 0 0 6px rgba(255, 95, 104, 0.14);
}

.status-dot.complete {
  background: var(--mint);
  box-shadow: 0 0 0 6px rgba(52, 229, 155, 0.14);
}

.status-dot.error {
  background: #ff3055;
  box-shadow: 0 0 0 6px rgba(255, 48, 85, 0.13);
}

.status-label {
  color: var(--blue);
  font-weight: 900;
}

.song-player,
.queue-error {
  grid-column: 2 / -1;
}

.song-player {
  width: 100%;
  height: 40px;
}

.global-player {
  position: fixed;
  right: var(--player-shell-x);
  bottom: var(--player-shell-bottom);
  left: var(--player-shell-x);
  z-index: 60;
  display: grid;
  grid-template-columns: var(--player-cover-size) minmax(130px, 0.55fr) minmax(90px, 1fr) max-content;
  gap: clamp(8px, 1vw, 14px);
  align-items: center;
  padding: var(--player-shell-padding-y) 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.97)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 18px 60px rgba(13, 23, 54, 0.16), 0 12px 34px rgba(139, 84, 255, 0.12);
  backdrop-filter: blur(18px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 22px));
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.global-player.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.player-peek-handle {
  position: fixed;
  right: 50%;
  bottom: max(7px, env(safe-area-inset-bottom, 0px));
  z-index: 59;
  display: grid;
  place-items: center;
  width: 104px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 18px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.player-peek-handle span {
  display: block;
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 79, 139, 0.82), rgba(139, 92, 246, 0.78), rgba(47, 111, 255, 0.78));
  box-shadow: 0 7px 20px rgba(139, 92, 246, 0.22), 0 2px 8px rgba(47, 111, 255, 0.12);
}

body.player-has-standby-player:not(.player-open) .player-peek-handle {
  opacity: 1;
  pointer-events: auto;
  transform: translate(50%, 0);
}

.player-cover {
  --player-default-record-art:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 9%, rgba(139, 92, 246, 0.48) 9.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(53, 61, 112, 0.08) 0 1px, transparent 1px 4px),
    conic-gradient(from 24deg, #ff8fb8, #b796ed 22%, #789cf0 46%, #63c8dc 68%, #a88de7 84%, #ff8fb8);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--player-cover-size);
  height: var(--player-cover-size);
  border-radius: 50%;
  color: #ffffff;
  background: var(--grad-icon);
  background-position: center;
  background-size: cover;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.58), 0 8px 18px rgba(49, 87, 255, 0.14);
  transform: rotate(var(--songmuse-disc-angle, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
}

.global-player.is-playing .player-cover {
  animation: songmuse-player-disc-spin 18s linear infinite;
  animation-delay: var(--songmuse-disc-animation-delay, 0s);
}

.songmuse-disc-resetting .player-cover {
  animation: none !important;
  transition: none !important;
}

@keyframes songmuse-player-disc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.player-cover.has-default-art {
  background-image: var(--player-default-record-art);
  box-shadow:
    0 0 0 2px rgba(7, 9, 14, 0.9),
    inset 0 0 0 5px rgba(7, 9, 14, 0.18),
    0 8px 18px rgba(49, 87, 255, 0.14);
}

.player-cover::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 3px rgba(16, 20, 39, 0.08);
  transform: translate(-50%, -50%);
}

.player-track {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.player-track strong,
.player-track span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-track strong {
  font-size: var(--player-title-font-size);
  font-weight: 950;
}

.player-track span {
  color: var(--muted);
  font-size: var(--player-meta-font-size);
  font-weight: 750;
}

.player-play {
  width: var(--player-primary-control-size);
  height: var(--player-primary-control-size);
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
}

.player-play svg {
  width: var(--player-primary-icon-size);
  height: var(--player-primary-icon-size);
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--player-control-gap);
}

.player-collapse {
  display: none;
}

.player-skip,
.player-mode {
  width: var(--player-secondary-control-size);
  height: var(--player-secondary-control-size);
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.76), rgba(139, 92, 246, 0.78), rgba(47, 111, 255, 0.76));
  box-shadow: 0 9px 18px rgba(139, 92, 246, 0.14);
}

.player-skip svg,
.player-mode svg {
  width: var(--player-secondary-icon-size);
  height: var(--player-secondary-icon-size);
}

.player-volume-mute svg {
  width: var(--player-secondary-icon-size);
  height: var(--player-secondary-icon-size);
}

.player-mode.active {
  color: #ffffff;
  border-color: transparent;
  background: var(--grad-action);
  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.2), 0 7px 16px rgba(255, 79, 139, 0.14);
}

.player-volume-control {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.player-volume-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 12;
  display: grid;
  grid-template-columns: 30px minmax(92px, 1fr) 40px;
  gap: 8px;
  align-items: center;
  width: 196px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(139, 92, 246, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(38, 46, 78, 0.18);
  backdrop-filter: blur(14px);
}

.player-volume-popover[hidden] {
  display: none;
}

.player-volume-mute {
  width: 30px;
  height: 30px;
  color: #536079;
  background: rgba(241, 244, 252, 0.92);
}

.player-volume-popover input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.player-volume-popover output {
  color: #536079;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.player-progress-wrap {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 10px;
  align-items: center;
  justify-self: center;
  width: min(100%, 620px);
  color: #657086;
  font-size: 12px;
  font-weight: 850;
}

.player-progress-wrap input[type="range"] {
  accent-color: var(--brand-violet);
}

.player-queue-panel {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 10px);
  width: min(420px, calc(100vw - 36px));
  max-height: 360px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 255, 0.92)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 18px 54px rgba(13, 23, 54, 0.18);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.player-queue-panel[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.player-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.player-queue-head strong {
  font-size: 14px;
  font-weight: 950;
}

.player-queue-head span,
.player-queue-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.player-queue-list {
  display: grid;
  gap: 8px;
  max-height: 292px;
  overflow-y: auto;
  padding-right: 3px;
}

.player-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.player-queue-row.active {
  border-color: rgba(139, 92, 246, 0.46);
  background: var(--grad-soft);
}

.player-queue-row > button:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: left;
  color: inherit;
  background: transparent;
}

.player-queue-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-queue-row strong,
.player-queue-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-queue-row strong {
  font-size: 13px;
  font-weight: 950;
}

.player-queue-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.player-queue-row .icon-button {
  width: 32px;
  height: 32px;
}

.queue-error {
  margin: -4px 0 0;
  color: #b4233c;
  font-size: 13px;
  font-weight: 800;
}

.mini-wave {
  display: flex;
  align-items: end;
  gap: 3px;
  width: 54px;
  height: 24px;
}

.mini-wave span {
  width: 6px;
  border-radius: 6px;
  background: var(--aqua);
  animation: wave 0.9s infinite ease-in-out alternate;
}

.mini-wave span:nth-child(1) { height: 8px; }
.mini-wave span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.mini-wave span:nth-child(3) { height: 22px; animation-delay: 0.2s; }
.mini-wave span:nth-child(4) { height: 13px; animation-delay: 0.3s; }
.mini-wave span:nth-child(5) { height: 19px; animation-delay: 0.4s; }

@keyframes wave {
  to { transform: scaleY(0.45); }
}

.section-title-row {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.song-grid,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.song-card,
.price-card {
  position: relative;
  min-height: 210px;
  padding: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.song-card {
  color: #101426;
}

.gallery-section {
  background:
    linear-gradient(120deg, rgba(255, 72, 111, 0.09), transparent 38%),
    linear-gradient(300deg, rgba(0, 200, 255, 0.1), transparent 42%),
    #ffffff;
}

.song-card.coral { background: #ffd5d3; }
.song-card.aqua { background: #c8f3f5; }
.song-card.yellow { background: #ffeca8; }

.song-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(16, 20, 39, 0.13);
  border-radius: 8px;
}

.cover-art {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.cover-art svg {
  width: 38px;
  height: 38px;
}

.song-card p {
  color: #3d4354;
}

.play-small {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  color: #fff;
  background: var(--grad-action);
}

.pricing-section {
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 79, 139, 0.12), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(47, 111, 255, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255, 250, 255, 0.92), rgba(244, 249, 255, 0.94));
}

.pricing-page {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding: clamp(76px, 10vh, 92px) 0 clamp(18px, 3vh, 28px);
}

.pricing-page > .content-shell {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.8vh, 16px);
}

.pricing-hero {
  max-width: 760px;
  margin-bottom: clamp(12px, 2.4vh, 22px);
}

.pricing-hero h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4.2vw, 50px);
}

.pricing-hero p {
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.55;
}

.pricing-title-row {
  justify-content: center;
  margin: 0;
}

.pricing-title-row h1 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
}

.billing-pages-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.billing-pages-track {
  display: grid;
  grid-template-columns: repeat(3, 100%);
  width: 100%;
  height: 100%;
  min-height: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.42s cubic-bezier(0.22, 0.78, 0.22, 1);
  will-change: transform;
}

.billing-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.billing-page[aria-hidden="true"] {
  pointer-events: none;
}

.billing-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, max-content);
  width: max-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(249, 247, 255, 0.84)) padding-box,
    var(--grad-line) border-box;
  border: 1px solid transparent;
}

.billing-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: max-content;
  min-height: 42px;
  padding: 0 18px;
  color: #5d6380;
  background: transparent;
  font-weight: 850;
}

.billing-toggle button span {
  color: inherit;
  font-size: 11px;
  font-weight: 950;
}

.billing-toggle .billing-label {
  margin: 0;
  color: inherit;
  font-size: 13px;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.billing-toggle .billing-save-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin: 0;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #e94d9a, #8b5cf6 58%, #346cff);
  box-shadow: 0 5px 12px rgba(139, 92, 246, 0.16);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.billing-toggle button.active {
  color: #fff;
  background: var(--grad-action);
}

.billing-toggle button.active .billing-save-badge {
  color: #7148d8;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .billing-pages-track,
  .pricing-plan-motion-ready .pricing-grid .price-card {
    transition: none;
  }
}

.pricing-selector {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(14px, 2vh, 20px);
}

.mobile-pricing-selector {
  display: none;
}

.price-option {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: start;
  min-height: 128px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.82)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.2), rgba(139, 92, 246, 0.24), rgba(47, 111, 255, 0.22)) border-box;
  box-shadow: 0 12px 30px rgba(13, 23, 54, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-current-plan-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 20px);
  min-height: 20px;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid rgba(76, 94, 196, 0.28);
  border-radius: 999px;
  color: #4b3ba7;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(72, 71, 162, 0.14);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.price-option:hover,
.price-option.active {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(139, 92, 246, 0.14), 0 12px 28px rgba(255, 79, 139, 0.08);
}

.price-option.active {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(250, 246, 255, 0.88)) padding-box,
    var(--grad-line) border-box;
}

.price-option[data-plan="free"] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 255, 0.68)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(99, 130, 255, 0.25)) border-box;
}

.price-option[data-plan="creator"] {
  background:
    linear-gradient(135deg, rgba(255, 246, 251, 0.94), rgba(248, 241, 255, 0.92)) padding-box,
    linear-gradient(135deg, rgba(238, 91, 159, 0.42), rgba(151, 105, 244, 0.38)) border-box;
}

.price-option[data-plan="studio"] {
  background:
    linear-gradient(135deg, rgba(241, 250, 255, 0.96), rgba(244, 242, 255, 0.94)) padding-box,
    linear-gradient(135deg, rgba(54, 194, 231, 0.4), rgba(81, 105, 232, 0.4), rgba(157, 105, 238, 0.34)) border-box;
}

.price-option[data-plan].active {
  box-shadow: 0 18px 42px rgba(69, 91, 190, 0.12), 0 10px 24px rgba(232, 83, 151, 0.08);
}

.price-option strong {
  font-size: 19px;
  font-weight: 950;
}

.option-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: clamp(34px, 4vw, 50px);
}

.pricing-runtime-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(105, 89, 215, 0.2);
  border-top-color: #6959d7;
  border-radius: 50%;
  animation: pricing-runtime-spin 0.72s linear infinite;
}

.pricing-page[data-pricing-runtime-state="loading"] .pricing-runtime-spinner {
  display: inline-block;
}

.pricing-page[data-pricing-runtime-state="loading"] .option-price {
  align-items: center;
}

.pricing-page[data-pricing-runtime-state="loading"] [data-option-price],
.pricing-page[data-pricing-runtime-state="loading"] [data-option-period],
.pricing-page[data-pricing-runtime-state="loading"] [data-card-price],
.pricing-page[data-pricing-runtime-state="loading"] [data-card-period] {
  display: none;
}

.pricing-runtime-error {
  display: none;
  width: min(100%, 620px);
  min-height: clamp(190px, 32vh, 300px);
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: var(--muted);
  text-align: center;
}

.pricing-runtime-error p {
  max-width: 480px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.6;
}

.pricing-runtime-error-icon {
  width: 30px;
  height: 30px;
  color: #b84b64;
}

.pricing-runtime-retry {
  min-width: 112px;
}

.pricing-page[data-pricing-runtime-state="error"] .pricing-runtime-error {
  display: flex;
}

.pricing-page[data-pricing-runtime-state="error"] .billing-toggle,
.pricing-page[data-pricing-runtime-state="error"] .mobile-pricing-selector,
.pricing-page[data-pricing-runtime-state="error"] .billing-pages-viewport {
  display: none;
}

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

.option-price b {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 1000;
  line-height: 0.95;
  letter-spacing: 0;
}

.option-price small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.pricing-detail-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.74fr);
  gap: clamp(16px, 2.4vw, 28px);
  min-height: clamp(250px, 34vh, 330px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 79, 139, 0.12), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(47, 111, 255, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.9)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 18px 54px rgba(13, 23, 54, 0.1);
}

.pricing-detail-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.pricing-detail-copy h3,
.payment-box h3 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 32px);
}

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 2px 0 0;
}

.detail-price span {
  color: #15192d;
  font-size: clamp(52px, 6vw, 78px);
  font-weight: 1000;
  line-height: 0.95;
}

.detail-price small {
  color: var(--muted);
  font-size: 17px;
  font-weight: 950;
}

.pricing-detail-copy p,
.payment-box p,
.payment-box small {
  color: var(--muted);
  line-height: 1.6;
}

.detail-feature-list {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 820;
}

.payment-box {
  display: grid;
  align-content: end;
  padding: 16px;
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 79, 139, 0.07), rgba(139, 92, 246, 0.08), rgba(47, 111, 255, 0.08)),
    rgba(255, 255, 255, 0.72);
}

.payment-box .solid-button {
  min-height: 42px;
  width: 100%;
}

.price-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: start;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid transparent;
  color: var(--ink);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 16px 42px rgba(13, 23, 54, 0.08);
}

.price-card.is-disabled,
.price-card[aria-disabled="true"],
.disabled-panel,
.disabled-card {
  color: #7d8798;
  border-color: rgba(100, 116, 139, 0.3);
  background:
    repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0 8px, rgba(255, 255, 255, 0.18) 8px 16px),
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(226, 232, 240, 0.72)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.5), rgba(203, 213, 225, 0.44)) border-box;
  box-shadow: 0 10px 26px rgba(100, 116, 139, 0.08);
  filter: grayscale(0.85) saturate(0.45);
}

.price-card.is-disabled::before,
.price-card[aria-disabled="true"]::before,
.disabled-panel::before,
.disabled-card::before {
  opacity: 0.22;
}

.price-card.is-disabled .plan-tag,
.price-card[aria-disabled="true"] .plan-tag,
.disabled-panel .plan-tag,
.disabled-card .plan-tag {
  color: #64748b;
  background: rgba(226, 232, 240, 0.82);
}

.price-card.is-disabled p,
.price-card.is-disabled li,
.price-card[aria-disabled="true"] p,
.price-card[aria-disabled="true"] li,
.disabled-panel p,
.disabled-card p {
  color: #8790a3;
}

.price-card.is-disabled li::before,
.price-card[aria-disabled="true"] li::before,
.disabled-panel li::before,
.disabled-card li::before {
  color: #94a3b8;
}

.pricing-grid {
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.price-card h2,
.price-card h3 {
  margin: 12px 0 4px;
  font-size: clamp(23px, 2.2vw, 30px);
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
}

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

.price-card > .pricing-current-plan-badge {
  position: absolute;
  z-index: 3;
}

.plan-free::before {
  background:
    radial-gradient(circle at 82% 12%, rgba(47, 111, 255, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(239, 246, 255, 0.8));
}

.price-card.featured {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 244, 255, 0.9)) padding-box,
    var(--grad-line) border-box;
  box-shadow: 0 18px 48px rgba(139, 92, 246, 0.16);
}

.plan-creator::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 79, 139, 0.13), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(139, 92, 246, 0.15), transparent 34%);
}

.plan-studio::before {
  background:
    radial-gradient(circle at 84% 14%, rgba(139, 92, 246, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 242, 255, 0.85));
}

.price-card p,
.price-card li {
  color: var(--muted);
  line-height: 1.5;
}

.price-card.featured p,
.price-card.featured li {
  color: var(--muted);
}

.pricing-page .price {
  display: flex;
  align-items: baseline;
}

.price {
  margin: 16px 0 8px;
  font-size: clamp(42px, 4.8vw, 64px);
  font-weight: 950;
}

.price span {
  letter-spacing: 0;
}

.price small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.price-card ul {
  display: grid;
  align-self: start;
  gap: 10px;
  margin: 16px 0 20px;
  padding-left: 0;
  list-style: none;
  min-height: 0;
  overflow-y: auto;
}

.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.price-card li.pricing-runtime-loading-row {
  min-height: clamp(88px, 20vh, 176px);
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-runtime-spinner {
    animation-duration: 1.5s;
  }
}

.price-card li > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  color: #16b981;
}

.price-card li.is-unavailable {
  color: #8d95a7;
  text-decoration: line-through;
}

.price-card li.is-unavailable > svg {
  color: #e84d75;
}

.price-card li {
  position: relative;
  padding-left: 0;
}

.price-card li::before {
  content: none;
  display: none;
}

.price-card .ghost-button,
.price-card .solid-button {
  align-self: end;
  min-height: 42px;
  width: 100%;
}

/* Benefit cards keep the complete entitlement list and action visible in one viewport. */
.pricing-page .price-card {
  padding: clamp(12px, 1.35vw, 17px);
}

.pricing-page .price-card h2,
.pricing-page .price-card h3 {
  margin: 5px 0 1px;
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.12;
}

.pricing-page .price-card .price {
  margin: 5px 0 3px;
  font-size: clamp(32px, 3.5vw, 47px);
  line-height: 1;
}

.pricing-page .price-card .price + p {
  display: none;
}

.pricing-page .price-card ul {
  gap: clamp(2px, 0.42vh, 4px);
  margin: 6px 0 8px;
  overflow: visible;
}

.pricing-page .price-card li {
  gap: 5px;
  font-size: clamp(10.5px, 1.03vw, 13px);
  line-height: 1.2;
}

.pricing-page .price-card li > svg {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
  margin-top: 1px;
}

.pricing-page .price-card .ghost-button,
.pricing-page .price-card .solid-button {
  min-height: 38px;
}

.price-card .solid-button.is-unavailable,
.price-card .ghost-button.is-unavailable {
  color: #8992a6;
  border-color: #d8deea;
  background: #edf0f5;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.subscription-upgrade-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  box-sizing: border-box;
  width: min(520px, 100%);
  max-width: none;
  max-height: calc(100svh - 24px);
  max-height: calc(100dvh - 24px);
  gap: 16px;
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  background:
    radial-gradient(circle at 6% 4%, rgba(255, 79, 139, 0.09), transparent 30%),
    radial-gradient(circle at 94% 0%, rgba(47, 111, 255, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.97);
  -webkit-overflow-scrolling: touch;
}

.subscription-upgrade-dialog .app-dialog-mark {
  grid-column: 1;
  margin: 0;
}

.subscription-upgrade-heading {
  grid-column: 2;
  min-width: 0;
  padding-right: 34px;
}

.subscription-upgrade-summary,
.subscription-upgrade-note,
.subscription-upgrade-dialog .app-dialog-actions {
  grid-column: 1 / -1;
}

.subscription-upgrade-heading h2 {
  margin: 2px 0 6px;
  font-size: clamp(25px, 3vw, 32px);
}

.subscription-upgrade-heading p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.subscription-upgrade-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  color: #5f6980;
  border: 1px solid #dce2f1;
  background: rgba(255, 255, 255, 0.92);
}

.subscription-upgrade-summary {
  padding: 18px;
  border: 1px solid #dbe2f3;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.96), rgba(255, 247, 252, 0.92));
}

.subscription-upgrade-summary h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.subscription-upgrade-summary dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.subscription-upgrade-summary dl > div,
.subscription-upgrade-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.subscription-upgrade-summary dt {
  color: var(--muted);
}

.subscription-upgrade-summary dd {
  max-width: 250px;
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

.subscription-upgrade-summary .upgrade-refund-row dd {
  color: #059669;
}

.subscription-upgrade-total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #d8dfef;
  font-weight: 900;
}

.subscription-upgrade-total strong {
  font-size: 24px;
}

.subscription-upgrade-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.subscription-upgrade-dialog .app-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.subscription-upgrade-dialog .app-dialog-actions .ghost-button,
.subscription-upgrade-dialog .app-dialog-actions .solid-button {
  width: 100%;
}

@media (max-width: 680px) {
  .subscription-upgrade-shell {
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }

  .subscription-upgrade-dialog {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 14px 14px;
  }

  .subscription-upgrade-dialog .app-dialog-mark {
    width: 36px;
    height: 36px;
  }

  .subscription-upgrade-dialog .app-dialog-mark img {
    width: 24px;
    height: 24px;
  }

  .subscription-upgrade-heading {
    padding-right: 28px;
  }

  .subscription-upgrade-summary {
    padding: 13px;
  }

  .subscription-upgrade-heading h2 {
    margin-top: 0;
    font-size: 23px;
  }

  .subscription-upgrade-summary h3 {
    margin-bottom: 9px;
    font-size: 16px;
  }

  .subscription-upgrade-summary dl {
    gap: 8px;
  }

  .subscription-upgrade-summary dd {
    max-width: 54vw;
  }

  .subscription-upgrade-total {
    margin-top: 12px;
    padding-top: 12px;
  }

  .subscription-upgrade-total strong {
    font-size: 21px;
  }
}

@media (max-width: 380px) {
  .subscription-upgrade-dialog .app-dialog-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 640px) {
  .subscription-upgrade-dialog {
    gap: 8px;
    padding-block: 14px;
  }

  .subscription-upgrade-note {
    font-size: 12px;
    line-height: 1.4;
  }
}

.pricing-carousel {
  position: relative;
}

.pricing-page-button,
.pricing-dots {
  display: none;
}

.plan-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #5a4ad8;
  background: rgba(139, 92, 246, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.how-section {
  background: transparent;
}

.featured-page[hidden] {
  display: none !important;
}

.featured-page {
  background:
    linear-gradient(125deg, rgba(255, 76, 145, 0.08), transparent 38%),
    linear-gradient(305deg, rgba(53, 116, 255, 0.09), transparent 42%);
}

.featured-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 2.2vh, 24px);
  padding: clamp(18px, 2.3vw, 30px);
  border: 1px solid rgba(120, 102, 255, 0.17);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 50px rgba(39, 44, 91, 0.07);
  backdrop-filter: blur(18px);
}

.featured-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.featured-head h2 {
  margin: 2px 0 0;
  font-size: clamp(26px, 2.2vw, 38px);
}

.featured-head > p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  text-align: right;
}

.featured-song-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: clamp(14px, 1.8vw, 24px);
  row-gap: clamp(26px, 4vh, 44px);
  height: 100%;
  min-height: 0;
}

.featured-song-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  container-type: size;
}

.featured-song-media {
  position: relative;
  display: block;
  width: min(100cqw, calc(100cqh - 42px));
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 104, 173, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(244, 72, 155, 0.18), rgba(55, 110, 255, 0.2));
  box-shadow: 0 12px 26px rgba(31, 35, 74, 0.09);
}

.featured-song-cover-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: 0;
  place-items: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.6), transparent 34%),
    linear-gradient(135deg, rgba(255, 108, 166, 0.24), rgba(124, 99, 239, 0.2) 52%, rgba(64, 151, 240, 0.22));
  opacity: 1;
  transition: opacity 180ms ease;
}

.featured-song-cover-placeholder::before {
  content: "";
  width: 58%;
  aspect-ratio: 1;
  border: 4px solid rgba(16, 20, 39, 0.84);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 5%, rgba(255, 255, 255, 0.3) 5.5% 11%, transparent 11.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(18, 22, 43, 0.16) 0 1px, transparent 1px 4px),
    conic-gradient(from 24deg, #ff8fb8, #ad8ee9 24%, #6e9cf0 48%, #61c7db 68%, #a88de7 84%, #ff8fb8);
  box-shadow:
    inset 0 0 0 5px rgba(10, 13, 26, 0.14),
    0 10px 24px rgba(56, 62, 133, 0.18);
  animation: featured-cover-spin 4.8s linear infinite;
}

.featured-song-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms ease, filter 220ms ease;
}

.featured-song-media.is-cover-ready .featured-song-cover-placeholder {
  opacity: 0;
}

.featured-song-media.is-cover-ready img {
  opacity: 1;
}

.featured-song-card:hover .featured-song-media img,
.featured-song-card:focus-visible .featured-song-media img {
  transform: scale(1.025);
  filter: saturate(1.05);
}

.featured-song-stats {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 9px 8px;
  color: #fff;
  background: linear-gradient(transparent, rgba(10, 14, 30, 0.72));
  font-size: 12px;
  font-weight: 800;
}

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

@media (prefers-reduced-motion: reduce) {
  .featured-song-cover-placeholder::before {
    animation: none;
  }
}

.featured-song-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.featured-song-stats svg {
  width: 14px;
  height: 14px;
}

.featured-song-copy {
  display: grid;
  gap: 3px;
  width: min(100cqw, calc(100cqh - 42px));
  min-width: 0;
}

.featured-song-copy strong,
.featured-song-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-song-copy strong {
  font-size: 15px;
}

.featured-song-copy span {
  color: var(--muted);
  font-size: 12px;
}

.how-head {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.how-head h2 {
  margin-bottom: 14px;
}

.how-head p {
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.how-steps article {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 260px;
  padding: 40px 28px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.95)) padding-box,
    linear-gradient(135deg, rgba(255, 76, 125, 0.2), rgba(139, 84, 255, 0.26), rgba(34, 103, 255, 0.2)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 16px 44px rgba(13, 23, 54, 0.07);
  text-align: center;
}

.how-steps > article > .how-step-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #26344e, var(--blue));
  font-size: 20px;
  font-weight: 950;
}

.how-steps h3 {
  margin-bottom: 16px;
  font-size: 21px;
}

.how-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.qa-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
  color: var(--ink);
  background: transparent;
}

.tool-page,
.library-page {
  background:
    linear-gradient(120deg, rgba(0, 200, 255, 0.12), transparent 34%),
    linear-gradient(300deg, rgba(255, 72, 111, 0.11), transparent 36%),
    rgba(255, 255, 255, 0.78);
}

.library-page {
  align-items: stretch;
  height: 100vh;
  min-height: 100vh;
  padding-top: clamp(84px, 11vh, 106px);
  padding-bottom: clamp(18px, 3vh, 28px);
  overflow: hidden;
}

.profile-page {
  min-height: 100vh;
  padding: 122px clamp(18px, 4vw, 56px) 56px;
}

.profile-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
}

.profile-hero {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.price-card.plan-free {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 255, 0.7)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(99, 130, 255, 0.25)) border-box;
}

.price-card.plan-creator {
  background:
    linear-gradient(135deg, rgba(255, 246, 251, 0.96), rgba(248, 241, 255, 0.94)) padding-box,
    linear-gradient(135deg, rgba(238, 91, 159, 0.46), rgba(151, 105, 244, 0.42)) border-box;
  box-shadow: 0 18px 48px rgba(183, 88, 181, 0.13);
}

.price-card.plan-studio {
  background:
    linear-gradient(135deg, rgba(241, 250, 255, 0.97), rgba(244, 242, 255, 0.95)) padding-box,
    linear-gradient(135deg, rgba(54, 194, 231, 0.44), rgba(81, 105, 232, 0.44), rgba(157, 105, 238, 0.38)) border-box;
  box-shadow: 0 18px 48px rgba(70, 111, 210, 0.12);
}

.plan-free .plan-tag,
.price-option[data-plan="free"] .plan-tag {
  color: #667085;
  background: rgba(226, 232, 240, 0.72);
}

.plan-creator .plan-tag,
.price-option[data-plan="creator"] .plan-tag {
  color: #a84f78;
  background: rgba(244, 192, 220, 0.42);
}

.plan-studio .plan-tag,
.price-option[data-plan="studio"] .plan-tag {
  color: #465bc4;
  background: rgba(183, 203, 250, 0.46);
}

/* Shared membership surfaces: pricing, account summary, drawer, and profile. */
.plan-tag {
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 1000;
}

.billing-toggle,
.billing-toggle button[data-billing="quarterly"],
.billing-toggle button[data-billing="yearly"] {
  overflow: visible;
}

.billing-toggle button[data-billing="quarterly"],
.billing-toggle button[data-billing="yearly"] {
  position: relative;
}

.billing-toggle .billing-save-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 2;
  min-height: 19px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  color: #ffffff;
  background: linear-gradient(135deg, #e84e9b, #8b5cf6 58%, #346cff);
  box-shadow: 0 6px 14px rgba(104, 77, 224, 0.22);
  font-size: 9px;
  font-weight: 950;
  pointer-events: none;
}

.billing-toggle .billing-save-badge[hidden] {
  display: none;
}

.billing-toggle .billing-save-badge-quarterly {
  background: linear-gradient(135deg, #0b9f8a, #2879d8);
  box-shadow: 0 6px 14px rgba(25, 132, 164, 0.24);
}

.billing-toggle .billing-save-badge-yearly {
  background: linear-gradient(135deg, #e84e9b, #8b5cf6 58%, #346cff);
}

.billing-toggle button.active .billing-save-badge {
  color: #ffffff;
  background: linear-gradient(135deg, #d94391, #7654e8 58%, #2f67ef);
  box-shadow: 0 6px 14px rgba(104, 77, 224, 0.22);
}

.billing-toggle button.active .billing-save-badge-quarterly {
  background: linear-gradient(135deg, #078b79, #1f6fc9);
  box-shadow: 0 6px 14px rgba(20, 116, 149, 0.26);
}

.price-option[data-plan="creator"],
.price-card.plan-creator,
.vip-credit-card.membership-tier-creator,
.drawer-membership-summary[data-membership-tier="creator"] {
  border-color: rgba(217, 80, 151, 0.42);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(249, 207, 229, 0.99), rgba(221, 209, 255, 0.99));
  box-shadow: 0 20px 48px rgba(174, 68, 145, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.price-option[data-plan="studio"],
.price-card.plan-studio,
.vip-credit-card.membership-tier-studio,
.drawer-membership-summary[data-membership-tier="studio"] {
  border-color: rgba(67, 111, 219, 0.42);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(207, 238, 255, 0.99), rgba(208, 215, 255, 0.99));
  box-shadow: 0 20px 48px rgba(57, 91, 188, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.price-option[data-plan="creator"].active,
.price-card.plan-creator.active,
.price-option[data-plan="studio"].active,
.price-card.plan-studio.active {
  box-shadow: 0 22px 54px rgba(91, 75, 198, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.plan-free .plan-tag,
.price-option[data-plan="free"] .plan-tag,
.account-tier-badge.membership-tier-free,
.vip-credit-card.membership-tier-free .vip-level-label {
  color: #596579;
  border: 1px solid rgba(100, 116, 139, 0.16);
  background: rgba(231, 236, 244, 0.88);
}

.plan-creator .plan-tag,
.price-option[data-plan="creator"] .plan-tag,
.account-tier-badge.membership-tier-creator,
.vip-credit-card.membership-tier-creator .vip-level-label {
  color: #8f2d67;
  border: 1px solid rgba(206, 72, 142, 0.24);
  background: rgba(244, 178, 215, 0.74);
}

.plan-studio .plan-tag,
.price-option[data-plan="studio"] .plan-tag,
.account-tier-badge.membership-tier-studio,
.vip-credit-card.membership-tier-studio .vip-level-label {
  color: #3049ab;
  border: 1px solid rgba(67, 97, 202, 0.24);
  background: rgba(176, 205, 255, 0.78);
}

.drawer-membership-summary[data-membership-tier="creator"] .drawer-membership-copy strong {
  color: #8f2d67;
}

.drawer-membership-summary[data-membership-tier="studio"] .drawer-membership-copy strong {
  color: #3049ab;
}

.price-card.plan-creator .solid-button,
.price-card.plan-studio .solid-button {
  min-height: 44px;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(94, 74, 215, 0.2);
}

@media (max-width: 720px) {
  .billing-toggle .billing-save-badge {
    display: inline-flex;
    top: -9px;
    right: -6px;
    margin: 0;
    font-size: 9px;
  }
}

.profile-hero h1 {
  margin-bottom: 12px;
  font-size: clamp(38px, 5vw, 64px);
}

.profile-hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.profile-root {
  display: grid;
  gap: 22px;
}

.profile-grid {
  display: grid;
  grid-template-columns:
    minmax(250px, 1.25fr)
    minmax(145px, 0.65fr)
    repeat(2, minmax(220px, 1fr));
  grid-template-areas: "account library vip producer";
  gap: 16px;
}

.profile-card,
.profile-section,
.profile-loading,
.profile-empty,
.payment-empty {
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(13, 23, 54, 0.08);
  backdrop-filter: blur(18px);
}

.profile-card {
  display: grid;
  align-content: space-between;
  min-height: 168px;
  padding: 22px;
  min-width: 0;
}

.account-card {
  grid-area: account;
  grid-row: auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 14px;
}

.account-card-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(49, 87, 255, 0.1);
}

.account-email-display {
  display: grid;
  align-items: center;
  min-width: 0;
}

.account-email-display strong {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-person {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.profile-person > div {
  min-width: 0;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  box-shadow: 0 16px 34px rgba(49, 87, 255, 0.18);
}

.profile-person h2,
.profile-person p {
  margin: 0;
}

.profile-person h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.15;
}

.profile-person p,
.profile-card p,
.payment-empty p,
.profile-empty p {
  color: var(--muted);
  line-height: 1.65;
}

.profile-person p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.profile-meta div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(49, 87, 255, 0.1);
}

.profile-meta dt,
.profile-meta dd {
  margin: 0;
}

.profile-meta dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-meta dd {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 950;
}

.producer-card {
  grid-area: producer;
  display: grid;
  gap: 14px;
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 52%),
    linear-gradient(135deg, rgba(255, 212, 227, 0.94), rgba(220, 207, 255, 0.94), rgba(207, 235, 255, 0.94));
  box-shadow: 0 20px 48px rgba(101, 83, 194, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.producer-card-heading,
.producer-card-heading span {
  display: flex;
  align-items: center;
  min-width: 0;
}

.producer-card-heading {
  align-items: flex-start;
}

.producer-card-heading span {
  gap: 8px;
  color: var(--muted);
}

.producer-card-heading svg {
  width: 16px;
  height: 16px;
}

.producer-svip-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #5e42b8;
  background: rgba(229, 219, 255, 0.78);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 950;
  line-height: 1;
}

.producer-display strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
}

.producer-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  padding-top: 4px;
  border-top: 1px solid rgba(49, 87, 255, 0.1);
}

.producer-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  text-align: center;
}

.producer-card.membership-tier-creator {
  border-color: rgba(102, 91, 214, 0.38);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 52%),
    linear-gradient(135deg, rgba(214, 196, 255, 0.96), rgba(231, 193, 239, 0.95), rgba(255, 205, 225, 0.94));
}

.producer-card.membership-tier-studio {
  border-color: rgba(172, 72, 145, 0.4);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.06) 52%),
    linear-gradient(135deg, rgba(255, 181, 200, 0.96), rgba(220, 201, 255, 0.95), rgba(207, 234, 255, 0.94));
}

.producer-card.is-locked {
  border-color: rgba(124, 132, 151, 0.2);
  color: #7f879a;
  background:
    linear-gradient(125deg, rgba(249, 250, 252, 0.9), rgba(231, 234, 240, 0.76)),
    rgba(241, 243, 247, 0.82);
  box-shadow: 0 14px 36px rgba(50, 56, 70, 0.07);
  filter: none;
}

.producer-card.is-locked .producer-display strong,
.producer-card.is-locked .producer-card-heading span {
  color: #737b8e;
}

.producer-card.is-locked .producer-svip-label {
  color: #747b89;
  background: rgba(216, 220, 228, 0.88);
}

.producer-card.is-locked .producer-card-action {
  filter: none;
}

.producer-setup-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  align-items: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.producer-setup-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.producer-setup-title {
  min-width: 0;
}

.producer-setup-content {
  min-width: 0;
}

.producer-setup-title .section-kicker {
  margin-bottom: 4px;
}

.producer-setup-title h2 {
  margin: 0 0 6px;
  overflow-wrap: break-word;
  word-break: normal;
}

.producer-setup-content > p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.producer-setup-dialog form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.producer-setup-dialog form label {
  font-size: 13px;
  font-weight: 900;
}

.producer-setup-dialog form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(92, 96, 246, 0.28);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-weight: 850;
}

.producer-setup-dialog form small {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.producer-setup-dialog form .solid-button {
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .producer-setup-shell {
    padding:
      max(14px, env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      max(14px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
  }

  .producer-setup-dialog {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-height: calc(100dvh - 28px);
    gap: 10px;
    padding: 16px;
  }

  .producer-setup-dialog .app-dialog-mark {
    width: 38px;
    height: 38px;
  }

  .producer-setup-dialog .app-dialog-mark img {
    width: 24px;
    height: 24px;
  }

  .producer-setup-title h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  .producer-setup-content > p:not(.section-kicker) {
    font-size: 12px;
    line-height: 1.55;
  }

  .producer-setup-dialog form {
    margin-top: 14px;
  }

  .producer-setup-dialog form input {
    font-size: 16px;
  }
}

@media (max-width: 360px), (max-height: 560px) {
  .producer-setup-dialog {
    padding: 14px;
  }

  .producer-setup-dialog form {
    gap: 7px;
    margin-top: 10px;
  }
}

.profile-card-head,
.metric-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
}

.vip-card.active {
  color: var(--ink);
}

.vip-card.active p,
.vip-card.active .profile-meta dt {
  color: var(--muted);
}

.vip-credit-card {
  grid-area: vip;
  gap: 14px;
}

.vip-credit-card .profile-card-head {
  align-items: flex-start;
}

.vip-credit-card .profile-card-head strong {
  flex: 0 1 auto;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 1.4vw, 14px);
}

.vip-credit-card .vip-level-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #667085;
  background: rgba(226, 232, 240, 0.72);
  text-shadow: none;
}

.vip-credit-card.membership-tier-free {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.68);
}

.vip-credit-card.membership-tier-creator {
  border-color: rgba(217, 80, 151, 0.42);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(249, 207, 229, 0.99), rgba(221, 209, 255, 0.99));
  box-shadow: 0 20px 48px rgba(174, 68, 145, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.vip-credit-card.membership-tier-studio {
  border-color: rgba(67, 111, 219, 0.42);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(207, 238, 255, 0.99), rgba(208, 215, 255, 0.99));
  box-shadow: 0 20px 48px rgba(57, 91, 188, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.vip-credit-card.membership-tier-creator .vip-level-label {
  color: #8f2d67;
  border: 1px solid rgba(206, 72, 142, 0.24);
  background: rgba(244, 178, 215, 0.74);
  text-shadow: none;
}

.vip-credit-card.membership-tier-studio .vip-level-label {
  color: #3049ab;
  border: 1px solid rgba(67, 97, 202, 0.24);
  background: rgba(176, 205, 255, 0.78);
  text-shadow: none;
}

/* Shared membership spectrum: white-blue -> blue-purple -> purple-rose. */
.price-option[data-plan="free"],
.price-card.plan-free,
.vip-credit-card.membership-tier-free,
.drawer-membership-summary[data-membership-tier="free"] {
  border-color: rgba(87, 139, 222, 0.3);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.32) 34%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #ffffff 0%, #f5faff 42%, #dcecff 100%);
  box-shadow: 0 18px 44px rgba(65, 115, 194, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(112%);
}

.price-option[data-plan="creator"],
.price-card.plan-creator,
.vip-credit-card.membership-tier-creator,
.drawer-membership-summary[data-membership-tier="creator"] {
  border-color: rgba(102, 91, 214, 0.42);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #cfeaff 0%, #b9d2ff 47%, #d6c4ff 100%);
  box-shadow: 0 20px 48px rgba(79, 91, 196, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px) saturate(116%);
}

.price-option[data-plan="studio"],
.price-card.plan-studio,
.vip-credit-card.membership-tier-studio,
.drawer-membership-summary[data-membership-tier="studio"] {
  border-color: rgba(185, 70, 143, 0.44);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #d7c8ff 0%, #e9b8e8 48%, #ffb5c8 100%);
  box-shadow: 0 20px 50px rgba(171, 61, 130, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(118%);
}

.price-option[data-plan="free"].active,
.price-card.plan-free.active {
  box-shadow: 0 22px 54px rgba(65, 115, 194, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.price-option[data-plan="creator"].active,
.price-card.plan-creator.active {
  box-shadow: 0 24px 56px rgba(79, 91, 196, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.price-option[data-plan="studio"].active,
.price-card.plan-studio.active {
  box-shadow: 0 24px 58px rgba(171, 61, 130, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.plan-free .plan-tag,
.price-option[data-plan="free"] .plan-tag,
.account-tier-badge.membership-tier-free,
.vip-credit-card.membership-tier-free .vip-level-label {
  color: #315b91;
  border-color: rgba(75, 121, 190, 0.2);
  background: rgba(239, 247, 255, 0.9);
}

.plan-creator .plan-tag,
.price-option[data-plan="creator"] .plan-tag,
.account-tier-badge.membership-tier-creator,
.vip-credit-card.membership-tier-creator .vip-level-label {
  color: #5337a8;
  border-color: rgba(94, 72, 190, 0.24);
  background: rgba(235, 230, 255, 0.86);
}

.plan-studio .plan-tag,
.price-option[data-plan="studio"] .plan-tag,
.account-tier-badge.membership-tier-studio,
.vip-credit-card.membership-tier-studio .vip-level-label {
  color: #92275d;
  border-color: rgba(170, 55, 116, 0.24);
  background: rgba(255, 225, 239, 0.86);
}

.drawer-membership-summary[data-membership-tier="free"] .drawer-membership-copy strong {
  color: #315b91;
}

.drawer-membership-summary[data-membership-tier="creator"] .drawer-membership-copy strong {
  color: #5337a8;
}

.drawer-membership-summary[data-membership-tier="studio"] .drawer-membership-copy strong {
  color: #92275d;
}

.credit-display {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 6px 0 8px;
  text-align: center;
}

.credit-display span {
  color: var(--muted);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 850;
}

.credit-display strong {
  color: inherit;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0;
}

.credit-display.producer-display strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.15;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-credit-card .profile-meta {
  margin-top: 10px;
}

.vip-credit-card .profile-meta div {
  align-items: center;
  min-height: 40px;
}

.metric-card strong {
  display: block;
  margin: 18px 0 8px;
  font-size: 46px;
  line-height: 1;
}

.metric-card {
  grid-area: library;
}

.profile-section {
  min-height: clamp(180px, 27svh, 240px);
  padding: 24px;
  min-width: 0;
}

.profile-section .section-title-row {
  margin-bottom: 16px;
}

.profile-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.subscription-status-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.compact-profile-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.profile-section-actions .subscription-cancel-button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d5d9e0;
  border-radius: 6px;
  color: #687180;
  background: #f3f4f6;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.profile-section-actions .subscription-cancel-button:hover:not(:disabled) {
  border-color: #c5cad3;
  color: #4d5665;
  background: #e9ebef;
  box-shadow: none;
  transform: none;
}

.profile-section-actions .subscription-cancel-button:focus-visible {
  outline: 2px solid rgba(100, 116, 139, 0.38);
  outline-offset: 2px;
}

.profile-section-actions .subscription-cancel-button:disabled {
  color: #9aa1ad;
  background: #f5f6f7;
  box-shadow: none;
  cursor: wait;
  opacity: 0.78;
}

.profile-footer-actions {
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}

.profile-logout-button {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  font-size: 13px;
}

.profile-loading,
.profile-empty,
.payment-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 42px 24px;
  text-align: center;
}

.profile-loading svg,
.profile-empty svg,
.payment-empty svg {
  width: 38px;
  height: 38px;
  color: var(--blue);
}

.payment-table {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
}

.payment-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) minmax(80px, 0.72fr) minmax(120px, 1.05fr) minmax(70px, 0.62fr) minmax(108px, 0.9fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 0 16px;
  border-top: 1px solid rgba(49, 87, 255, 0.1);
  background: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.payment-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-row:first-child {
  border-top: 0;
}

.payment-head {
  color: var(--muted);
  background: rgba(244, 251, 255, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.split-tool {
  display: grid;
  grid-template-columns: minmax(380px, 520px) minmax(360px, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}

.lyrics-output-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.split-tool > .studio-panel,
.split-tool > .lyrics-output-panel {
  height: 100%;
  max-height: none;
}

.lyrics-output-panel .lyrics-create-button {
  width: auto;
  min-width: 168px;
  align-self: center;
  margin-top: 16px;
  padding: 0 28px;
}

#lyricsInspirationTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
}

.lyrics-output {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  color: #26344e;
  background: rgba(255, 255, 255, 0.74);
  overflow: auto;
  resize: none;
  white-space: pre-wrap;
  line-height: 1.75;
}

.library-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(12px, 2vh, 18px);
  width: min(1180px, 100%);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

.library-head {
  max-width: 760px;
}

.library-head h1 {
  margin-bottom: 6px;
}

.library-head p {
  color: var(--muted);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.48;
}

.library-grid {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.library-grid > .library-dashboard {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.library-empty {
  padding: 18px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 42px rgba(13, 23, 54, 0.08);
}

.library-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(12px, 2vh, 16px);
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.library-dashboard > .library-collection-panel,
.library-dashboard > .library-detail-panel {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.library-dashboard.is-single {
  grid-template-columns: minmax(0, min(760px, 100%));
  justify-content: center;
}

.library-empty h3,
.library-empty p {
  margin: 0;
}

.library-empty p {
  color: var(--muted);
  line-height: 1.65;
}

.library-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 14px;
}

.album-panel,
.library-song-panel,
.library-detail-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: clamp(14px, 2vh, 18px);
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 42px rgba(13, 23, 54, 0.08);
  backdrop-filter: blur(14px);
}

.album-panel,
.library-song-panel {
  overflow: hidden;
}

.library-collection-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: clamp(12px, 2vh, 16px);
}

.album-panel {
  flex: 0 0 clamp(174px, 24vh, 196px);
  max-height: clamp(174px, 24vh, 196px);
}

.library-song-panel {
  flex: 1 1 auto;
}

.library-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 2vw, 16px);
  min-height: 0;
}

.library-bottom-grid.has-detail {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
}

.library-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.library-section-head h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
}

.album-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  width: min(260px, 42vw);
  margin-bottom: 0;
}

.album-create input {
  height: 40px;
}

.album-create .icon-button {
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: var(--grad-icon);
}

.album-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  min-height: 74px;
  overflow-y: auto;
  padding-right: 3px;
}

.album-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 76, 125, 0.16), transparent 34%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 249, 255, 0.78)) padding-box,
    var(--grad-line) border-box;
}

.album-card.active {
  border-color: rgba(139, 84, 255, 0.55);
  box-shadow: inset 3px 0 0 rgba(107, 91, 255, 0.86), 0 12px 26px rgba(49, 87, 255, 0.12);
}

.album-cover {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--grad-icon);
}

.album-card strong,
.album-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-card small,
.library-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.library-song-list {
  display: grid;
  flex: 1;
  grid-auto-rows: 76px;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.library-song-list:has(> .library-empty.compact:only-child) {
  display: flex;
  padding-right: 0;
}

.library-song-list:has(> .library-empty.compact:only-child) > .library-empty.compact {
  flex: 1;
  width: 100%;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.library-detail-panel {
  gap: 12px;
}

.mobile-library-head {
  display: none;
}

.library-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.lyrics-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lyrics-detail-head > div,
.library-detail-head > div {
  min-width: 0;
}

.lyrics-detail-head h3,
.library-detail-head h3 {
  margin: 0;
  line-height: 1.18;
  font-size: clamp(20px, 2.2vw, 28px);
}

.lyrics-detail-head h3,
.library-detail-head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expiry-pill .status-text {
  display: inline-block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.expiry-pill.is-error {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--sm-item-error-text) !important;
}

.status-marquee-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--sm-item-error-text) !important;
}

.status-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-width: max-content;
  color: var(--sm-item-error-text) !important;
  animation: none;
  will-change: transform;
}

.status-marquee.is-overflowing .status-marquee-track {
  animation: statusMarquee var(--status-marquee-duration, 20s) linear infinite;
}

.status-marquee:not(.is-overflowing) .status-text[aria-hidden="true"] {
  display: none;
}

.expiry-pill.status-marquee .status-text {
  flex: 0 0 auto;
  color: var(--sm-item-error-text) !important;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

@keyframes statusMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 14px));
  }
}

.library-detail-head .icon-button {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.detail-action-group {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 1px;
}

.detail-action-group .detail-extend-button {
  margin-top: 0;
}

.detail-extend-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 94px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  margin-top: 22px;
  background:
    linear-gradient(135deg, #ec4e9a, #8a5cf6 54%, #326cff) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.88), rgba(47, 111, 255, 0.88)) border-box;
  box-shadow: 0 14px 26px rgba(139, 92, 246, 0.22);
}

.detail-persona-button {
  min-width: 116px;
}

.detail-share-button {
  min-width: 86px;
  color: #222b3f;
  border-color: rgba(92, 104, 142, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(37, 46, 78, 0.1);
}

.style-custom-persona-button {
  min-width: 0;
}

.custom-asset-row .style-custom-voice-button,
.custom-asset-row .style-custom-persona-button {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  margin-top: 0;
  padding-inline: 10px;
  justify-self: stretch;
  align-self: center;
}

.custom-asset-row .style-custom-voice-button span,
.custom-asset-row .style-custom-persona-button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-list .voice-list-item {
  grid-template-columns: 48px minmax(0, 1fr) auto 40px 40px;
}

@media (max-width: 680px) {
  .custom-asset-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .custom-asset-row .style-custom-voice-button,
  .custom-asset-row .style-custom-persona-button {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .detail-action-group {
    gap: 8px;
  }

  .detail-action-group .detail-extend-button {
    min-width: 86px;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .detail-action-group .detail-persona-button {
    min-width: 102px;
  }

  .detail-action-group .detail-share-button {
    min-width: 72px;
  }
}

.detail-extend-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.detail-extend-button em {
  position: absolute;
  top: -10px;
  right: -8px;
  min-width: 28px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.3;
  background: linear-gradient(135deg, #ec4e9a, #7c4dff);
  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.24);
}

.detail-extend-button:disabled {
  cursor: default;
  opacity: 0.58;
  filter: grayscale(0.2);
}

.library-detail-lyrics p {
  margin: 0;
  color: #465168;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.song-share-popover {
  position: fixed;
  z-index: 1500;
  display: none;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 18px;
  border: 1px solid rgba(58, 72, 112, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(24, 34, 68, 0.2);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: var(--share-popover-origin-x, 50%) var(--share-popover-origin-y, 0%);
}

.song-share-popover.is-open { display: grid; gap: 18px; }
.song-share-popover.is-measuring { visibility: hidden; }

.song-share-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.song-share-popover-head > div { display: grid; gap: 3px; min-width: 0; }
.song-share-popover-head span { color: #70798f; font-size: 12px; font-weight: 750; }
.song-share-popover-head strong {
  overflow: hidden;
  color: #182034;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-share-channels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 12px);
  min-width: 0;
}

.song-share-channel {
  display: grid;
  grid-template-rows: 54px 18px;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  color: #202534;
  font-size: 11px;
  font-weight: 750;
  line-height: 18px;
  text-decoration: none;
}

.song-share-channel[aria-disabled="true"] { pointer-events: none; opacity: 0.42; }
.song-share-channel > span:last-child {
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-share-channel-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(51, 65, 85, 0.08);
}

.song-share-channel-icon img { width: 27px; height: 27px; }
.song-share-whatsapp { background: #25d366; }
.song-share-telegram { background: #229ed9; }
.song-share-facebook { background: #1877f2; }
.song-share-x { background: #050505; }
.song-share-reddit { background: #ff4500; }

.song-share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 4px 5px 4px 14px;
  border: 1px solid rgba(91, 105, 140, 0.3);
  border-radius: 8px;
  background: #fff;
}

.song-share-link-row input {
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 0;
  border: 0;
  outline: 0;
  color: #303645;
  background: transparent;
  font-size: 13px;
  text-overflow: ellipsis;
}

.song-share-link-row button {
  min-width: 58px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(91, 105, 140, 0.22);
  border-radius: 8px;
  color: #202534;
  background: #f8f9fc;
  font-size: 13px;
  font-weight: 800;
}

.song-share-link-row button:disabled { cursor: wait; opacity: 0.48; }

.library-song-row {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(120px, 160px) auto auto;
  gap: 10px;
  align-items: center;
  height: 76px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(49, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.library-song-row.is-playing {
  border-color: rgba(139, 84, 255, 0.52);
  background:
    linear-gradient(90deg, rgba(255, 76, 125, 0.1), rgba(139, 84, 255, 0.1), rgba(34, 103, 255, 0.1)),
    rgba(255, 255, 255, 0.95);
  box-shadow: inset 3px 0 0 rgba(107, 91, 255, 0.9), 0 12px 30px rgba(49, 87, 255, 0.12);
}

.library-song-row.has-error {
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.library-album-select {
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 850;
}

.library-empty.compact {
  align-content: center;
  min-height: 180px;
}

.qa-layout {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: start;
  width: min(1140px, calc(100% - 36px));
  margin: 0 auto;
  padding-top: 22px;
}

.qa-copy p {
  color: var(--muted);
  line-height: 1.75;
}

.qa-list {
  display: grid;
  gap: 12px;
}

.qa-list article {
  padding: 18px;
  border: 1px solid rgba(49, 87, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 38px rgba(13, 23, 54, 0.07);
}

.qa-list h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
}

.qa-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.site-footer {
  color: var(--ink);
  background: transparent;
}

.footer-shell {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(130px, 1fr));
  gap: 32px;
  width: min(1140px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 22px;
}

.footer-brand .brand {
  margin-bottom: 16px;
}

.footer-brand p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.footer-column {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-column h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
}

.footer-column a {
  color: var(--muted);
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-column a:hover {
  color: var(--blue);
}

.footer-bottom {
  justify-content: space-between;
  gap: 18px;
  width: min(1140px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 24px;
  border-top: 1px solid rgba(49, 87, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
}

svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}

@media (max-width: 900px) and (min-width: 681px) {
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "account library"
      "vip producer";
    gap: 12px;
  }

  .profile-card {
    min-height: 0;
    padding: 14px;
    gap: 8px;
  }

  .account-card {
    gap: 8px;
  }

  .account-card-heading {
    padding-bottom: 6px;
  }

  .profile-avatar {
    width: 54px;
    height: 54px;
  }

  .profile-meta {
    gap: 6px;
    margin-top: 8px;
  }

  .profile-meta div {
    padding-top: 8px;
  }

  .vip-credit-card {
    gap: 8px;
  }

  .credit-display {
    margin: 0;
  }

  .credit-display strong {
    font-size: clamp(34px, 5vw, 44px);
  }

  .credit-display.producer-display strong {
    font-size: clamp(20px, 3vw, 28px);
  }

  .vip-credit-card .profile-meta {
    margin-top: 4px;
  }

  .producer-card-action {
    height: 36px;
    min-height: 36px;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .site-header > .brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .hero-grid,
  .queue-layout,
  .split-tool,
  .song-grid,
  .library-grid {
    grid-template-columns: 1fr;
  }

  .library-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
  }

  .album-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    max-height: none;
  }

  .library-song-list {
    max-height: none;
  }

  .library-bottom-grid.has-detail {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.84fr);
  }

  .account-card {
    grid-row: auto;
  }

  .payment-row {
    grid-template-columns: 1.2fr 0.8fr 0.9fr;
  }

  .payment-row span:nth-child(3),
  .payment-row span:nth-child(4) {
    display: none;
  }

  .how-steps {
    gap: 14px;
  }

  .how-steps article {
    min-height: 250px;
    padding: 32px 18px;
  }

  .hero {
    min-height: auto;
  }

  .tech-field {
    opacity: 0.42;
  }

  .hero-copy {
    padding-top: 18px;
  }
}

@media (max-height: 760px) and (min-width: 681px) and (max-width: 980px) {
  .page-section {
    padding-top: 78px;
    padding-bottom: 24px;
  }

  .create-layout {
    max-height: calc(100vh - 102px);
    gap: 20px;
  }

  .history-layout {
    height: calc(100vh - 102px);
    min-height: 360px;
    max-height: calc(100vh - 102px);
    gap: 20px;
  }

  .mood-map {
    min-height: 138px;
  }

  .panel-head h1,
  .panel-head h2 {
    font-size: 23px;
  }

  .section-kicker {
    margin-bottom: 6px;
    font-size: 12px;
  }

  textarea {
    min-height: 66px;
    padding: 10px 12px;
    line-height: 1.45;
  }

  select {
    height: 38px;
  }

  input[type="text"] {
    height: 38px;
  }

  .style-chip,
  .instrument-chip {
    min-height: 28px;
    padding: 0 9px;
  }

  .credit-pill,
  .cost-note {
    font-size: 12px;
  }

  .generate-button {
    min-height: 38px;
  }

  .pricing-page {
    padding-top: 78px;
    padding-bottom: 18px;
  }

  .pricing-hero {
    margin-bottom: 12px;
  }

  .pricing-hero h1 {
    font-size: clamp(28px, 4.2vw, 42px);
  }

  .pricing-hero p {
    font-size: 14px;
    line-height: 1.45;
  }

  .pricing-title-row {
    margin-bottom: 10px;
  }

  .price-card {
    min-height: 268px;
    padding: 16px;
  }

  .price {
    margin: 4px 0;
    font-size: 30px;
  }

  .price-card p,
  .price-card li {
    line-height: 1.35;
    font-size: 13px;
  }

  .price-card ul {
    gap: 4px;
    margin: 8px 0 12px;
  }

  .plan-tag {
    min-height: 22px;
    font-size: 11px;
  }
}

@container extend-source (max-width: 540px) {
  .extend-source-head {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 4px;
  }

  .extend-source-head h3 {
    min-width: 0;
    font-size: 14px;
  }

  .extend-source-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    margin-right: 0;
  }

  .extend-time-inline {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) 48px minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.25;
    white-space: normal;
  }

  .extend-time-inline > [data-i18n-fit] {
    min-width: 0;
    font-size: var(--i18n-fit-font-size, 10.5px);
    overflow-wrap: normal;
    text-align: center;
  }

  .extend-time-inline > [data-i18n-fit-wrapped="true"] {
    overflow-wrap: anywhere;
  }

  .extend-time-inline input.extend-time-pill {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    min-height: 28px;
    padding: 0 7px;
    font-size: 12px;
  }

  .extend-source-play {
    min-height: 36px;
  }
}

@container extend-source (max-width: 300px) {
  .extend-source-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 68%);
  }
}

@media (max-width: 680px) {
  :root {
    --site-header-height: clamp(56px, 9.2svh, 68px);
    --site-header-padding-y: clamp(7px, 1.5svh, 12px);
    --site-brand-font-size: clamp(19px, 3.2svh, 22px);
    --site-brand-logo-size: clamp(30px, 5svh, 36px);
    --site-action-height: 44px;
    --site-account-height: 44px;
    --site-account-avatar-size: 36px;
    --mobile-header-control-size: 44px;
    --ui-button-font-size: clamp(13px, 2.2svh, 15px);
    --ui-button-icon-size: clamp(18px, 3svh, 20px);
    --player-shell-padding-y: clamp(8px, 1.55svh, 10px);
    --player-cover-size: 42px;
    --player-title-font-size: 13px;
    --player-meta-font-size: 11px;
    --player-primary-control-size: 38px;
    --player-secondary-control-size: 32px;
    --workspace-header-bottom: 8.75svh;
    --workspace-player-top: 92.5svh;
    --mobile-header-space: calc(var(--workspace-header-bottom) + 2svh);
    --mobile-page-gap: 1.7svh;
    --mobile-page-bottom: 3.8svh;
    /* Panel + trailing space + grid gap must equal exactly one viewport. */
    --mobile-page-safe-gap: calc(var(--mobile-header-space) + var(--mobile-page-bottom) - var(--mobile-page-gap));
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
    --mobile-fixed-player-reserve: calc(
      var(--player-cover-size)
      + var(--player-shell-padding-y)
      + var(--player-shell-padding-y)
      + env(safe-area-inset-bottom, 0px)
      + 18px
    );
    --keyboard-cover-height: 0px;
    --mobile-keyboard-shift: 0px;
  }

  body.player-open {
    --mobile-page-safe-gap: calc(var(--mobile-header-space) + var(--mobile-player-reserve) - var(--mobile-page-gap));
  }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: var(--site-header-padding-y) 14px;
  }

  .site-header > .brand {
    gap: 6px;
    font-size: 20px;
  }

  .site-header .header-actions .start-gate-button {
    max-width: 112px;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .brand {
    min-width: 0;
    font-size: var(--site-brand-font-size);
  }

  .brand-logo {
    width: var(--site-brand-logo-size);
    height: var(--site-brand-logo-size);
  }

  .header-actions .ghost-button,
  .header-actions .icon-button,
  .header-actions .language-button {
    display: none;
  }

  .site-header .header-actions {
    min-width: var(--mobile-header-control-size, 44px);
    justify-content: end;
  }

  .site-header .account-button {
    width: var(--mobile-header-control-size, 44px);
    height: var(--mobile-header-control-size, 44px);
    min-width: var(--mobile-header-control-size, 44px);
    min-height: var(--mobile-header-control-size, 44px);
    padding: 4px;
    gap: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: visible;
  }

  .site-header .account-button .account-avatar {
    width: var(--site-account-avatar-size);
    height: var(--site-account-avatar-size);
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .site-header .account-button .account-label {
    display: none;
  }

  .hero {
    padding: 92px 14px 28px;
  }

  .page-section {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: var(--mobile-header-space) 22px var(--mobile-page-bottom);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .create-page,
  .history-page {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow: visible;
  }

  .intro-page {
    align-items: start;
    padding-top: calc(var(--mobile-header-space) + 68px);
  }

  .intro-shell {
    width: min(100%, 460px);
    text-align: left;
  }

  .intro-actions,
  .intro-shell .hero-metrics {
    justify-content: flex-start;
  }

  .intro-actions {
    align-items: stretch;
    margin-top: 24px;
  }

  .hero-muse-form {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 5px;
  }

  .hero-muse-form:focus-within {
    transform: none;
  }

  .hero-muse-input-shell {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    height: 72px;
    min-height: 72px;
    padding: 5px 12px;
  }

  .hero-muse-input-shell > svg {
    width: 20px;
    height: 20px;
  }

  #heroMuseInput::placeholder {
    font-size: 14px;
  }

  .intro-page .hero-cta {
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 18px;
  }

  .intro-shell .eyebrow {
    margin-bottom: 12px;
    font-size: 13px;
  }

  .intro-shell .hero-subtitle {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.62;
  }

  .hero-muse-scenes {
    justify-content: flex-start;
    margin: 8px 5px 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .panel-a,
  .panel-b,
  .sound-rings,
  .album-stack {
    display: none;
  }

  h1 {
    max-width: 9.5em;
    font-size: 38px;
    line-height: 1.1;
  }

  @media (min-height: 780px) {
    .intro-page {
      align-items: center;
      padding-top: var(--mobile-header-space);
      padding-bottom: clamp(68px, 10svh, 96px);
    }
  }

  @media (max-height: 740px) {
    .intro-page {
      padding-top: calc(var(--mobile-header-space) + 30px);
    }

    .intro-shell h1 {
      font-size: 36px;
    }

    .intro-shell .hero-subtitle {
      margin-top: 12px;
      line-height: 1.55;
    }

    .intro-actions {
      margin-top: 18px;
    }

    .intro-page .hero-cta {
      min-height: 48px;
      height: 48px;
    }

  }

  .studio-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    overflow-y: auto;
    padding: 12px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .create-layout {
    height: auto;
    min-height: 0;
    gap: var(--mobile-page-gap);
    max-height: none;
    align-items: start;
    overflow: visible;
  }

  .history-layout {
    height: auto;
    min-height: 0;
    max-height: none;
    gap: var(--mobile-page-gap);
    align-items: start;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .qa-page {
    padding-bottom: 0;
  }

  .qa-layout {
    align-content: center;
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    width: min(100%, calc(100% - 28px));
    padding-top: 0;
  }

  .qa-copy {
    display: grid;
    gap: 6px;
  }

  .qa-copy h2 {
    margin: 0;
    font-size: 26px;
  }

  .qa-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .qa-list {
    gap: 10px;
  }

  .qa-list article {
    padding: 13px 14px;
  }

  .qa-list h3 {
    margin-bottom: 5px;
    font-size: 16px;
  }

  .qa-list p {
    font-size: 13px;
    line-height: 1.45;
  }

  .site-footer {
    display: none;
  }

  .music-motif {
    opacity: 0.18;
  }

  .mode-tabs,
  .control-grid {
    grid-template-columns: 1fr;
  }

  .create-layout,
  .history-layout,
  .qa-layout,
  .footer-shell,
  .profile-hero {
    grid-template-columns: 1fr;
  }

  .library-page {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--mobile-header-space) 12px 0;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .library-shell {
    height: auto;
    min-height: 0;
    gap: 0;
  }

  .library-head {
    display: grid;
    gap: 3px;
    flex: 0 0 auto;
    padding: 0 0 8px;
  }

  .library-head h1 {
    margin: 0;
    font-size: 23px;
    line-height: 1.1;
  }

  .library-head p {
    display: none;
  }

  .library-dashboard {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    gap: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .album-panel,
  .library-song-panel,
  .library-detail-panel {
    padding: 10px;
  }

  .library-collection-panel,
  .library-detail-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 34px);
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 34px);
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 34px);
    margin: 0;
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .library-collection-panel {
    overflow: hidden;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .album-panel {
    flex: 0 0 auto;
    max-height: 166px;
    min-height: 150px;
  }

  .library-detail-panel {
    margin-top: var(--mobile-page-safe-gap);
    overflow: hidden;
  }

  .style-lab-panel,
  .lyrics-stage-panel,
  .result-panel {
    position: relative;
    z-index: 5;
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    overflow: hidden;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .studio-panel,
  .style-lab-panel,
  .result-panel,
  .lyrics-stage-panel {
    margin-bottom: var(--mobile-page-gap);
  }

  .style-lab-panel {
    overflow-y: auto;
  }

  .style-lab-panel,
  .lyrics-stage-panel,
  .result-panel {
    padding: 12px;
  }

  .studio-panel .panel-head {
    gap: 8px;
    margin-bottom: 8px;
  }

  .studio-panel .panel-head h1,
  .studio-panel .panel-head h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .result-panel h2,
  .result-panel h3 {
    font-size: 21px;
  }

  .field-block {
    --field-text-size: 12px;
    gap: 5px;
    margin-bottom: 8px;
  }

  .field-block span,
  .field-label {
    font-size: var(--field-text-size);
  }

  .field-line {
    gap: 8px;
  }

  .text-tool-button {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }

  .credit-pill,
  .model-select-pill {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .model-select-pill select {
    min-width: 92px;
    height: 26px;
    font-size: 12px;
  }

  input[type="text"],
  select {
    height: 38px;
    padding-inline: 11px;
  }

  textarea {
    min-height: 72px;
    max-height: 18svh;
    padding: 10px 11px 33px;
    font-size: var(--field-text-size);
    line-height: 1.45;
  }

  .textarea-counter {
    left: auto;
    right: 11px;
    bottom: 8px;
    font-size: 12px;
  }

  .lyrics-field textarea {
    min-height: 88px;
    max-height: 20svh;
  }

  .inspiration-tags {
    gap: 6px;
  }

  .inspiration-tag {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  .clear-studio-button {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }

  .mood-map {
    min-height: 142px;
  }

  .mood-quadrant {
    display: none;
  }

  .mood-axis-y {
    left: 8px;
    top: 8px;
    display: inline-flex;
    width: auto;
    height: 24px;
    min-height: 0;
    grid-template-rows: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    line-height: 1;
    transform: none;
    white-space: nowrap;
  }

  .mood-axis-y em,
  .mood-axis-y b,
  .mood-axis-y i {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
  }

  .mood-axis-x {
    bottom: 8px;
  }

  .mood-readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mood-readout span {
    padding: 7px 8px;
    font-size: 11px;
  }

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

  .how-section .content-shell {
    display: flex;
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    flex-direction: column;
    justify-content: center;
  }

  .how-head {
    margin-bottom: 14px;
  }

  .how-head h2 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.18;
  }

  .how-head p {
    font-size: 14px;
    line-height: 1.5;
  }

  .how-steps {
    gap: 10px;
  }

  .how-steps article {
    grid-template-columns: auto 1fr;
    justify-items: stretch;
    align-items: center;
    align-content: center;
    min-height: 0;
    padding: 14px 16px;
    text-align: left;
  }

  .how-steps > article > .how-step-mark {
    width: 34px;
    height: 34px;
    margin: 0 12px 0 0;
    font-size: 16px;
  }

  .how-steps h3 {
    margin: 0;
    font-size: 18px;
  }

  .how-steps p {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
  }

  .profile-hero {
    display: grid;
    align-items: start;
  }

  .page-section {
    min-height: 100svh;
    height: auto;
    overflow: visible;
  }

  .submit-row,
  .section-title-row,
  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .generate-button {
    width: 100%;
  }

  .queue-item {
    grid-template-columns: auto 1fr;
  }

  .track-row {
    grid-template-columns: 48px minmax(0, 1fr) minmax(74px, auto);
  }

  .track-actions {
    gap: 5px;
  }

  .track-side-status {
    flex-basis: 88px;
    max-width: 132px;
    padding: 4px 6px;
  }

  .library-song-row {
    grid-template-columns: 48px minmax(0, 1fr) 34px 34px 34px;
    grid-template-rows: minmax(0, 42px) 26px;
    gap: 5px 7px;
    height: 92px;
    min-height: 92px;
    align-items: center;
    padding: 8px 9px;
  }

  .library-song-list {
    grid-auto-rows: 92px;
  }

  .library-song-row .record-cover {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .library-song-row .track-main {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 2px;
  }

  .library-song-row .track-favorite {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
  }

  .library-song-row .track-delete {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
  }

  .library-song-row .track-actions {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(3, 34px);
    gap: 7px;
  }

  .library-song-row .track-side-status {
    grid-column: 1 / -1;
    order: 3;
    justify-self: end;
    max-width: 104px;
    padding: 3px 6px;
    font-size: 10px;
    line-height: 1.1;
  }

  .library-song-row .track-main span,
  .library-song-row .track-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.28;
  }

  .library-song-row .track-main span {
    color: #536078;
  }

  .library-album-select {
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: center;
    width: min(100%, 210px);
    height: 24px;
    padding: 0 24px 0 10px;
    border-radius: 999px;
    font-size: 11px;
    background-color: rgba(255, 255, 255, 0.72);
  }

  .library-song-row .expiry-pill {
    min-height: 24px;
    padding: 0 10px;
    font-size: 11px;
  }

  .album-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(142px, 46vw);
    grid-template-columns: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 4px 0;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  .album-grid::-webkit-scrollbar {
    height: 4px;
  }

  .album-card {
    scroll-snap-align: start;
    min-height: 66px;
    padding: 8px;
  }

  .record-cover {
    width: 48px;
    height: 48px;
  }

  .track-wave,
  .track-row > .status-dot {
    display: none;
  }

  .global-player {
    right: 0;
    bottom: var(--faq-background-end, 0px);
    left: 0;
    grid-template-columns: var(--player-cover-size) minmax(0, 1fr) auto;
    grid-template-areas: "cover track controls";
    gap: clamp(7px, 1.4svh, 9px);
    min-height: clamp(58px, 9.8svh, 62px);
    padding: var(--player-shell-padding-y) 12px calc(var(--player-shell-padding-y) + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 34px rgba(13, 23, 54, 0.13), 0 -4px 18px rgba(139, 84, 255, 0.1);
  }

  .player-peek-handle {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: 148px;
    height: 28px;
  }

  .player-peek-handle span {
    width: 112px;
    height: 5px;
  }

  .player-queue-panel {
    right: 10px;
    bottom: calc(100% + 8px);
    left: 10px;
    width: auto;
    max-height: min(46svh, 320px);
    z-index: 2;
  }

  .player-queue-list {
    max-height: min(34svh, 242px);
  }

  body.player-open .intro-shell,
  body.player-open .create-layout,
  body.player-open .history-layout,
  body.player-open .how-section .content-shell,
  body.player-open .qa-layout,
  body.player-open .site-footer {
    transform: none;
  }

  body.player-open .page-section {
    padding-bottom: var(--mobile-page-bottom);
  }

  body.player-open .studio-panel,
  body.player-open .style-lab-panel,
  body.player-open .library-collection-panel,
  body.player-open .lyrics-stage-panel,
  body.player-open .result-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  .player-cover {
    grid-area: cover;
    width: var(--player-cover-size);
    height: var(--player-cover-size);
    border-radius: 50%;
  }

  .player-track {
    grid-area: track;
    gap: 2px;
  }

  .player-track strong {
    font-size: var(--player-title-font-size);
  }

  .player-track span {
    font-size: var(--player-meta-font-size);
  }

  .player-progress-wrap {
    position: absolute;
    top: 6px;
    right: 12px;
    left: 12px;
    display: block;
    width: auto;
    height: 3px;
    font-size: 0;
    pointer-events: none;
  }

  .player-progress-wrap span {
    display: inline;
    font-size: 0;
  }

  .player-progress-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 79, 139, 0.78), rgba(139, 92, 246, 0.76), rgba(47, 111, 255, 0.74));
    pointer-events: none;
  }

  .player-progress-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    border: 0;
  }

  .player-progress-wrap input[type="range"]::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
  }

  .player-progress-wrap input[type="range"]::-moz-range-track {
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: transparent;
  }

  .player-controls {
    grid-area: controls;
    justify-content: end;
    gap: 6px;
  }

  #globalPlayerLoop,
  .player-volume-control,
  #globalPlayerPrev {
    display: none;
  }

  .player-skip,
  .player-mode {
    width: var(--player-secondary-control-size);
    height: var(--player-secondary-control-size);
    border-radius: 10px;
  }

  .player-play {
    width: var(--player-primary-control-size);
    height: var(--player-primary-control-size);
    border-radius: 12px;
  }

  .player-queue-panel {
    right: 8px;
    bottom: calc(100% + 8px);
    left: 8px;
    width: auto;
    max-height: min(420px, 46svh);
  }

  .player-queue-list {
    max-height: min(340px, 36svh);
  }

  .how-steps {
    grid-template-columns: 1fr;
  }

  .pricing-page {
    align-items: start;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: 86px 16px 18px;
  }

  .pricing-page .content-shell {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .pricing-hero {
    margin-bottom: 8px;
  }

  .pricing-hero h1 {
    margin-bottom: 5px;
    font-size: 25px;
    line-height: 1.18;
  }

  .pricing-hero p {
    font-size: 12px;
    line-height: 1.42;
  }

  .pricing-title-row {
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
  }

  .pricing-title-row h1 {
    font-size: 19px;
  }

  .billing-toggle {
    justify-content: stretch;
  }

  .billing-toggle button {
    flex: 1;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .pricing-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
  }

  .price-option {
    min-height: 86px;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 9px;
  }

  .price-option .plan-tag {
    min-height: 19px;
    padding: 0 7px;
    font-size: 10px;
  }

  .price-option strong {
    font-size: 14px;
  }

  .option-price b {
    font-size: 25px;
  }

  .option-price small {
    font-size: 11px;
  }

  .pricing-detail-card {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    border-radius: 10px;
  }

  .pricing-detail-copy {
    gap: 6px;
  }

  .pricing-detail-copy h3,
  .payment-box h3 {
    font-size: 20px;
  }

  .detail-price span {
    font-size: 42px;
  }

  .detail-price small {
    font-size: 13px;
  }

  .pricing-detail-copy p,
  .payment-box p,
  .detail-feature-list,
  .payment-box small {
    font-size: 12px;
    line-height: 1.38;
  }

  .detail-feature-list {
    gap: 3px;
    margin: 0;
  }

  .payment-box {
    padding: 12px;
  }

  .payment-box .solid-button {
    min-height: 36px;
  }

  .pricing-carousel {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0 2px 34px;
  }

  .pricing-grid {
    display: flex;
    height: 100%;
    gap: 0;
    transition: transform 0.28s ease;
    will-change: transform;
  }

  .price-card {
    flex: 0 0 100%;
    min-height: 0;
    height: 100%;
    padding: 15px 16px;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .price-card h2,
  .price-card h3 {
    margin: 4px 0 0;
    font-size: 19px;
  }

  .price {
    margin: 8px 0 4px;
    font-size: 31px;
  }

  .price-card p,
  .price-card li {
    font-size: 13px;
    line-height: 1.4;
  }

  .price-card ul {
    gap: 4px;
    margin: 8px 0 12px;
  }

  .pricing-page-button {
    display: grid;
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 34px;
    height: 34px;
    color: #ffffff;
    border-color: transparent;
    background: var(--grad-action);
    box-shadow: var(--brand-glow);
    transform: translateY(-50%);
  }

  .pricing-prev {
    left: 8px;
  }

  .pricing-next {
    right: 8px;
  }

  .pricing-dots {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
  }

  .pricing-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.22);
  }

  .pricing-dots button.active {
    width: 22px;
    background: var(--grad-action);
  }

  .profile-page {
    padding: 96px 14px 36px;
  }

  .profile-card,
  .profile-section {
    padding: 18px;
  }

  .account-button {
    padding-right: 5px;
  }

  .account-label {
    display: none;
  }

  .mini-wave,
  .status-label {
    grid-column: 2;
  }

  .create-page,
  .history-page {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: var(--mobile-header-space) 22px var(--mobile-page-bottom);
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .create-layout,
  .history-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mobile-page-gap);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: start;
  }

  .studio-panel,
  .style-lab-panel,
  .result-panel,
  .lyrics-stage-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    margin: 0 0 var(--mobile-page-safe-gap);
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel,
  .history-layout > .result-panel,
  .history-layout > .lyrics-stage-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
  }

  .studio-panel,
  .style-lab-panel {
    overflow-y: auto;
  }

  .result-panel,
  .lyrics-stage-panel {
    overflow: hidden;
  }

  .queue-list {
    min-height: 0;
    overflow-y: auto;
  }

  .synced-lyrics,
  .history-prompt-box div {
    min-height: 0;
    overflow-y: auto;
  }

  body.player-open .studio-panel,
  body.player-open .style-lab-panel,
  body.player-open .library-collection-panel,
  body.player-open .result-panel,
  body.player-open .lyrics-stage-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  body.player-open .create-layout > .studio-panel,
  body.player-open .create-layout > .style-lab-panel,
  body.player-open .history-layout > .result-panel,
  body.player-open .history-layout > .lyrics-stage-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  .library-page .library-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }

  .library-page .library-collection-panel,
  .library-page .library-detail-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 58px);
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 58px);
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom) - 58px);
    margin: 0 0 var(--mobile-page-safe-gap);
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .library-page .library-collection-panel {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  body.player-open .library-page .library-collection-panel,
  body.player-open .library-page .library-detail-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve) - 58px);
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve) - 58px);
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve) - 58px);
  }

  .library-page .library-detail-panel {
    overflow: hidden;
  }

  .library-page {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: var(--mobile-header-space) 22px var(--mobile-page-bottom);
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .library-shell {
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 0;
  }

  .library-head {
    display: none;
  }

  .mobile-library-head {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    margin-bottom: 8px;
  }

  .mobile-library-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.1;
  }

  .library-page .library-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--mobile-page-gap);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: start;
  }

  .library-page .library-dashboard.is-single {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    justify-content: stretch;
  }

  .library-page .library-collection-panel,
  .library-page .library-detail-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    margin: 0 0 var(--mobile-page-safe-gap);
    padding: 12px;
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .library-page .library-collection-panel {
    gap: 8px;
    overflow: hidden;
  }

  .library-page .library-detail-panel {
    overflow: hidden;
  }

  body.player-open .library-page .library-collection-panel,
  body.player-open .library-page .library-detail-panel {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  /* Mobile page contract: every tool/history/library panel uses the same snap page geometry. */
  :root {
    --mobile-panel-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
  }

  body.player-open {
    --mobile-panel-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  .create-page,
  .history-page,
  .featured-page,
  .library-page {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: var(--mobile-header-space) 22px var(--mobile-page-bottom);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.player-open .create-page,
  body.player-open .history-page,
  body.player-open .featured-page,
  body.player-open .library-page {
    padding-bottom: var(--mobile-player-reserve);
  }

  .create-layout,
  .history-layout,
  .featured-shell,
  .library-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--mobile-page-gap);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: start;
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel,
  .history-layout > .result-panel,
  .history-layout > .lyrics-stage-panel,
  .library-dashboard > .library-collection-panel,
  .library-dashboard > .library-detail-panel {
    height: var(--mobile-panel-height);
    min-height: var(--mobile-panel-height);
    max-height: var(--mobile-panel-height);
    margin: 0 0 var(--mobile-page-safe-gap);
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .featured-page > .featured-shell {
    height: var(--mobile-panel-height);
    min-height: var(--mobile-panel-height);
    max-height: var(--mobile-panel-height);
    margin: 0 0 var(--mobile-page-safe-gap);
    padding: 14px;
    overflow: hidden;
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .featured-head {
    align-items: start;
  }

  .featured-head h2 {
    font-size: 24px;
  }

  .featured-head > p {
    display: none;
  }

  .featured-song-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .featured-song-card:nth-child(n + 10) {
    display: none;
  }

  .featured-song-card {
    gap: 5px;
  }

  .featured-song-copy strong {
    font-size: 11px;
  }

  .featured-song-copy span {
    font-size: 10px;
  }

  .featured-song-stats {
    padding: 18px 6px 5px;
    font-size: 10px;
  }

  .featured-song-stats svg {
    width: 11px;
    height: 11px;
  }

  .library-page {
    padding-inline: 12px;
  }

  .library-dashboard.is-single {
    grid-template-rows: auto;
  }

  .library-dashboard > .library-collection-panel {
    gap: 8px;
    overflow: hidden;
  }

  .library-dashboard > .library-detail-panel,
  .history-layout > .lyrics-stage-panel,
  .history-layout > .result-panel {
    overflow: hidden;
  }

  /* Mobile fit contract: outer panels must stay one viewport tall.
     Only history/library item lists scroll inside their own list areas. */
  .style-lab-panel,
  .studio-panel,
  .lyrics-output-panel,
  .profile-card,
  .profile-section,
  .pricing-grid .price-card {
    min-height: 0;
    overflow: hidden;
  }

  .style-lab-panel {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    align-content: stretch;
    gap: clamp(6px, 1.35svh, 10px);
  }

  .style-lab-panel > div:first-child {
    min-height: 0;
  }

  .style-lab-panel .section-kicker,
  .style-lab-panel h3,
  .style-lab-panel p {
    margin-block: 0;
  }

  .style-lab-panel p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .style-lab-panel .mood-map,
  .extend-style-panel .mood-map {
    width: 100%;
    min-height: 0;
    height: clamp(112px, 25svh, 156px);
  }

  .style-lab-panel .chips-group,
  .extend-style-panel .chips-group {
    min-height: 0;
    gap: 6px;
    overflow: hidden;
  }

  .style-lab-panel .style-chip,
  .style-lab-panel .instrument-chip,
  .extend-style-panel .extend-style-chip,
  .extend-style-panel .extend-instrument-chip {
    min-height: 25px;
    padding: 0 9px;
    font-size: 11px;
  }

  .style-lab-panel .mood-readout span,
  .extend-style-panel .mood-readout span {
    min-height: 28px;
  }

  .style-lab-panel .right-control-grid,
  .extend-style-panel .right-control-grid {
    min-height: 0;
  }

  .style-lab-panel .field-block,
  .extend-style-panel .field-block {
    min-height: 0;
    margin-bottom: 0;
  }

  .style-lab-panel select,
  .extend-style-panel select {
    height: 34px;
  }

  .style-submit-row {
    grid-row: 9;
    align-self: end;
    min-height: 0;
    gap: 5px;
  }

  .style-submit-row .generate-button {
    min-height: 40px;
  }

  .style-submit-row .cost-note {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .record-list,
  .library-song-list {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 680px) {
  /* HARD RULE: mobile outer panels must fit one viewport.
     Do not make outer panels scroll; compress controls at low heights instead.
     Approved internal scrollers are repeated item lists only. See docs/MOBILE_LAYOUT_RULES.md. */
  :root {
    --mobile-panel-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
  }

  body.player-open {
    --mobile-panel-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  .page-section,
  .pricing-page,
  .profile-page {
    max-height: 100svh;
    overflow: hidden;
  }

  .create-page,
  .history-page,
  .tool-page,
  .library-page {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: var(--mobile-header-space) 22px var(--mobile-page-bottom);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.player-open .create-page,
  body.player-open .history-page,
  body.player-open .tool-page,
  body.player-open .library-page {
    padding-bottom: var(--mobile-player-reserve);
  }

  .create-layout,
  .history-layout,
  .split-tool,
  .library-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--mobile-page-gap);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: start;
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel,
  .history-layout > .result-panel,
  .history-layout > .lyrics-stage-panel,
  .split-tool > .studio-panel,
  .split-tool > .lyrics-output-panel,
  .library-dashboard > .library-collection-panel,
  .library-dashboard > .library-detail-panel {
    height: var(--mobile-panel-height);
    min-height: var(--mobile-panel-height);
    max-height: var(--mobile-panel-height);
    margin: 0 0 var(--mobile-page-safe-gap);
    scroll-margin-top: var(--mobile-header-space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The section padding supplies the final page's safe area. A second trailing
     margin here would make every two-panel section taller than two viewports. */
  .create-layout > :last-child,
  .history-layout > :last-child,
  .split-tool > :last-child,
  .library-dashboard > :last-child {
    margin-bottom: 0;
  }

  .studio-panel,
  .style-lab-panel,
  .result-panel,
  .lyrics-stage-panel,
  .lyrics-output-panel,
  .library-collection-panel,
  .library-detail-panel,
  .profile-card,
  .profile-section,
  .pricing-grid .price-card {
    min-height: 0;
    overflow: hidden;
  }

  .queue-list,
  .record-list,
  .library-song-list,
  .player-queue-list,
  textarea {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tool-page .split-tool {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .lyrics-output-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .lyrics-output-panel .section-kicker,
  .lyrics-output-panel h2 {
    margin: 0;
  }

  .lyrics-output {
    min-height: 0;
    max-height: none;
    resize: none;
  }

  .lyrics-output-panel .lyrics-create-button {
    min-height: 38px;
    margin-top: 0;
  }

  .profile-page {
    display: block;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding: var(--mobile-header-space) 14px var(--mobile-page-bottom);
    overflow: hidden;
  }

  .profile-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    height: 100%;
    min-height: 0;
  }

  .profile-hero {
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .profile-hero h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
  }

  .profile-hero p {
    display: none;
  }

  .profile-hero .ghost-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .profile-root {
    gap: 8px;
    min-height: 0;
    overflow: hidden;
  }

  .profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "account library"
      "vip producer";
    gap: 8px;
    min-height: 0;
  }

  .profile-card {
    min-height: 0;
    padding: 10px;
    gap: 8px;
  }

  .account-card {
    grid-row: auto;
    grid-column: auto;
    height: clamp(108px, 14svh, 122px);
    min-height: clamp(108px, 14svh, 122px);
    gap: 6px;
  }

  .account-card-heading {
    padding-bottom: 4px;
  }

  .account-email-display strong {
    font-size: clamp(13px, 3.65vw, 16px);
  }

  .producer-card {
    height: clamp(150px, 19svh, 166px);
    min-height: clamp(150px, 19svh, 166px);
    gap: 5px;
  }

  .producer-card-heading {
    gap: 4px;
    font-size: clamp(10px, 2.8vw, 11px);
  }

  .producer-card-heading span {
    gap: 4px;
  }

  .producer-svip-label {
    width: 44%;
    min-width: 64px;
    max-width: 44%;
    overflow: hidden;
    min-height: 22px;
    padding: 0 8px;
    font-size: clamp(10px, 2.6vw, 11px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .producer-display {
    justify-items: center;
    margin: 0;
    text-align: center;
  }

  .credit-display.producer-display strong {
    font-size: clamp(14px, 4vw, 17px);
  }

  .producer-action-row {
    padding-top: 6px;
  }

  .producer-card-action {
    height: 32px;
    min-height: 32px;
    width: 80px;
    padding: 0 9px;
    font-size: 10px;
  }

  .profile-person {
    gap: 10px;
  }

  .profile-avatar {
    width: 42px;
    height: 42px;
  }

  .profile-person h2 {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.15;
  }

  .profile-person p,
  .profile-card p {
    font-size: clamp(10px, 2.7vw, 11px);
    line-height: 1.25;
  }

  .profile-meta {
    gap: 6px;
    margin-top: 8px;
  }

  .profile-meta div {
    gap: 8px;
    padding-top: 6px;
  }

  .profile-meta dt,
  .profile-meta dd {
    font-size: clamp(10px, 2.7vw, 11px);
  }

  .metric-card strong {
    margin: 8px 0 4px;
    font-size: clamp(24px, 7vw, 28px);
  }

  .profile-card-head,
  .metric-card span {
    font-size: clamp(10px, 2.8vw, 11px);
  }

  .vip-credit-card {
    grid-column: auto;
    height: clamp(150px, 19svh, 166px);
    min-height: clamp(150px, 19svh, 166px);
  }

  .account-card,
  .metric-card {
    height: clamp(108px, 14svh, 122px);
    min-height: clamp(108px, 14svh, 122px);
    align-content: space-between;
  }

  .vip-credit-card .profile-card-head strong {
    max-width: 45%;
    font-size: clamp(10px, 2.6vw, 11px);
  }

  .credit-display {
    margin: 2px 0 4px;
    justify-items: start;
    text-align: left;
  }

  .credit-display strong {
    font-size: clamp(24px, 7.2vw, 32px);
  }

  .producer-display {
    justify-items: center;
    margin: 0;
    text-align: center;
  }

  .credit-display.producer-display strong {
    font-size: clamp(14px, 4vw, 17px);
  }

  .profile-section {
    min-height: 0;
    padding: 14px;
    overflow: hidden;
  }

  .profile-section .section-title-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 14px;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .profile-section .section-title-row > div {
    min-width: 0;
  }

  .profile-section .section-title-row h2 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.05;
  }

  .compact-profile-button {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
    flex: 0 0 auto;
  }

  .payment-empty {
    min-height: 0;
    padding: 14px 10px;
  }

  .payment-empty p {
    font-size: 12px;
    line-height: 1.35;
  }

  .payment-table {
    max-height: 34svh;
    overflow-y: auto;
  }

  .payment-row {
    grid-template-columns: minmax(116px, 1.35fr) minmax(70px, 0.8fr) minmax(88px, 0.9fr);
    gap: 8px;
    min-height: 42px;
    padding: 0 10px;
    font-size: clamp(11px, 2.8vw, 13px);
  }

  .payment-row span {
    display: block;
  }

  .payment-row .payment-optional {
    display: none;
  }

  .payment-head {
    font-size: clamp(10px, 2.65vw, 12px);
  }

  .profile-footer-actions {
    padding-top: 0;
  }

  .profile-logout-button {
    width: min(100%, 184px);
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    justify-content: center;
    padding: 0 18px;
    font-size: 13px;
  }

  .pricing-page {
    display: block;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding: var(--mobile-header-space) 3.6vw var(--mobile-page-bottom);
  }

  .pricing-page .content-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px;
    height: 100%;
    min-height: 0;
  }

  .billing-pages-viewport,
  .billing-pages-track,
  .billing-page {
    min-height: 0;
  }

  .pricing-hero {
    display: grid;
    gap: 4px;
    margin: 0;
  }

  .pricing-hero .section-kicker {
    margin: 0;
    font-size: 11px;
  }

  .pricing-hero h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(22px, 6vw, 25px);
    line-height: 1.12;
  }

  .pricing-hero p {
    display: -webkit-box;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #5d6680;
    font-size: 12px;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pricing-title-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    margin: 0 0 2px;
    padding-top: 12px;
    text-align: center;
    overflow: visible;
  }

  .pricing-title-row > div:first-child {
    min-width: 0;
  }

  .pricing-title-row .section-kicker {
    margin: 0 0 2px;
    font-size: 11px;
  }

  .pricing-title-row h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .billing-toggle {
    justify-self: center;
    grid-template-columns: repeat(3, max-content);
    width: max-content;
    max-width: 100%;
    padding: 3px;
    border-radius: 9px;
  }

  .billing-toggle button {
    min-height: 38px;
    min-width: max-content;
    padding: 0 clamp(7px, 2.4vw, 12px);
    border-radius: 7px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .billing-toggle .billing-label {
    font-size: clamp(11px, 4vw, 13px);
  }

  .billing-toggle button span {
    display: inline;
    margin-left: 2px;
    font-size: 10px;
  }

  .mobile-pricing-selector {
    display: grid;
    gap: 6px;
    padding-top: 7px;
    margin-bottom: 8px;
    overflow: visible;
  }

  .mobile-pricing-selector .pricing-current-plan-badge {
    top: 0;
    right: 4px;
    min-height: 17px;
    max-width: calc(100% - 8px);
    padding: 0 5px;
    font-size: 8px;
    transform: translateY(-45%);
  }

  .pricing-grid .pricing-current-plan-badge {
    display: none;
  }

  .mobile-pricing-selector .price-option {
    --mobile-plan-active-color: #467ac8;
    --mobile-plan-active-shadow: rgba(53, 103, 182, 0.24);
    position: relative;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px 32px 38px;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition:
      border-color 0.18s ease,
      outline-color 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease;
  }

  .mobile-pricing-selector .plan-tag {
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    padding-inline: 4px;
    font-size: var(--i18n-fit-font-size, 10px);
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  .mobile-pricing-selector .price-option > strong {
    min-width: 0;
    width: 100%;
    align-self: center;
    font-size: var(--i18n-fit-font-size, 14px);
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
  }

  .mobile-pricing-selector .option-price {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .mobile-pricing-selector .option-price b {
    display: block;
    max-width: 100%;
    font-size: var(--i18n-fit-font-size, 22px);
    line-height: 1.05;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .mobile-pricing-selector .option-price small {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .mobile-pricing-selector .price-option[data-plan="creator"] {
    --mobile-plan-active-color: #6959d7;
    --mobile-plan-active-shadow: rgba(86, 72, 196, 0.28);
  }

  .mobile-pricing-selector .price-option[data-plan="studio"] {
    --mobile-plan-active-color: #c43d84;
    --mobile-plan-active-shadow: rgba(180, 48, 116, 0.28);
  }

  .mobile-pricing-selector .price-option:hover,
  .mobile-pricing-selector .price-option.active {
    transform: none;
  }

  .mobile-pricing-selector .price-option.active {
    z-index: 1;
    border-color: var(--mobile-plan-active-color);
    outline-color: var(--mobile-plan-active-color);
    box-shadow:
      0 8px 18px var(--mobile-plan-active-shadow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    filter: saturate(1.12) brightness(1.025);
  }

  .billing-page > .pricing-selector {
    display: none;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    transition: none;
    will-change: auto;
  }

  .pricing-grid .price-card {
    grid-area: 1 / 1;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: none;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
  }

  .pricing-grid .price-card.active {
    pointer-events: auto;
  }

  .pricing-plan-motion-ready .pricing-grid .price-card {
    transition: transform 0.34s cubic-bezier(0.22, 0.78, 0.22, 1);
  }

  .pricing-grid .price-card h2,
  .pricing-grid .price-card h3 {
    margin-top: 4px;
    font-size: 20px;
  }

  .pricing-grid .price {
    margin: 8px 0 4px;
    font-size: 42px;
  }

  .pricing-grid .price-card p:not(.price) {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pricing-grid .price-card ul {
    gap: 6px;
    margin: 10px 0 14px;
  }

  .pricing-grid .price-card li {
    font-size: 12px;
    line-height: 1.28;
  }
}

@media (max-width: 680px) {
  .pricing-grid .price-card {
    padding: 11px 13px;
  }

  .pricing-grid .price-card h2,
  .pricing-grid .price-card h3 {
    margin: 3px 0 0;
    font-size: 18px;
    line-height: 1.1;
  }

  .pricing-grid .price-card .price {
    margin: 4px 0 2px;
    font-size: clamp(28px, 8.5vw, 36px);
  }

  .pricing-grid .price-card ul {
    gap: 3px;
    margin: 5px 0 7px;
  }

  .pricing-grid .price-card li {
    gap: 5px;
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.2;
  }

  .pricing-grid .price-card li > svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
}

@media (max-width: 680px) and (max-height: 740px) {
  :root {
    --site-header-padding-y: clamp(7px, 1.25svh, 9px);
    --site-brand-font-size: clamp(19px, 3svh, 21px);
    --site-brand-logo-size: clamp(30px, 4.6svh, 32px);
    --mobile-header-space: calc(var(--workspace-header-bottom) + 1.5svh);
    --mobile-page-gap: 1.4svh;
    --mobile-page-bottom: 2.5svh;
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
  }

  .site-header {
    padding: var(--site-header-padding-y) 12px;
  }

  .brand {
    font-size: var(--site-brand-font-size);
  }

  .brand-logo {
    width: var(--site-brand-logo-size);
    height: var(--site-brand-logo-size);
  }

  .header-actions .solid-button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .mobile-menu-button,
  .account-button {
    width: var(--mobile-header-control-size, 44px);
    height: var(--mobile-header-control-size, 44px);
  }

  .studio-panel,
  .style-lab-panel,
  .result-panel,
  .lyrics-stage-panel,
  .library-collection-panel,
  .library-detail-panel,
  .lyrics-output-panel,
  .price-card {
    padding: 10px;
  }

  .studio-panel .panel-head h1,
  .studio-panel .panel-head h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .result-panel h2,
  .result-panel h3 {
    font-size: 19px;
    line-height: 1.08;
  }

  .section-kicker {
    font-size: 11px;
  }

  .field-block span,
  .field-label {
    font-size: var(--field-text-size, 11px);
  }

  input[type="text"],
  select {
    height: 34px;
    font-size: 13px;
  }

  textarea {
    min-height: 58px;
    max-height: 15svh;
    padding: 8px 10px 31px;
    font-size: var(--field-text-size);
    line-height: 1.36;
  }

  .textarea-counter {
    left: auto;
    right: 10px;
    bottom: 7px;
    font-size: 11px;
  }

  .lyrics-field textarea {
    min-height: 68px;
    max-height: 16svh;
  }

  .inspiration-tags {
    gap: 5px;
  }

  .inspiration-tag,
  .style-lab-panel .style-chip,
  .style-lab-panel .instrument-chip,
  .extend-style-panel .extend-style-chip,
  .extend-style-panel .extend-instrument-chip {
    min-height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  .style-lab-panel {
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    gap: 5px;
  }

  .style-lab-panel p {
    font-size: 11px;
    line-height: 1.28;
    -webkit-line-clamp: 1;
  }

  .style-lab-panel .mood-map,
  .extend-style-panel .mood-map {
    height: clamp(92px, 22svh, 126px);
  }

  .mood-axis-x,
  .mood-axis-y {
    font-size: 10px;
  }

  .mood-axis-y {
    height: 21px;
    padding: 0 6px;
  }

  .mood-axis-x {
    min-height: 20px;
    bottom: 6px;
  }

  .mood-dot {
    width: 14px;
    height: 14px;
  }

  .style-lab-panel .mood-readout span,
  .extend-style-panel .mood-readout span {
    min-height: 24px;
    padding: 5px 6px;
    font-size: 10px;
  }

  .right-control-grid {
    gap: 6px;
  }

  .style-lab-panel select,
  .extend-style-panel select {
    height: 30px;
    font-size: 12px;
  }

  .style-submit-row .generate-button {
    min-height: 34px;
    font-size: 14px;
  }

  .style-submit-row .cost-note {
    font-size: 10px;
    line-height: 1.18;
    -webkit-line-clamp: 1;
  }

  .how-head h2 {
    font-size: 22px;
  }

  .how-head p,
  .qa-copy p,
  .qa-list p {
    font-size: 12px;
    line-height: 1.36;
  }

  .how-steps article,
  .qa-list article {
    padding: 10px 12px;
  }

  .profile-hero {
    gap: 8px;
  }

  .pricing-page {
    padding-top: var(--mobile-header-space);
  }

  .pricing-grid .price {
    font-size: 36px;
  }
}

@media (max-width: 680px) and (max-height: 660px) {
  :root {
    --site-header-padding-y: 7px;
    --site-brand-font-size: clamp(19px, 3.1svh, 20px);
    --site-brand-logo-size: 30px;
    --mobile-header-space: calc(var(--workspace-header-bottom) + 1.2svh);
    --mobile-page-gap: 1.2svh;
    --mobile-page-bottom: 1.8svh;
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
  }

  .brand {
    font-size: var(--site-brand-font-size);
  }

  .brand-logo {
    width: var(--site-brand-logo-size);
    height: var(--site-brand-logo-size);
  }

  .header-actions .solid-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .mobile-menu-button,
  .account-button {
    width: var(--mobile-header-control-size, 44px);
    height: var(--mobile-header-control-size, 44px);
  }

  .studio-panel,
  .style-lab-panel,
  .result-panel,
  .lyrics-stage-panel,
  .library-collection-panel,
  .library-detail-panel,
  .lyrics-output-panel,
  .price-card {
    padding: 8px;
  }

  .studio-panel .panel-head h1,
  .studio-panel .panel-head h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .result-panel h2,
  .result-panel h3 {
    font-size: 17px;
  }

  .style-lab-panel {
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    gap: 4px;
  }

  .style-lab-panel > div:first-child p {
    display: none;
  }

  .style-lab-panel .mood-map,
  .extend-style-panel .mood-map {
    height: clamp(78px, 19svh, 106px);
  }

  .style-lab-panel .chips-group,
  .extend-style-panel .chips-group {
    gap: 4px;
  }

  .inspiration-tag,
  .style-lab-panel .style-chip,
  .style-lab-panel .instrument-chip,
  .extend-style-panel .extend-style-chip,
  .extend-style-panel .extend-instrument-chip {
    min-height: 20px;
    padding: 0 6px;
    font-size: 9.5px;
  }

  .style-lab-panel .mood-readout span,
  .extend-style-panel .mood-readout span {
    min-height: 22px;
    padding: 4px 5px;
  }

  input[type="text"],
  select,
  .style-lab-panel select,
  .extend-style-panel select {
    height: 28px;
    font-size: 12px;
  }

  textarea {
    min-height: 48px;
    max-height: 13svh;
    font-size: 12px;
  }

  .lyrics-field textarea {
    min-height: 58px;
    max-height: 14svh;
  }

  .style-submit-row .generate-button {
    min-height: 30px;
    font-size: 13px;
  }

  .style-submit-row .cost-note {
    display: none;
  }
}

@media (min-width: 681px) {
  .library-page .library-dashboard.history-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
    height: var(--desktop-panel-height);
    min-height: var(--desktop-panel-min-height);
    max-height: var(--desktop-panel-height);
    overflow: visible;
    transform: none;
  }

  body.player-open .library-page .library-dashboard.history-layout {
    height: var(--desktop-player-panel-height);
    min-height: var(--desktop-player-panel-min-height);
    max-height: var(--desktop-player-panel-height);
    transform: none;
  }

  .library-page .library-dashboard.history-layout > .library-collection-panel,
  .library-page .library-dashboard.history-layout > .library-detail-panel {
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
  }

  .library-page .library-dashboard.history-layout.is-single {
    grid-template-columns: minmax(0, min(760px, 100%));
    grid-template-rows: minmax(0, 1fr);
    justify-content: center;
  }

  .library-page .library-collection-panel {
    display: grid;
    grid-template-rows: clamp(176px, 24vh, 198px) minmax(0, 1fr);
    gap: clamp(12px, 2vh, 16px);
    overflow: hidden;
  }

  .library-page .album-panel {
    min-height: 0;
    max-height: none;
  }

  .library-page .library-song-panel {
    min-height: 0;
    overflow: hidden;
  }

  .mood-axis-y {
    left: 12px;
    top: 50%;
    display: grid;
    width: 44px;
    height: 112px;
    min-width: 0;
    min-height: 0;
    grid-template-rows: repeat(4, auto);
    align-content: center;
    justify-content: center;
    justify-items: center;
    gap: 5px;
    padding: 0 6px;
    text-align: center;
    transform: translateY(-50%);
  }

  .mood-axis-y em,
  .mood-axis-y b,
  .mood-axis-y i {
    display: grid;
    width: 100%;
    justify-items: center;
    text-align: center;
    line-height: 1;
  }
}

@media (max-width: 680px) {
  .library-page .library-dashboard.history-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--mobile-page-gap);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    transform: none;
  }

  .library-page .library-dashboard.history-layout > .library-collection-panel,
  .library-page .library-dashboard.history-layout > .library-detail-panel {
    height: var(--mobile-panel-height);
    min-height: var(--mobile-panel-height);
    max-height: var(--mobile-panel-height);
    margin: 0 0 var(--mobile-page-safe-gap);
    scroll-margin-top: calc(var(--mobile-header-space) + 1px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .library-page .library-collection-panel {
    display: grid;
    grid-template-rows: auto 154px minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
  }

  .library-page .mobile-library-head {
    min-height: 0;
    margin-bottom: 0;
  }

  .library-page .album-panel {
    min-height: 0;
    max-height: none;
    padding: 10px;
    overflow: hidden;
  }

  .library-page .album-grid {
    min-height: 68px;
  }

  .library-page .library-song-panel {
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .library-page .library-song-list {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  header.site-header {
    gap: 6px;
    padding-inline: 10px;
  }

  .site-header > .brand {
    gap: 4px;
    font-size: 15px;
  }

  .site-header > .brand .brand-logo {
    width: 26px;
    height: 26px;
  }

  .site-header .header-actions .start-gate-button {
    width: 82px;
    max-width: 82px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .intro-shell h1 {
    font-size: 30px;
    line-height: 1.1;
  }

  .brand {
    gap: 8px;
    font-size: var(--site-brand-font-size);
  }

  .brand-logo {
    width: var(--site-brand-logo-size);
    height: var(--site-brand-logo-size);
  }

  .header-actions .solid-button {
    padding: 0 12px;
    font-size: 13px;
  }

  .right-control-grid,
  .mood-readout {
    gap: 6px;
  }

  .mood-readout span {
    padding: 7px 6px;
    font-size: 10px;
  }

  select {
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (max-width: 680px) {
  .voice-list-item {
    grid-template-columns: 44px minmax(0, 1fr) minmax(78px, 92px) 36px 36px;
    align-items: center;
  }

  .voice-list-item .voice-use-button {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding-inline: 6px;
    white-space: nowrap;
  }

  .voice-list-item .voice-edit-button {
    grid-column: 4;
    grid-row: 1;
  }

  .voice-list-item .voice-delete-button {
    grid-column: 5;
    grid-row: 1;
  }

  .persona-modal-shell,
  .extend-modal-shell {
    align-items: end;
    place-items: end center;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .persona-modal-shell .voice-modal,
  .extend-modal-shell .voice-modal {
    transform: translateY(108%) scale(0.98);
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease;
    will-change: transform;
  }

  .persona-modal-shell[aria-hidden="false"] .voice-modal,
  .extend-modal-shell[aria-hidden="false"] .voice-modal {
    transform: translateY(0) scale(1);
  }

  .persona-modal-shell.is-closing .voice-modal,
  .extend-modal-shell.is-closing .voice-modal {
    transform: translateY(108%) scale(0.98);
  }

  .persona-modal-shell.is-closing,
  .extend-modal-shell.is-closing {
    opacity: 0;
    pointer-events: none;
  }
}

.persona-modal-content:has(.persona-list) {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 16px;
}

.persona-modal-content .persona-list {
  min-height: 0;
  padding-top: 0;
  border-top: 0;
  overflow-y: auto;
}

.persona-modal-content .persona-list:has(.voice-empty) {
  overflow: visible;
}

.persona-modal-content .voice-empty {
  height: auto;
  min-height: 150px;
  color: #5f6c86;
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(49, 87, 255, 0.18);
}

@media (max-width: 680px) {
  .persona-modal-content:has(.persona-list) {
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 12px;
  }

  .persona-modal-content .persona-list:has(.voice-empty) {
    min-height: 0;
    overflow: visible;
  }

  .persona-modal-content .voice-empty {
    min-height: 132px;
    padding: 18px 14px;
  }
}

.field-block textarea {
  font-size: var(--field-text-size, 13px);
}

.lyrics-detail-head,
.library-detail-head {
  align-items: flex-end;
}

.lyrics-detail-head .detail-action-group,
.library-detail-head .detail-action-group {
  align-items: flex-end;
  padding-bottom: 1px;
}

/* Unified mood axis badges for create and extend panels. Keep this block last. */
.mood-map {
  cursor: pointer !important;
}

.mood-map.is-dragging {
  cursor: grabbing !important;
}

.mood-map .mood-dot {
  cursor: grab !important;
}

.mood-map.is-dragging .mood-dot {
  cursor: grabbing !important;
}

.mood-readout span {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mood-readout span b {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.model-select-pill {
  position: relative;
}

@media (max-width: 680px) {
  /* Mobile i18n mode-control row */
  .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    width: 100%;
  }

  .model-voice-stack {
    display: contents;
  }

  .model-select-pill {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .creation-mode-toggles {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, max-content);
    justify-self: end;
  }

  .panel-head,
  .model-voice-stack,
  .creation-mode-toggles,
  .studio-panel .field-line,
  .studio-title-language-row,
  .studio-clear-row {
    min-width: 0;
    max-width: 100%;
  }

  .creation-mode-toggles {
    display: grid;
    width: max-content;
  }

  .creation-mode-toggles .instrumental-toggle {
    width: max-content;
  }

  .creation-mode-toggles .instrumental-toggle > span {
    white-space: nowrap;
  }

  .model-select-pill {
    display: grid !important;
    grid-template-columns: auto auto max-content;
    gap: 5px !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 6px 8px !important;
  }

  .model-select-pill span {
    flex: 0 0 auto;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .model-select-pill select {
    field-sizing: content;
    width: auto !important;
    min-width: 7ch !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  .model-select-pill em {
    top: -12px;
    right: -6px;
    height: 16px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 16px;
    box-shadow: 0 7px 14px rgba(139, 92, 246, 0.18);
  }

  .studio-panel .field-line .text-tool-button,
  .studio-clear-row .clear-studio-button {
    min-width: 0;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .studio-title-language-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 40%);
  }

  .studio-title-language-row .studio-language-field,
  .studio-title-language-row .studio-language-field select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.mood-axis {
  z-index: 4 !important;
  pointer-events: none;
  color: #2f3654 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mood-axis-x {
  left: 50% !important;
  right: auto !important;
  bottom: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 94px !important;
  height: 24px !important;
  min-width: 94px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(150, 180, 255, 0.42) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 249, 255, 0.64)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 139, 0.3), rgba(139, 92, 246, 0.28), rgba(47, 111, 255, 0.26)) border-box !important;
  box-shadow:
    0 8px 18px rgba(49, 87, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

.mood-axis-y {
  left: 10px !important;
  top: 50% !important;
  display: grid !important;
  grid-template-rows: repeat(4, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 72px !important;
  min-width: 42px !important;
  min-height: 72px !important;
  gap: 0 !important;
  padding: 4px 3px !important;
  border: 1px solid rgba(150, 180, 255, 0.42) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(237, 248, 255, 0.58)) padding-box,
    linear-gradient(160deg, rgba(47, 111, 255, 0.22), rgba(139, 92, 246, 0.22), rgba(255, 79, 139, 0.18)) border-box !important;
  box-shadow:
    0 10px 22px rgba(49, 87, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

.mood-axis-y em,
.mood-axis-y b,
.mood-axis-y i,
.mood-axis-x em,
.mood-axis-x b,
.mood-axis-x i {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.mood-axis-y em {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65718a !important;
}

.mood-axis-y i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5060d8 !important;
  font-size: 11px !important;
}

.mood-axis-y b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 680px) {
  .mood-axis {
    font-size: 10px !important;
  }

  .mood-axis-y {
    left: 8px !important;
    top: 50% !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 72px !important;
    min-width: 48px !important;
    min-height: 72px !important;
    gap: 2px !important;
    padding: 4px 5px !important;
    border-radius: 12px !important;
    transform: translateY(-50%) !important;
  }

  .mood-axis-y em,
  .mood-axis-y b,
  .mood-axis-y i {
    display: block !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .mood-axis-x {
    bottom: 7px !important;
    width: 98px !important;
    min-width: 98px !important;
    height: 22px !important;
    min-height: 22px !important;
  }
}

@media (max-width: 680px) {
  .site-header .header-actions {
    min-width: var(--mobile-header-control-size, 44px) !important;
    justify-content: end !important;
  }

  .site-header .account-button {
    width: var(--mobile-header-control-size, 44px) !important;
    height: var(--mobile-header-control-size, 44px) !important;
    min-width: var(--mobile-header-control-size, 44px) !important;
    min-height: var(--mobile-header-control-size, 44px) !important;
    padding: 4px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  .site-header .account-button .account-avatar {
    width: var(--site-account-avatar-size) !important;
    height: var(--site-account-avatar-size) !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .site-header .account-button .account-label {
    display: none !important;
  }
}

@media (min-width: 681px) {
  .style-lab-panel,
  .extend-style-panel {
    gap: clamp(6px, 0.9vh, 9px) !important;
  }

  .style-lab-panel .mood-map,
  .extend-style-panel .mood-map {
    min-height: 0 !important;
    height: clamp(132px, 20vh, 156px) !important;
  }

  .style-lab-panel .style-chip,
  .style-lab-panel .instrument-chip,
  .extend-style-panel .extend-style-chip,
  .extend-style-panel .extend-instrument-chip {
    min-height: 26px !important;
  }

  .style-submit-row .generate-button {
    min-height: 38px !important;
  }
}

@media (max-width: 680px) {
  .mood-dot {
    width: 34px !important;
    height: 34px !important;
    margin-left: -17px !important;
    margin-top: -17px !important;
    box-shadow:
      0 0 0 8px rgba(255, 255, 255, 0.82),
      0 10px 24px rgba(139, 92, 246, 0.24),
      0 2px 0 rgba(255, 255, 255, 0.75) inset !important;
  }

  .mood-map.is-dragging .mood-dot {
    box-shadow:
      0 0 0 10px rgba(255, 79, 139, 0.14),
      0 14px 30px rgba(139, 92, 246, 0.28),
      0 2px 0 rgba(255, 255, 255, 0.75) inset !important;
  }
}

/* Final mood-axis color system: create and extend must stay visually identical. */
.mood-map {
  background:
    radial-gradient(circle at 0% 100%, rgba(47, 111, 255, 0.34), rgba(47, 111, 255, 0.12) 28%, transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.09) 32%, transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(176, 94, 255, 0.24), rgba(255, 79, 139, 0.12) 34%, transparent 58%),
    linear-gradient(45deg, rgba(47, 111, 255, 0.18) 0%, rgba(139, 92, 246, 0.12) 48%, rgba(255, 79, 139, 0.18) 100%),
    linear-gradient(0deg, rgba(84, 91, 120, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 91, 120, 0.08) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, auto, 36px 36px, 36px 36px !important;
}

.mood-axis-x {
  gap: 3px !important;
}

.mood-axis-y {
  height: 66px !important;
  min-height: 66px !important;
  padding-block: 3px !important;
}

.mood-axis-x em,
.mood-axis-x b,
.mood-axis-x i,
.mood-axis-y em,
.mood-axis-y b,
.mood-axis-y i {
  background: linear-gradient(135deg, #2f6fff 0%, #8b5cf6 48%, #ff4f8b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.mood-axis-x i {
  background: linear-gradient(90deg, #2f6fff, #8b5cf6 48%, #ff4f8b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  transform: scaleX(1.28);
  transform-origin: center;
}

.mood-axis-y i {
  background: linear-gradient(0deg, #2f6fff, #8b5cf6 48%, #ff4f8b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  transform: scaleY(1.18);
  transform-origin: center;
}

.mood-dot {
  --mood-note-primary: #6b7cff;
  --mood-note-secondary: #ff4f8b;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  filter: drop-shadow(0 7px 10px rgba(79, 95, 255, 0.22));
}

.mood-dot::before {
  content: "𝄞";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--mood-note-primary), #8b5cf6 48%, var(--mood-note-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "Segoe UI Symbol", "Noto Music", "Bravura", "Arial Unicode MS", sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 34px;
  text-align: center;
}

.mood-map.is-dragging .mood-dot {
  box-shadow: none !important;
  filter: drop-shadow(0 10px 14px rgba(255, 79, 139, 0.22));
}

@media (max-width: 680px) {
  .mood-axis-y {
    height: 66px !important;
    min-height: 66px !important;
    gap: 0 !important;
    padding-block: 3px !important;
  }

  .mood-dot {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .mood-dot::before {
    font-size: 44px;
    line-height: 44px;
  }
}

/* Mood axis plates are drawn as one gradient label, not per-character text fills. */
.mood-axis-x,
.mood-axis-y {
  background:
    linear-gradient(135deg, #dbe8ff 0%, #eadcff 52%, #ffe0ef 100%) padding-box,
    linear-gradient(135deg, #6fa1ff 0%, #9b6dff 50%, #ff6aa0 100%) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(93, 111, 255, 0.12) !important;
  color: transparent !important;
  overflow: hidden !important;
}

.mood-axis-x > *,
.mood-axis-y > * {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.mood-axis-x::after,
.mood-axis-y::after {
  display: block;
  width: 100%;
  font-weight: 800;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none !important;
}

.mood-axis-x::after {
  content: "节奏  慢  ➜  快";
  background-image: linear-gradient(90deg, #2f6fff 0%, #755cff 48%, #ff4f8b 100%);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}

.mood-axis-y {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 4px 5px !important;
}

.mood-axis-y::after {
  content: "情绪\A欢快\A⬆\A悲伤";
  background-image: linear-gradient(180deg, #ff4f8b 0%, #8b5cf6 50%, #2f6fff 100%);
  font-size: 11px;
  line-height: 1.08;
  text-align: center;
  white-space: pre;
}

.mood-dot::before {
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 0 rgba(255, 255, 255, 0.96),
    0 2px 8px rgba(80, 90, 180, 0.2);
}

@media (max-width: 680px) {
  .mood-axis-y {
    width: 50px !important;
    min-width: 50px !important;
    height: 66px !important;
    min-height: 66px !important;
  }
}

/* Keep axis titles readable while the value text behaves like one gradient plate. */
.mood-axis-x {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  padding-inline: 8px !important;
}

.mood-axis-x::before,
.mood-axis-y::before {
  display: block;
  color: #10172a !important;
  -webkit-text-fill-color: #10172a !important;
  background: none !important;
  font-weight: 850;
  letter-spacing: 0;
}

.mood-axis-x::before {
  content: "节奏";
  font-size: 11px;
  line-height: 18px;
}

.mood-axis-x::after {
  content: "慢 ➜ 快";
}

.mood-axis-y {
  row-gap: 2px !important;
}

.mood-axis-y::before {
  content: "情绪";
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.mood-axis-y::after {
  content: "欢快\A⬆\A悲伤";
  line-height: 1.08;
  transform: translateY(2px);
}

.mood-dot::before {
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

@media (max-width: 680px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select,
  .studio-panel #songTitle,
  .extend-form-panel input,
  .extend-form-panel textarea,
  .voice-detail-field input,
  .voice-detail-field textarea,
  .voice-device-field select,
  .style-lab-panel select,
  .extend-style-panel select {
    font-size: max(16px, var(--field-text-size, 13px)) !important;
    transform: none !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    transform: none !important;
  }

  .model-select-pill select,
  .model-select-pill #musicModelSelect {
    font-size: 12px !important;
    height: 26px;
    line-height: 1;
  }

  /* Library has a more specific legacy panel selector. Keep its final visible
     panel on the same one/two viewport contract as every other mobile tool. */
  .library-page .library-dashboard.history-layout > :last-child {
    margin-bottom: 0;
  }

  .billing-toggle button[data-billing="quarterly"],
  .billing-toggle button[data-billing="yearly"] {
    position: relative;
    overflow: visible;
  }

  .billing-toggle button[data-billing="quarterly"] .billing-save-badge:not([hidden]),
  .billing-toggle button[data-billing="yearly"] .billing-save-badge:not([hidden]) {
    position: absolute;
    top: -9px;
    right: -6px;
    z-index: 2;
    display: inline-flex;
    min-height: 19px;
    margin: 0;
    padding: 0 7px;
    color: #ffffff;
    font-size: 9px;
    line-height: 1;
  }
}

/* WORKSPACE_LAYOUT_CONTRACT_START
   Formal application pages share one viewport contract. On desktop, the space
   below the fixed header and above the optional player belongs to the page
   layout; individual pages must not introduce their own height caps.
   Panel internals have one canonical mobile-first layout. Desktop may only
   place two unchanged panel components in equal columns. */
@media (min-width: 681px) {
  :root {
    --workspace-header-bottom: 8.25svh;
    --workspace-player-top: 90svh;
    --workspace-page-top-gap: 4svh;
    --workspace-page-bottom-gap: 3svh;
    --workspace-player-gap: 1.8svh;
    --workspace-page-top-space: calc(var(--workspace-header-bottom) + var(--workspace-page-top-gap));
    --workspace-page-bottom-space: var(--workspace-page-bottom-gap);
    --workspace-player-reserve: calc(100svh - var(--workspace-player-top) + var(--workspace-player-gap));
  }

  body.player-open {
    --workspace-page-bottom-space: var(--workspace-player-reserve);
  }

  .workspace-page {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding-block-start: var(--workspace-page-top-space);
    padding-block-end: var(--workspace-page-bottom-space);
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.player-open .workspace-page {
    padding-block-start: var(--workspace-page-top-space);
    padding-block-end: var(--workspace-page-bottom-space);
  }

  .workspace-page > .workspace-layout {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin-block: 0;
    transform: none;
  }

  /* Desktop gives the workspace an explicit height, so full size containment
     is safe and supplies the block-axis reference for proportional scaling. */
  .create-layout {
    container: create-workspace / size;
  }

  body.player-open .workspace-page > .workspace-layout {
    height: 100%;
    min-height: 0;
    max-height: none;
    transform: none;
  }

  .workspace-split-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .workspace-split-layout > .studio-panel,
  .workspace-split-layout > .style-lab-panel,
  .workspace-split-layout > .result-panel,
  .workspace-split-layout > .lyrics-stage-panel,
  .workspace-split-layout > .lyrics-output-panel {
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  .library-page .library-dashboard.history-layout {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  body.player-open .library-page .library-dashboard.history-layout {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .pricing-page > .workspace-layout,
  .profile-page > .workspace-layout {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .profile-page > .workspace-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .profile-page .profile-root {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Wide desktop pages are composed at their large reference size and scaled
     as complete scenes. Inverse height compensation preserves the visible page
     boundary while panels, spacing, typography, icons, and controls retain the
     same internal proportions. */
  @media (min-width: 981px) {
    .workspace-page:not(.create-page) > .workspace-layout,
    body.player-open .workspace-page:not(.create-page) > .workspace-layout {
      height: var(--workspace-content-unscaled-height);
      transform: scale(var(--workspace-content-scale));
      transform-origin: top center;
    }

    .workspace-page.create-page > .create-layout,
    body.player-open .workspace-page.create-page > .create-layout {
      height: var(--create-workspace-unscaled-height);
      transform: scale(var(--create-workspace-scale));
      transform-origin: top center;
    }

    .intro-page,
    .how-section,
    .qa-page,
    body.player-open .qa-page {
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      overflow: hidden;
    }

    .qa-page,
    body.player-open .qa-page {
      padding-block-start: var(--workspace-page-top-space);
      padding-block-end: var(--workspace-page-bottom-space);
    }

    .intro-shell,
    .how-section > .content-shell {
      zoom: var(--workspace-content-scale);
    }

    .qa-layout,
    .site-footer {
      zoom: var(--qa-content-scale);
    }
  }
}

@media (max-width: 680px) {
  :root {
    --workspace-header-bottom: 8.75svh;
    --workspace-player-top: 92.5svh;
    --mobile-header-space: calc(var(--workspace-header-bottom) + 2svh);
    --mobile-page-gap: 1.7svh;
    --mobile-page-bottom: 3.8svh;
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
  }

  body.player-open .pricing-page,
  body.player-open .profile-page {
    padding-bottom: var(--mobile-player-reserve);
  }
}

@media (max-width: 680px) and (max-height: 740px) {
  :root {
    --mobile-header-space: calc(var(--workspace-header-bottom) + 1.5svh);
    --mobile-page-gap: 1.4svh;
    --mobile-page-bottom: 2.5svh;
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
  }
}

@media (max-width: 680px) and (max-height: 660px) {
  :root {
    --mobile-header-space: calc(var(--workspace-header-bottom) + 1.2svh);
    --mobile-page-gap: 1.2svh;
    --mobile-page-bottom: 1.8svh;
    --mobile-player-reserve: calc(100svh - var(--workspace-player-top) + 1px);
  }
}
/* WORKSPACE_LAYOUT_CONTRACT_END */

/* Formal mobile interaction contract: one component page stays selected while
   the header, keyboard, or persisted player changes the available viewport. */
.textarea-shell textarea {
  padding-bottom: 44px;
}

.textarea-counter {
  right: 8px;
  bottom: 7px;
  padding: 3px 6px;
  border: 1px solid rgba(112, 124, 153, 0.12);
  border-radius: 5px;
  color: #59637a;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(28, 39, 68, 0.06);
  opacity: 1;
}

.model-select-pill em {
  right: -6px;
}

@media (min-width: 681px) {
  .site-header .brand-logo {
    width: var(--site-brand-logo-size);
    height: var(--site-brand-logo-size);
    border-radius: clamp(8px, 1.16svh, 11px);
    object-fit: cover;
  }
}

.player-peek-handle {
  z-index: 61;
  width: 180px;
  height: 52px;
}

.player-peek-handle span {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 30px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 22px rgba(71, 64, 138, 0.14);
  backdrop-filter: blur(12px);
}

.player-peek-handle span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #6f61e8;
  border-left: 2px solid #6f61e8;
  transform: translateY(3px) rotate(45deg);
}

.player-peek-handle span::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6 55%, #377dff);
  opacity: 0.82;
}

/* STUDIO_PANEL_SCALE_CONTRACT_START
   The form keeps one internal proportion at every width. Desktop only changes
   the outer workspace columns; it does not sacrifice the lyrics editor. */
.studio-panel {
  --studio-inspiration-gap: clamp(5px, 0.86cqh, 8px);
  --studio-inspiration-tag-height: clamp(24px, 3.7cqh, 30px);
  container: studio-panel / size;
  display: grid !important;
  grid-template-rows: auto minmax(0, 0.8fr) auto minmax(0, 1.2fr) auto;
  gap: clamp(5px, 0.9cqh, 9px) !important;
  padding: clamp(10px, 2.35cqh, 20px);
  overflow: hidden !important;
}

.studio-panel.is-instrumental {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.studio-panel > .panel-head,
.studio-panel > .field-block,
.studio-panel > .studio-title-language-row,
.studio-panel > .studio-voice-actions-row,
.studio-panel > .studio-clear-row {
  min-height: 0;
  margin: 0 !important;
}

.studio-panel > .studio-title-language-row {
  margin-bottom: clamp(5px, 0.8cqh, 9px) !important;
}

.studio-panel > .studio-clear-row {
  margin-top: clamp(5px, 0.8cqh, 9px) !important;
}

#studio > .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 10px;
  row-gap: 2px;
}

#studio .panel-heading-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

#studio .model-voice-stack {
  display: contents;
}

#studio .model-select-pill {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#studio .studio-prompt-heading {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-bottom: 1px;
  color: #33394a;
  min-width: 0;
  font-size: var(--i18n-fit-font-size, clamp(11px, 1.6cqh, 13px));
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 900;
  line-height: 1.2;
}

#studio .creation-mode-toggles {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.studio-panel .prompt-field,
.studio-panel .lyrics-field {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.studio-panel .lyrics-field > .field-line {
  min-height: clamp(28px, 4.1cqh, 34px);
  align-items: flex-end;
}

.studio-panel .field-line > label {
  padding-bottom: 1px;
  color: #33394a;
  font-size: var(--field-text-size, 13px);
  font-weight: 900;
  line-height: 1.2;
}

.studio-panel .song-title-field > span,
.studio-panel .studio-language-field > span,
.studio-panel .lyrics-field > .field-line > label {
  font-size: var(--field-text-size, 13px);
  line-height: 1.2;
}

.studio-panel .textarea-shell {
  flex: 1 1 0;
  min-height: 0;
}

.studio-panel textarea {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  resize: none;
}

.studio-panel .inspiration-tags,
.studio-panel .studio-inspiration-row,
.studio-panel .field-line,
.studio-panel .studio-voice-actions-row,
.studio-panel .studio-clear-row {
  flex: 0 0 auto;
}

.studio-panel .studio-inspiration-row {
  align-items: flex-start;
  gap: var(--studio-inspiration-gap);
}

.studio-panel .studio-inspiration-row .text-tool-button {
  min-width: 0;
  min-height: var(--studio-inspiration-tag-height);
  max-width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}

.studio-panel .studio-inspiration-row .text-tool-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-panel .studio-inspiration-row .inspiration-tags {
  min-width: 0;
  max-height: calc((var(--studio-inspiration-tag-height) * 2) + var(--studio-inspiration-gap));
  flex: 1 1 0;
  align-content: flex-start;
  gap: var(--studio-inspiration-gap);
  flex-wrap: wrap;
  overflow: hidden;
}

.studio-panel .panel-head h1,
.studio-panel .panel-head h2 {
  font-size: clamp(19px, 3.45cqh, 28px);
}

.studio-panel .panel-seo-subtitle {
  display: -webkit-box;
  max-width: 34ch;
  overflow: hidden;
  font-size: clamp(10px, 1.35cqh, 12px);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-panel .field-block {
  --field-text-size: clamp(11px, 1.6cqh, 13px);
  gap: clamp(5px, 0.86cqh, 7px);
}

.studio-panel .model-select-pill {
  gap: clamp(4px, 0.74cqh, 6px);
  padding: clamp(5px, 1cqh, 8px) clamp(7px, 1.24cqh, 10px);
  font-size: clamp(11px, 1.6cqh, 13px);
}

.studio-panel .model-select-pill select {
  height: clamp(24px, 3.46cqh, 28px);
  font-size: clamp(11px, 1.6cqh, 13px);
}

.studio-panel .instrumental-toggle {
  min-height: clamp(28px, 3.95cqh, 32px);
  padding-inline: clamp(8px, 1.48cqh, 12px) clamp(7px, 1.11cqh, 9px);
  font-size: clamp(10px, 1.48cqh, 12px);
}

.studio-panel .inspiration-tag {
  min-width: 0;
  max-width: 100%;
  min-height: var(--studio-inspiration-tag-height);
  padding-inline: clamp(7px, 1.24cqh, 10px);
  overflow: hidden;
  font-size: clamp(10px, 1.48cqh, 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-panel #songTitle,
.studio-panel .studio-language-field select {
  height: clamp(32px, 4.7cqh, 38px);
}

.studio-panel #songTitle {
  font-size: calc(var(--field-text-size, 13px) + 2px);
}

.studio-panel textarea {
  padding: clamp(10px, 1.6cqh, 13px) clamp(10px, 1.73cqh, 14px) 36px;
}
/* STUDIO_PANEL_SCALE_CONTRACT_END */

@media (max-width: 680px) {
  #lyricsForm {
    --lyrics-inspiration-tag-height: 26px;
  }

  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  [contenteditable="true"] {
    min-width: 0;
    max-width: 100%;
  }

  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap;
    overscroll-behavior-inline: contain;
  }

  textarea,
  [contenteditable="true"] {
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html:not(.mobile-keyboard-open),
  body:not(.mobile-keyboard-open) {
    overflow-anchor: none;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel,
  .history-layout > .result-panel,
  .history-layout > .lyrics-stage-panel,
  .split-tool > .studio-panel,
  .split-tool > .lyrics-output-panel,
  .library-dashboard > .library-collection-panel,
  .library-dashboard > .library-detail-panel {
    overflow-anchor: none;
  }

  .create-page,
  .history-page,
  .tool-page,
  .library-page {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  html.mobile-keyboard-open,
  body.mobile-keyboard-open {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    overscroll-behavior: none !important;
  }

  body.mobile-keyboard-open .player-peek-handle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(50%, 18px) !important;
  }

  body.mobile-keyboard-open .keyboard-focus-surface {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.mobile-keyboard-open .keyboard-focus-surface input:not([type]),
  body.mobile-keyboard-open .keyboard-focus-surface input[type="text"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="email"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="password"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="search"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="tel"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="url"],
  body.mobile-keyboard-open .keyboard-focus-surface input[type="number"] {
    touch-action: pan-x;
  }

  body.mobile-keyboard-open .keyboard-focus-surface > * {
    translate: 0 calc(-1 * var(--mobile-keyboard-shift, 0px));
    will-change: translate;
  }

  body.mobile-keyboard-restoring .keyboard-focus-surface > * {
    transition: translate 150ms ease-out;
  }

  .queue-list,
  .record-list,
  .library-song-list {
    overflow-y: hidden !important;
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;
  }

  .player-queue-list {
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .site-header .brand-logo {
    width: var(--site-brand-logo-size) !important;
    height: var(--site-brand-logo-size) !important;
    border-radius: clamp(8px, 1.4svh, 11px) !important;
    object-fit: cover;
  }

  .model-select-pill em {
    right: -6px !important;
  }

  .player-peek-handle {
    bottom: max(2px, env(safe-area-inset-bottom, 0px));
    width: 188px;
    height: 56px;
  }

  .player-peek-handle span {
    width: 80px;
    height: 32px;
  }

  .studio-panel .studio-voice-actions-row {
    gap: 5px;
  }

  .studio-panel .studio-voice-actions-row .custom-asset-note {
    font-size: 9px;
    line-height: 1;
  }

  .studio-panel .studio-clear-row .clear-studio-button {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }

  .textarea-shell textarea {
    padding-bottom: 42px;
  }

  .textarea-counter {
    right: 6px;
    bottom: 6px;
    padding: 3px 5px;
  }
}

/* Share uses one coral-berry identity across playing and library UI. */
.detail-share-button,
.track-share,
#globalPlayerShare,
#historyShareButton,
[data-library-share],
.library-v6-context-share,
.library-v6-icon-button[data-library-album-action="share"] {
  border-color: rgba(210, 104, 125, 0.2) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f39a73 0%, #e97b82 48%, #d76694 100%) !important;
  box-shadow:
    0 10px 22px rgba(216, 103, 125, 0.18),
    0 4px 12px rgba(194, 82, 139, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

.track-share {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.detail-share-button:disabled,
.track-share:disabled,
#globalPlayerShare:disabled,
#historyShareButton:disabled,
[data-library-share]:disabled,
.library-v6-context-share:disabled,
.library-v6-icon-button[data-library-album-action="share"]:disabled {
  filter: grayscale(0.32);
  opacity: 0.48;
}

@media (min-width: 681px) and (hover: hover) and (pointer: fine) {
  .detail-share-button:not(:disabled),
  .track-share:not(:disabled),
  #globalPlayerShare:not(:disabled),
  #historyShareButton:not(:disabled),
  [data-library-share]:not(:disabled),
  .library-v6-context-share:not(:disabled),
  .library-v6-icon-button[data-library-album-action="share"]:not(:disabled) {
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }

  .detail-share-button:not(:disabled):hover,
  .track-share:not(:disabled):hover,
  #globalPlayerShare:not(:disabled):hover,
  #historyShareButton:not(:disabled):hover,
  [data-library-share]:not(:disabled):hover,
  .library-v6-context-share:not(:disabled):hover,
  .library-v6-icon-button[data-library-album-action="share"]:not(:disabled):hover {
    border-color: rgba(188, 70, 118, 0.34) !important;
    background: linear-gradient(135deg, #ef8868 0%, #df6679 48%, #c94d8a 100%) !important;
    box-shadow:
      0 12px 24px rgba(199, 73, 124, 0.24),
      0 5px 13px rgba(182, 66, 136, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
    filter: saturate(1.08);
  }
}

/* Library v6: one collection shell with album/song views; the player detail stays unchanged. */
.library-page .library-v6-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 0 !important;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
}

.library-v6-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(61, 91, 201, 0.11);
}

.library-v6-head > div:first-child {
  min-width: 0;
}

.library-v6-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.12;
}

.library-v6-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  flex: 0 0 auto;
  min-width: 208px;
  padding: 4px;
  border: 1px solid rgba(61, 91, 201, 0.15);
  border-radius: 8px;
  background: rgba(239, 244, 255, 0.82);
}

.library-v6-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #63708b;
  font-size: 13px;
  font-weight: 900;
  background: transparent;
  cursor: pointer;
}

.library-v6-tabs button svg {
  width: 15px;
  height: 15px;
}

.library-v6-tabs button.active {
  color: #fff;
  background: var(--brand-gradient, linear-gradient(135deg, #ed4d9b, #8c5cf6 52%, #356cff));
  box-shadow: 0 8px 18px rgba(119, 84, 242, 0.22);
}

.library-v6-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 0;
}

.library-v6-context.is-hidden {
  min-height: 12px;
  padding: 6px 0;
}

.library-v6-context.root-actions-only {
  display: flex;
  justify-content: flex-end;
  min-height: 50px;
  padding: 8px 0;
}

.library-v6-context > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.library-v6-context strong,
.library-v6-context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-v6-context strong {
  color: var(--ink);
  font-size: 16px;
}

.library-v6-context > div span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.library-v6-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.library-v6-context-actions {
  display: flex !important;
  align-items: center;
  justify-self: end;
  gap: 2em !important;
  font-size: 13px;
  white-space: nowrap;
}

.library-v6-context > .library-v6-context-actions .library-v6-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.library-v6-context-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.library-v6-context > .library-v6-context-actions .library-v6-context-share > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.library-v6-context-share svg {
  width: 16px;
  height: 16px;
}

.library-v6-back,
.library-v6-dialog-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(99, 82, 239, 0.22);
  border-radius: 8px;
  color: #6952ec;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.library-v6-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: var(--brand-gradient, linear-gradient(135deg, #ed4d9b, #8c5cf6 52%, #356cff));
  box-shadow: 0 9px 22px rgba(89, 83, 240, 0.17);
  cursor: pointer;
}

.library-v6-create svg {
  width: 16px;
  height: 16px;
}

.library-v6-context,
.library-v6-list {
  will-change: opacity, transform;
}

.library-v6-panel.is-view-exiting .library-v6-context,
.library-v6-panel.is-view-exiting .library-v6-list {
  opacity: 0;
  transform: translateX(var(--library-exit-x, -16px));
  transition: opacity 140ms ease, transform 140ms ease;
}

.library-v6-panel.is-view-entering .library-v6-context,
.library-v6-panel.is-view-entering .library-v6-list {
  animation: library-v6-view-enter 220ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes library-v6-view-enter {
  from {
    opacity: 0;
    transform: translateX(var(--library-enter-x, 16px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.library-v6-list {
  min-height: 0;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.library-v6-album-list,
.library-v6-song-list {
  display: grid;
  align-content: start;
  gap: 9px;
}

.library-v6-album-row,
.library-v6-song-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgba(61, 91, 201, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.library-v6-album-row:hover,
.library-v6-song-row.is-playable:hover {
  border-color: rgba(118, 82, 242, 0.34);
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.library-v6-song-row.is-playing {
  border-color: rgba(116, 79, 244, 0.64);
  background: linear-gradient(105deg, rgba(239, 231, 255, 0.84), rgba(233, 240, 255, 0.78));
  box-shadow: inset 3px 0 #8758f5;
}

.library-v6-song-row.has-error,
.library-v6-song-row.is-expired {
  border-color: var(--sm-item-error-border);
  background: var(--sm-item-error-bg);
  box-shadow: var(--sm-item-error-shadow);
}

.library-v6-cover {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background:
    var(--brand-gradient, linear-gradient(135deg, #ed4d9b, #8c5cf6 52%, #356cff));
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 18px rgba(66, 80, 174, 0.14);
  cursor: pointer;
}

.library-v6-cover.is-album {
  background:
    linear-gradient(135deg, rgba(237, 77, 155, 0.9), rgba(53, 108, 255, 0.9)),
    var(--brand-gradient, linear-gradient(135deg, #ed4d9b, #8c5cf6 52%, #356cff));
  background-position: center;
  background-size: cover;
}

.library-v6-cover svg {
  width: 23px;
  height: 23px;
}

.library-v6-main {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.library-v6-song-row button.library-v6-main:disabled {
  cursor: default;
  color: inherit !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
  opacity: 1;
}

.library-v6-main strong,
.library-v6-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-v6-main strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.library-v6-main span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.library-v6-main em {
  color: inherit;
  font-style: normal;
}

.library-v6-main em.is-error {
  color: var(--sm-item-error-text);
}

.library-v6-status-line {
  display: flex;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.library-v6-main .library-v6-status-line .expiry-pill {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 2px 7px;
}

.library-v6-main .library-v6-status-line .expiry-pill.is-expired {
  flex: 0 1 auto;
}

.library-v6-main .library-v6-status-line .expiry-pill > svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.library-v6-main .library-v6-status-line .status-marquee-viewport {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.library-v6-main .library-v6-status-line .status-marquee-track {
  display: inline-flex;
  overflow: visible;
}

.library-v6-main .library-v6-status-line .status-text {
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.library-v6-song-row.has-error button.library-v6-cover:disabled,
.library-v6-song-row.is-expired button.library-v6-cover:disabled {
  color: #8a94a7 !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.86), rgba(230, 236, 245, 0.78)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.32), rgba(203, 213, 225, 0.28)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  filter: grayscale(0.55) saturate(0.72);
  opacity: 1;
}

.library-v6-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.library-v6-icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(70, 101, 210, 0.17);
  border-radius: 8px;
  color: #5f6f91;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.library-v6-icon-button:hover {
  border-color: rgba(117, 79, 244, 0.4);
  color: #6f50ee;
}

.library-v6-icon-button.danger:hover {
  border-color: rgba(234, 61, 105, 0.36);
  color: #e43d6a;
}

.library-v6-icon-button svg {
  width: 17px;
  height: 17px;
}

.library-v6-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100%;
  padding: 24px;
  border: 1px dashed rgba(70, 101, 210, 0.22);
  border-radius: 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.36);
}

.library-v6-empty > svg {
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
  color: #677390;
}

.library-v6-empty h3,
.library-v6-empty p {
  margin: 0;
}

.library-v6-empty p {
  margin: 7px 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.library-v6-dialog-backdrop {
  position: fixed;
  z-index: 2300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  visibility: hidden;
  opacity: 0;
  background: rgba(21, 28, 54, 0.34);
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.library-v6-dialog-backdrop.open {
  visibility: visible;
  opacity: 1;
}

html.library-dialog-open,
html.library-dialog-open body {
  overflow: hidden !important;
}

.library-v6-dialog {
  width: min(520px, 100%);
  max-height: min(720px, calc(100svh - 36px));
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(69, 100, 211, 0.18);
  border-radius: 8px;
  background: rgba(251, 253, 255, 0.97);
  box-shadow: 0 28px 80px rgba(24, 34, 75, 0.2);
  transform: translateY(12px) scale(0.98);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.library-v6-dialog-backdrop.open .library-v6-dialog {
  transform: translateY(0) scale(1);
}

.library-v6-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.library-v6-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
}

.library-v6-dialog-form {
  display: grid;
  gap: 15px;
}

.library-v6-cover-field {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 13px;
  border: 1px solid rgba(61, 91, 201, 0.14);
  border-radius: 8px;
  background: rgba(244, 248, 255, 0.7);
}

.library-v6-cover-preview {
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  border-radius: 8px;
  color: #6f61ed;
  background:
    linear-gradient(135deg, rgba(237, 77, 155, 0.16), rgba(53, 108, 255, 0.16)),
    #fff;
  background-position: center;
  background-size: cover;
}

.library-v6-cover-preview.has-cover svg {
  display: none;
}

.library-v6-cover-field > div:last-child {
  display: grid;
  gap: 6px;
}

.library-v6-cover-field small {
  color: var(--muted);
  font-size: 11px;
}

.library-v6-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 13px;
  border: 1px solid rgba(112, 79, 239, 0.28);
  border-radius: 7px;
  color: #674fe7;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  cursor: pointer;
}

.library-v6-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.library-v6-field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.library-v6-field input,
.library-v6-field select,
.library-v6-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(66, 99, 214, 0.2);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.library-v6-dialog-form select[name="albumId"] {
  height: 44px;
  min-height: 44px;
  padding-block: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.library-v6-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.library-v6-dialog-actions button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.library-v6-secondary {
  border: 1px solid rgba(112, 79, 239, 0.26);
  color: #624ce5;
  background: rgba(255, 255, 255, 0.88);
}

.library-v6-primary {
  border: 0;
  color: #fff;
  background: var(--brand-gradient, linear-gradient(135deg, #ed4d9b, #8c5cf6 52%, #356cff));
  box-shadow: 0 10px 24px rgba(91, 75, 231, 0.2);
}

.library-v6-dialog-actions button:disabled {
  cursor: wait;
  opacity: 0.64;
}

@media (max-width: 680px) {
  .library-page .library-v6-panel {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 12px;
  }

  .library-v6-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
  }

  .library-v6-head h3 {
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  .library-v6-head > div:first-child {
    flex: 1 1 140px;
  }

  .library-v6-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 148px;
    min-width: 0;
    padding: 3px;
  }

  .library-v6-tabs button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .library-v6-context {
    min-height: 57px;
    padding: 7px 0;
  }

  .library-v6-context.is-hidden {
    min-height: 9px;
    padding: 4px 0;
  }

  .library-v6-context.root-actions-only {
    min-height: 45px;
    padding: 6px 0;
  }

  .library-v6-album-row,
  .library-v6-song-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 70px;
    padding: 8px;
  }

  .library-v6-cover {
    width: 47px;
    height: 47px;
  }

  .library-v6-main {
    gap: 4px;
  }

  .library-v6-main strong {
    font-size: 13px;
  }

  .library-v6-main span {
    font-size: 10px;
  }

  .library-v6-actions {
    gap: 5px;
  }

  .library-v6-icon-button {
    width: 34px;
    height: 34px;
  }

  .library-v6-album-row .library-v6-actions,
  .library-v6-song-row .library-v6-actions {
    display: grid;
    grid-template-columns: repeat(3, 32px);
  }

  .library-v6-album-row .library-v6-icon-button,
  .library-v6-song-row .library-v6-icon-button {
    width: 32px;
    height: 32px;
  }

  .library-v6-dialog-backdrop {
    align-items: end;
    padding: 0;
  }

  .library-v6-dialog {
    width: 100%;
    max-height: calc(100svh - env(safe-area-inset-top) - 12px);
    padding: 17px 15px calc(17px + env(safe-area-inset-bottom));
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
  }

  .library-v6-dialog-backdrop.open .library-v6-dialog {
    transform: translateY(0);
  }

  .library-v6-cover-field {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 11px;
  }

  .library-v6-cover-preview {
    width: 82px;
  }

  .library-v6-field input,
  .library-v6-field select,
  .library-v6-field textarea {
    font-size: 16px;
  }

  .library-v6-dialog:has(select[name="albumId"]) > header {
    margin-bottom: 12px;
  }

  .library-v6-dialog-form:has(select[name="albumId"]) {
    gap: 12px;
  }
}

@media (max-width: 390px) {
  .library-v6-tabs button svg {
    display: none;
  }

  .library-v6-tabs {
    min-width: 126px;
  }

  .library-v6-album-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .library-v6-cover {
    width: 43px;
    height: 43px;
  }

  .library-v6-album-row .library-v6-actions,
  .library-v6-song-row .library-v6-actions {
    grid-template-columns: repeat(3, 29px);
    gap: 3px;
  }

  .library-v6-album-row .library-v6-icon-button,
  .library-v6-song-row .library-v6-icon-button {
    width: 29px;
    height: 31px;
  }
}

/* MOBILE_OVERLAY_PLAYER_CONTRACT_START
   Modal sheets own the viewport while open. The player collapses to its peek
   handle, may be explicitly raised above the sheet, and can be swiped down. */
.auth-modal-shell.is-closing,
.app-dialog-shell.is-closing,
.voice-modal-shell.is-closing {
  opacity: 0;
  pointer-events: none;
}

.auth-modal-shell.is-closing .auth-modal {
  transform: translateY(16px) scale(0.98);
}

.app-dialog-shell.is-closing .app-dialog {
  transform: translateY(12px) scale(0.98);
}

.voice-modal-shell.is-closing .voice-modal {
  transform: translateY(18px) scale(0.98);
}

.library-v6-dialog-backdrop.open.is-closing {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
}

.library-v6-dialog-backdrop.open.is-closing .library-v6-dialog {
  transform: translateY(16px) scale(0.98);
}

@media (max-width: 680px) {
  body.player-overlay-active .player-peek-handle {
    z-index: 2501;
  }

  body.player-over-overlay .global-player {
    z-index: 2502;
  }

  .voice-modal-shell .voice-modal {
    transform: translateY(105%) scale(0.99);
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease;
    will-change: transform;
  }

  .voice-modal-shell[aria-hidden="false"]:not(.is-closing) .voice-modal {
    transform: translateY(0) scale(1);
  }

  .voice-modal-shell.is-closing .voice-modal {
    transform: translateY(105%) scale(0.99);
  }

  .library-v6-dialog-backdrop.open.is-closing .library-v6-dialog {
    transform: translateY(105%);
  }
}
/* MOBILE_OVERLAY_PLAYER_CONTRACT_END */

/* MOBILE_WORKSPACE_PANEL_CONTRACT_START
   Every mobile workspace panel uses the same outer geometry. Component content
   may compress internally, but it cannot change the snap page width or height. */
@media (max-width: 680px) {
  :root {
    --mobile-workspace-inline: clamp(12px, 3.4vw, 16px);
  }

  .workspace-page.create-page,
  .workspace-page.history-page,
  .workspace-page.featured-page,
  .workspace-page.tool-page,
  .workspace-page.library-page {
    width: 100%;
    padding-inline: var(--mobile-workspace-inline) !important;
  }

  .workspace-page > .create-layout,
  .workspace-page > .history-layout,
  .workspace-page > .featured-shell,
  .workspace-page > .split-tool,
  .workspace-page > .library-dashboard {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    justify-content: stretch;
  }

  .create-layout > .studio-panel,
  .create-layout > .style-lab-panel,
  .history-layout > .result-panel,
  .history-layout > .lyrics-stage-panel,
  .featured-page > .featured-shell,
  .split-tool > .studio-panel,
  .split-tool > .lyrics-output-panel,
  .library-dashboard > .library-collection-panel,
  .library-dashboard > .library-detail-panel {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: var(--mobile-panel-height) !important;
    min-height: var(--mobile-panel-height) !important;
    max-height: var(--mobile-panel-height) !important;
    scroll-margin-top: var(--mobile-header-space) !important;
  }

  .featured-page > .featured-shell {
    display: grid;
    grid-template-rows: max-content minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    margin-inline: 0;
    padding: clamp(14px, 2vh, 18px);
    overflow: hidden;
  }

  .featured-page .featured-song-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, max-content);
    align-content: space-evenly;
    align-items: start;
    column-gap: clamp(8px, 2.2vw, 12px);
    row-gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .featured-page .featured-song-card {
    align-content: start;
    width: 100%;
    container-type: normal;
  }

  .featured-page .featured-song-media,
  .featured-page .featured-song-copy {
    width: 100%;
  }
}
/* MOBILE_WORKSPACE_PANEL_CONTRACT_END */

/* GLOBAL_PLAYER_COLLAPSE_HANDLE_START
   The low curved handle is part of the player surface on desktop and mobile.
   Its transparent box stays generous while the visible tab remains compact. */
.global-player {
  border-top: 1px solid transparent;
}

.player-collapse {
  position: absolute;
  top: 1px;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 92px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #6557d8;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -100%);
  isolation: isolate;
}

.player-collapse::before {
  content: "";
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: calc(76px * var(--desktop-chrome-scale));
  height: calc(16px * var(--desktop-chrome-scale));
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96)) padding-box,
    linear-gradient(90deg, #ec4899, #8b5cf6 55%, #377dff) border-box;
  box-shadow: 0 -4px 12px rgba(71, 64, 138, 0.09);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.player-collapse::after {
  content: none;
}

.player-collapse svg {
  position: relative;
  z-index: 1;
  width: calc(16px * var(--desktop-chrome-scale));
  height: calc(16px * var(--desktop-chrome-scale));
  stroke-width: 2.4;
  transform: translateY(calc(14px - (8px * var(--desktop-chrome-scale))));
}

.player-collapse:active {
  transform: translate(-50%, calc(-100% + 1px));
}

.player-peek-handle span {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96)) padding-box,
    linear-gradient(90deg, #ec4899, #8b5cf6 55%, #377dff) border-box;
}

.player-peek-handle span::before {
  width: 10px;
  height: 10px;
  border-width: 2px 0 0 2px;
  transform: translateY(2px) rotate(45deg);
}

.player-peek-handle span::after {
  content: none;
}
/* GLOBAL_PLAYER_COLLAPSE_HANDLE_END */

/* SONG_LIST_PAGER_START
   History, library songs, and albums use one horizontal page contract.
   Desktop exposes arrows; mobile keeps swipe paging and position dots only. */
.song-pager-host {
  display: block !important;
  min-height: 0;
  padding-right: 0 !important;
  overflow: hidden !important;
  touch-action: pan-x pan-y !important;
}

.library-v6-list:has(> .library-v6-paged-host) {
  padding-right: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.library-v6-list > .library-v6-paged-host {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.song-pager {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 30px;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.song-pager-viewport {
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.song-pager-viewport.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.song-pager-viewport::-webkit-scrollbar,
.song-pager-dots::-webkit-scrollbar {
  display: none;
}

.song-pager-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.song-pager-page {
  display: grid;
  grid-auto-rows: var(--song-pager-row-height, 76px);
  align-content: start;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: 0;
  padding-block-start: var(--song-pager-top-inset, 0px);
  row-gap: var(--song-pager-row-gap, 12px);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.song-pager-page.library-v6-album-list,
.song-pager-page.library-v6-song-list {
  display: grid;
  gap: var(--song-pager-row-gap, 9px);
}

.song-pager-nav {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.song-pager-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(93, 79, 229, 0.22);
  border-radius: 7px;
  color: #6957e6;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 13px rgba(88, 76, 203, 0.1);
  cursor: pointer;
}

.song-pager-arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.song-pager-arrow:disabled {
  cursor: default;
  opacity: 0.28;
}

.song-pager-position {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.song-pager-dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  max-width: min(240px, 68%);
  padding: 3px 1px;
  overflow-x: auto;
  scrollbar-width: none;
}

.song-pager-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(98, 111, 150, 0.28);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.song-pager-dot.active {
  width: 18px;
  background: var(--brand-gradient, linear-gradient(90deg, #ed4d9b, #8c5cf6 52%, #356cff));
  box-shadow: 0 3px 10px rgba(118, 79, 232, 0.24);
}

.song-pager-count {
  flex: 0 0 auto;
  color: #68748d;
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .song-pager {
    grid-template-rows: minmax(0, 1fr) 34px;
    gap: 2px;
  }

  .song-pager-nav {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    min-height: 34px;
    padding-bottom: 4px;
    box-sizing: border-box;
    justify-items: center;
    gap: 6px;
  }

  .song-pager-arrow {
    display: grid;
    width: 28px;
    height: 28px;
  }

  .song-pager-position {
    width: 100%;
    gap: 7px;
  }

  .song-pager-dots {
    max-width: min(230px, 72vw);
    pointer-events: none;
  }

  .song-pager-dot {
    width: 5px;
    height: 5px;
  }

  .song-pager-dot.active {
    width: 16px;
  }

  .song-pager-count {
    font-size: 9px;
  }
}
/* SONG_LIST_PAGER_END */

/* PROFILE_CARD_CONTRACT_START
   Every profile summary uses one five-part card contract. Responsive layout
   changes only the column count; typography and spacing scale from one rule. */
.profile-grid {
  --profile-card-title-size: 12px;
  --profile-card-tag-size: 10px;
  --profile-card-subtitle-size: 12px;
  --profile-card-content-size: 20px;
  --profile-card-note-size: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "account library vip producer";
  align-items: stretch;
}

.profile-grid .profile-card,
.profile-grid .account-card,
.profile-grid .metric-card,
.profile-grid .vip-credit-card,
.profile-grid .producer-card {
  display: grid;
  grid-template-rows:
    clamp(22px, 2vw, 26px)
    minmax(0, 1fr)
    clamp(34px, 3.2vw, 40px);
  align-content: stretch;
  gap: clamp(6px, 0.8vw, 12px);
  height: auto;
  min-height: clamp(150px, 17vw, 220px);
  padding: clamp(10px, 1.4vw, 20px);
  overflow: hidden;
}

.profile-grid .profile-card-head {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--profile-card-title-size);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
}

.profile-grid .profile-card-head > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-grid .profile-card-head svg {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}

.profile-grid .profile-card-head .profile-card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: clamp(22px, 2vw, 26px);
  padding: 0 clamp(7px, 0.8vw, 11px);
  border: 1px solid rgba(100, 81, 213, 0.14);
  border-radius: 999px;
  color: #5e42b8;
  background: rgba(255, 255, 255, 0.6);
  font-size: var(--profile-card-tag-size);
  font-weight: 950;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-grid .profile-card-value {
  grid-row: 2;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 4px;
  min-width: 0;
  text-align: left;
  text-decoration: none;
  border: 0;
}

.profile-grid .profile-card-subtitle {
  display: block;
  width: 100%;
  color: var(--muted);
  font-size: var(--profile-card-subtitle-size);
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
}

.profile-grid .profile-card-content {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--profile-card-content-size);
  font-weight: 950;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid .profile-library-values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(10px, 1.4vw, 20px);
}

.profile-grid .profile-library-metric {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.profile-grid .profile-library-metric .profile-card-subtitle {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.profile-grid .profile-card-note {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding-top: clamp(6px, 0.8vw, 10px);
  border: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: var(--profile-card-note-size);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.profile-grid .profile-card-note > strong {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: visible;
  color: var(--ink);
  font-size: inherit;
  font-weight: 900;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-grid .profile-card-note .producer-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: clamp(28px, 2.8vw, 34px);
  min-height: clamp(28px, 2.8vw, 34px);
  padding: 0 clamp(8px, 0.9vw, 12px);
  font-size: var(--profile-card-note-size);
  text-align: center;
}

.profile-grid .vip-credit-card .profile-card-note > strong {
  display: grid;
  gap: 1px;
}

.profile-grid .profile-card-note .producer-card-action span {
  text-align: center;
}

.profile-grid .profile-email-content {
  display: grid;
  gap: 0;
  overflow: visible;
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

.profile-grid .profile-email-content > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid .producer-action-only {
  justify-content: flex-end;
}

.profile-grid .producer-action-only .producer-card-action {
  gap: 0;
  text-align: center;
}

.profile-grid .producer-name-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-grid .producer-name-content > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid .producer-lock-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.08em;
  height: 1.08em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.profile-grid .producer-card.is-locked .profile-card-content {
  color: #747d90;
}

.profile-grid .producer-card.is-locked .profile-card-tag {
  color: #687184;
  border-color: rgba(104, 113, 132, 0.2);
  background: rgba(232, 235, 241, 0.9);
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "account library"
      "vip producer";
  }
}
/* PROFILE_CARD_CONTRACT_END */

/* PROFILE_PAGE_FIT_START
   Summary cards stay on one row until their content needs a two-column layout. */
.profile-page {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  padding: clamp(86px, 11vh, 108px) clamp(18px, 4vw, 56px) clamp(14px, 2vh, 22px);
  overflow: hidden;
}

.profile-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.5vh, 16px);
  height: 100%;
  min-height: 0;
}

.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.profile-hero h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}

.profile-hero .profile-logout-button {
  display: inline-flex;
  width: auto;
  height: clamp(32px, 3.3vw, 38px);
  min-height: clamp(32px, 3.3vw, 38px);
  max-height: none;
  padding: 0 clamp(10px, 1vw, 14px);
  font-size: clamp(11px, 0.95vw, 13px);
}

.profile-hero .profile-logout-button[hidden] {
  display: none;
}

.profile-hero .profile-logout-button span {
  display: block;
  width: 100%;
  text-align: center;
}

.profile-root {
  display: grid;
  grid-template-rows: minmax(max-content, 1fr) minmax(0, 4fr);
  gap: clamp(8px, 1.25vh, 14px);
  min-height: 0;
  overflow: hidden;
}

.profile-grid {
  min-height: 0;
}

.profile-grid .profile-card,
.profile-grid .account-card,
.profile-grid .metric-card,
.profile-grid .vip-credit-card,
.profile-grid .producer-card {
  grid-template-rows: minmax(20px, auto) minmax(max-content, 1fr) auto;
  gap: clamp(3px, 0.55vh, 6px);
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.4vh, 12px) clamp(14px, 1.4vw, 18px);
}

.profile-grid .profile-card-value,
.profile-grid .profile-card-note {
  padding-left: 6px;
}

.profile-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
}

.profile-section .section-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(8px, 1vh, 12px);
}

.profile-section .section-title-row > div {
  min-width: 0;
}

.profile-section .section-title-row h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.profile-section .payment-table {
  align-content: start;
  grid-auto-rows: max-content;
  max-height: none;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.profile-section .payment-empty {
  align-content: safe center;
  grid-auto-rows: max-content;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 1.2vw, 16px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.profile-section .payment-empty h2,
.profile-section .payment-empty p {
  margin: 0;
}

.profile-section .payment-empty h2 {
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) and (min-width: 681px) {
  .profile-root {
    grid-template-rows: max-content minmax(0, 1fr);
  }

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

  .profile-section .payment-row {
    min-height: 44px;
  }
}

@media (max-width: 680px) {
  .profile-page {
    padding: var(--mobile-header-space) 14px var(--mobile-page-bottom);
  }

  .profile-shell {
    gap: 8px;
  }

  .profile-hero h1 {
    font-size: 22px;
  }

  .profile-hero .profile-logout-button {
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }

  .profile-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .profile-grid {
    --profile-card-title-size: 10.5px;
    --profile-card-tag-size: 9px;
    --profile-card-subtitle-size: 10px;
    --profile-card-content-size: 17px;
    --profile-card-note-size: 10px;
    flex: 0 0 auto;
    grid-template-rows: repeat(2, max-content);
    max-height: none;
  }

  .profile-grid .profile-card,
  .profile-grid .account-card,
  .profile-grid .metric-card,
  .profile-grid .vip-credit-card,
  .profile-grid .producer-card {
    grid-template-rows: minmax(18px, auto) max-content auto;
    gap: 3px;
    height: auto;
    padding: 6px 10px;
  }

  .profile-grid .profile-card-value,
  .profile-grid .profile-card-note {
    padding-left: 0;
  }

  .profile-grid .profile-library-values {
    column-gap: 6px;
    align-items: start;
  }

  .profile-grid .profile-library-metric .profile-card-subtitle {
    min-height: 2.5em;
    white-space: normal;
    text-wrap: balance;
  }

  .profile-grid .profile-email-content {
    font-size: 14px;
    line-height: 1.2;
  }

  .profile-grid .profile-card-head {
    flex-wrap: wrap;
    gap: 3px 5px;
  }

  .profile-grid .profile-card-head > span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-grid .profile-card-head svg {
    flex-shrink: 0;
  }

  .profile-grid .profile-card-head .profile-card-tag {
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 18px;
    padding: 2px 5px;
    overflow: visible;
    line-height: 1.3;
    white-space: normal;
    text-overflow: clip;
  }

  .profile-grid .profile-card:not(.producer-card) .profile-card-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 2px;
    font-size: 10px;
  }

  .profile-grid .profile-card-note {
    padding-top: 2px;
  }

  .profile-grid .profile-card-note .producer-card-action {
    max-width: 100%;
    height: auto;
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-grid .profile-card-note > strong {
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .profile-section {
    flex: 1 1 0;
    padding: 10px;
  }

  .profile-section .section-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 7px;
  }

  .profile-section .section-title-row h2 {
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .profile-section-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }

  .profile-section-actions > :only-child {
    grid-column: 2;
  }

  .profile-section-actions .compact-profile-button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 30px;
    padding: 4px 6px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-section .subscription-status-note {
    font-size: 10px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .profile-section .payment-row {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-height: 36px;
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1.3;
  }

  .profile-section .payment-head > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* PROFILE_PAGE_FIT_END */

@media (max-width: 680px) and (max-height: 600px) {
  .profile-page .profile-shell,
  .profile-page .profile-root,
  .profile-page .profile-grid {
    gap: 6px;
  }

  .profile-page .profile-grid {
    --profile-card-title-size: 10px;
    --profile-card-tag-size: 8.5px;
    --profile-card-subtitle-size: 9.5px;
    --profile-card-content-size: 16px;
  }

  .profile-page .profile-grid .profile-card {
    padding: 4px 8px;
    gap: 2px;
  }

  .profile-grid .profile-card-head {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .profile-grid .profile-card-head > span {
    flex: 1 1 0;
    gap: 4px;
  }

  .profile-grid .profile-card-head .profile-card-tag {
    flex: 0 1 auto;
    max-width: 50%;
    padding: 2px 4px;
  }

  .profile-grid .profile-card-value {
    gap: 2px;
  }

  .profile-grid .profile-card:not(.producer-card) .profile-card-note {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px;
    align-items: start;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .profile-grid .profile-card-note > strong {
    justify-self: end;
    text-align: right;
    line-height: 1.3;
  }

  .profile-grid .profile-card-note > span {
    max-width: 8ch;
    overflow-wrap: anywhere;
  }

  .profile-section .payment-row {
    min-height: 30px;
  }
}

/* MOBILE_MOOD_LAB_CONTRACT_START
   The coordinate owns its drag gesture and never exceeds one quarter of the panel.
   Instrument choices use two rows when space permits, then collapse to one
   complete row only when the coordinate would otherwise become unusable. */
.mood-map {
  overscroll-behavior: contain;
  touch-action: none;
}

.mood-axis-y::before,
.mood-axis-y::after {
  display: none !important;
  content: none !important;
}

.mood-axis-y > em,
.mood-axis-y > b,
.mood-axis-y > svg {
  position: static !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.mood-axis-y > em {
  color: #10172a !important;
  font-size: 11px;
  font-style: normal;
  line-height: 1.1;
  -webkit-text-fill-color: #10172a !important;
}

.mood-axis-y > b {
  font-size: 11px;
  line-height: 1.05;
  -webkit-text-fill-color: currentColor !important;
}

.mood-axis-y > b:nth-of-type(1) {
  color: #f04491 !important;
}

.mood-axis-y > b:nth-of-type(2) {
  color: #356df3 !important;
}

.mood-axis-y > svg {
  width: 12px !important;
  height: 12px !important;
  color: #805cf6 !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
}

@media (max-width: 680px) {
  .style-lab-panel {
    grid-template-rows:
      max-content
      var(--mobile-mood-map-height, 25%)
      repeat(5, max-content)
      minmax(max-content, 1fr)
      max-content !important;
    align-content: stretch !important;
    gap: clamp(4px, 0.8svh, 7px) !important;
  }

  .style-lab-panel .mood-map {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: stretch;
  }

  .style-lab-panel .mood-readout,
  .style-lab-panel .right-control-grid,
  .style-lab-panel .custom-asset-row,
  .style-lab-panel .custom-asset-note,
  .style-lab-panel .style-submit-row {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .style-lab-panel .chips-group {
    flex-wrap: wrap !important;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .style-lab-panel .style-lab-chips,
  .style-lab-panel.is-instrument-row-collapsed .instrument-chips {
    max-height: 26px;
  }

  .style-lab-panel .instrument-chips {
    max-height: 59px;
  }

  .style-lab-panel .chips-group > .field-label,
  .style-lab-panel .chips-group > button {
    flex: 0 0 auto;
  }

  .style-lab-panel .mobile-chip-hidden {
    display: none !important;
  }

  .style-lab-panel .style-submit-row {
    grid-row: auto !important;
    align-self: end;
  }

  .style-lab-panel.is-mood-controls-compact {
    gap: 3px !important;
    padding: 8px;
  }

  .style-lab-panel.is-mood-controls-compact > div:first-child .section-kicker {
    font-size: 9px;
  }

  .style-lab-panel.is-mood-controls-compact > div:first-child h3 {
    font-size: 17px;
    line-height: 1;
  }

  .style-lab-panel.is-mood-controls-compact > div:first-child > p:last-child {
    display: none;
  }

  .style-lab-panel.is-mood-controls-compact .mood-readout span {
    min-height: 22px;
    padding: 3px 5px;
    font-size: 10px;
  }

  .style-lab-panel.is-mood-controls-compact .chips-group {
    gap: 4px;
  }

  .style-lab-panel.is-mood-controls-compact .style-lab-chips,
  .style-lab-panel.is-mood-controls-compact.is-instrument-row-collapsed .instrument-chips {
    max-height: 21px;
  }

  .style-lab-panel.is-mood-controls-compact .instrument-chips {
    max-height: 46px;
  }

  .style-lab-panel.is-mood-controls-compact .style-chip,
  .style-lab-panel.is-mood-controls-compact .instrument-chip {
    min-height: 20px;
    padding: 0 6px;
    font-size: 9.5px;
  }

  .style-lab-panel.is-mood-controls-compact .field-label,
  .style-lab-panel.is-mood-controls-compact .field-block > span {
    font-size: 10px;
  }

  .style-lab-panel.is-mood-controls-compact .field-block {
    gap: 2px;
  }

  .style-lab-panel.is-mood-controls-compact select {
    height: 28px;
    min-height: 28px;
  }

  .style-lab-panel.is-mood-controls-compact .custom-asset-row {
    gap: 5px;
  }

  .style-lab-panel.is-mood-controls-compact .custom-voice-button {
    min-height: 30px;
    max-height: 30px;
    padding: 0 7px;
    font-size: 10px;
  }

  .style-lab-panel.is-mood-controls-compact .custom-asset-note {
    font-size: 9.5px;
    line-height: 1.05;
  }

  .style-lab-panel.is-mood-controls-compact .style-submit-row {
    gap: 3px;
  }

  .style-lab-panel.is-mood-controls-compact .style-submit-row .generate-button {
    min-height: 30px;
    max-height: 30px;
    font-size: 13px;
  }

  .style-lab-panel.is-mood-controls-compact .style-submit-row .cost-note {
    font-size: 9px;
    line-height: 1.05;
    -webkit-line-clamp: 1;
  }
}
/* MOBILE_MOOD_LAB_CONTRACT_END */

/* FORMAL_MIXER_CONSOLE_START
   This replaces the coordinate presentation while preserving the formal
   creation panel, form ids, page height and mobile snap ownership. */
.mixer-instrument-art {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: var(--mixer-instrument-icon) center / contain no-repeat;
  mask: var(--mixer-instrument-icon) center / contain no-repeat;
  pointer-events: none;
}
.studio-title-only-row {
  grid-template-columns: minmax(0, 1fr) !important;
}

.mixer-console-panel {
  --mixer-accent: #7d73f7;
  position: relative;
  display: grid !important;
  grid-template-rows: max-content max-content minmax(0, 1fr) max-content max-content max-content !important;
  gap: 7px !important;
  padding: clamp(10px, 1.3vh, 14px) !important;
  overflow: hidden !important;
}

.mixer-console-heading,
.mixer-console-actions,
.mixer-preset-row,
.mixer-lcd-display,
.mixer-lcd-head,
.mixer-lcd-channel-icons,
.mixer-instrument-switches,
.mixer-creation-grid {
  display: flex;
  align-items: center;
}

.mixer-console-heading {
  min-width: 0;
  justify-content: space-between;
  gap: 10px;
}

.mixer-console-heading > .panel-heading-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.mixer-console-heading h3 {
  margin: 0 !important;
  font-size: clamp(19px, 2vw, 23px) !important;
  line-height: 1.05;
}

.mixer-console-heading .panel-seo-subtitle {
  display: -webkit-box;
  max-width: 34ch;
  overflow: hidden;
  font-size: 10px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mixer-console-actions {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 5px;
}

.mixer-console-actions .mixer-persona-entry {
  width: auto;
  min-width: 0;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.mixer-voice-actions-row {
  gap: 5px;
}

.mixer-voice-actions-row .studio-voice-field {
  gap: 2px;
}

.mixer-voice-actions-row .studio-voice-field > span {
  font-size: 10px;
  line-height: 12px;
}

.mixer-voice-actions-row .studio-voice-field select,
.mixer-voice-actions-row .studio-custom-voice-button {
  width: 100%;
  max-width: none;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.mixer-voice-actions-row .studio-custom-voice-button {
  justify-self: stretch;
  margin-top: 0;
}

.mixer-voice-actions-row .custom-asset-note {
  margin-top: -2px;
  font-size: 9px;
  line-height: 11px;
}

.mixer-icon-button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #cad7f3;
  border-radius: 7px;
  color: #5a65cb;
  background: rgba(255, 255, 255, 0.9);
}

.mixer-icon-button svg { width: 15px; height: 15px; }

.mixer-preset-row {
  min-width: 0;
  gap: 5px;
}

.mixer-preset-row .style-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 26px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 12px;
}

.mixer-console-surface {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #aebfdb;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.64), rgba(255,255,255,0.12)),
    #dbe5f2;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 rgba(70, 90, 125, 0.08);
}

.mixer-lcd-display {
  position: relative;
  min-width: 0;
  min-height: 58px;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-bottom: 1px solid #aebed9;
  color: var(--mixer-accent);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.025) 3px 4px),
    radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--mixer-accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg, #101d27, #172d35 60%, #0b171f);
  box-shadow:
    inset 0 0 26px color-mix(in srgb, var(--mixer-accent) 12%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: color 240ms ease, box-shadow 240ms ease;
}

.mixer-lcd-display::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  mix-blend-mode: screen;
}

.mixer-lcd-summary {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.mixer-lcd-head { gap: 15px; }

.mixer-lcd-head strong {
  flex: 0 0 auto;
  color: var(--mixer-accent);
  font: 900 16px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: 0 0 7px var(--mixer-accent);
}

.mixer-lcd-channel-icons { gap: 4px; }
.mixer-lcd-channel-icons span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mixer-accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mixer-accent) 78%, transparent));
}
.mixer-lcd-channel-icons span.is-random { color: #55a3af; opacity: 0.72; filter: drop-shadow(0 0 3px rgba(85, 163, 175, 0.3)); }
.mixer-lcd-channel-icons svg { width: 15px; height: 15px; stroke-width: 2.8; }

.mixer-lcd-values {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  color: color-mix(in srgb, var(--mixer-accent) 80%, white);
  font: 800 11px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: 0 0 5px color-mix(in srgb, var(--mixer-accent) 45%, transparent);
}
.mixer-lcd-value-row {
  min-width: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.mixer-lcd-scroll-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
  white-space: nowrap;
}
.mixer-lcd-values span { min-width: max-content; white-space: nowrap; }
.mixer-lcd-value-row b { color: color-mix(in srgb, var(--mixer-accent) 62%, #8cb4ba); font-weight: 900; opacity: 0.8; }

.mixer-instrument-lights {
  flex: 0 0 auto;
  width: min(174px, 35%);
  display: grid;
  grid-template-columns: repeat(5, 25px);
  justify-content: end;
  gap: 4px;
}
.mixer-instrument-lights span {
  position: relative;
  width: 25px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mixer-accent) 50%, #334852);
  border-radius: 4px;
  color: var(--mixer-accent);
  background: color-mix(in srgb, var(--mixer-accent) 9%, #08151b);
  box-shadow: inset 0 0 7px color-mix(in srgb, var(--mixer-accent) 20%, transparent), 0 0 6px color-mix(in srgb, var(--mixer-accent) 40%, transparent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mixer-accent) 88%, transparent));
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.mixer-instrument-lights svg,
.mixer-instrument-lights .mixer-instrument-art { width: 13px; height: 13px; }

.mixer-channel-bank {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 5px;
}

.mixer-channel-strip {
  --title-color: #7f70f7;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px 4px 13px minmax(48px, 1fr) 13px 25px;
  place-items: center;
  gap: 2px;
  padding: 3px 4px 4px;
  border-right: 1px solid rgba(130, 151, 183, 0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(214,225,239,0.12));
}
.mixer-channel-strip:last-child { border-right: 0; }
.mixer-channel-strip:nth-child(1) { --title-color: #ff8a20; }
.mixer-channel-strip:nth-child(2) { --title-color: #d83fe7; }
.mixer-channel-strip:nth-child(3) { --title-color: #00b7d9; }
.mixer-channel-strip:nth-child(4) { --title-color: #55c82f; }

.mixer-channel-title {
  position: relative;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mixer-channel-title strong {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--title-color);
  font-size: 13px;
}
.mixer-channel-title strong svg { flex: 0 0 auto; width: 15px; height: 15px; }
.mixer-channel-title strong > span { min-width: 0; }
[data-i18n-fit="mixer-label"] { white-space: nowrap; }
[data-i18n-fit="mixer-label"][data-i18n-fit-wrapped] {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
.mixer-channel-meter-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 3px;
  padding-inline-start: 3px;
}
.mixer-channel-meter-value {
  width: 24px;
  text-align: start;
  color: #748198;
  font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mixer-channel-meter {
  width: 100%;
  min-width: 0;
  height: 4px;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 1px;
}
.mixer-channel-meter i { border-radius: 2px; background: #aeb9c9; }
.mixer-channel-meter i.is-lit { background: #27c987; box-shadow: 0 0 4px rgba(39,201,135,0.6); }

.mixer-range-label {
  position: relative;
  min-width: 0;
  max-width: 100%;
  z-index: 5;
  color: #59616e !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.mixer-range-bottom { color: #66838a !important; }

.mixer-fader { position: relative; width: 100%; height: 100%; min-height: 48px; touch-action: none; overscroll-behavior: contain; cursor: ns-resize; }
.mixer-fader-track { position: absolute; inset: 7px 0; }
.mixer-fader-scale {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(46px, calc(100% - 28px));
  transform: translateX(-50%);
  opacity: 0.52;
  background:
    linear-gradient(#8190a8,#8190a8) center 0/78% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 12.5%/68% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 25%/58% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 37.5%/48% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 50%/38% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 62.5%/48% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 75%/58% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 87.5%/68% 1px no-repeat,
    linear-gradient(#8190a8,#8190a8) center 100%/78% 1px no-repeat;
}
.mixer-fader-numbers { position: absolute; inset-block: 0; right: 0; z-index: 1; color: #8794a9; font: 700 8px/10px ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: none; }
.mixer-fader-numbers b { position: absolute; right: 0; height: 10px; display: flex; align-items: center; transform: translateY(-50%); font-weight: 700; }
.mixer-fader-numbers b:nth-child(1) { top: 0; }
.mixer-fader-numbers b:nth-child(2) { top: 25%; }
.mixer-fader-numbers b:nth-child(3) { top: 50%; }
.mixer-fader-numbers b:nth-child(4) { top: 75%; }
.mixer-fader-numbers b:nth-child(5) { top: 100%; }
.mixer-fader-rail { position: absolute; z-index: 3; inset-block: 0; left: 50%; width: 5px; border: 1px solid #72839f; border-radius: 999px; background: #8f9db2; transform: translateX(-50%); }
.mixer-fader-fill { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: inherit; background: var(--title-color); }
.mixer-fader-thumb { position: absolute; z-index: 8; left: 50%; width: 27px; height: 15px; border: 1px solid color-mix(in srgb, var(--title-color) 55%, #7d8da7); border-radius: 4px; background: #f7f9fd; box-shadow: 0 3px 7px color-mix(in srgb, var(--title-color) 25%, transparent); transform: translate(-50%, -50%); pointer-events: none; }
.mixer-fader-thumb::after { content: ""; position: absolute; top: 50%; left: 4px; right: 4px; height: 2px; background: var(--title-color); transform: translateY(-50%); }

.mixer-auto-switch {
  --travel: 39px;
  position: relative;
  width: 64px;
  height: 24px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #9caabd;
  border-radius: 999px;
  color: #536177;
  background: #d7dee8;
  font: 900 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.mixer-auto-switch::before { content: ""; position: absolute; z-index: 2; top: 50%; left: 3px; width: 17px; height: 17px; border: 1px solid rgba(83,99,124,0.28); border-radius: 50%; background: #f8fafc; box-shadow: 0 2px 5px rgba(44,58,80,0.28); transform: translateY(-50%); transition: transform 180ms ease, background 180ms ease; }
.mixer-auto-switch::after { content: ""; position: absolute; z-index: 3; top: 50%; left: 11.5px; width: 5px; height: 5px; border-radius: 50%; background: #9aa6b8; box-shadow: 0 0 0 1px rgba(255,255,255,0.72); pointer-events: none; transform: translate(-50%, -50%); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.mixer-auto-switch span { position: absolute; inset: 0 5px 0 23px; display: flex; align-items: center; justify-content: center; }
.mixer-auto-switch.is-active { color: color-mix(in srgb, var(--title-color) 65%, #26304a); border-color: color-mix(in srgb, var(--title-color) 55%, #8591a7); background: color-mix(in srgb, var(--title-color) 26%, #e8edf5); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--title-color) 18%, transparent), 0 0 8px color-mix(in srgb, var(--title-color) 18%, transparent); }
.mixer-auto-switch.is-active::before { background: var(--title-color); border-color: color-mix(in srgb, var(--title-color) 72%, #fff); box-shadow: 0 2px 6px color-mix(in srgb, var(--title-color) 42%, transparent), inset 0 1px 0 rgba(255,255,255,0.68); transform: translate(var(--travel), -50%); }
.mixer-auto-switch.is-active::after { background: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.92); transform: translate(calc(-50% + var(--travel)), -50%); }
.mixer-auto-switch.is-active span { inset: 0 23px 0 5px; }

.mixer-channel-strip.is-random { background: linear-gradient(180deg, rgba(230,235,244,0.68), rgba(203,214,229,0.38)); }
.mixer-channel-strip.is-random .mixer-fader { cursor: not-allowed; }
.mixer-channel-strip.is-random .mixer-channel-title strong,
.mixer-channel-strip.is-random .mixer-channel-meter-value,
.mixer-channel-strip.is-random .mixer-range-label { color: #7d899d !important; }
.mixer-channel-strip.is-random .mixer-fader-scale,
.mixer-channel-strip.is-random .mixer-fader-numbers { opacity: 0.34; }
.mixer-channel-strip.is-random .mixer-fader-fill { background: #aeb8c6; }
.mixer-channel-strip.is-random .mixer-fader-thumb { border-color: #96a2b3; background: #e5e9ef; box-shadow: none; }
.mixer-channel-strip.is-random .mixer-fader-thumb::after { background: #909caf; }

.mixer-instrument-switches {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.mixer-instrument-switches button {
  min-width: 0;
  min-height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px 2px;
  border: 1px solid #ccd8ef;
  border-radius: 6px;
  color: #59647b;
  background: #f5f8fc;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.mixer-instrument-switches button svg,
.mixer-instrument-switches button .mixer-instrument-art { width: 13px; height: 13px; }
.mixer-instrument-switches .instrument-chip span,
.mixer-extra-instrument span {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.mixer-instrument-switches .uses-wrapped-label span,
.mixer-extra-instrument.uses-wrapped-label span {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.mixer-instrument-switches button.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--mixer-accent) 72%, #263043);
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--mixer-accent) 84%, #f7fbff),
    color-mix(in srgb, var(--mixer-accent) 72%, #111827)
  );
  box-shadow: 0 5px 12px color-mix(in srgb, var(--mixer-accent) 30%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--mixer-accent) 35%, #182033);
}
.mixer-more-instruments { position: relative; z-index: 2; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.mixer-more-instruments > * { pointer-events: none; }

.mixer-instrument-control {
  position: relative;
  min-width: 0;
}

.mixer-instrument-popover {
  position: absolute;
  z-index: 22;
  right: 0;
  bottom: calc(50% + 7px);
  left: 0;
  width: auto;
  display: block;
  padding: 8px;
  border: 1px solid rgba(112, 102, 240, 0.34);
  border-radius: 8px;
  background: rgba(253, 254, 255, 0.98);
  box-shadow: 0 18px 45px rgba(56, 65, 115, 0.2);
  transform-origin: 90% 100%;
}
.mixer-instrument-popover[hidden] { display: none !important; }
.mixer-extra-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mixer-extra-instrument { min-width: 0; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 1px 3px; border: 1px solid #ccd8ef; border-radius: 6px; color: #59647b; background: #f5f8fc; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.mixer-extra-instrument svg,
.mixer-extra-instrument .mixer-instrument-art { flex: 0 0 auto; width: 14px; height: 14px; pointer-events: none; }
.mixer-extra-instrument span { min-width: 0; overflow: visible; text-overflow: clip; }
.mixer-extra-instrument.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--mixer-accent) 72%, #263043);
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--mixer-accent) 84%, #f7fbff),
    color-mix(in srgb, var(--mixer-accent) 72%, #111827)
  );
  box-shadow: 0 5px 12px color-mix(in srgb, var(--mixer-accent) 30%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--mixer-accent) 35%, #182033);
}

.mixer-submit-row { gap: 3px !important; }
.mixer-submit-row .generate-button { min-height: 38px !important; }
.mixer-submit-row .cost-note { min-height: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px !important; line-height: 12px !important; }

@media (max-width: 680px) {
  .mixer-console-panel {
    grid-template-rows: max-content max-content minmax(0, 1fr) max-content max-content max-content !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  .mixer-console-heading h3 { font-size: 18px !important; }
  .mixer-console-heading .section-kicker { font-size: 8px; }
  .mixer-console-actions { gap: 3px; }
  .mixer-console-actions .mixer-persona-entry { min-height: 28px; max-height: 28px; padding: 0 7px; font-size: 10px; }
  .mixer-icon-button { flex-basis: 28px; width: 28px; height: 28px; }
  .mixer-preset-row { gap: 3px; }
  .mixer-preset-row .style-chip { min-height: 23px; padding: 0 2px; font-size: 9px; }
  .mixer-lcd-display { min-height: 53px; padding: 5px 6px; gap: 5px; }
  .mixer-lcd-head { gap: 9px; }
  .mixer-lcd-head strong { font-size: 14px; }
  .mixer-lcd-channel-icons { gap: 2px; }
  .mixer-lcd-channel-icons span { width: 17px; height: 16px; }
  .mixer-lcd-channel-icons svg { width: 13px; height: 13px; }
  .mixer-lcd-values { font-size: 9px; gap: 2px; }
  .mixer-lcd-value-row { gap: 3px; }
  .mixer-instrument-lights { width: 106px; grid-template-columns: repeat(5, 18px); gap: 3px; }
  .mixer-instrument-lights span { width: 18px; height: 18px; }
  .mixer-instrument-lights svg,
  .mixer-instrument-lights .mixer-instrument-art { width: 10px; height: 10px; }
  .mixer-channel-bank { padding: 3px; }
  .mixer-channel-strip { grid-template-rows: 20px 4px 11px minmax(46px, 1fr) 11px 23px; gap: 1px; padding: 2px 2px 3px; }
  .mixer-channel-title strong { gap: 2px; font-size: 11px; }
  .mixer-channel-title strong svg { width: 12px; height: 12px; }
  .mixer-channel-title > span { display: none; }
  .mixer-range-label { font-size: 9px !important; }
  .mixer-fader { min-height: 46px; }
  .mixer-fader-track { inset: 6px 0; }
  .mixer-fader-scale { width: min(42px, calc(100% - 21px)); }
  .mixer-fader-numbers { font-size: 7px; right: -1px; }
  .mixer-fader-thumb { width: 23px; height: 14px; }
  .mixer-auto-switch { --travel: 33px; width: 56px; height: 22px; font-size: 7px; }
  .mixer-auto-switch::before { width: 15px; height: 15px; }
  .mixer-auto-switch span { inset: 0 5px 0 21px; }
  .mixer-instrument-switches { gap: 3px; }
  .mixer-instrument-switches button { min-height: 29px; padding: 0 1px; font-size: 8.5px; }
  .mixer-instrument-switches button svg,
  .mixer-instrument-switches button .mixer-instrument-art { width: 11px; height: 11px; }
  .mixer-submit-row .generate-button { min-height: 32px !important; max-height: 32px; font-size: 13px; }
  .mixer-submit-row .cost-note { font-size: 8px !important; }
  .mixer-instrument-popover { padding: 7px; }
  .mixer-extra-grid { gap: 3px; }
  .mixer-extra-instrument { min-height: 36px; padding: 1px 2px; font-size: 9px; }
}

/* FORMAL_MIXER_CONSOLE_END */

/* FORMAL_MIXER_DEMO_PARITY_START
   Keep the migrated console on the same visual scale as demo/mixer-studio.html.
   Narrow containers and short viewports compact as a unit instead of shrinking
   individual labels independently. */
.mixer-console-panel {
  --mixer-toolbar-control-size: clamp(30px, 4.45cqh, 36px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --mixer-toolbar-icon-size: calc(var(--mixer-toolbar-control-size) * 0.46);
  --mixer-instrument-row-height: clamp(28px, 4.7cqh, 38px);
  --mixer-instrument-icon-size: clamp(9px, 1.6cqh, 12px);
  --mixer-instrument-padding-block: clamp(3px, 0.5cqh, 4px);
  container: formal-mixer / size;
  height: 100%;
  gap: clamp(4px, 0.86cqh, 7px) !important;
  padding: clamp(9px, 2.22cqh, 18px) !important;
}

.mixer-console-heading {
  min-height: clamp(32px, 5.56cqh, 45px);
  align-items: center;
}

.mixer-console-panel .mixer-console-surface,
.mixer-console-panel .mixer-channel-bank,
.mixer-console-panel .mixer-channel-strip,
.mixer-console-panel .mixer-fader {
  min-height: 0;
}

.mixer-console-panel .mixer-channel-bank {
  height: 100%;
}

.mixer-console-panel .mixer-preset-row,
.mixer-console-panel .mixer-instrument-switches {
  max-height: none;
  overflow: visible;
}

.mixer-console-heading h3 {
  font-size: clamp(18px, 2.72cqh, 22px) !important;
}

.mixer-console-heading .panel-seo-subtitle {
  font-size: clamp(9px, 1.36cqh, 11px);
}

.mixer-console-actions {
  gap: 7px;
  align-self: center;
}

.mixer-console-actions .mixer-persona-entry {
  min-width: 112px;
  min-height: clamp(30px, 4.45cqh, 36px);
  max-height: clamp(30px, 4.45cqh, 36px);
  padding-inline: 9px 12px;
  font-size: 11px;
}

.mixer-icon-button {
  flex-basis: var(--mixer-toolbar-control-size);
  width: var(--mixer-toolbar-control-size);
  height: var(--mixer-toolbar-control-size);
}

.mixer-icon-button svg {
  width: var(--mixer-toolbar-icon-size);
  height: var(--mixer-toolbar-icon-size);
}

.mixer-preset-row {
  gap: 0;
  padding: 3px;
  border: 1px solid #d6dff5;
  border-radius: 7px;
  background: #eef3fb;
}

.mixer-preset-row .style-chip {
  min-height: clamp(24px, 3.7cqh, 30px) !important;
  padding-inline: 4px;
  border: 0;
  border-radius: 5px;
  font-size: clamp(10px, 1.73cqh, 14px);
}

.mixer-preset-row .style-chip.active {
  color: #fff;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--mixer-accent) 84%, #f7fbff),
    color-mix(in srgb, var(--mixer-accent) 72%, #111827)
  );
  box-shadow: 0 5px 12px color-mix(in srgb, var(--mixer-accent) 30%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--mixer-accent) 35%, #182033);
}

.mixer-preset-row .style-chip[data-localized-style] {
  min-width: var(--i18n-fit-min-width, 0px);
  padding-inline: 1px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-size: var(--i18n-fit-font-size, clamp(10px, 1.73cqh, 14px));
}

@container formal-mixer (max-width: 300px) {
  .mixer-preset-row .style-chip {
    padding-inline: 1px;
    white-space: nowrap;
  }
}

.mixer-console-surface {
  border-color: #b9c8e4;
  border-radius: 8px;
}

.mixer-lcd-display {
  min-height: clamp(56px, 10.38cqh, 84px);
  gap: clamp(5px, 1.24cqh, 10px);
  padding: clamp(3px, 0.74cqh, 6px) clamp(6px, 1.24cqh, 10px);
}

.mixer-lcd-summary {
  gap: 5px;
}

.mixer-lcd-head {
  gap: clamp(10px, 2.72cqh, 22px);
}

.mixer-lcd-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(16px, 2.59cqh, 21px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixer-lcd-channel-icons {
  gap: 5px;
}

.mixer-lcd-channel-icons span {
  flex: 0 0 clamp(17px, 2.47cqh, 20px);
  width: clamp(17px, 2.47cqh, 20px);
  height: clamp(17px, 2.47cqh, 20px);
}

.mixer-lcd-channel-icons svg {
  width: clamp(13px, 2.22cqh, 18px);
  height: clamp(13px, 2.22cqh, 18px);
}

.mixer-lcd-values {
  gap: 3px;
  font-size: clamp(11px, 1.85cqh, 15px);
  line-height: 1.15;
}

.mixer-lcd-scroll-track {
  gap: 6px;
}

.mixer-lcd-instruments {
  width: clamp(106px, 15.07cqh, 122px);
  min-width: clamp(106px, 15.07cqh, 122px);
  flex: 0 0 auto;
  text-align: right;
}

.mixer-lcd-instruments > span {
  display: block;
  color: color-mix(in srgb, var(--mixer-accent) 55%, #657984);
  font: 800 clamp(8px, 1.36cqh, 11px) ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mixer-instrument-lights {
  width: 100%;
  grid-template-columns: repeat(5, clamp(18px, 2.72cqh, 22px));
  grid-auto-rows: clamp(18px, 2.72cqh, 22px);
  gap: 3px;
  margin-top: 4px;
}

.mixer-instrument-lights span {
  width: clamp(18px, 2.72cqh, 22px);
  height: clamp(18px, 2.72cqh, 22px);
  border-radius: 5px;
}

.mixer-instrument-lights .mixer-instrument-light {
  color: color-mix(in srgb, var(--mixer-accent) 22%, #51626b);
  border-color: color-mix(in srgb, var(--mixer-accent) 16%, #344851);
  background: #0b171d;
  box-shadow: inset 0 0 5px rgba(2, 10, 14, 0.72);
  filter: none;
  opacity: 0.52;
}

.mixer-instrument-lights .mixer-instrument-light.is-active {
  color: color-mix(in srgb, var(--mixer-accent) 88%, white);
  border-color: color-mix(in srgb, var(--mixer-accent) 72%, #d7fbff);
  background: color-mix(in srgb, var(--mixer-accent) 14%, #09161c);
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--mixer-accent) 28%, transparent),
    0 0 7px color-mix(in srgb, var(--mixer-accent) 62%, transparent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mixer-accent) 82%, transparent));
  opacity: 1;
}

.mixer-instrument-lights svg,
.mixer-instrument-lights .mixer-instrument-art {
  width: clamp(11px, 1.85cqh, 15px);
  height: clamp(11px, 1.85cqh, 15px);
}

.mixer-channel-bank {
  padding: clamp(3px, 0.99cqh, 8px);
}

.mixer-channel-strip {
  grid-template-rows:
    clamp(20px, 3.46cqh, 28px)
    clamp(4px, 0.62cqh, 5px)
    clamp(11px, 1.98cqh, 16px)
    minmax(34px, 1fr)
    clamp(11px, 1.98cqh, 16px)
    clamp(23px, 3.58cqh, 29px);
  gap: clamp(1px, 0.37cqh, 3px);
  padding: clamp(2px, 0.62cqh, 5px) clamp(3px, 0.62cqh, 5px) clamp(3px, 0.74cqh, 6px);
}

.mixer-channel-title strong {
  gap: clamp(2px, 0.62cqh, 5px);
  font-size: var(--i18n-fit-font-size, clamp(11px, 1.85cqh, 15px));
}

.mixer-channel-title strong svg {
  width: clamp(13px, 2.1cqh, 17px);
  height: clamp(13px, 2.1cqh, 17px);
  stroke-width: 2.2;
}

.mixer-channel-meter-value {
  font-size: 9px;
}

.mixer-channel-meter {
  width: 100%;
}

.mixer-range-label {
  font-size: var(--i18n-fit-font-size, 11px) !important;
}

@container formal-mixer (max-width: 300px) {
  .mixer-channel-strip { padding-inline: 1px; }
}

@container formal-mixer (max-width: 260px) {
  .mixer-console-heading {
    flex-wrap: wrap;
    gap: 6px;
  }
  .mixer-console-heading > .panel-heading-copy { flex-basis: 100%; }
  .mixer-console-actions { margin-inline-start: auto; }
}

.mixer-range-top {
  transform: translateY(6px);
}

.mixer-range-bottom {
  transform: translateY(-6px);
}

.mixer-fader {
  min-height: 64px;
}

.mixer-fader-track {
  inset: 9px 0;
}

.mixer-fader-scale {
  width: min(50px, calc(100% - 36px));
  opacity: 0.54;
  background:
    linear-gradient(#8190a8, #8190a8) center 0 / 82% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 12.5% / 72% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 25% / 62% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 37.5% / 52% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 50% / 42% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 62.5% / 52% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 75% / 62% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 87.5% / 72% 1px no-repeat,
    linear-gradient(#8190a8, #8190a8) center 100% / 82% 1px no-repeat;
}

.mixer-fader-numbers {
  font-size: 10px;
  line-height: 12px;
}

.mixer-fader-numbers b {
  height: 12px;
}

.mixer-fader-thumb {
  width: clamp(25px, 3.83cqh, 31px);
  height: clamp(14px, 2.1cqh, 17px);
}

.mixer-auto-switch {
  --travel: clamp(33px, 5.56cqh, 45px);
  width: clamp(56px, 8.9cqh, 72px);
  height: clamp(22px, 3.34cqh, 27px);
  font-size: clamp(7px, 1.11cqh, 9px);
  box-shadow: inset 0 2px 5px rgba(57, 72, 96, 0.18), 0 1px 0 rgba(255, 255, 255, 0.88);
}

.mixer-auto-switch::before {
  width: clamp(15px, 2.35cqh, 19px);
  height: clamp(15px, 2.35cqh, 19px);
}

.mixer-auto-switch span {
  inset: 0 5px 0 23px;
}

.mixer-auto-switch.is-active span {
  inset: 0 23px 0 5px;
}

.mixer-instrument-switches {
  gap: clamp(3px, 0.62cqh, 5px);
  grid-auto-rows: var(--mixer-instrument-row-height);
}

.mixer-console-panel .mixer-instrument-switches .instrument-chip,
.mixer-console-panel .mixer-instrument-switches .mixer-more-instruments {
  min-height: var(--mixer-instrument-row-height) !important;
  height: var(--mixer-instrument-row-height);
  gap: 1px;
  padding: var(--mixer-instrument-padding-block) 4px;
  font-size: 11px !important;
  line-height: 1;
}

.mixer-console-panel .mixer-extra-instrument {
  min-height: var(--mixer-instrument-row-height);
  height: var(--mixer-instrument-row-height);
  gap: 1px;
  padding: var(--mixer-instrument-padding-block) 4px;
  font-size: 11px;
  line-height: 1;
}

.mixer-instrument-switches button svg,
.mixer-instrument-switches button .mixer-instrument-art {
  width: var(--mixer-instrument-icon-size);
  height: var(--mixer-instrument-icon-size);
}

.mixer-console-panel .mixer-extra-instrument svg,
.mixer-console-panel .mixer-extra-instrument .mixer-instrument-art {
  width: var(--mixer-instrument-icon-size);
  height: var(--mixer-instrument-icon-size);
}

/* The extend mixer has a single-line cost note, so return that spare height to
   both instrument rows and keep localized glyphs clear of vertical clipping. */
.extend-mixer-mount .mixer-console-panel {
  --mixer-instrument-row-height: clamp(32px, 5.2cqh, 40px);
}

.extend-mixer-mount .mixer-console-panel .mixer-instrument-switches button > span,
.extend-mixer-mount .mixer-console-panel .mixer-extra-instrument > span {
  line-height: 1.25;
}

.extend-mixer-mount .mixer-submit-row .cost-note {
  min-height: 16px;
}

.mixer-submit-row .generate-button {
  width: 100%;
  min-height: clamp(34px, 4.94cqh, 40px) !important;
  max-height: none;
  font-size: clamp(13px, 2.1cqh, 16px);
}

.mixer-submit-row .generate-button > svg,
.mixer-submit-row .generate-button > i {
  width: clamp(18px, 2.72cqh, 22px);
  height: clamp(18px, 2.72cqh, 22px);
  flex-basis: clamp(18px, 2.72cqh, 22px);
}

.mixer-submit-row {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.mixer-submit-row .cost-note {
  display: block !important;
  min-height: 24px;
  overflow: visible;
  white-space: pre-line;
  font-size: 9px !important;
  line-height: 12px !important;
}

/* Formal panels can become narrower before the page reaches its mobile
   breakpoint. Compact the whole console proportionally at that point. */
@container formal-mixer (max-width: 455px) {
  .mixer-console-actions { gap: 4px; }
  .mixer-console-actions .mixer-persona-entry { min-width: 96px; padding-inline: 7px; font-size: 10px; }
  .mixer-lcd-head { gap: 12px; }
  .mixer-lcd-channel-icons { gap: 3px; }
  .mixer-lcd-values { gap: 2px; }
  .mixer-lcd-scroll-track { gap: 4px; }
  .mixer-lcd-instruments { width: 106px; min-width: 106px; padding-top: 2px; }
  .mixer-channel-meter-value { font-size: 9px; }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments { padding-inline: 2px; font-size: 10px !important; }
  .mixer-console-panel .mixer-extra-instrument { padding-inline: 2px; font-size: 10px; }
  .mixer-instrument-switches button svg,
  .mixer-instrument-switches button .mixer-instrument-art { width: 12px; height: 12px; }
}

@media (max-width: 680px) {
  .mixer-console-panel.is-mobile-instrument-compact .mixer-instrument-switches .instrument-chip:nth-of-type(n + 5) {
    display: none !important;
  }

  .mixer-console-panel.is-mobile-instrument-compact .mixer-instrument-switches {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
}

/* FORMAL_MIXER_DEMO_PARITY_END */

/* MOBILE_MIXER_LCD_BALANCE_START
   Keep the two LCD columns on one baseline while leaving instrument artwork
   unchanged in the touch controls below. */
@media (max-width: 680px) {
  /* Mobile localized mixer headings */
  .mixer-channel-title strong {
    max-width: 100%;
    gap: 2px;
    font-size: var(--i18n-fit-font-size, 11px);
    overflow: hidden;
    white-space: nowrap;
  }

  .mixer-channel-title strong svg {
    flex: 0 0 auto;
    width: var(--i18n-fit-icon-size, 14px);
    height: var(--i18n-fit-icon-size, 14px);
  }

  .mixer-lcd-display {
    align-items: center;
    border-top: 1px solid transparent;
  }

  .mixer-lcd-summary,
  .mixer-lcd-instruments {
    align-self: center;
  }

  .mixer-lcd-summary {
    overflow: hidden;
  }

  .mixer-lcd-values,
  .mixer-range-label {
    font-size: var(--i18n-fit-font-size, clamp(9px, 1.45cqh, 11px)) !important;
    line-height: 1.1;
  }

  .mixer-lcd-value-row {
    max-width: 100%;
    overflow: hidden;
  }

  .mixer-lcd-scroll-track {
    gap: clamp(2px, 0.5cqh, 4px);
  }

  .mixer-lcd-value-row b {
    flex: 0 0 auto;
  }

  .mixer-lcd-value-row.is-overflowing .mixer-lcd-scroll-track {
    animation: mixer-lcd-overflow-scroll var(--mixer-lcd-scroll-duration, 7s) ease-in-out infinite;
    will-change: transform;
  }

  @keyframes mixer-lcd-overflow-scroll {
    0%, 16% { transform: translateX(0); }
    68%, 84% { transform: translateX(calc(-1 * var(--mixer-lcd-scroll-distance, 0px))); }
    100% { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mixer-lcd-value-row.is-overflowing {
      overflow-x: auto;
      scrollbar-width: none;
    }

    .mixer-lcd-value-row.is-overflowing::-webkit-scrollbar {
      display: none;
    }

    .mixer-lcd-value-row.is-overflowing .mixer-lcd-scroll-track {
      animation: none;
      will-change: auto;
    }
  }

  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments,
  .mixer-console-panel .mixer-extra-instrument {
    justify-content: center;
    padding-block: 2px;
    line-height: 10px;
  }

  .mixer-console-panel .mixer-instrument-switches button > span,
  .mixer-console-panel .mixer-extra-instrument > span {
    line-height: 10px;
  }

  .mixer-console-panel .mixer-instrument-switches button svg,
  .mixer-console-panel .mixer-instrument-switches button .mixer-instrument-art,
  .mixer-console-panel .mixer-extra-instrument svg,
  .mixer-console-panel .mixer-extra-instrument .mixer-instrument-art {
    flex: 0 0 auto;
    display: block;
  }
}

/* SEO_GUIDE_FAQ_START
   One vertical guide page and one FAQ page. FAQ pagination stays inside its
   component so it never changes the site's vertical snap sequence. */
.how-section > .content-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 36px));
}

.how-head {
  max-width: 820px;
  margin: 0 auto clamp(20px, 3.2vh, 34px);
}

.how-head h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
}

.how-head p {
  max-width: 74ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.62;
}

.how-song-path {
  display: grid;
  grid-template-columns: 30px minmax(120px, 420px) 30px;
  gap: 12px;
  justify-content: center;
  align-items: center;
  width: min(520px, 72%);
  margin: 0 auto 14px;
  color: #5b63e9;
}

.how-song-path > svg {
  width: 24px;
  height: 24px;
}

.how-song-path > svg:last-child {
  color: #ef4797;
}

.how-signal-bars {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.how-signal-bars span,
.qa-signal-meter span {
  width: 3px;
  height: var(--signal-height, 45%);
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4797, #8b54ff 54%, #4668ff);
  transform-origin: center;
  animation: seo-signal-pulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

.how-signal-bars span:nth-child(3n + 1), .qa-signal-meter span:nth-child(3n + 1) { --signal-height: 30%; animation-delay: -0.8s; }
.how-signal-bars span:nth-child(3n + 2), .qa-signal-meter span:nth-child(3n + 2) { --signal-height: 78%; animation-delay: -1.7s; }
.how-signal-bars span:nth-child(4n), .qa-signal-meter span:nth-child(4n) { --signal-height: 52%; animation-delay: -2.2s; }
.how-signal-bars span:nth-child(5n), .qa-signal-meter span:nth-child(5n) { --signal-height: 96%; animation-delay: -0.3s; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  overflow: visible;
}

.how-steps article {
  --step-accent: #ef4797;
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  justify-items: stretch;
  min-height: 214px;
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--step-accent) 24%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(25, 38, 79, 0.09);
  text-align: left;
}

.how-steps article:nth-child(2) { --step-accent: #8b54ff; }
.how-steps article:nth-child(3) { --step-accent: #3974e8; }
.how-steps article:nth-child(4) { --step-accent: #139da5; }

.how-steps article:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: -24px;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--step-accent) 30%, transparent), #7069ee);
}

.how-steps article:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block-start: calc(50% - 5px);
  inset-inline-end: -19px;
  width: 10px;
  height: 10px;
  border-block-start: 2px solid #7069ee;
  border-inline-end: 2px solid #7069ee;
  transform: rotate(45deg);
}

.how-steps > article > .how-step-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ef4797, #4668ff);
  font-size: 15px;
  font-weight: 900;
}

.how-steps .how-step-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--step-accent) 34%, #ffffff);
  border-radius: 8px;
  background: var(--step-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--step-accent) 24%, transparent);
}

.how-step-mark svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.how-step-copy {
  min-width: 0;
}

.how-step-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--step-accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.how-step-label b {
  color: #5b6478;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.how-steps h3 {
  margin: 8px 0 10px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.25;
}

.how-steps p {
  margin: 0;
  color: #626d84;
  font-size: clamp(13px, 1.08vw, 15px);
  line-height: 1.62;
  text-align: left;
}

.how-use-cases {
  max-width: 920px;
  margin: clamp(16px, 2.5vh, 24px) auto 0;
  color: #5c6680;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.seo-adaptive-art {
  display: none;
}

@media (max-width: 900px) and (min-width: 681px) {
  .how-head {
    margin-bottom: clamp(12px, 2vh, 18px);
  }

  .how-head h2 {
    font-size: clamp(26px, 3.8vw, 34px);
  }

  .how-song-path {
    margin-bottom: 10px;
  }

  .how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  .how-steps article {
    min-height: clamp(150px, 21vh, 180px);
    padding: 16px 18px;
  }

  .how-steps article:not(:last-child)::before,
  .how-steps article:not(:last-child)::after {
    display: none;
  }

  .how-use-cases {
    margin-top: 12px;
  }
}

.qa-layout {
  grid-template-columns: minmax(230px, 0.54fr) minmax(0, 1.46fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: center;
  padding-top: clamp(8px, 2.2vh, 24px);
}

.qa-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.qa-copy h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.06;
}

.qa-copy > p {
  max-width: 34ch;
  margin: 0;
  color: #626d84;
  font-size: 15px;
  line-height: 1.65;
}

.qa-signal-meter {
  display: flex;
  position: relative;
  width: min(178px, 100%);
  height: 42px;
  align-items: center;
  gap: 6px;
  padding-inline-end: 44px;
}

.qa-signal-meter::after {
  content: "";
  position: absolute;
  inset-inline: 0 40px;
  inset-block-end: 5px;
  height: 1px;
  background: linear-gradient(90deg, rgba(70, 104, 255, 0.52), rgba(239, 71, 151, 0.08));
}

.qa-signal-meter span {
  width: 4px;
}

.qa-signal-meter b {
  position: absolute;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(139, 84, 255, 0.24);
  border-radius: 50%;
  color: #5b63e9;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 18px rgba(49, 87, 255, 0.11);
  font-size: 18px;
}

.qa-category-tabs {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.qa-category-tabs button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(49, 87, 255, 0.15);
  border-radius: 6px;
  color: #5b657d;
  background: rgba(255, 255, 255, 0.66);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.qa-category-tabs button:hover {
  border-color: rgba(111, 83, 255, 0.34);
  color: #3157ff;
}

.qa-category-tabs button[aria-selected="true"] {
  border-color: rgba(139, 84, 255, 0.32);
  color: #17213a;
  background: linear-gradient(90deg, rgba(239, 71, 151, 0.1), rgba(70, 104, 255, 0.1));
  transform: translateX(4px);
}

.qa-category-tabs button:focus-visible,
.qa-page-arrow:focus-visible,
.qa-page-set summary:focus-visible {
  outline: 3px solid rgba(70, 104, 255, 0.24);
  outline-offset: 2px;
}

.qa-pager {
  min-width: 0;
}

.qa-page-set {
  display: grid;
  gap: 5px;
  min-height: 352px;
}

.qa-page-set[hidden] {
  display: none;
}

.qa-page-set.is-entering {
  animation: faq-page-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qa-pager[data-direction="previous"] .qa-page-set.is-entering {
  animation-name: faq-page-enter-reverse;
}

.qa-page-set details {
  border-bottom: 1px solid rgba(79, 94, 138, 0.16);
  background: transparent;
}

.qa-page-set summary {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 9px 36px 9px 4px;
  color: #17213a;
  font-size: 15px;
  font-weight: 820;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.qa-page-set summary::-webkit-details-marker {
  display: none;
}

.qa-page-set summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(70, 104, 255, 0.18);
  border-radius: 50%;
  color: #4668ff;
  font-size: 17px;
  line-height: 1;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

.qa-page-set details[open] summary::after {
  content: "−";
  border-color: rgba(239, 71, 151, 0.28);
  color: #ef4797;
  transform: rotate(180deg);
}

.qa-page-set details p {
  max-width: 72ch;
  margin: -1px 40px 11px 4px;
  color: #626d84;
  font-size: 13px;
  line-height: 1.55;
}

.qa-pager-controls {
  display: grid;
  grid-template-columns: 36px minmax(60px, auto) 36px;
  gap: 10px;
  justify-content: end;
  align-items: center;
  margin-top: 12px;
}

.qa-page-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(70, 104, 255, 0.2);
  border-radius: 6px;
  color: #4f5ff4;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.qa-page-arrow svg {
  width: 17px;
  height: 17px;
}

.qa-page-arrow:disabled {
  opacity: 0.34;
  cursor: default;
}

.qa-page-status {
  color: #68728a;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@keyframes faq-page-enter {
  from { opacity: 0.2; transform: translateX(16px); filter: blur(3px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes faq-page-enter-reverse {
  from { opacity: 0.2; transform: translateX(-16px); filter: blur(3px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes seo-signal-pulse {
  from { transform: scaleY(0.62); opacity: 0.62; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 680px) {
  .how-section,
  .qa-page {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  .how-section > .content-shell,
  .qa-layout {
    width: 100%;
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-page-bottom));
  }

  body.player-open .how-section > .content-shell,
  body.player-open .qa-layout {
    height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    min-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
    max-height: calc(100svh - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  .how-section > .content-shell {
    display: flex;
    align-items: stretch;
    justify-content: safe center;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .how-head {
    width: 100%;
    margin-bottom: 10px;
    padding-inline: 20px;
    text-align: left;
  }

  .how-head h2 {
    margin-bottom: 7px;
    font-size: clamp(22px, 6.6vw, 27px);
  }

  .how-head p {
    display: -webkit-box;
    font-size: clamp(12px, 3.45vw, 14px);
    line-height: 1.44;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .how-song-path {
    grid-template-columns: 24px minmax(90px, 260px) 24px;
    width: calc(100% - 40px);
    margin-bottom: 7px;
  }

  .how-song-path > svg {
    width: 19px;
    height: 19px;
  }

  .how-signal-bars {
    height: 22px;
    gap: 3px;
  }

  .how-steps {
    position: relative;
    grid-template-columns: 1fr;
    gap: 7px;
    width: calc(100% - 28px);
    margin-inline: auto;
  }

  .how-steps article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    min-height: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 7px 18px rgba(25, 38, 79, 0.07);
  }

  .how-steps article:not(:last-child)::before {
    display: none;
  }

  .how-steps article:not(:last-child)::after {
    z-index: 3;
    inset-block-start: 43px;
    inset-block-end: -9px;
    inset-inline-start: 27px;
    width: 2px;
    height: auto;
    border: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--step-accent) 68%, #ffffff), rgba(112, 105, 238, 0.36));
    transform: none;
  }

  .how-steps .how-step-mark {
    position: relative;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .how-step-mark svg {
    width: 17px;
    height: 17px;
  }

  .how-step-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
  }

  .how-step-label {
    grid-column: 1;
    font-size: clamp(8.5px, 2.55vw, 10px);
  }

  .how-steps h3 {
    grid-column: 2;
    margin: 0;
    font-size: clamp(14px, 4vw, 16px);
  }

  .how-steps p {
    display: -webkit-box;
    grid-column: 1 / -1;
    margin: 5px 0 0;
    font-size: clamp(11px, 3.15vw, 12.5px);
    line-height: 1.38;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .how-use-cases {
    display: block;
    margin: 9px auto 8px;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.38;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .seo-adaptive-art {
    position: relative;
    display: block;
    width: 100%;
    height: var(--seo-art-height, 0px);
    min-height: 0;
    flex: 0 0 var(--seo-art-height, 0px);
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
  }

  .seo-adaptive-art[hidden] {
    display: none;
  }

  .seo-adaptive-art.is-visible {
    opacity: 1;
  }

  .seo-adaptive-art img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--seo-art-width, 320px);
    max-width: none;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(74, 72, 170, 0.15));
    transform: translate(-50%, -50%);
    user-select: none;
  }

  .qa-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 9px;
    align-content: center;
    align-items: stretch;
    padding-top: 0;
  }

  .qa-copy {
    gap: 6px;
  }

  .qa-copy h2 {
    font-size: clamp(23px, 6.5vw, 27px);
  }

  .qa-copy > p {
    max-width: none;
    font-size: clamp(11.5px, 3.25vw, 13px);
    line-height: 1.4;
  }

  .qa-signal-meter {
    display: none;
  }

  .qa-category-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 2px;
  }

  .qa-category-tabs button {
    min-height: 34px;
    padding: 5px 4px;
    font-size: clamp(10px, 3vw, 12px);
    text-align: center;
  }

  .qa-category-tabs button[aria-selected="true"] {
    transform: none;
  }

  .qa-pager {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow-anchor: none;
  }

  .qa-pager::before {
    content: "";
    position: absolute;
    top: var(--faq-background-start, 100%);
    right: 6%;
    bottom: 0;
    left: 6%;
    z-index: 0;
    background-image: url("/assets/home-faq-support.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
  }

  .qa-pager.has-faq-background-art::before {
    opacity: 0.88;
  }

  .qa-page-set,
  .qa-pager-controls {
    position: relative;
    z-index: 1;
  }

  .qa-page-set {
    grid-row: 1;
  }

  .qa-pager-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin-top: 0;
  }

  .qa-page-set {
    align-content: start;
    min-height: 0;
  }

  .qa-page-set summary {
    min-height: 40px;
    padding: 7px 31px 7px 2px;
    font-size: clamp(11.5px, 3.35vw, 13.5px);
    line-height: 1.3;
  }

  .qa-page-set summary::after {
    inset-inline-end: 2px;
    width: 21px;
    height: 21px;
    font-size: 15px;
  }

  .qa-page-set details p {
    margin: -1px 30px 8px 2px;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.38;
  }

  .qa-pager-controls {
    grid-template-columns: 32px minmax(56px, auto) 32px;
    gap: 7px;
    justify-content: center;
    margin-top: 7px;
  }

  .qa-page-arrow {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 680px) and (max-height: 740px) {
  .how-head { margin-bottom: 7px; }
  .how-head h2 { font-size: 21px; }
  .how-head p { font-size: 11.5px; line-height: 1.34; }
  .how-steps { gap: 5px; }
  .how-steps article { padding-block: 6px; }
  .how-steps article:not(:last-child)::after { inset-block-start: 39px; inset-block-end: -7px; }
  .how-steps .how-step-mark { width: 32px; height: 32px; }
  .how-steps h3 { font-size: 13px; }
  .how-steps p { font-size: 10.5px; line-height: 1.3; }
  .how-head p { -webkit-line-clamp: 2; }
  .how-use-cases {
    display: block;
    margin: 4px auto 6px;
    font-size: 9.5px;
    line-height: 1.25;
  }
  .qa-layout { gap: 6px; }
  .qa-copy h2 { font-size: 21px; }
  .qa-copy > p { font-size: 10.5px; line-height: 1.32; }
  .qa-category-tabs button { min-height: 30px; font-size: 10px; }
  .qa-page-set { gap: 2px; }
  .qa-page-set summary { min-height: 34px; padding-block: 5px; font-size: 11px; }
  .qa-page-set details p { margin-bottom: 6px; font-size: 10px; line-height: 1.3; }
  .qa-pager-controls { margin-top: 4px; }
  .qa-page-arrow { width: 29px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-page-set.is-entering { animation: none; }
  .how-signal-bars span,
  .qa-signal-meter span { animation: none; }
  .qa-category-tabs button,
  .qa-page-set summary::after { transition: none; }
}
/* SEO_GUIDE_FAQ_END */

/* MOBILE_DYNAMIC_VIEWPORT_PAGE_BOUNDARY_START
   iOS can expose more space than the small viewport after browser chrome changes.
   Size every snap page from the live dynamic viewport so the next page never
   peeks into the current one. Multi-panel wrappers remain naturally tall. */
@media (max-width: 680px) {
  :root {
    --mobile-viewport-height: 100vh;
    --mobile-viewport-height: 100dvh;
    --mobile-page-boundary-guard: 1px;
    --mobile-panel-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-page-bottom));
    --mobile-player-reserve: calc(var(--mobile-viewport-height) - var(--workspace-player-top) + 1px);
  }

  body.player-open {
    --mobile-panel-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  #top > .intro-page,
  #top > .featured-page,
  #top > .how-section,
  #top > .qa-page,
  .pricing-page,
  .profile-page {
    height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
    min-height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
    max-height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
    overflow: hidden;
  }

  .how-section > .content-shell,
  .qa-page > .qa-layout {
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    min-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    max-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    scroll-margin-top: var(--mobile-header-space);
  }

  .how-section > .content-shell {
    padding-bottom: 10px;
  }

  body.player-open .how-section > .content-shell,
  body.player-open .qa-page > .qa-layout {
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    min-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    max-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
  }
}
/* MOBILE_DYNAMIC_VIEWPORT_PAGE_BOUNDARY_END */

/* PRICING_CONTENT_SCROLL_START
   The pricing shell remains one workspace page. Each plan card owns only the
   extra vertical overflow created by short viewports or longer translations. */
.pricing-page .pricing-grid .price-card {
  grid-template-rows: auto auto auto minmax(min-content, 1fr) auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: rgba(105, 89, 215, 0.5) transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.pricing-page .pricing-grid .price-card::-webkit-scrollbar {
  width: 6px;
}

.pricing-page .pricing-grid .price-card::-webkit-scrollbar-track {
  background: transparent;
}

.pricing-page .pricing-grid .price-card::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(105, 89, 215, 0.5);
  background-clip: padding-box;
}
/* PRICING_CONTENT_SCROLL_END */

/* PAGE_CONTEXT_COPY_START
   Short, useful page summaries stay visible and page-specific. They support
   discovery without turning account and workspace surfaces into keyword lists. */
.pricing-title-row {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.pricing-context-copy,
.lyrics-context-copy,
.library-context-copy,
.profile-title-copy p {
  color: #667087;
  letter-spacing: 0;
}

.pricing-context-copy {
  max-width: 860px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.lyrics-context-copy {
  min-width: 0;
  max-width: min(52ch, 100%);
  margin: 2px auto 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

.library-context-copy {
  display: block;
  max-width: min(54ch, 100%);
  margin: 4px 0 0;
  overflow: visible;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
}

.profile-title-copy {
  min-width: 0;
}

.profile-title-copy p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.page-support-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-self: end;
  gap: 4px 8px;
  min-width: 0;
  color: #687184;
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}
.page-support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #d7dbe2;
  border-radius: 6px;
  color: #687184;
  background: #f3f4f6;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.page-support-link svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.page-support-link:hover {
  border-color: #c7ccd5;
  color: #4f5968;
  background: #eceef1;
  box-shadow: none;
  transform: none;
}

.page-support-link:focus-visible {
  outline: 2px solid rgba(100, 116, 139, 0.38);
  outline-offset: 2px;
}

.profile-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .profile-page,
  .pricing-page {
    --mobile-page-bottom: max(1.5svh, env(safe-area-inset-bottom, 0px));
  }

  .pricing-context-copy,
  .lyrics-context-copy {
    display: -webkit-box;
    max-width: 94%;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .library-context-copy {
    max-width: 100%;
    margin-top: 2px;
    font-size: 9.5px;
    line-height: 1.2;
  }

  .profile-title-copy p {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
  }

  .profile-title-copy {
    display: contents;
  }

  .profile-title-copy h1 {
    grid-column: 1;
    grid-row: 1;
    overflow-wrap: anywhere;
  }

  .profile-hero-actions {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
  }
}
/* PAGE_CONTEXT_COPY_END */
/* MOBILE_MIXER_LCD_BALANCE_END */

/* MOBILE_MIXER_FADER_SPACE_START
   Reclaim the channel-bank edge padding for the flexible fader row. */
@media (max-width: 680px) {
  .mixer-channel-bank {
    padding-top: 1px;
    padding-bottom: 2px;
  }

  .mixer-channel-strip {
    padding-top: 1px;
    padding-bottom: 3px;
  }
}
/* MOBILE_MIXER_FADER_SPACE_END */

@media (max-width: 680px) {
  /* Field labels, placeholders and entered text use one mobile type scale. */
  #studio .prompt-field textarea {
    padding-block: 8px 32px;
  }

  .field-block,
  .studio-prompt-heading {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .field-block input,
  .field-block textarea,
  .field-block select,
  .studio-panel .field-block #songTitle {
    font-size: var(--field-text-size, 12px) !important;
  }

  .field-block input::placeholder,
  .field-block textarea::placeholder {
    font-size: inherit;
  }
}

/* MIXER_MINIMUM_HEIGHT_CONTRACT_START
   The proportional layout reaches its readable minimum at about 470px. Only
   a raised player or an unusually short viewport may cross that boundary. */
@container formal-mixer (max-height: 470px) {
  .mixer-console-panel {
    --mixer-toolbar-control-size: 28px;
    --mixer-instrument-row-height: 28px;
    --mixer-instrument-icon-size: 9px;
    --mixer-instrument-padding-block: 1px;
    gap: 3px !important;
    padding-block: 7px !important;
  }

  .mixer-console-heading {
    min-height: 30px;
  }

  .mixer-console-heading .panel-seo-subtitle {
    font-size: 9px;
    -webkit-line-clamp: 1;
  }

  .mixer-console-actions .mixer-persona-entry {
    min-height: 28px;
    max-height: 28px;
  }

  .mixer-icon-button {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .mixer-preset-row .style-chip {
    min-height: 22px !important;
  }

  .mixer-lcd-display {
    min-height: 50px;
  }

  .mixer-channel-strip {
    grid-template-rows: 18px 3px 10px minmax(34px, 1fr) 10px 20px;
    gap: 1px;
    padding-block: 2px;
  }

  .mixer-fader {
    min-height: 34px;
  }

  .mixer-instrument-switches {
    grid-auto-rows: var(--mixer-instrument-row-height);
  }

  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments,
  .mixer-console-panel .mixer-extra-instrument {
    min-height: 28px !important;
    height: 28px;
    gap: 1px;
    padding-block: var(--mixer-instrument-padding-block);
    font-size: 9px !important;
    line-height: 9px;
  }

  .mixer-console-panel .mixer-instrument-switches button > span,
  .mixer-console-panel .mixer-extra-instrument > span {
    line-height: 9px;
  }

  .mixer-console-panel .mixer-instrument-switches button svg,
  .mixer-console-panel .mixer-instrument-switches button .mixer-instrument-art,
  .mixer-console-panel .mixer-extra-instrument svg,
  .mixer-console-panel .mixer-extra-instrument .mixer-instrument-art {
    width: 9px;
    height: 9px;
  }

  .mixer-submit-row .generate-button {
    min-height: 32px !important;
  }
}
/* MIXER_MINIMUM_HEIGHT_CONTRACT_END */

/* Reserve room on the button, not the label, so icon and text stay centered. */
@container formal-mixer (max-width: 455px) {
  .mixer-instrument-switches {
    grid-auto-rows: 44px;
  }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments,
  .mixer-console-panel .mixer-extra-instrument {
    min-height: 44px !important;
    height: 44px;
    justify-content: center;
    gap: 2px;
    padding-block: 1px;
    font-size: 10px !important;
  }
  .mixer-console-panel .mixer-instrument-switches button > span,
  .mixer-console-panel .mixer-extra-instrument > span {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    line-height: 11px;
  }
  .extend-mixer-mount .mixer-console-panel .mixer-instrument-switches button > span,
  .extend-mixer-mount .mixer-console-panel .mixer-extra-instrument > span {
    line-height: 11px;
  }
  .mixer-console-panel .mixer-instrument-switches button svg,
  .mixer-console-panel .mixer-instrument-switches button .mixer-instrument-art,
  .mixer-console-panel .mixer-extra-instrument svg,
  .mixer-console-panel .mixer-extra-instrument .mixer-instrument-art {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
  }
}

/* SHORT_MOBILE_CHROME_SCALE_START
   Short mobile viewports spend their limited height on the working panel.
   Scale the shared header and player as complete visual units while retaining
   readable text floors and the 44px header touch targets. */
@media (max-width: 680px) and (max-height: 720px) {
  :root {
    --site-header-height: clamp(48px, 7.8svh, 54px);
    --site-header-padding-y: clamp(2px, 0.45svh, 4px);
    --site-brand-font-size: clamp(17px, 2.8svh, 19px);
    --site-brand-logo-size: clamp(26px, 4.6svh, 30px);
    --site-account-avatar-size: clamp(28px, 4.8svh, 32px);
    --player-shell-padding-y: clamp(5px, 0.85svh, 6px);
    --player-cover-size: clamp(34px, 5.7svh, 38px);
    --player-title-font-size: clamp(12px, 1.95svh, 12.5px);
    --player-meta-font-size: 10px;
    --player-primary-control-size: clamp(34px, 5.7svh, 36px);
    --player-secondary-control-size: clamp(28px, 4.75svh, 30px);
    --player-control-gap: 4px;
  }

  .site-header {
    gap: 8px;
    padding-inline: 10px;
  }

  .brand {
    gap: 7px;
  }

  .menu-toggle svg {
    width: 19px;
    height: 19px;
  }

  .global-player {
    gap: 6px;
    min-height: clamp(50px, 8.2svh, 54px);
    padding-inline: 8px;
    border-radius: 10px 10px 0 0;
  }

  .player-track {
    gap: 1px;
  }

  .player-progress-wrap {
    top: 4px;
    right: 8px;
    left: 8px;
  }

  .player-controls {
    gap: var(--player-control-gap);
  }

  .player-skip,
  .player-mode {
    min-height: var(--player-secondary-control-size);
    border-radius: 8px;
  }

  .player-play {
    min-height: var(--player-primary-control-size);
    border-radius: 10px;
  }

  .player-peek-handle {
    width: 124px;
    height: 24px;
  }

  .player-peek-handle span {
    width: 96px;
    height: 4px;
  }
}
/* SHORT_MOBILE_CHROME_SCALE_END */

/* DESKTOP_SUBVIEW_SCALE_CONTRACT_START
   Full-screen subviews use the same complete-scene scaling as the creation
   workspace. Their panels, typography, icons, buttons, and internal tools must
   never split into independently scaled layers. */
@media (min-width: 981px) {
  .voice-modal-shell {
    place-items: start center;
    padding-block: 12px;
  }

  .voice-modal-shell .voice-modal,
  .auth-modal-shell .auth-modal,
  .app-dialog-shell .app-dialog,
  .library-v6-dialog-backdrop .library-v6-dialog {
    --desktop-chrome-scale: 1;
    --site-action-height: clamp(32px, 4.2svh, 40px);
    --ui-button-font-size: clamp(12px, 1.9svh, 16px);
    --ui-button-icon-size: clamp(16px, 2.3svh, 20px);
  }

  .voice-modal-shell .voice-modal {
    height: var(--overlay-content-unscaled-height);
    max-height: var(--overlay-content-unscaled-height);
    transform: translateY(14px) scale(calc(var(--overlay-content-scale) * 0.98));
    transform-origin: top center;
  }

  .voice-modal-shell[aria-hidden="false"]:not(.is-closing) .voice-modal {
    transform: scale(var(--overlay-content-scale));
  }

  .voice-modal-shell.is-closing .voice-modal {
    transform: translateY(18px) scale(calc(var(--overlay-content-scale) * 0.98));
  }

  .auth-modal-shell .auth-modal,
  .app-dialog-shell .app-dialog {
    transform: translateY(12px) scale(calc(var(--workspace-content-scale) * 0.98));
    transform-origin: center;
  }

  .auth-modal-shell[aria-hidden="false"]:not(.is-closing) .auth-modal,
  .app-dialog-shell[aria-hidden="false"]:not(.is-closing) .app-dialog {
    transform: scale(var(--workspace-content-scale));
  }

  .auth-modal-shell.is-closing .auth-modal,
  .app-dialog-shell.is-closing .app-dialog {
    transform: translateY(16px) scale(calc(var(--workspace-content-scale) * 0.98));
  }

  .library-v6-dialog-backdrop .library-v6-dialog {
    transform: translateY(14px) scale(calc(var(--overlay-content-scale) * 0.98));
    transform-origin: center;
  }

  .library-v6-dialog-backdrop.open:not(.is-closing) .library-v6-dialog {
    transform: scale(var(--overlay-content-scale));
  }

  .library-v6-dialog-backdrop.open.is-closing .library-v6-dialog {
    transform: translateY(16px) scale(calc(var(--overlay-content-scale) * 0.98));
  }
}
/* DESKTOP_SUBVIEW_SCALE_CONTRACT_END */

/* COMPACT_CUSTOM_ASSET_ROWS_START
   Saved voices and personas are repeated working rows. Keep their controls
   readable while removing the oversized vertical padding on every viewport. */
.voice-modal-content:has(.voice-list) {
  --voice-row-height: 92px;
  row-gap: 12px;
}

.voice-modal-content:has(> .voice-refresh-note) {
  grid-template-rows: auto var(--voice-row-height) max-content minmax(0, 1fr);
}

.voice-create-card,
.voice-list-item,
.voice-empty {
  height: var(--voice-row-height, 92px);
}

.voice-create-card {
  padding-block: 10px;
}

.voice-list {
  gap: 8px;
}

.voice-list .voice-list-item {
  padding-block: 8px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 24px 34px;
  gap: 4px 8px;
  align-content: center;
}

.voice-list-item > .voice-play-button {
  grid-column: 1;
  grid-row: 1 / -1;
}

.voice-list-item .voice-item-main {
  display: flex;
  grid-column: 2 / -1;
  grid-row: 1;
  align-items: center;
  gap: 6px;
}

.voice-list-item .voice-item-actions {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.voice-list-item .voice-item-actions:has(.voice-expiry) {
  grid-template-columns: clamp(36px, 22%, 70px) minmax(0, 1fr) 30px 30px;
}

.voice-list-item .voice-item-main > strong {
  flex: 1 1 0;
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
}

.voice-list-item .voice-expiry {
  display: flex;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.1;
}

.voice-list-item .voice-expiry > span {
  min-width: 0;
  font-size: var(--i18n-fit-font-size, 9px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.voice-list-item .voice-use-button,
.voice-list-item .voice-edit-button,
.voice-list-item .voice-delete-button {
  grid-column: auto;
  grid-row: auto;
  height: 34px;
  min-height: 34px;
  min-width: 0;
  width: 100%;
}

.voice-list-item .voice-use-button {
  max-width: 144px;
  justify-self: end;
  padding: 3px;
  white-space: normal;
}

.voice-list-item .voice-use-button > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: var(--i18n-fit-font-size, 13px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .voice-modal-content:has(.voice-list) {
    --voice-row-height: 82px;
    row-gap: 10px;
  }

  .voice-create-card {
    padding-block: 8px;
  }

  .voice-list {
    gap: 7px;
  }

  .voice-list-item {
    padding-block: 7px;
  }

  .voice-list-item .voice-item-main > strong {
    font-size: 14px;
  }

  .voice-list-item .voice-use-button > span {
    font-size: var(--i18n-fit-font-size, 12px);
  }
}
/* COMPACT_CUSTOM_ASSET_ROWS_END */

.voice-modal:has(.voice-record-stage) {
  --voice-record-button-size: 70px;
  padding: 18px;
}

.voice-modal:has(.voice-record-stage) .voice-modal-content {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content;
  gap: 8px;
}

.voice-modal:has(#voiceValidationPhrase) .voice-modal-content {
  grid-template-rows: max-content minmax(0, 1fr) max-content;
}

.voice-modal:has(.voice-record-stage) .voice-record-head,
.voice-modal:has(#voiceValidationPhrase) .voice-record-head {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  justify-items: stretch;
  gap: 8px 12px;
  padding: 0;
  margin: 0;
}

.voice-record-head .voice-record-title {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  padding-inline: 52px;
}

.voice-record-head .voice-record-title .section-kicker {
  margin: 0 0 3px;
  font-size: 11px;
  line-height: 1.2;
}

.voice-record-head .voice-record-title h2,
.voice-modal:has(#voiceValidationPhrase) .voice-record-head h2 {
  font-size: 20px;
  line-height: 1.15;
}

.voice-record-head .voice-record-left,
.voice-record-head .voice-record-tools {
  grid-row: 2;
  width: 100%;
  min-width: 0;
  justify-content: stretch;
}

.voice-record-head .voice-record-left {
  grid-column: 1;
}

.voice-record-head .voice-record-tools {
  grid-column: 2;
}

.voice-record-head .voice-record-tools[hidden] {
  display: none;
}

.voice-modal:has(.voice-record-stage) .voice-record-stage,
.voice-modal:has(#voiceValidationPhrase) .voice-record-stage {
  grid-template-rows: max-content max-content minmax(24px, 1fr) max-content;
  align-content: start;
  gap: 8px;
  padding: 0;
}

.voice-modal:has(#voiceValidationPhrase) .voice-record-stage {
  grid-template-rows: max-content max-content max-content minmax(24px, 1fr) max-content max-content;
}

.voice-record-stage .voice-phrase-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(47, 111, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.voice-phrase-wrap .voice-phrase {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--i18n-fit-font-size, 18px);
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

.voice-phrase-wrap .voice-refresh-phrase {
  position: static;
  justify-self: end;
  height: 30px;
  min-height: 30px;
  min-width: 0;
  max-width: 70%;
  padding: 3px 8px;
  font-size: 11px;
  white-space: normal;
}

.voice-refresh-phrase > [data-i18n-fit] {
  min-width: 0;
  font-size: var(--i18n-fit-font-size, 11px);
  line-height: 1.1;
}

.voice-record-stage #voiceRecordStatus {
  font-size: 12px;
  line-height: 1.35;
}

.voice-record-stage .voice-live-canvas {
  height: 100%;
  min-height: 24px;
  max-height: 112px;
}

.voice-record-stage .voice-panel-controls {
  grid-template-columns: minmax(0, 1fr) var(--voice-record-button-size) minmax(0, 1fr);
  column-gap: 12px;
}

.voice-record-stage .voice-record-main {
  width: var(--voice-record-button-size);
  height: var(--voice-record-button-size);
}

.voice-record-stage .ghost-button,
.voice-record-stage .solid-button {
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
}

.voice-panel-controls [data-i18n-fit],
.voice-verify-actions [data-i18n-fit] {
  min-width: 0;
  font-size: var(--i18n-fit-font-size, 12px);
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: normal;
}

.voice-panel-controls [data-i18n-fit-wrapped="true"],
.voice-verify-actions [data-i18n-fit-wrapped="true"] {
  overflow-wrap: anywhere;
}

.voice-modal:has(.voice-record-stage) .voice-step-dots {
  margin-top: 4px;
}

@media (max-width: 680px) {
  .voice-modal:has(.voice-record-stage) {
    --voice-record-button-size: 58px;
  }

  .voice-panel-controls .ghost-button,
  .voice-panel-controls .solid-button {
    gap: 4px;
    padding-inline: 6px;
  }

  .voice-phrase-wrap .voice-phrase {
    font-size: var(--i18n-fit-font-size, 16px);
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid {
    gap: 6px;
    margin-top: 0;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid article {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px 6px;
    min-height: 0;
    padding: 7px;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid strong {
    font-size: 11px;
    line-height: 1.2;
  }

  .voice-modal:has(.voice-record-stage) .voice-tips-grid span {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.25;
  }
}

/* Consent keeps its full translated height instead of absorbing grid shrinkage. */
.voice-modal-content:has(.voice-consent-card) {
  grid-template-rows: repeat(4, max-content);
  align-content: start;
  gap: 16px;
}

.voice-modal-content:has(.voice-consent-card) > .voice-step-head,
.voice-modal-content:has(.voice-consent-card) > .voice-consent-card,
.voice-modal-content:has(.voice-consent-card) > .voice-tips-grid {
  margin-block: 0;
}

.voice-modal-content:has(.voice-consent-card) .voice-recording-status:empty {
  display: none;
}

@media (max-width: 680px) {
  .voice-modal:has(.voice-consent-card) {
    height: min(720px, calc(100dvh - 20px));
    padding: 22px 12px 14px;
  }

  .voice-modal-content:has(.voice-consent-card) {
    gap: 8px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-step-head {
    gap: 6px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-step-head h2 {
    font-size: 22px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-step-head > p,
  .voice-modal-content:has(.voice-consent-card) .voice-upload-zone > p {
    font-size: 13px;
    line-height: 1.4;
  }

  .voice-consent-line {
    align-items: start;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .voice-consent-line input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    transform: none;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-upload-zone {
    gap: 6px;
    padding: 8px 12px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-upload-zone h3 {
    font-size: 18px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-tips-grid article {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px 6px;
    padding: 8px;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-tips-grid :is(i, svg) {
    grid-row: 1;
  }

  .voice-modal-content:has(.voice-consent-card) .voice-tips-grid span {
    grid-column: 1 / -1;
  }
}

.voice-modal-content:has(> .voice-detail-panel) {
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  gap: 12px;
}

.voice-modal-content:has(> .persona-detail-card) {
  grid-template-rows: max-content minmax(0, 1fr);
}

.voice-modal-content > .voice-detail-panel,
.voice-modal-content > .persona-detail-card {
  overflow-y: auto;
  align-content: start;
  scrollbar-width: thin;
}

.voice-modal-content .voice-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.voice-modal-content .voice-detail-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.voice-modal-content .voice-detail-actions button svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.voice-modal-content:has(.voice-detail-panel,.persona-save-form,.persona-detail-card) .voice-step-head {
  gap: 6px;
  margin-bottom: 8px;
}

.voice-modal-content:has(.voice-detail-panel,.persona-save-form,.persona-detail-card) .voice-step-head h2 {
  max-width: calc(100% - 72px);
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.voice-modal-content:has(.voice-detail-panel,.persona-save-form,.persona-detail-card) .voice-step-head > p:not(.section-kicker) {
  font-size: 13px;
  line-height: 1.35;
}

.voice-modal-content:has(.voice-consent-card,.voice-record-stage) {
  overflow-y: auto;
  scrollbar-width: thin;
}

.voice-modal-content .voice-record-stage {
  min-height: min-content;
}

/* CREATION_WORKFLOW_SHELL_START
   One continuous desktop workspace; two focused mobile pages share a persistent
   four-step rail. The original creation controls remain the source of truth. */
.creation-progress,
.creation-action-dock,
.creation-next-button {
  display: none;
}

.creation-progress-mobile-copy {
  display: none;
}

.creation-progress {
  container: creation-progress / size;
}

.creation-progress-list {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
}

.creation-progress-title {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 4px 4px;
  overflow-wrap: anywhere;
  color: #65708a;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  transform: translateY(clamp(22px, 4.5cqh, 34px));
}

.creation-progress-title > svg {
  width: 16.5px;
  height: 16.5px;
  flex: 0 0 auto;
  color: #7657df;
  stroke-width: 2.2;
}

.creation-progress-title > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.creation-progress-list::before {
  position: absolute;
  z-index: 0;
  top: calc(12.5% + 16px);
  bottom: calc(12.5% + 16px);
  left: 15px;
  display: block;
  width: 2px;
  border-radius: 999px;
  background: #dfe3ee;
  content: "";
  transform: translateX(-50%);
}

.creation-progress-step {
  position: relative;
  z-index: 1;
  display: grid;
  align-self: center;
  justify-items: stretch;
}

.creation-progress-step:not(:last-child)::after {
  display: none;
}

.creation-progress-step.is-complete:not(:last-child)::after {
  display: none;
}

.creation-progress-step button,
.creation-progress-target {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
  color: #78829a;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.creation-progress-target {
  cursor: default;
}

.creation-progress-number {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  border: 2px solid #e1e5ef;
  border-radius: 50%;
  place-items: center;
  color: #68728c;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.creation-progress-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-wrap: balance;
}

.creation-progress-label > span,
.creation-progress-label > small {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.creation-progress-label > small {
  margin-top: 2px;
  font-size: 0.82em;
  font-weight: 750;
  line-height: 1;
}

.creation-progress-step.is-complete .creation-progress-number {
  border-color: transparent;
  color: transparent;
  background: #e5e1ff;
  box-shadow: 0 5px 12px rgba(77, 61, 171, 0.14);
}

.creation-progress-step.is-complete .creation-progress-number::after {
  position: absolute;
  width: 7px;
  height: 11px;
  border-right: 2px solid #5b49cf;
  border-bottom: 2px solid #5b49cf;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.creation-progress-step.is-complete {
  color: #4e5871;
}

.creation-progress-step.is-active {
  color: #17203a;
}

.creation-progress-step.is-active .creation-progress-number {
  border-color: rgba(107, 82, 246, 0.55);
  color: #fff;
  background: linear-gradient(135deg, #ef4b9c, #7456f4 58%, #377dff);
  box-shadow: 0 0 0 5px rgba(118, 87, 244, 0.11), 0 10px 24px rgba(86, 72, 211, 0.2);
  transform: scale(1.06);
  animation: creation-step-breathe 2.8s ease-in-out infinite;
}

@keyframes creation-step-breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(118, 87, 244, 0.08), 0 8px 18px rgba(86, 72, 211, 0.16); }
  50% { box-shadow: 0 0 0 8px rgba(118, 87, 244, 0.03), 0 12px 27px rgba(86, 72, 211, 0.23); }
}

.draft-save-status {
  display: inline-grid;
  min-width: 0;
  flex: 0 0 auto;
  align-self: center;
  grid-template-columns: 8px max-content;
  align-items: center;
  gap: 5px;
  color: #58667f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: color 180ms ease;
}

.draft-save-status::before {
  grid-column: 1;
  grid-row: 1;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  content: "";
  transition: opacity 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.draft-save-status-reserve {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  visibility: hidden;
  pointer-events: none;
}

.draft-save-status-reserve > span {
  grid-column: 1;
  grid-row: 1;
}

.draft-save-status-text {
  grid-column: 2;
  grid-row: 1;
  opacity: 0;
  transition: opacity 180ms ease;
}

.draft-save-status.is-unsaved .draft-save-status-text,
.draft-save-status.is-saved .draft-save-status-text,
.draft-save-status.is-unsaved::before,
.draft-save-status.is-saved::before {
  opacity: 1;
}

.draft-save-status.is-saved {
  color: #3f765d;
}

.draft-save-status.is-unsaved {
  color: #765b3f;
}

.draft-save-status.is-unsaved::before {
  background: #e7a64f;
  box-shadow: 0 0 0 3px rgba(231, 166, 79, 0.14);
}

.draft-save-status.is-saved::before {
  background: #56c889;
  box-shadow: 0 0 0 3px rgba(86, 200, 137, 0.14);
}

.draft-save-status-mobile {
  display: none;
}

@media (min-width: 681px) {
  #createLayout.create-layout {
    grid-template-columns: clamp(92px, 7.8vw, 108px) repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) clamp(58px, 8.4cqh, 72px);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(72, 92, 178, 0.16);
    border-radius: 14px;
    background: rgba(250, 252, 255, 0.76);
    box-shadow: 0 24px 70px rgba(31, 43, 91, 0.1);
  }

  #createLayout > .creation-progress-primary {
    display: flex;
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 0 8px;
    border-right: 1px solid rgba(79, 98, 183, 0.12);
    background:
      linear-gradient(180deg, rgba(249, 245, 255, 0.96), rgba(244, 250, 255, 0.9)),
      radial-gradient(circle at 50% 12%, rgba(240, 75, 158, 0.11), transparent 32%);
  }

  #createLayout > .studio-panel {
    grid-column: 2;
    grid-row: 1;
    border: 0;
    border-right: 1px solid rgba(79, 98, 183, 0.13);
    border-radius: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.72);
  }

  #createLayout > .style-lab-panel {
    grid-column: 3;
    grid-row: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(245, 249, 255, 0.76)),
      radial-gradient(circle at 85% 10%, rgba(55, 125, 255, 0.09), transparent 32%);
  }

  #createLayout > .studio-panel > .studio-clear-row,
  #createLayout > .style-lab-panel > .mixer-submit-row {
    display: none !important;
  }

  #createLayout > .creation-action-dock {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px);
    padding: 8px clamp(12px, 1.8vw, 22px);
    border-top: 1px solid rgba(74, 94, 180, 0.14);
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 -10px 28px rgba(42, 53, 99, 0.035);
  }

  .creation-dock-clear {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 25%;
    min-height: 38px;
    padding-inline: 14px;
    border-color: rgba(89, 100, 151, 0.2);
    color: #4c5773;
    background: #fff;
  }

  .creation-dock-cost {
    min-width: 0;
    flex: 1 1 0;
    overflow-wrap: anywhere;
    color: #6b748a;
    font-size: var(--i18n-fit-font-size, clamp(8px, 1.18cqh, 10px)) !important;
    line-height: 1.25 !important;
    text-align: right;
    white-space: pre-wrap;
  }

  .creation-dock-generate {
    min-width: 0;
    max-width: 50%;
    min-height: 42px !important;
    margin-left: auto;
    flex: 0 1 clamp(190px, 19vw, 250px);
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(111, 73, 229, 0.22);
  }

  .creation-dock-clear > span,
  .creation-dock-generate > span {
    min-width: 0;
    font-size: var(--i18n-fit-font-size, inherit);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .creation-dock-generate > svg:last-child {
    width: 17px;
    height: 17px;
    margin-left: auto;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  #createLayout > .creation-action-dock {
    gap: 8px;
    padding-inline: 10px;
  }

  .creation-dock-clear {
    width: clamp(96px, 11vw, 118px);
    min-width: 0;
    padding-inline: 8px;
    flex-basis: clamp(96px, 11vw, 118px);
    font-size: 10px;
    line-height: 1.1;
    white-space: normal;
  }

  .creation-dock-clear > span {
    overflow-wrap: anywhere;
  }

  .draft-save-status-desktop {
    font-size: 9px;
  }

  .creation-dock-generate {
    flex-basis: 174px;
    padding-inline: 14px;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  #createLayout.create-layout {
    grid-template-columns: 88px repeat(2, minmax(0, 1fr));
  }

  .creation-progress-label {
    font-size: 10px;
  }

  .creation-dock-cost {
    display: none;
  }

  .creation-dock-generate {
    flex-basis: 174px;
  }
}

@media (max-width: 680px) {
  .draft-save-status-desktop {
    display: none;
  }

  .draft-save-status-mobile {
    display: inline-grid;
    gap: 3px;
    font-size: 9px;
  }

  .draft-save-status-mobile::before {
    grid-column: 1;
    width: 6px;
    height: 6px;
  }

  .draft-save-status-mobile.is-unsaved::before {
    box-shadow: 0 0 0 2px rgba(231, 166, 79, 0.14);
  }

  .draft-save-status-mobile.is-saved::before {
    box-shadow: 0 0 0 2px rgba(86, 200, 137, 0.14);
  }

  .draft-save-status-mobile {
    grid-template-columns: 6px max-content;
  }

  #studio .panel-heading-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: start;
    gap: 1px;
  }

  #studio .model-voice-stack {
    display: contents;
  }

  #studio .model-select-pill {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  #studio .model-select-pill > svg {
    display: none;
  }

  #studio .model-select-pill > span {
    max-width: none;
  }

  #studio .model-select-pill select {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  #studio .creation-mode-toggles {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  #studio .studio-prompt-heading {
    grid-column: 1;
    grid-row: 2;
  }

  #studio .instrumental-toggle {
    gap: 3px;
    padding-inline: 4px;
    font-size: 9px;
  }

  #studio .panel-head h2 {
    display: block;
    overflow: visible;
    font-size: clamp(18px, 5vw, 20px);
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-line-clamp: unset;
  }

  #studio .panel-seo-subtitle {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
  }

  #createLayout.create-layout {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: var(--mobile-page-gap);
    align-items: start;
  }

  #createLayout > .creation-progress {
    position: relative;
    top: auto;
    z-index: 5;
    display: flex;
    grid-column: 1;
    width: 50px;
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-page-bottom));
    min-height: 0;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    padding: 0 2px;
    border: 1px solid rgba(79, 98, 183, 0.12);
    border-right-color: rgba(79, 98, 183, 0.16);
    border-radius: 14px 0 0 14px;
    background:
      linear-gradient(180deg, rgba(248, 244, 255, 0.98), rgba(240, 247, 255, 0.96)),
      radial-gradient(circle at 50% 11%, rgba(218, 83, 181, 0.12), transparent 30%);
  }

  #createLayout > .creation-progress-primary {
    grid-row: 1;
  }

  #createLayout > .creation-progress-mobile-copy {
    display: flex;
    grid-row: 2;
  }

  html.creation-loading-open #createLayout {
    z-index: 361;
  }

  html.creation-loading-open #createLayout > .creation-progress-mobile-copy {
    position: fixed;
    top: var(--mobile-header-space);
    left: var(--creation-loading-progress-left, 0px);
    z-index: 363;
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-page-bottom));
  }

  body.player-open #createLayout > .creation-progress {
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-player-reserve));
  }

  #createLayout > .studio-panel {
    grid-column: 2;
    grid-row: 1;
    border-left: 0;
    border-radius: 0 8px 8px 0;
  }

  #createLayout > .style-lab-panel {
    grid-column: 2;
    grid-row: 2;
    border-left: 0;
    border-radius: 0 8px 8px 0;
  }

  .creation-progress-list::before {
    display: none;
  }

  .creation-progress-list {
    padding: 0;
    gap: 0;
  }

  .creation-progress-title {
    gap: 0;
    padding: 12px 2px 2px;
    font-size: 9px;
    line-height: 1.1;
  }

  .creation-progress-title > svg {
    display: none;
  }

  .creation-progress-title > span {
    max-width: 44px;
  }

  .creation-progress-step:not(:last-child)::after,
  .creation-progress-step.is-complete:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: calc(50% + 28px);
    bottom: calc(-50% + 28px);
    left: 50%;
    display: block;
    width: 2px;
    border-radius: 999px;
    background: #dfe3ee;
    content: "";
    transform: translateX(-50%);
  }

  .creation-progress-step {
    align-self: stretch;
    align-items: center;
    justify-items: center;
  }

  .creation-progress-step button,
  .creation-progress-target {
    grid-template-columns: 26px;
    justify-content: center;
    justify-items: center;
    gap: 4px;
  }

  .creation-progress-number {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .creation-progress-label {
    display: block;
    width: 44px;
    max-width: 44px;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .mixer-voice-actions-row .studio-custom-voice-button {
    gap: 5px;
    padding-inline: 7px;
  }

  .studio-custom-voice-button > span {
    font-size: var(--i18n-fit-font-size, 13px);
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .studio-custom-voice-button > svg,
  .text-tool-button > svg {
    flex-shrink: 0;
  }

  .lyrics-field .field-line {
    gap: 6px;
  }

  .lyrics-field .field-line > label {
    min-width: 0;
  }

  .lyrics-field .text-tool-button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 62%;
    height: auto;
    min-height: 26px;
    padding-block: 4px;
  }

  .lyrics-field .text-tool-button > span {
    min-width: 0;
    font-size: var(--i18n-fit-font-size, 11px);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #createLayout > .studio-panel > .studio-clear-row {
    display: flex !important;
    min-height: 48px;
    align-items: stretch;
    gap: 7px;
  }

  #createLayout > .studio-panel > .studio-clear-row .creation-next-button {
    margin-left: auto;
  }

  #createLayout > .studio-panel > .studio-clear-row .clear-studio-button {
    min-width: 64px;
    max-width: 38%;
    min-height: 48px;
    flex: 0 1 auto;
    justify-content: center;
    gap: 4px;
    padding: 4px 5px;
    overflow: visible;
    border-radius: 10px;
    white-space: normal;
  }

  #createLayout > .studio-panel > .studio-clear-row .clear-studio-button > svg {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  #createLayout > .studio-panel > .studio-clear-row .clear-studio-button > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: var(--i18n-fit-font-size, 10px);
    line-height: 1.15;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }

  #studio .studio-inspiration-row {
    display: block;
    max-height: calc((var(--studio-inspiration-tag-height) * 2) + var(--studio-inspiration-gap) + 6px);
    overflow: hidden;
  }

  #studio .studio-inspiration-row .inspiration-tags {
    display: flex;
    width: 100%;
    max-height: calc((var(--studio-inspiration-tag-height) * 2) + var(--studio-inspiration-gap));
    align-items: center;
    align-content: flex-start;
    gap: var(--studio-inspiration-gap);
    flex-wrap: wrap;
    overflow: hidden;
  }

  #studio .studio-inspiration-row .text-tool-button {
    min-width: 0;
    max-width: none;
    flex: 0 1 auto;
    padding-inline: 7px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  #studio .studio-inspiration-row .text-tool-button > span {
    overflow: visible;
    text-overflow: clip;
  }

  #studio .studio-inspiration-row .inspiration-tag {
    max-width: calc(50% - (var(--studio-inspiration-gap) / 2));
    flex: 0 1 auto;
    padding-inline: clamp(5px, 1.7vw, 7px);
    font-size: clamp(10px, 2.75vw, 11px);
  }

  #studio .studio-inspiration-row.is-compact .text-tool-button {
    padding-inline: 6px;
    font-size: 10px;
  }

  #studio .studio-inspiration-row.is-compact .text-tool-button > span {
    font-size: inherit;
  }

  #studio .studio-inspiration-row.is-compact .inspiration-tag {
    padding-inline: 5px;
    font-size: clamp(9px, 2.45vw, 10px);
  }

  #studio .studio-inspiration-row.is-tight .text-tool-button,
  #studio .studio-inspiration-row.is-tight .inspiration-tag {
    padding-inline: 4px;
    font-size: 8.5px;
    letter-spacing: -0.01em;
  }

  .creation-next-button {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex: 1 1 0;
    align-items: center;
    gap: 4px;
    padding: 4px 7px 4px 9px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(115deg, #dc48aa, #8652f3 55%, #3c6fff);
    box-shadow: 0 10px 24px rgba(109, 75, 225, 0.2);
    text-align: left;
  }

  .creation-next-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
  }

  .creation-next-copy small,
  .creation-next-copy strong {
    display: block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .creation-next-copy small {
    color: rgba(255, 255, 255, 0.77);
    font-size: var(--i18n-fit-font-size, 9px);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  .creation-next-copy strong {
    font-size: var(--i18n-fit-font-size, 11.5px);
    line-height: 1.15;
  }

  .creation-next-button > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    animation: creation-next-nudge 2.2s ease-in-out infinite;
  }

  @container studio-panel (max-width: 280px) {
    #createLayout > .studio-panel > .studio-clear-row {
      display: grid !important;
      grid-template-columns: max-content minmax(0, 1fr);
      grid-template-rows: 12px minmax(48px, auto);
      gap: 4px 7px;
    }

    #createLayout > .studio-panel > .studio-clear-row .clear-studio-button {
      grid-column: 1;
      grid-row: 2;
      max-width: none;
    }

    #createLayout > .studio-panel > .studio-clear-row .creation-next-button {
      grid-column: 2;
      grid-row: 2;
      margin-left: 0;
    }

    #studio .studio-clear-row .draft-save-status-mobile {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: end;
    }
  }

  #createLayout > .creation-action-dock {
    display: none !important;
  }
}

@media (max-width: 340px) {
  #studio .panel-head {
    row-gap: 6px;
  }

  #studio .panel-heading-copy {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #studio .model-select-pill {
    grid-column: 2;
    grid-row: 2;
  }

  #studio .studio-prompt-heading {
    grid-column: 1;
    grid-row: 3;
  }

  #studio .creation-mode-toggles {
    grid-column: 2;
    grid-row: 3;
  }
}

@keyframes creation-next-nudge {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .creation-progress-step.is-active .creation-progress-number,
  .creation-next-button > svg {
    animation: none;
  }

}
@media (min-width: 681px) and (max-width: 1100px) {
  .studio-panel .studio-title-language-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 42%);
  }

  .studio-title-language-row .studio-language-field,
  .studio-title-language-row .studio-language-field select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .studio-title-language-row .field-block > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .studio-title-language-row input,
  .studio-title-language-row select {
    padding-inline: 8px;
  }

  .studio-custom-voice-button > span {
    font-size: var(--i18n-fit-font-size, 13px);
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}
/* CREATION_WORKFLOW_SHELL_END */

@container create-workspace (max-height: 420px) {
  #studio,
  .style-lab-panel.mixer-console-panel {
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  #studio > .panel-head,
  #studio > .prompt-field,
  #studio > .lyrics-field {
    flex-shrink: 0;
  }

  #studio .prompt-field .textarea-shell {
    min-height: 90px;
  }

  #studio .lyrics-field .textarea-shell {
    min-height: 120px;
  }

  .style-lab-panel.mixer-console-panel {
    grid-template-rows: max-content max-content minmax(220px, 1fr) max-content max-content max-content !important;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .footer-shell {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .footer-column,
  .footer-brand {
    min-width: 0;
  }

  .footer-column a {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 680px) {
  .mixer-console-panel {
    grid-template-rows: max-content max-content minmax(184px, 1fr) max-content max-content max-content !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
}

@container formal-mixer (max-width: 260px) {
  .mixer-auto-switch {
    --travel: 21px;
    width: 44px;
  }

  .mixer-auto-switch::before {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 680px) {
  .seo-topic-demo-page {
    height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
    min-height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
    max-height: calc(var(--mobile-viewport-height) + var(--mobile-page-boundary-guard));
  }

  .seo-topic-demo-page > .seo-topic-demo-shell {
    width: 100%;
    height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    min-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    max-height: calc(var(--mobile-viewport-height) - var(--mobile-header-space) - var(--mobile-fixed-player-reserve));
    grid-template-rows: max-content max-content minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
    scroll-margin-top: var(--mobile-header-space);
    scrollbar-width: thin;
  }

  .seo-topic-demo-page .seo-topic-demo-tabs {
    min-height: 42px;
    overflow-y: hidden;
    align-items: center;
    flex-shrink: 0;
  }

  .seo-topic-demo-page .seo-topic-demo-panels { min-height: 0; }
  .seo-topic-demo-page .seo-topic-demo-panel {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
  }
}