: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;
  --site-header-height: 74px;
  --site-header-x: clamp(18px, 4vw, 56px);
  --site-header-gap: 24px;
  --site-brand-font-size: 20px;
  --site-nav-font-size: 16px;
  --site-nav-gap: clamp(24px, 4vw, 46px);
  --site-nav-pad-x: 10px;
  --site-action-height: 40px;
}

* {
  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;
}

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: 14px 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;
  font-weight: 900;
  font-size: var(--site-brand-font-size);
  line-height: 1;
  white-space: nowrap;
}

.brand-beta-badge {
  align-self: flex-start;
  margin-left: -4px;
  padding: 3px 7px;
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 999px;
  color: var(--brand-violet);
  background: rgba(139, 92, 246, 0.1);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateY(-3px);
}

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

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

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

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--site-action-height);
  padding: 0 var(--site-nav-pad-x);
  border-radius: 8px;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

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

.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-height: var(--site-action-height);
}

.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: 7px;
  min-width: 72px;
  padding: 0 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: 13px;
  font-weight: 900;
}

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 12px 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: 34px;
  height: 34px;
}

.account-label {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 82px;
  line-height: 1.1;
}

.account-tier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  color: #667085;
  background: rgba(226, 232, 240, 0.72);
  font-size: 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: 6px;
  color: var(--muted);
  font-size: 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: 12px;
  font-weight: 950;
}

.ghost-button,
.solid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  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;
  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:
    linear-gradient(90deg, rgba(139, 92, 246, 0.035) 1px, transparent 1px) 0 0 / 24px 100%,
    rgba(255, 255, 255, 0.78);
}

.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;
}

.auth-human-slot {
  z-index: 1;
  background: linear-gradient(145deg, rgba(74, 83, 126, 0.25), rgba(255, 255, 255, 0.28));
  filter:
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.86))
    drop-shadow(-1px -1px 1px rgba(58, 68, 112, 0.22));
}

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

.auth-human-piece {
  left: var(--human-piece-left);
  z-index: 3;
  background: var(--grad-action);
  filter:
    drop-shadow(0 6px 8px rgba(93, 74, 219, 0.24))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

.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-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 {
  overflow: hidden;
}

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

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;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 8px;
  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 svg {
  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;
}

.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-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.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: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.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-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: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-choice-actions .solid-button,
.voice-choice-actions .ghost-button,
.voice-step-actions .solid-button,
.voice-step-actions .ghost-button {
  width: min(160px, 42vw);
  min-height: 0;
  height: 44px;
  padding: 0 22px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
  text-overflow: clip;
  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 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-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: 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-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;
  justify-content: center;
  margin: 32px 0 24px;
}

.hero-cta {
  width: min(320px, 100%);
  min-height: 76px;
  padding: 0 54px;
  border-radius: 12px;
  font-size: 24px;
  letter-spacing: 0;
}

.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 {
  width: min(1180px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-height: min(760px, calc(100vh - 32px));
  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: clamp(24px, 2.6vw, 34px);
}

.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;
}

.extend-form-panel .field-block:has(#extendLyrics) {
  flex-grow: 1.35;
}

.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 .inspiration-tag {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.extend-source-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.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 {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

.style-lab-panel .custom-voice-button[hidden] {
  display: none;
}

@media (max-width: 680px) {
  .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 {
    font-size: 26px;
  }

  .extend-step-head p:not(.section-kicker) {
    font-size: 13px;
    line-height: 1.45;
  }

  .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: 7px;
    padding: 10px;
    font-size: 11px;
  }

  .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-source-card,
  .extend-mood-card {
    padding: 10px;
  }

  .extend-source-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .extend-source-head h3 {
    font-size: 19px;
  }

  .extend-source-controls {
    justify-content: flex-end;
    gap: 10px;
    margin-right: 4px;
  }

  .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: 72px;
  }

  .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;
  }
}

.create-page {
  background: transparent;
}

.create-layout {
  position: relative;
  z-index: 2;
  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: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;
}

.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;
}

.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 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 h2 {
  margin: 0;
  font-size: 28px;
}

.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: 104px;
  height: 28px;
  padding: 0 26px 0 8px;
  border: 0;
  border-radius: 7px;
  color: #3154ff;
  background: rgba(246, 248, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
}

.model-select-pill.is-locked select {
  color: #8d95aa;
  background: #f2f4f8;
}

.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;
}

.lyrics-test-toggle {
  min-height: 32px;
  padding-inline: 9px;
  gap: 7px;
}

.lyrics-test-toggle i {
  width: 32px;
  height: 18px;
}

.lyrics-test-toggle i::after {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
}

.lyrics-test-toggle:has(input:checked) i::after {
  transform: translateX(14px);
}

.lyrics-test-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.46;
}

.studio-panel.is-instrumental .lyrics-field,
.studio-panel.is-instrumental .studio-language-field,
.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-locked {
  color: #7a8398;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 242, 248, 0.8)) padding-box,
    linear-gradient(135deg, rgba(148, 163, 184, 0.42), rgba(203, 213, 225, 0.42)) border-box;
}

.custom-voice-button.has-selected-voice {
  color: #3154ff;
}

.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-weight: 950;
}

#lyricsForm {
  --lyrics-inspiration-tag-height: 30px;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

#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: 76px;
  min-height: 76px;
}

.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);
}

.playing-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
  font-size: 10px;
  font-weight: 950;
}

.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;
}

.history-panel-head .history-library-link {
  flex: 0 0 auto;
  margin: 0 0 4px;
}

.history-library-link svg {
  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: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 60;
  display: grid;
  grid-template-columns: 54px minmax(130px, 0.55fr) minmax(90px, 1fr) max-content;
  gap: clamp(8px, 1vw, 14px);
  align-items: center;
  padding: 10px 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: 54px;
  height: 54px;
  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: 14px;
  font-weight: 950;
}

.player-track span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.player-play {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--grad-action);
  box-shadow: var(--brand-glow);
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.player-collapse {
  display: none;
}

.player-skip,
.player-mode {
  width: 36px;
  height: 36px;
  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-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-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-rows: auto minmax(0, 1fr);
  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 h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
}

.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-flex;
  width: clamp(300px, 30vw, 380px);
  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;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  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;
}

.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 {
  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;
}

.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;
}

.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 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;
}

.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);
}

.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 > 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 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 {
  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 span {
  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="yearly"] {
  overflow: visible;
}

.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 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);
}

.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-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;
}

@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));
  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);
}

.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;
}

.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: 1120px) 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) {
  .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 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;
  }
}

@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;
    /* 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);
    --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 1fr auto;
    gap: 10px;
    padding: 12px 14px;
  }

  .brand {
    min-width: 0;
    font-size: 22px;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
  }

  .header-actions .ghost-button,
  .header-actions .icon-button,
  .header-actions .language-button {
    display: none;
  }

  .site-header .header-actions {
    min-width: 54px;
    justify-content: end;
  }

  .site-header .account-button {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 4px;
    gap: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: visible;
  }

  .site-header .account-button .account-avatar {
    width: 44px;
    height: 44px;
    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 {
    margin-top: 38px;
  }

  .hero-cta {
    width: 100%;
    min-width: 0;
    height: 68px;
    min-height: 68px;
    padding: 0 26px;
    border-radius: 12px;
    font-size: 22px;
  }

  .intro-shell .eyebrow {
    margin-bottom: 12px;
    font-size: 13px;
  }

  .intro-shell .hero-subtitle {
    margin-top: 18px;
    line-height: 1.75;
  }

  .panel-a,
  .panel-b,
  .sound-rings,
  .album-stack {
    display: none;
  }

  h1 {
    max-width: 9.5em;
    font-size: 40px;
    line-height: 1.08;
  }

  .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 h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .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 span {
    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: 0;
    left: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas: "cover track controls";
    gap: 9px;
    min-height: 62px;
    padding: 10px 12px calc(10px + 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: 42px;
    height: 42px;
    border-radius: 50%;
  }

  .player-track {
    grid-area: track;
    gap: 2px;
  }

  .player-track strong {
    font-size: 13px;
  }

  .player-track span {
    font-size: 11px;
  }

  .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: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .player-play {
    width: 38px;
    height: 38px;
    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 h2 {
    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 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 h3 {
    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);
    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 h2 {
    margin: 0;
    white-space: nowrap;
    font-size: 18px;
    line-height: 1.12;
  }

  .billing-toggle {
    justify-self: center;
    width: min(250px, 100%);
    padding: 3px;
    border-radius: 9px;
  }

  .billing-toggle button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .billing-toggle button span {
    display: inline;
    margin-left: 2px;
    font-size: 10px;
  }

  .mobile-pricing-selector {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
  }

  .mobile-pricing-selector .price-option:hover,
  .mobile-pricing-selector .price-option.active {
    transform: none;
  }

  .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 h3 {
    margin-top: 4px;
    font-size: 20px;
  }

  .pricing-grid .price {
    margin: 8px 0 4px;
    font-size: 42px;
  }

  .pricing-grid .price-card p {
    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 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 {
    --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: 9px 12px;
  }

  .brand {
    font-size: 18px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

  .header-actions .solid-button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .mobile-menu-button,
  .account-button {
    width: 38px;
    height: 38px;
  }

  .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 h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .result-panel h3 {
    font-size: 19px;
    line-height: 1.08;
  }

  .section-kicker {
    font-size: 11px;
  }

  .field-block span,
  .field-label {
    --field-text-size: 11px;
    font-size: var(--field-text-size);
  }

  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 {
    --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: 16px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
  }

  .header-actions .solid-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .mobile-menu-button,
  .account-button {
    width: 34px;
    height: 34px;
  }

  .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 h2,
  .style-lab-panel h3,
  .lyrics-stage-panel h3,
  .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) {
  .brand {
    gap: 8px;
    font-size: 16px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
  }

  .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) {
  .model-select-pill {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 5px !important;
    width: 100% !important;
    max-width: none !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 {
    flex: 1 1 0;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 20px !important;
  }

  .model-select-pill em {
    top: -9px;
    right: -8px;
    height: 16px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 16px;
    box-shadow: 0 7px 14px rgba(139, 92, 246, 0.18);
  }
}

.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: 54px !important;
    justify-content: end !important;
  }

  .site-header .account-button {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !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: 44px !important;
    height: 44px !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="yearly"] {
    position: relative;
    overflow: visible;
  }

  .billing-toggle button[data-billing="yearly"] .billing-save-badge {
    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;
  }

  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;
  }
}

@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: 0;
}

@media (min-width: 681px) {
  .site-header .brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 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;
}

@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: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
    object-fit: cover;
  }

  .model-select-pill em {
    right: 0 !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 {
    display: grid !important;
    grid-template-rows: auto minmax(0, 0.95fr) auto minmax(0, 1.15fr) auto;
    gap: clamp(5px, 0.9svh, 9px) !important;
    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(6px, 0.8svh, 9px) !important;
  }

  .studio-panel > .studio-clear-row {
    margin-top: clamp(6px, 0.8svh, 9px) !important;
  }

  .studio-panel .prompt-field,
  .studio-panel .lyrics-field {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .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 .field-line,
  .studio-panel .studio-voice-actions-row,
  .studio-panel .studio-clear-row {
    flex: 0 0 auto;
  }

  .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-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 {
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
  }

  .library-v6-head h3 {
    font-size: 21px;
  }

  .library-v6-tabs {
    grid-template-columns: repeat(2, minmax(68px, 1fr));
    min-width: 148px;
    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;
  }
}

@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: 8px;
  bottom: 0;
  left: 8px;
  height: 16px;
  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);
}

.player-collapse::after {
  content: none;
}

.player-collapse svg {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  transform: translateY(6px);
}

.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;
  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: clamp(11px, 0.95vw, 14px);
  --profile-card-tag-size: clamp(9px, 0.78vw, 11px);
  --profile-card-subtitle-size: clamp(10px, 0.86vw, 12px);
  --profile-card-content-size: clamp(17px, 1.55vw, 24px);
  --profile-card-note-size: clamp(10px, 0.86vw, 12px);
  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;
  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: nowrap;
}

.profile-grid .profile-card-head svg {
  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;
  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;
  white-space: nowrap;
}

.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: nowrap;
}

.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.2;
  text-decoration: none;
}

.profile-grid .profile-card-note > strong {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: inherit;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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 .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: 1120px) {
  .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
   The available page height is split 40/60 between summary cards and billing. */
.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-rows: auto minmax(0, 1fr);
  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: clamp(22px, 2vw, 28px);
  line-height: 1.05;
}

.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(0, 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: clamp(20px, 3vh, 24px) 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 {
  align-items: center;
  margin-bottom: clamp(8px, 1vh, 12px);
}

.profile-section .section-title-row h2 {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.05;
}

.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: center;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 1.2vw, 16px);
}

@media (max-width: 1120px) {
  .profile-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

@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: clamp(20px, 6vw, 24px);
  }

  .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 {
    flex: 0 1 auto;
    grid-template-rows: repeat(2, max-content);
    max-height: 50%;
  }

  .profile-grid .profile-card,
  .profile-grid .account-card,
  .profile-grid .metric-card,
  .profile-grid .vip-credit-card,
  .profile-grid .producer-card {
    grid-template-rows: 20px max-content auto;
    gap: 3px;
    height: auto;
    padding: 6px 14px;
  }

  .profile-grid .profile-card-value,
  .profile-grid .profile-card-note {
    padding-left: 6px;
  }

  .profile-grid .profile-email-content {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.05;
  }

  .profile-section {
    flex: 1 1 0;
    padding: 10px;
  }

  .profile-section .section-title-row {
    margin-bottom: 7px;
  }

  .profile-section .section-title-row h2 {
    font-size: clamp(18px, 5.5vw, 22px);
  }
}
/* PROFILE_PAGE_FIT_END */

/* 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 h3 {
  margin: 0 !important;
  font-size: clamp(19px, 2vw, 23px) !important;
  line-height: 1.05;
}

.mixer-console-heading .section-kicker {
  margin: 0 0 2px !important;
  color: #66728a;
  font-size: 10px;
  letter-spacing: 0;
}

.mixer-console-actions {
  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: flex;
  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-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;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mixer-channel-title strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--title-color);
  font-size: 13px;
}
.mixer-channel-title strong svg { width: 15px; height: 15px; }
.mixer-channel-title > span {
  position: absolute;
  right: 1px;
  color: #748198;
  font: 800 9px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mixer-channel-meter {
  width: 68%;
  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;
  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-title > span,
.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;
}
.mixer-instrument-switches button svg,
.mixer-instrument-switches button .mixer-instrument-art { width: 13px; height: 13px; }
.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; }
.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; }
.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: hidden; text-overflow: ellipsis; }
.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 {
  container: formal-mixer / size;
  height: 100%;
  gap: 7px !important;
  padding: 18px !important;
}

.mixer-console-heading {
  min-height: 45px;
  align-items: flex-start;
}

.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: 22px !important;
}

.mixer-console-heading .section-kicker {
  margin-bottom: 3px !important;
  font-size: 11px;
}

.mixer-console-actions {
  gap: 7px;
  align-self: center;
}

.mixer-console-actions .mixer-persona-entry {
  min-width: 112px;
  min-height: 36px;
  max-height: 36px;
  padding-inline: 9px 12px;
  font-size: 11px;
}

.mixer-icon-button {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
}

.mixer-icon-button svg {
  width: 16px;
  height: 16px;
}

.mixer-preset-row {
  gap: 0;
  padding: 3px;
  border: 1px solid #d6dff5;
  border-radius: 7px;
  background: #eef3fb;
}

.mixer-preset-row .style-chip {
  min-height: 30px !important;
  padding-inline: 4px;
  border: 0;
  border-radius: 5px;
  font-size: 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-console-surface {
  border-color: #b9c8e4;
  border-radius: 8px;
}

.mixer-lcd-display {
  min-height: 84px;
  gap: 10px;
  padding: 6px 10px;
}

.mixer-lcd-summary {
  gap: 5px;
}

.mixer-lcd-head {
  gap: 22px;
}

.mixer-lcd-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixer-lcd-channel-icons {
  gap: 5px;
}

.mixer-lcd-channel-icons span {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.mixer-lcd-channel-icons svg {
  width: 18px;
  height: 18px;
}

.mixer-lcd-values {
  gap: 3px;
  font-size: 15px;
  line-height: 1.15;
}

.mixer-lcd-value-row {
  gap: 6px;
}

.mixer-lcd-instruments {
  width: 122px;
  min-width: 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 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mixer-instrument-lights {
  width: 100%;
  grid-template-columns: repeat(5, 22px);
  grid-auto-rows: 22px;
  gap: 3px;
  margin-top: 4px;
}

.mixer-instrument-lights span {
  width: 22px;
  height: 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: 15px;
  height: 15px;
}

.mixer-channel-bank {
  padding: 8px;
}

.mixer-channel-strip {
  grid-template-rows: 28px 5px 16px minmax(56px, 1fr) 16px 29px;
  gap: 3px;
  padding: 5px 5px 6px;
}

.mixer-channel-title strong {
  gap: 5px;
  font-size: 15px;
}

.mixer-channel-title strong svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.mixer-channel-title > span {
  right: 2px;
  font-size: 11px;
}

.mixer-channel-meter {
  width: 70%;
}

.mixer-range-label {
  font-size: 11px !important;
}

.mixer-range-top {
  transform: translateY(6px);
}

.mixer-range-bottom {
  transform: translateY(-6px);
}

.mixer-fader {
  min-height: 54px;
}

.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: 31px;
  height: 17px;
}

.mixer-auto-switch {
  --travel: 45px;
  width: 72px;
  height: 27px;
  font-size: 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: 19px;
  height: 19px;
}

.mixer-auto-switch span {
  inset: 0 6px 0 27px;
}

.mixer-auto-switch.is-active span {
  inset: 0 27px 0 5px;
}

.mixer-instrument-switches {
  gap: 5px;
  grid-auto-rows: 38px;
}

.mixer-console-panel .mixer-instrument-switches .instrument-chip,
.mixer-console-panel .mixer-instrument-switches .mixer-more-instruments {
  min-height: 38px !important;
  height: 38px;
  gap: 1px;
  padding-inline: 4px;
  font-size: 11px !important;
}

.mixer-console-panel .mixer-extra-instrument {
  min-height: 38px;
  height: 38px;
  gap: 1px;
  padding-inline: 4px;
  font-size: 11px;
}

.mixer-instrument-switches button svg,
.mixer-instrument-switches button .mixer-instrument-art {
  width: 14px;
  height: 14px;
}

.mixer-submit-row .generate-button {
  width: 100%;
  min-height: 40px !important;
  max-height: none;
  font-size: 16px;
}

.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-panel {
    gap: 5px !important;
    padding: 10px !important;
  }

  .mixer-console-heading h3 { font-size: 22px !important; }
  .mixer-console-actions { gap: 4px; }
  .mixer-console-actions .mixer-persona-entry { min-width: 96px; min-height: 32px; max-height: 32px; padding-inline: 7px; font-size: 11px; }
  .mixer-icon-button { flex-basis: 32px; width: 32px; height: 32px; }
  .mixer-preset-row .style-chip { min-height: 32px !important; font-size: 12px; }
  .mixer-lcd-display { min-height: 78px; gap: 5px; padding: 3px 6px 5px; }
  .mixer-lcd-head { gap: 12px; }
  .mixer-lcd-head strong { font-size: 18px; }
  .mixer-lcd-channel-icons { gap: 3px; }
  .mixer-lcd-channel-icons span { flex-basis: 19px; width: 19px; height: 18px; }
  .mixer-lcd-channel-icons svg { width: 16px; height: 16px; }
  .mixer-lcd-values { gap: 2px; font-size: 13px; }
  .mixer-lcd-value-row { gap: 4px; }
  .mixer-lcd-instruments { width: 122px; min-width: 122px; padding-top: 2px; }
  .mixer-lcd-instruments > span { font-size: 9px; }
  .mixer-instrument-lights { grid-template-columns: repeat(5, 22px); gap: 3px; }
  .mixer-instrument-lights span { width: 22px; height: 22px; }
  .mixer-channel-bank { padding: 4px; }
  .mixer-channel-strip { grid-template-rows: 22px 4px 12px minmax(58px, 1fr) 12px 22px; gap: 1px; padding-inline: 3px; }
  .mixer-channel-title strong { gap: 3px; font-size: 14px; }
  .mixer-channel-title strong svg { width: 16px; height: 16px; }
  .mixer-channel-title > span { display: none; }
  .mixer-fader-thumb { width: 25px; }
  .mixer-auto-switch { --travel: 35px; width: 58px; height: 22px; font-size: 7.5px; }
  .mixer-auto-switch::before { width: 17px; height: 17px; }
  .mixer-auto-switch span { inset: 0 4px 0 22px; }
  .mixer-auto-switch.is-active span { inset: 0 22px 0 4px; }
  .mixer-instrument-switches { gap: 4px; grid-auto-rows: 36px; }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments { min-height: 36px !important; height: 36px; padding-inline: 2px; font-size: 11px !important; }
  .mixer-console-panel .mixer-extra-instrument { min-height: 36px; height: 36px; padding-inline: 2px; font-size: 11px; }
  .mixer-instrument-switches button svg,
  .mixer-instrument-switches button .mixer-instrument-art { width: 12px; height: 12px; }
}

@media (max-width: 520px) {
  .mixer-console-panel {
    gap: 5px !important;
    padding: 10px !important;
  }
}

@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);
  }
}

@container formal-mixer (max-height: 520px) {
  .mixer-console-heading .section-kicker { display: none; }
  .mixer-console-heading h3 { font-size: 19px !important; }
  .mixer-preset-row .style-chip { min-height: 27px !important; font-size: 11px; }
  .mixer-lcd-display { min-height: 64px; }
  .mixer-channel-bank { padding-block: 4px; }
  .mixer-channel-strip { grid-template-rows: 22px 4px 12px minmax(42px, 1fr) 12px 24px; padding-block: 2px; }
  .mixer-fader { min-height: 42px; }
  .mixer-instrument-switches { grid-auto-rows: 31px; }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments { min-height: 31px !important; height: 31px; }
  .mixer-console-panel .mixer-extra-instrument { min-height: 31px; height: 31px; }
  .mixer-submit-row .generate-button { min-height: 36px !important; }
}

@container formal-mixer (max-height: 440px) {
  .mixer-console-panel { gap: 4px !important; padding-block: 8px !important; }
  .mixer-console-heading h3 { font-size: 18px !important; }
  .mixer-console-actions .mixer-persona-entry { min-height: 30px; max-height: 30px; }
  .mixer-icon-button { flex-basis: 30px; width: 30px; height: 30px; }
  .mixer-preset-row .style-chip { min-height: 24px !important; }
  .mixer-lcd-display { min-height: 58px; padding-block: 4px; }
  .mixer-channel-strip { grid-template-rows: 20px 3px 11px minmax(34px, 1fr) 11px 22px; gap: 1px; }
  .mixer-fader { min-height: 34px; }
  .mixer-instrument-switches { grid-auto-rows: 28px; }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments { min-height: 28px !important; height: 28px; }
  .mixer-console-panel .mixer-extra-instrument { min-height: 28px; height: 28px; }
}

@media (max-height: 700px) {
  .mixer-console-heading .section-kicker { display: none; }
  .mixer-console-heading h3 { font-size: 19px !important; }
  .mixer-preset-row .style-chip { min-height: 26px !important; font-size: 11px; }
  .mixer-lcd-display { min-height: 62px; }
  .mixer-channel-bank { padding-block: 4px; }
  .mixer-channel-strip { grid-template-rows: 21px 4px 12px minmax(48px, 1fr) 12px 23px; padding-block: 2px; }
  .mixer-instrument-switches { grid-auto-rows: 27px; }
  .mixer-console-panel .mixer-instrument-switches .instrument-chip,
  .mixer-console-panel .mixer-instrument-switches .mixer-more-instruments { min-height: 27px !important; height: 27px; }
  .mixer-console-panel .mixer-extra-instrument { min-height: 27px; height: 27px; }
  .mixer-submit-row .generate-button { min-height: 36px !important; }
}
/* 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) {
  .mixer-lcd-display {
    min-height: 64px;
    align-items: center;
    padding-block: 3px;
    border-top: 1px solid transparent;
  }

  .mixer-lcd-summary,
  .mixer-lcd-instruments {
    align-self: center;
  }

  .mixer-lcd-head strong {
    font-size: 17px;
  }

  .mixer-lcd-values {
    font-size: 11px;
  }

  .mixer-lcd-instruments {
    width: 108px;
    min-width: 108px;
  }

  .mixer-lcd-instruments > span {
    font-size: 8px;
    line-height: 9px;
  }

  .mixer-instrument-lights {
    grid-template-columns: repeat(5, 19px);
    grid-auto-rows: 19px;
    gap: 3px;
    margin-top: 3px;
  }

  .mixer-instrument-lights span {
    width: 19px;
    height: 19px;
  }

  .mixer-instrument-lights svg,
  .mixer-instrument-lights .mixer-instrument-art {
    width: 12px;
    height: 12px;
  }

  .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: clamp(27px, 4.2svh, 32px) !important;
    height: clamp(27px, 4.2svh, 32px);
    justify-content: center;
    padding-block: 2px;
    font-size: 10px !important;
    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;
  }

  .mixer-instrument-switches {
    grid-auto-rows: clamp(27px, 4.2svh, 32px);
  }
}
/* 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 */