@font-face {
  font-family: "Departure Mono";
  src:
    url("/assets/fonts/DepartureMono-Regular.woff2") format("woff2"),
    url("/assets/fonts/DepartureMono-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Ice Observatory — Azure scale only (contract: docs/prototypes/music-brain-design-directions) */
  --ice-deep: #315f9b;
  --ice-strong: #4b7fc4;
  --ice-accent: #669ef2;
  --ice-light: #a9c9f7;
  --ice-mist: #cfe1fb;
  --ice-quiet: #e6f0fe;
  --ice-page: #f6f9ff;
  --ice-ink: #27324a;
  --ice-body: #44516c;
  --ice-muted: #56617a;
  --ice-line: #bfd1e8;
  --glass-page: var(--ice-page);
  --glass-ink: var(--ice-ink);
  --glass-body: var(--ice-body);
  --glass-label: var(--ice-muted);
  --glass-line: var(--ice-line);
  --glass-accent-peach: var(--ice-deep);
  --glass-accent-yellow: var(--ice-mist);
  --glass-accent-mint: var(--ice-light);
  --glass-accent-blue: var(--ice-mist);
  --font-mono: "Departure Mono", SFMono-Regular, Consolas, Menlo, monospace;
  --font-display: Georgia, "Times New Roman", serif;
  --radius-shell: 40px;
  --radius-panel: 28px;
  --radius-control: 15px;
  --radius-hero: 28px;
  --radius-card: 20px;
  --radius-nested: 15px;
  --radius-mini: 13px;

  /* Legacy aliases */
  --ink: var(--glass-ink);
  --ink-3: rgba(39, 50, 74, 0.42);
  --muted: var(--glass-label);
  --line: var(--glass-line);
  --panel: var(--glass-page);
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font: 14px/1.45 var(--font-mono);
  color: var(--glass-body);
  background: var(--glass-page);
}

/* Fixed backdrop: keeps the glow viewport-pinned and off the scroll-repaint path.
   Long multi-stop falloff — a short smooth gradient still reads as a band (Mach bands)
   when content scrolls past its fixed edge. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle at 8% 4%,
    rgba(207, 225, 251, 0.7),
    rgba(207, 225, 251, 0.28) 22rem,
    transparent 60rem
  );
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  color: var(--glass-ink);
  letter-spacing: normal;
}

h1 { margin: 0; font-size: 20px; font-weight: 650; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }

.label-quiet {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glass-label);
}

.body-copy {
  font-size: 14px;
  line-height: 1.75;
  color: var(--glass-body);
}

/* ── Glass material (ai-scoring globals.css) ── */

.glass-panel {
  border-radius: var(--radius-hero);
  border: 1px solid rgba(255, 255, 255, 0.94);
  background-color: rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 24px 70px -52px rgba(49, 95, 155, 0.58);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-panel-soft {
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.94);
  background-color: rgba(230, 240, 254, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 48px rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.glass-nested {
  border-radius: var(--radius-nested);
  border: 1px solid rgba(191, 209, 232, 0.76);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-canvas {
  /* Fluid width: studio-layout sidebar stays 252px, content fills the rest. */
  margin: 0;
  padding: 24px 16px 32px;
}

@media (min-width: 640px) {
  .page-canvas { padding: 32px 32px 40px; }
}

/* ── Gate overlay (parchment + centered glass card) ── */

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--glass-page);
  color: var(--glass-body);
  font-family: var(--font-mono);
}

.gate-column {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.metallogo-host {
  width: 100%;
  height: 190px;
}

.metallogo-host > canvas {
  mix-blend-mode: multiply;
}

.gate-overlay .glass-panel,
.gate-card {
  max-width: 440px;
  width: 100%;
  padding: 32px 28px;
  color: var(--glass-ink);
  align-self: center;
}

.gate-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.gate-lang-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gate-logo {
  display: block;
  width: 144px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
}

.gate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.gate-tabs button { flex: 1; }

.gate-nested {
  position: relative;
  overflow: hidden;
  padding: 24px;
}

/* approved gate blocks (prototypes/gate.css) */

.gate-block-inner {
  margin-top: 2px;
}

.gate-block-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.gate-block-sub {
  margin: -6px 0 12px;
  font-size: 12px;
}

.gate-field {
  margin-bottom: 12px;
}

.gate-field .label-quiet {
  display: block;
  margin-bottom: 6px;
}

/* bare input, same chrome as .input-shell — the flex wrapper painted a
   stray focus ring at the input's intrinsic width (Chrome overlay quirk) */
.gate-input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid var(--ice-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ice-ink);
  font: inherit;
}

.gate-input:focus {
  outline: none;
  border-color: var(--ice-strong);
  box-shadow: 0 0 0 3px rgba(102, 158, 242, 0.22);
}

.gate-input[readonly] {
  color: var(--ice-muted);
}

.gate-submit {
  width: 100%;
  margin-top: 4px;
}

.request-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.request-row .gate-input {
  flex: 1;
  min-width: 0;
}

.request-done {
  margin: 4px 0 0;
  padding: 10px 14px;
  font-size: 13px;
}

.gate-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--glass-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.gate-divider::before,
.gate-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}

html[data-theme="nordic"] .gate-block-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--glass-label);
}

html[data-theme="nordic"] .request-done {
  border: 1px solid var(--line-soft, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-mini, 4px);
  background: rgba(0, 0, 0, 0.03);
  color: var(--glass-ink);
}

html[data-theme="nordic"] .gate-divider::before,
html[data-theme="nordic"] .gate-divider::after {
  opacity: 0.5;
}

.gate-form {
  position: relative;
  z-index: 1;
}

.gate-error {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 148, 115, 0.45);
  background: rgba(255, 148, 115, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: var(--glass-ink);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.app-error-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-mini);
  border: 1px solid rgba(49, 95, 155, 0.45);
  background: rgba(49, 95, 155, 0.12);
  color: var(--glass-ink);
  font-size: 13px;
}

/* ── Utility header (Ice Observatory: straight top strip) ── */

.utility-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(191, 209, 232, 0.74);
  border-radius: 0;
  background: rgba(246, 249, 255, 0.84);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.utility-title {
  min-width: 0;
  margin-right: auto;
}

.utility-title strong {
  display: block;
  overflow: hidden;
  color: var(--ice-ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-title.is-network strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.utilities {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.language {
  position: relative;
  display: flex;
  width: 66px;
  height: 44px;
  align-items: center;
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.language select {
  width: 64px;
  height: 42px;
  padding: 0 24px 0 12px;
  border: 0;
  outline: 0;
  color: var(--ice-ink);
  background: transparent;
  background-image: none;
  appearance: none;
  -webkit-appearance: none;
}

.language .icon {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--ice-muted);
}

.icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-control);
  color: var(--ice-ink);
  background: rgba(255, 255, 255, 0.7);
}

.utilities > .icon-button {
  border-radius: 999px;
}

.utilities > .icon-button .icon {
  width: 15px;
  height: 15px;
}

.icon-button:hover:not(:disabled) {
  background: var(--ice-quiet);
  transform: none;
}

.menu-button {
  display: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--radius-control);
  flex-shrink: 0;
}

.btn-icon-svg {
  display: block;
  flex-shrink: 0;
}

.btn-icon:hover:not(:disabled) .btn-icon-svg {
  transform: rotate(-30deg);
  transition: transform 0.2s ease;
}

.btn-icon .btn-icon-svg {
  transition: transform 0.2s ease;
}

.btn-icon-logout:hover:not(:disabled) .icon {
  transform: translateX(2px);
}

.role-badge[data-role="team"] {
  color: var(--ice-ink);
  background: rgba(169, 201, 247, 0.4);
  border-color: rgba(102, 158, 242, 0.65);
}

.role-badge[data-role="fan"] {
  color: var(--ice-ink);
  background: rgba(207, 225, 251, 0.6);
  border-color: rgba(169, 201, 247, 0.75);
}

.quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ice-ink);
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--ice-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Credits chip: hover, focus or tap shows how the monthly allowance works. */
.credits-chip {
  position: relative;
  display: inline-flex;
}

.credits-chip-button {
  cursor: help;
  white-space: nowrap;
}

.credits-info {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(280px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-nested);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(39, 50, 74, 0.14);
  color: var(--ice-ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Bridge the 8px gap so the pointer can travel from the chip to the panel. */
.credits-info::before {
  content: "";
  position: absolute;
  inset: -8px 0 auto;
  height: 8px;
}

.credits-chip:hover .credits-info,
.credits-chip:has(:focus-visible) .credits-info,
.credits-chip.is-open .credits-info {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.credits-info-title {
  font-size: 13px;
  font-weight: 600;
}

.credits-info-body,
.credits-info-next {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ice-muted);
}

.credits-info-next {
  color: var(--ice-ink);
}

.credits-refill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 2px;
  padding: 6px 12px;
  border: 1px dashed var(--ice-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ice-muted);
  font: inherit;
  font-size: 12px;
}

.credits-refill-soon {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(207, 225, 251, 0.6);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .credits-info {
    transition: none;
  }
}

/* ── Layout shell (Ice Observatory) ── */

#app-root {
  min-height: 100vh;
}

#app-root > .page-canvas {
  padding-top: 24px;
  padding-bottom: 48px;
}

@media (min-width: 640px) {
  #app-root > .page-canvas {
    padding-top: 32px;
  }
}

.studio-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 56px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 0 0 var(--radius-shell) var(--radius-shell);
  background: rgba(230, 240, 254, 0.66);
  box-shadow:
    0 24px 70px -52px rgba(49, 95, 155, 0.58),
    inset 0 1px 0 white;
  overflow: clip;
}

.workspace {
  min-width: 0;
}

.studio-main {
  display: grid;
  min-width: 0;
  gap: 20px;
  padding: 20px 20px 28px;
}

.studio-main > * {
  min-width: 0;
  max-width: 100%;
}

.studio-main > [id] {
  scroll-margin-top: 92px;
}

.studio-panel {
  position: relative;
  padding: 24px;
  margin-bottom: 0;
}

.overview {
  position: relative;
}

.panel-toggle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.studio-panel > .panel-toggle,
.overview > .panel-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
}

.panel-toggle .icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.is-collapsed .panel-toggle .icon {
  transform: none;
}

.is-collapsed > :not(.panel-toggle):not([data-panel-keep]) {
  display: none;
}

.studio-panel.is-collapsed {
  padding-bottom: 16px;
}

.studio-panel > h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.04;
  font-weight: 500;
}

.studio-panel > .body-copy {
  max-width: 720px;
}

/* ── Sidebar navigation ── */

aside.sidebar {
  position: sticky;
  top: 12px;
  display: flex;
  height: calc(100vh - 24px);
  min-height: 560px;
  flex-direction: column;
  padding: 28px 20px 20px;
  border-right: 1px solid rgba(191, 209, 232, 0.76);
  border-radius: 0 0 0 var(--radius-shell);
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  overflow-y: auto;
  overflow-x: hidden;
}

.brand-mark {
  width: 142px;
  aspect-ratio: 224 / 37;
  margin: 7px 10px 34px;
  color: var(--ice-ink);
  background: currentColor;
  -webkit-mask: url("/assets/brand/temnikova-logo-ink.svg") center / contain no-repeat;
  mask: url("/assets/brand/temnikova-logo-ink.svg") center / contain no-repeat;
}

.side-nav {
  display: grid;
  min-width: 0;
  gap: 20px;
}

.nav-group {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.nav-group > p {
  margin: 0 10px 5px;
  color: var(--ice-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ice-body);
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.nav-item:hover:not(.future) {
  background: rgba(230, 240, 254, 0.7);
}

.nav-item.active {
  color: var(--ice-ink);
  background: var(--ice-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.nav-item.future {
  color: var(--ice-muted);
  cursor: default;
}

.nav-item > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item .nav-count,
.nav-item em {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-item.future em {
  padding: 3px 8px;
  border: 1px dashed var(--ice-line);
  border-radius: 999px;
}

.nav-mark {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.nav-item.active .nav-mark {
  background: var(--ice-ink);
}

.sidebar-foot {
  margin-top: auto;
  padding: 17px 10px 2px;
  border-top: 1px solid var(--ice-line);
  color: var(--ice-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Shared shell pieces ── */

.skip-link {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 12px;
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  color: white;
  background: var(--ice-deep);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.eyebrow {
  display: block;
  margin: 0 0 7px;
  color: var(--ice-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-head h2 {
  margin-bottom: 0;
}

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

.status-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  color: var(--ice-ink);
  background: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.blue {
  border-color: rgba(49, 95, 155, 0.32);
  color: var(--ice-deep);
  background: rgba(230, 240, 254, 0.72);
}

/* ── Overview flow rail ── */

.overview {
  scroll-margin-top: 96px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  align-items: end;
  gap: 32px;
  padding: 8px 8px 4px;
  overflow: visible;
}

.overview h2 {
  max-width: 610px;
  margin-bottom: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
}

.flow-rail {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
}

.flow-rail a {
  display: grid;
  min-width: 0;
  min-height: 94px;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(191, 209, 232, 0.76);
  border-radius: 18px;
  color: var(--ice-body);
  background: rgba(255, 255, 255, 0.4);
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.flow-rail a:hover {
  background: rgba(255, 255, 255, 0.62);
  transform: none;
}

.flow-rail a span {
  color: var(--ice-deep);
  font-size: 8px;
}

.flow-rail a b {
  color: var(--ice-ink);
  font-weight: 400;
}

.flow-rail a small {
  color: var(--ice-muted);
  font-size: 8px;
}

.flow-rail i {
  height: 1px;
  background: var(--ice-line);
}

/* ── Catalogue panel ── */

.catalogue-panel {
  scroll-margin-top: 96px;
}

.catalogue-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.catalogue-controls .search-field {
  flex: 1;
  min-width: 220px;
  margin-top: 0;
}

.search-field {
  display: grid;
  gap: 7px;
  color: var(--ice-muted);
  font-size: 9px;
}

.input-shell {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid var(--ice-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
}

.input-shell input {
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ice-ink);
  background: transparent;
}

.input-shell:focus-within {
  border-color: var(--ice-strong);
  box-shadow: 0 0 0 3px rgba(102, 158, 242, 0.22);
}

.catalogue-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ice-line);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.search-toolbar {
  margin: 0 0 10px;
  flex-wrap: nowrap;
}

.search-query-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-toolbar #query {
  width: 100%;
  max-width: none;
  padding-right: 40px;
}

.search-toolbar #btnSearch {
  flex-shrink: 0;
}

.search-query-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--glass-label);
  font-size: 18px;
  line-height: 1;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: normal;
}

.search-query-clear:hover,
.search-query-clear:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.5);
  color: var(--glass-ink);
  border-color: transparent;
  transform: translateY(-50%);
}

/* Hide WebKit native clear — custom buttons handle this for both search fields */
#query::-webkit-search-cancel-button,
#query::-webkit-search-decoration,
.input-shell input[type="search"]::-webkit-search-cancel-button,
.input-shell input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.sidebar-backdrop {
  display: none;
}

section { padding: 0; }

/* ── Stats as glass nested cards ── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(246, 249, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 48px rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.stat {
  padding: 12px 14px;
  transition: transform 0.2s ease;
}

.stat:hover {
  transform: translateY(-2px);
}

.stat b {
  display: block;
  font-size: 22px;
  font-family: var(--font-display);
  color: var(--glass-ink);
}

/* ── Buttons & form controls ── */

button, input, textarea, select { font: inherit; font-family: var(--font-mono); }

button {
  border: 1px solid var(--ice-line);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ice-ink);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

button:hover:not(:disabled) {
  background: var(--ice-quiet);
  border-color: var(--ice-strong);
  transform: translateY(-2px);
}

button.primary {
  background: var(--ice-deep);
  color: #f6f9ff;
  border-color: var(--ice-deep);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

button.primary:hover:not(:disabled) {
  background: #4b7fc4;
  border-color: #4b7fc4;
  transform: translateY(-2px);
}

button.primary.is-loading,
button.primary.is-loading:hover:not(:disabled) {
  background: var(--ice-deep);
  border-color: var(--ice-deep);
  transform: none;
  opacity: 1;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

button.primary.is-loading:disabled {
  opacity: 1;
  cursor: wait;
}

@keyframes shimmer-text {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.loading-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
}

.loading-state-grid {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  gap: 2px;
  flex-shrink: 0;
}

.loading-state-pixel {
  /* resolved ink for the engraving driver; the faint floor keeps the grid
     visible if JS paint never runs — paintEngravedCell clears it on paint */
  --ls-ink: var(--ls-pixel, var(--ink));
  background-color: rgb(36 36 36 / 0.14);
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
}
/* probe mirrors ENGRAVE_MIX_OK in app.js — keep both in sync */
@supports (background: color-mix(in srgb, red 1%, transparent)) {
  .loading-state-pixel {
    background-color: color-mix(in srgb, var(--ls-ink, #242424) 14%, transparent);
  }
}

.loading-state-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-image: linear-gradient(
    90deg,
    var(--ls-shimmer-from, var(--ink-3)) 35%,
    var(--ls-shimmer-mid, var(--ink)) 50%,
    var(--ls-shimmer-from, var(--ink-3)) 65%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer-text 1.4s linear infinite;
}

.loading-state-timer {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ls-timer, var(--ink-3));
  letter-spacing: 0.02em;
}

button.primary .loading-state {
  --ls-pixel: #f6f9ff;
  --ls-shimmer-from: rgba(246, 249, 255, 0.45);
  --ls-shimmer-mid: #f6f9ff;
  --ls-timer: rgba(246, 249, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .loading-state-label {
    animation: none !important;
    color: var(--ls-shimmer-mid, var(--ink));
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}

input {
  border: 1px solid var(--ice-line);
  border-radius: var(--radius-mini);
  padding: 10px 14px;
  width: 100%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ice-ink);
}

input:focus-visible {
  outline: 2px solid var(--ice-deep);
  outline-offset: 1px;
}

input::placeholder { color: var(--glass-label); }

select {
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  padding: 8px 36px 8px 16px;
  min-height: 40px;
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23315f9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  color: var(--glass-ink);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

select:focus-visible {
  outline: 3px solid var(--ice-deep);
  outline-offset: 2px;
}

.toolbar select {
  width: auto;
  min-width: 0;
}

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

:focus-visible {
  outline: 3px solid var(--ice-deep);
  outline-offset: 2px;
}

/* ── Song list (Ice catalogue) ── */

.song-filter-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--glass-label);
  font-size: 18px;
  line-height: 1;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: normal;
}

.song-filter-clear:hover,
.song-filter-clear:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.5);
  color: var(--glass-ink);
  border-color: transparent;
  transform: translateY(-50%);
}

.song-filter-ready {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--ice-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
}
.song-filter-ready input { width: auto; margin: 0; accent-color: var(--ice-deep); }

.song-list-wrap {
  position: relative;
  margin-top: 14px;
}

.song-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 9px;
  max-height: 380px;
  overflow: auto;
  padding: 2px 2px 18px;
  outline: none;
}

.song-list-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(246, 249, 255, 0) 0%,
    rgba(246, 249, 255, 0.6) 60%,
    rgba(246, 249, 255, 0.9) 100%
  );
}

.song-list:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(49, 95, 155, 0.35);
  border-radius: var(--radius-nested);
}

.song-list-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--glass-label);
}

.song {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 11px 22px;
  text-align: left;
  border: 1px solid rgba(191, 209, 232, 0.84);
  border-radius: 17px;
  color: var(--ice-body);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
}

.song::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 38px;
  border-radius: 99px;
  background: var(--ice-light);
}

.song:hover {
  background: rgba(255, 255, 255, 0.72);
  transform: none;
}

.song:focus-visible {
  outline: 3px solid var(--ice-deep);
  outline-offset: 0;
}

.song.active {
  border-color: var(--ice-accent);
  background: rgba(102, 158, 242, 0.2);
}

.song.active::before {
  background: var(--ice-accent);
}

.song:hover:not(:disabled),
.song.active:hover:not(:disabled) {
  transform: none;
}

.song-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--glass-ink);
}

.badge {
  flex-shrink: 0;
  min-width: 54px;
  box-sizing: border-box;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ice-deep);
  background: rgba(230, 240, 254, 0.72);
  border: 1px solid rgba(49, 95, 155, 0.28);
  border-radius: 999px;
  padding: 3px 6px;
}

.badge.empty {
  color: var(--glass-label);
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--glass-line);
}

.toolbar { display: flex; gap: 8px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.toolbar input { max-width: 420px; border-radius: var(--radius-nested); }

textarea {
  font: inherit;
  font-family: var(--font-mono);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-nested);
  padding: 10px 14px;
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  color: var(--glass-ink);
}

textarea { min-height: 130px; resize: vertical; }

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-nested);
  padding: 12px;
  max-height: 420px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.card {
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 14px 0;
}

.picklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  border-radius: var(--radius-nested);
  padding: 12px;
}

.pick {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: var(--radius-mini);
  transition: background-color 0.12s ease;
}

.pick:hover { background: rgba(255, 255, 255, 0.2); }
.pick input { width: auto; margin-top: 3px; }

.glass-selected { font-weight: 600; min-width: 120px; flex: 1; font-family: var(--font-display); color: var(--glass-ink); }

.glass-settings {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 16px;
}

.glass-settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.glass-settings-row label {
  font-weight: 400;
  min-width: 56px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--glass-label);
}
.glass-settings-row select { min-width: 200px; }

.glass-theme-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
}

.glass-theme-meta dt { color: var(--glass-label); margin: 0; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; }
.glass-theme-meta dd { margin: 0; }

.glass-user-refs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(191, 209, 232, 0.45);
}

.glass-user-refs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.glass-user-refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.glass-user-refs-grid:empty {
  display: block;
}

.glass-user-refs-grid:empty::before {
  content: attr(data-empty);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--glass-label);
  padding: 8px 0;
}

.glass-user-ref-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius-mini);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.25);
  aspect-ratio: 1;
}

.glass-user-ref-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glass-user-ref-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(39, 50, 74, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
}

.glass-user-refs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.glass-user-refs-status {
  margin: 8px 0 0;
  font-size: 12px;
}

.glass-text-options {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(191, 209, 232, 0.45);
}

.glass-custom-prompt {
  width: 100%;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-nested);
  resize: vertical;
  min-height: 72px;
  background: rgba(255, 255, 255, 0.35);
}

.synth-variant .toolbar { margin-top: 8px; }

.glass-text-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}

.glass-text-toggle input { width: auto; margin: 0; }

#glassOverlayText:disabled { opacity: 0.55; cursor: not-allowed; }
#glassStatus.error { color: #a32020; font-weight: 500; }

.glass-prompt-panel { margin: 8px 0; }

.glass-prompt-panel pre {
  max-height: 280px;
  overflow: auto;
}

.synth-status { margin: 8px 0 0; min-height: 1.25em; }

.synth-instruction-label {
  display: block;
  margin: 0 0 6px;
}

.synth-variant {
  margin-top: 12px;
  padding: 16px;
  transition: transform 0.2s ease;
}

.synth-variant:hover { transform: translateY(-2px); }

.synth-variant h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-family: var(--font-display);
  color: var(--glass-ink);
}

.synth-prompt {
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px;
}

pre.copy-on-dblclick,
.synth-prompt.copy-on-dblclick { cursor: copy; }

pre.copy-on-dblclick:hover,
.synth-prompt.copy-on-dblclick:hover {
  outline: 1px dashed var(--glass-ink);
  outline-offset: 2px;
}

#synthesis pre.copy-on-dblclick {
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  padding: 10px;
}

.synth-status.error { color: #a32020; font-weight: 500; }

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

.visions-empty-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 0;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.visions-empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--glass-label);
}

.visions-empty-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--glass-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lyrics-collection {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
}

.lyrics-collection-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lyrics-collection-head h3 {
  flex: 1;
  margin: 0;
}

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

.lyrics-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--glass-label);
}

.lyric-card-details {
  margin: 0 0 14px;
}

.lyric-card-details summary {
  cursor: pointer;
  color: var(--glass-label);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lyric-card-details[open] summary {
  margin-bottom: 8px;
}

/* Ghost preview of Variant A so the card design is visible before first save. */
.vision-card.is-ghost {
  pointer-events: none;
  opacity: 0.72;
}

.vision-card.is-ghost .vision-card-actions button {
  opacity: 0.55;
}

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

@media (max-width: 720px) {
  .visions-ghost-grid {
    grid-template-columns: 1fr;
  }
}

/* Variant A — Refined Glass Editorial (no accent rail) */
.vision-card.glass-nested {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 18px 18px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.28);
  background-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 28px -22px rgba(39, 50, 74, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.25s ease;
}

.vision-card.glass-nested:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px -28px rgba(39, 50, 74, 0.35);
}

.vision-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.vision-card-head h4 {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--glass-ink);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.vision-card-date {
  font-size: 11px;
  color: var(--glass-label);
  white-space: nowrap;
}

.vision-card-tracks {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--glass-label);
}

.vision-card-brief-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glass-label);
}

.vision-card-brief {
  margin: 0 0 14px;
  max-height: 132px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius-mini);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.38);
  color: var(--glass-body);
  transition: background 0.25s ease;
}

.vision-card.glass-nested:hover .vision-card-brief {
  background: rgba(255, 255, 255, 0.5);
}

.vision-card-actions {
  margin: auto 0 0;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .visions-list,
  .lyrics-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision-card.glass-nested {
    transition: none;
  }

  .vision-card.glass-nested:hover {
    transform: none;
  }
}

/* ── Song drafts ── */

.song-manual-details {
  display: contents;
}

.song-manual-details[hidden] {
  display: none;
}

.song-manual-details:not([open]) > .song-manual-body {
  display: none;
}

.song-manual-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--ice-line);
  border-radius: 999px;
  color: var(--ice-ink);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.song-manual-summary::-webkit-details-marker {
  display: none;
}

.song-manual-summary:hover {
  background: var(--ice-quiet);
  border-color: var(--ice-strong);
  transform: translateY(-2px);
}

.song-manual-summary:focus-visible {
  outline: 2px solid var(--ice-ink);
  outline-offset: 2px;
}

.song-manual-details[open] > .song-manual-summary {
  background: var(--ice-quiet);
  border-color: var(--ice-strong);
}

.song-manual-body {
  flex-basis: 100%;
  min-width: 0;
  margin-top: 4px;
}

.song-manual-hint {
  max-width: 58ch;
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.song-manual-advanced,
.song-brief-override {
  margin-top: 8px;
}
.song-manual-advanced summary,
.song-brief-override summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 7px 12px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--glass-line) 82%, transparent);
  border-radius: 12px;
  color: var(--glass-label);
  background: color-mix(in srgb, var(--glass-page) 72%, transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  user-select: none;
}
.song-manual-advanced-note,
.song-brief-override-note {
  max-width: 58ch;
  margin: 8px 0 10px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.song-manual-advanced .label-quiet,
.song-brief-override .label-quiet {
  display: block;
  margin: 0 0 6px;
}
.song-brief-override {
  margin: 4px 0 2px;
}
.song-brief-override summary {
  margin-bottom: 0;
}
.song-manual-details[open] .song-manual-advanced > summary {
  margin-bottom: 0;
}
.song-manual-advanced[open] > summary,
.song-brief-override[open] > summary {
  margin-bottom: 8px;
  border-color: color-mix(in srgb, var(--glass-ink) 28%, var(--glass-line));
  color: var(--glass-ink);
}
.song-lyrics-editor .song-brief-override textarea {
  min-height: 88px;
}
.synth-lyrics {
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
}
.synth-style {
  white-space: pre-wrap;
  max-height: 120px;
  overflow: auto;
  opacity: 0.92;
}
.synth-dna-blend {
  font-size: 0.88rem;
  line-height: 1.35;
  margin: 0.35rem 0 0.6rem;
}
.pick-count-meta {
  font-size: 0.88rem;
  margin: 0.35rem 0 0.5rem;
}
.pick-count-meta.is-ok {
  color: color-mix(in srgb, #4b7fc4 85%, var(--text, #eee));
}
.pick-count-meta.is-warn {
  color: color-mix(in srgb, #e0b35a 90%, var(--text, #eee));
}

.songs-panel input[type="text"],
.songs-panel textarea {
  margin-bottom: 10px;
}

.songs-toolbar {
  flex-wrap: wrap;
  gap: 10px 14px;
}

.songs-toolbar > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.songs-toolbar > button .icon {
  flex: 0 0 auto;
}

.song-status {
  margin: 10px 0 0;
  font-size: 12px;
  min-height: 0;
  line-height: 1.4;
}
/* Noticeable status pill (review hints, errors) — never a second Drive loader */
.song-status.is-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  font-weight: 500;
}
.song-status.is-pill.is-hint {
  background: rgba(39, 50, 74, 0.88);
  border-color: transparent;
  color: #f6f9ff;
  box-shadow: none;
}
.song-status.is-pill.error {
  background: rgba(230, 240, 254, 0.95);
  border-color: rgba(49, 95, 155, 0.75);
  color: #a32020;
}
.song-status.error {
  color: #a32020;
  font-weight: 500;
}
.song-lyrics-actions {
  margin-top: 12px;
}

/* Vocal choices, shown beside the audio button */
.song-vocal-controls {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.song-vocal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.song-vocal-row select {
  min-width: 200px;
}
.song-vocal-note {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.35;
}
.song-notification {
  margin-top: 14px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.22);
}
.song-notification-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.song-notification-summary::-webkit-details-marker {
  display: none;
}
.song-notification-title {
  flex: 1;
  min-width: 0;
  color: var(--glass-ink);
  font-size: 0.92rem;
  font-weight: 600;
}
.song-notification-required {
  color: var(--glass-label);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.song-notification-summary::after {
  content: "▾";
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.song-notification:not([open]) > .song-notification-summary::after {
  transform: rotate(-90deg);
}
.song-notification-summary:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: -2px;
  border-radius: var(--radius-nested);
}
.song-notification-body {
  display: grid;
  gap: 6px;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.song-notification-body .label-quiet {
  margin-top: 2px;
}
.song-notification-body input {
  margin: 0;
  max-width: 480px;
}

/* Song progress rail (SSE-driven) */
.song-progress {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.song-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.song-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.song-progress-step::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}
.song-progress-step.is-active {
  opacity: 1;
  background: rgba(39, 50, 74, 0.9);
  color: #f6f9ff;
  border-color: transparent;
}
.song-progress-step.is-active::before {
  opacity: 1;
  animation: song-pulse 1s ease-in-out infinite;
}
.song-progress-step.is-done {
  opacity: 0.9;
  border-color: rgba(75, 127, 196, 0.55);
  background: rgba(75, 127, 196, 0.18);
}
.song-progress-step.is-done::before {
  opacity: 1;
  background: #4b7fc4;
}
@keyframes song-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.55;
  }
}

/* DNA parent picker drawer */
.song-dna-drawer {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition: grid-template-rows 0.32s ease, opacity 0.22s ease, margin 0.22s ease;
  pointer-events: none;
}
.song-dna-drawer.is-open {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  pointer-events: auto;
}
.song-dna-drawer > .song-dna-drawer-inner {
  overflow: hidden;
  min-height: 0;
}
.song-dna-drawer-inner {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}
.song-dna-drawer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.song-dna-pick-meta {
  font-size: 0.85rem;
}
.song-dna-pick-meta.is-ok {
  color: color-mix(in srgb, #4b7fc4 85%, var(--text, #eee));
}
.song-dna-pick-meta.is-warn {
  color: color-mix(in srgb, #e0b35a 90%, var(--text, #eee));
}
.song-dna-picklist {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  padding: 4px 2px;
}
.song-dna-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.12s ease;
  user-select: none;
}
.song-dna-pick-row:hover {
  background: rgba(255, 255, 255, 0.12);
}
.song-dna-pick-row:has(input:checked) {
  background: rgba(39, 50, 74, 0.88);
  color: #f6f9ff;
}
.song-dna-pick-row input {
  width: auto;
  margin: 0;
  accent-color: #f6f9ff;
}
.song-dna-drawer-actions {
  margin-top: 4px;
}

/* Blend weight sliders */
.song-dna-weights {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.song-dna-weight-rows {
  display: grid;
  gap: 12px;
}
.song-dna-weight-row {
  display: grid;
  gap: 6px;
}
.song-dna-weight-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.song-dna-weight-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-dna-weight-badge {
  flex-shrink: 0;
  min-width: 3.2em;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.song-dna-weight-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: normal;
}
.song-dna-weight-remove:hover {
  background: rgba(160, 32, 32, 0.9);
  transform: none;
}
.song-dna-weight-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39, 50, 74, 0.95) 0%,
    rgba(39, 50, 74, 0.95) var(--fill, 50%),
    rgba(255, 255, 255, 0.22) var(--fill, 50%),
    rgba(255, 255, 255, 0.22) 100%
  );
  outline: none;
  cursor: pointer;
}
.song-dna-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f6f9ff;
  border: 2px solid #242424;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}
.song-dna-weight-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f6f9ff;
  border: 2px solid #242424;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: grab;
}
.song-dna-weight-sum {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.35;
}
.song-dna-pick-row.is-selected {
  background: rgba(39, 50, 74, 0.88);
  color: #f6f9ff;
}

/* Pills — parents + section tags */
.song-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.song-pills-compact {
  gap: 5px;
}
.song-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  background: rgba(39, 50, 74, 0.88);
  color: #f6f9ff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100%;
}
.song-pill-muted {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border-color: rgba(255, 255, 255, 0.28);
  font-size: 0.72rem;
  padding: 4px 10px;
}
.song-pill-section {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  background: rgba(39, 50, 74, 0.78);
}
.song-pill-removable {
  cursor: pointer;
  font-family: inherit;
  appearance: none;
}
.song-pill-removable::after {
  content: "×";
  margin-left: 4px;
  opacity: 0.7;
  font-size: 0.95em;
}
.song-pill-removable:hover {
  background: rgba(160, 32, 32, 0.88);
  border-color: transparent;
}

/* Lyrics as pill sections — full text, no global <pre> clip */
.song-lyrics-preview {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.song-lyrics-pills {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.song-lyrics-title {
  margin: 0;
}
.song-lyrics-full {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.song-lyrics-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.song-lyrics-body {
  /* div, not pre — avoid global pre { max-height: 420px; overflow } clipping */
  margin: 0;
  padding: 0;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.5;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.song-lyrics-details {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 12px 10px;
}
.song-lyrics-details[open] {
  padding-bottom: 12px;
}
.song-lyrics-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.85;
  user-select: none;
  padding: 4px 0;
}
.song-lyrics-summary::-webkit-details-marker {
  display: none;
}
.song-lyrics-summary::before {
  content: "▸ ";
  opacity: 0.6;
}
.song-lyrics-details[open] > .song-lyrics-summary::before {
  content: "▾ ";
}
.song-lyrics-details[open] > .song-lyrics-summary {
  margin-bottom: 8px;
  opacity: 0.65;
  font-size: 0.78rem;
}
.song-lyrics-pills-compact .song-lyrics-full {
  gap: 10px;
  /* full lyrics inside details — never clip mid-line */
  max-height: none;
  overflow: visible;
}

.songs-gallery {
  display: grid;
  gap: 12px;
}

.songs-gallery-panel {
  margin-top: 14px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.28);
}

.songs-gallery-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.songs-gallery-summary::-webkit-details-marker {
  display: none;
}

.songs-gallery-summary::after {
  content: "▾";
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.songs-gallery-panel:not([open]) > .songs-gallery-summary::after {
  transform: rotate(-90deg);
}

.songs-gallery-summary:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: -2px;
  border-radius: var(--radius-nested);
}

.songs-gallery-summary h3 {
  flex: 1;
  margin: 0;
}

.songs-gallery-count,
.lyrics-collection-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(39, 50, 74, 0.88);
  color: #f6f9ff;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.songs-gallery-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.song-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.song-item.is-new {
  border-color: rgba(75, 127, 196, 0.42);
  background: rgba(75, 127, 196, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(75, 127, 196, 0.16);
  animation: song-ready-arrive 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.song-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.song-item-title-wrap {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.song-item-title-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.song-item-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(75, 127, 196, 0.42);
  border-radius: 999px;
  background: rgba(75, 127, 196, 0.12);
  color: color-mix(in srgb, #317947 88%, var(--glass-ink));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.song-item-ready-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4b7fc4;
  content: "";
}
.song-item-title-wrap h4 {
  margin: 0;
}
.song-item-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.song-item-studio {
  position: relative;
  min-width: 44px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(39, 50, 74, 0.82);
  border-radius: 999px;
  background: var(--glass-ink, #242424);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}
.song-item-studio:hover { background: #000; transform: translateY(-1px); }
.song-item-studio:focus-visible { outline: 2px solid var(--glass-ink); outline-offset: 2px; }
.song-item-studio.is-active::after {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #4b7fc4;
  content: "";
}
.song-item-icon-btn,
.song-item-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.12s ease;
  font-family: inherit;
}
.song-item-icon-btn:hover {
  background: rgba(39, 50, 74, 0.95);
  transform: none;
}
.song-item-delete {
  font-size: 18px;
}
.song-item-delete:hover {
  background: rgba(160, 32, 32, 0.92);
  transform: none;
}
.song-item-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.song-item-edit {
  font-size: 16px;
}

.song-item-title-editor {
  display: flex;
  align-items: center;
  gap: 6px;
}

.song-item-title-editor input {
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: rgba(255, 255, 255, 0.54);
  color: var(--glass-ink);
  font: inherit;
  font-family: var(--font-display);
}

.song-item-title-save,
.song-item-title-cancel {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font: inherit;
  line-height: 1;
}

.song-item-title-cancel {
  background: rgba(112, 48, 48, 0.82);
}

.song-synthetic-voice input:disabled {
  opacity: 1;
  cursor: default;
}

/* Draft lyrics popover is portaled to <body> so card stacking cannot clip it. */
.draft-lyrics-anchor {
  display: inline-flex;
}
.draft-lyrics-pop {
  position: fixed;
  z-index: 450;
  width: min(360px, calc(100vw - 16px));
  max-height: min(360px, 50vh);
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(246, 249, 255, 0.96);
  color: var(--glass-ink, #2a2826);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}
.draft-lyrics-pop.is-open {
  display: flex;
}
.draft-lyrics-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.draft-lyrics-pop-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-lyrics-copy {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  background: rgba(39, 50, 74, 0.9);
  color: #f6f9ff;
  text-transform: none;
  letter-spacing: normal;
}
.draft-lyrics-copy:hover {
  transform: none;
  background: #000;
}
.draft-lyrics-pop-text {
  margin: 0;
  max-height: min(280px, 42vh);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px;
}

/* Lyrics review card (step 1) — same head as gallery item */
.song-lyrics-review {
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}
.song-lyrics-review-head {
  align-items: flex-start;
}
.song-lyrics-review-title {
  margin: 0;
  font-size: 1rem;
}
.song-lyrics-review-hint {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
}
.song-item-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.song-item audio {
  width: 100%;
  max-width: 100%;
}

.song-item-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  color: var(--glass-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.2s ease;
}

.song-item-download-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.song-item-download:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.song-item-download:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 2px;
}

/* ── Song covers: sleeve + CD in each card, cover strip in the gallery header ── */
.song-item.has-sleeve {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
}
.song-item-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.song-sleeve {
  --sleeve: 96px;
  position: relative;
  /* Room for the record to slide half out while playing. */
  width: calc(var(--sleeve) * 1.5);
  height: var(--sleeve);
  flex: none;
}
/* The record: drawn once in CSS, never generated. Black vinyl with fine
   grooves; the centre label prints the song's cover (--disc-art, set by
   paintSongCover) or its gradient. It slides out of the sleeve on hover and
   further while playing, and spins — the ::after sheen counter-rotates, so
   the light stays put like on a real turntable. */
.song-sleeve {
  perspective: 700px;
}
.song-sleeve-disc {
  --disc-out: 22%;
  --disc-spin: 3.2s;
  position: absolute;
  top: 4%;
  left: 4%;
  width: calc(var(--sleeve) * 0.92);
  height: calc(var(--sleeve) * 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.08) 31.5% 32.5%, transparent 33% 46%, rgba(255, 255, 255, 0.05) 46.5% 47%, transparent 47.5% 96%, rgba(255, 255, 255, 0.1) 97% 98%, transparent 98.5%),
    /* uneven pressing: turns with the record, so the spin reads */
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.05), transparent 20%, rgba(255, 255, 255, 0.035) 45%, transparent 70%, rgba(255, 255, 255, 0.05)),
    repeating-radial-gradient(circle, #141417 0 1px, #1f1f24 1.4px 2.2px),
    #111114;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 6px 14px -6px rgba(0, 0, 0, 0.6);
  transform: translateX(var(--disc-out));
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Centre label with the spindle hole. */
.song-sleeve-disc::before {
  content: "";
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--glass-page, #fff) 0 9%, rgba(0, 0, 0, 0.45) 10% 13%, transparent 14%),
    var(--disc-art, none) center / cover no-repeat,
    radial-gradient(90% 90% at 30% 25%, hsl(var(--cover-hue, 220) 55% 62%), hsl(calc(var(--cover-hue, 220) + 40) 50% 32%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
/* Fixed sheen: two soft reflections across the grooves. */
.song-sleeve-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, 0.16) 11%, transparent 17% 50%, rgba(255, 255, 255, 0.11) 60%, transparent 67%);
  pointer-events: none;
}
.song-sleeve:hover .song-sleeve-disc { --disc-out: 34%; }
.song-item.is-playing .song-sleeve-disc,
.sm-song[data-playing="true"] .song-sleeve-disc,
.song-sleeve.is-playing .song-sleeve-disc {
  --disc-out: 56%;
  animation: song-disc-spin var(--disc-spin) linear infinite;
}
.song-item.is-playing .song-sleeve-disc::after,
.sm-song[data-playing="true"] .song-sleeve-disc::after,
.song-sleeve.is-playing .song-sleeve-disc::after {
  animation: song-disc-sheen var(--disc-spin) linear infinite;
}
/* Play/pause knob over the cover (network sleeves: profile, chart). */
.song-sleeve-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--sleeve);
  height: var(--sleeve);
  display: grid;
  place-items: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.song-sleeve-icon > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.song-sleeve-icon svg { width: 12px; height: 12px; fill: currentColor; }
.song-sleeve:hover .song-sleeve-icon,
.song-sleeve.is-playing .song-sleeve-icon,
.song-sleeve-cover:focus-visible + .song-sleeve-icon { opacity: 1; }
@media (hover: none) { .song-sleeve-icon { opacity: 1; } }

@keyframes song-disc-spin {
  from { transform: translateX(var(--disc-out)) rotate(0deg); }
  to { transform: translateX(var(--disc-out)) rotate(360deg); }
}
@keyframes song-disc-sheen {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* .track-cover: published tracks in the network chart and profile feed
   (network-common.js trackCover) — same painter, same fallback gradient. */
.song-sleeve-cover,
.songs-strip-cover,
.track-cover {
  --cover-hue: 220;
  --cover-fill:
    radial-gradient(120% 90% at 30% 25%, hsl(var(--cover-hue) 55% 62% / 0.75), transparent 60%),
    radial-gradient(90% 80% at 80% 85%, hsl(calc(var(--cover-hue) + 40) 60% 55% / 0.55), transparent 65%),
    #121219;
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--cover-fill);
}
/* The nordic skin paints every button white; the sleeve cover is a button. */
html[data-theme] button.song-sleeve-cover {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sleeve-radius);
  background: var(--cover-fill);
}
/* Apple-style continuous corners: a squircle whose radius scales with the
   cover (≈ 22% like an app icon); plain rounded corners where unsupported. */
.song-sleeve {
  --sleeve-radius: calc(var(--sleeve) * 0.22);
}
@supports (corner-shape: squircle) {
  .song-sleeve { --sleeve-radius: calc(var(--sleeve) * 0.3); }
  .song-sleeve-cover,
  .song-sleeve-cover::after {
    corner-shape: squircle;
  }
}
.song-sleeve-cover {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: var(--sleeve);
  height: var(--sleeve);
  padding: 0;
  border: 0;
  border-radius: var(--sleeve-radius);
  cursor: pointer;
  /* Soft, layered Apple-like lift instead of one hard drop. */
  box-shadow:
    0 0.5px 1px rgba(0, 0, 0, 0.18),
    0 3px 8px -2px rgba(0, 0, 0, 0.16),
    0 10px 22px -10px rgba(0, 0, 0, 0.32);
}
.song-sleeve-cover::after,
.songs-strip-cover::after,
.track-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Hairline edge (light inside, dark outside) + a faint top-left sheen. */
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 34%);
  pointer-events: none;
}
/* The sleeve turns a touch toward the record as it slides out. */
.song-sleeve-cover {
  transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
html[data-theme] .song-sleeve:hover .song-sleeve-cover,
html[data-theme] .song-sleeve .song-sleeve-cover:focus-visible {
  transform: rotateY(-9deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 10px 10px 22px -10px rgba(0, 0, 0, 0.5);
}
.song-sleeve-cover:focus-visible,
.songs-strip-item:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 3px;
}
.song-sleeve-cover img,
.songs-strip-cover img,
.track-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.5s ease, filter 0.6s ease;
}
.song-sleeve-cover img.is-loaded,
.songs-strip-cover img.is-loaded,
.track-cover img.is-loaded {
  opacity: 1;
  filter: none;
}
/* Waiting for the free cover: the gradient breathes instead of an empty square. */
.song-sleeve-cover.is-drawing::before,
.songs-strip-cover.is-drawing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: song-cover-sheen 1.6s linear infinite;
}
@keyframes song-cover-sheen {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.song-sleeve-redraw {
  position: absolute;
  top: 5px;
  left: calc(var(--sleeve) - 31px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 20, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease;
}
.song-sleeve:hover .song-sleeve-redraw,
.song-sleeve-redraw:focus-visible { opacity: 1; }
.song-sleeve-redraw:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.song-sleeve-redraw:disabled { cursor: progress; opacity: 0.6; }
@media (hover: none) { .song-sleeve-redraw { opacity: 1; } }

/* Strip: sits inside <summary>, visible while the panel is collapsed. */
.songs-gallery-summary { flex-wrap: wrap; }
.songs-gallery-summary::after { order: 1; }
.songs-strip {
  order: 2;
  display: flex;
  flex-basis: 100%;
  gap: 10px;
  /* Room above for the hover title, pulled back into the header's gap. */
  margin: -22px -4px 0;
  padding: 30px 4px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.songs-strip::-webkit-scrollbar { display: none; }
.songs-strip-item {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.songs-strip-item:hover { transform: translateY(-3px); }
.songs-strip-cover {
  width: 100%;
  height: 100%;
  border-radius: 9px;
}
.songs-strip-item.is-current {
  box-shadow: 0 0 0 2px var(--glass-page), 0 0 0 4px var(--glass-ink);
}
.songs-strip-eq {
  position: absolute;
  inset: auto 0 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 22px;
  padding-bottom: 6px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.songs-strip-eq i {
  width: 3px;
  border-radius: 2px;
  background: #fff;
  animation: songs-strip-eq 0.9s ease-in-out infinite alternate;
}
.songs-strip-eq i:nth-child(2) { animation-delay: -0.3s; }
.songs-strip-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes songs-strip-eq {
  from { height: 3px; }
  to { height: 12px; }
}
.songs-strip-item.is-playing .songs-strip-eq { display: flex; }
.songs-strip-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 3;
  max-width: 220px;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--glass-ink);
  color: var(--glass-page);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.songs-strip-item:first-child .songs-strip-tip { left: 0; transform: translate(0, 6px); }
.songs-strip-item:hover .songs-strip-tip,
.songs-strip-item:focus-visible .songs-strip-tip { opacity: 1; transform: translate(-50%, 0); }
.songs-strip-item:first-child:hover .songs-strip-tip,
.songs-strip-item:first-child:focus-visible .songs-strip-tip { transform: translate(0, 0); }
.songs-now {
  order: 3;
  display: flex;
  flex-basis: 100%;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--glass-label);
  font-size: 0.82rem;
}
.songs-now-title {
  overflow: hidden;
  color: var(--glass-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.songs-now-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .song-sleeve { --sleeve: 76px; }
  .song-item.has-sleeve { column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .song-item.is-playing .song-sleeve-disc,
  .song-item.is-playing .song-sleeve-disc::after,
  .song-sleeve.is-playing .song-sleeve-disc,
  .song-sleeve.is-playing .song-sleeve-disc::after { animation: none; }
  html[data-theme] .song-sleeve:hover .song-sleeve-cover { transform: none; }
  .song-sleeve-cover.is-drawing::before,
  .songs-strip-cover.is-drawing::before { animation: none; }
  .songs-strip-eq i { animation: none; height: 8px; }
}

/* Publish to Network — reuses the download pill; sits beside it. */
.song-item-media:has(.song-item-publish) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.song-item-publish {
  background: transparent;
  cursor: pointer;
}

/* Armed must beat the (nordic) button :hover rules — the pointer is still
   over the button right after the first tap. */
.publish-network-btn.is-armed,
.publish-network-btn.is-armed:hover:not(:disabled),
html[data-theme="nordic"] .publish-network-btn.is-armed,
html[data-theme="nordic"] .publish-network-btn.is-armed:hover:not(:disabled) {
  background: var(--glass-ink);
  border-color: var(--glass-ink);
  color: #fff;
}

.publish-network-btn.is-published,
.publish-network-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.song-item-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--glass-ink);
}

.song-item audio {
  width: 100%;
  height: 36px;
}

@media (max-width: 560px) {
  .song-item-media {
    grid-template-columns: 1fr;
  }

  .song-item-media:has(.song-item-publish) {
    grid-template-columns: 1fr;
  }

  .song-item-download {
    justify-self: start;
  }
}

.studio-pack-panel {
  position: relative;
  margin-top: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  display: grid;
  gap: 18px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--glass-ink) 18%, var(--glass-line));
  background:
    radial-gradient(circle at 88% 0%, rgba(216, 235, 255, 0.55), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(244, 239, 235, 0.38));
}
.studio-pack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.studio-pack-head h3 { margin: 7px 0 0; font-family: var(--font-display); font-size: 1.28rem; }
.studio-pack-kicker { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.studio-pack-pro { padding: 4px 8px; border-radius: 999px; background: var(--glass-ink, #242424); color: #fff; font-weight: 700; }
.studio-pack-subtitle { margin: 5px 0 0; font-size: 0.82rem; }
.studio-pack-source { display: grid; gap: 10px; padding: 13px 14px; border: 1px solid rgba(39, 50, 74, 0.09); border-radius: 16px; background: rgba(255, 255, 255, 0.34); }
.studio-pack-source audio { width: 100%; height: 36px; }
.studio-pack-wave { height: 48px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.studio-pack-wave span { flex: 1 1 0; height: var(--studio-wave-height); min-width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(39, 50, 74, 0.72), rgba(39, 50, 74, 0.2)); }
.studio-pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.studio-pack-copy { padding: 14px; border: 1px solid rgba(39, 50, 74, 0.09); border-radius: 14px; background: rgba(255, 255, 255, 0.28); }
.studio-pack-copy p { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.studio-pack-copy .label-quiet { margin-bottom: 7px; font-size: 0.68rem; }
.studio-pack-status { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 13px; border-radius: 12px; background: rgba(39, 50, 74, 0.06); font-size: 0.78rem; }
.studio-pack-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #888; }
.studio-pack-status[data-status="queued"] .studio-pack-status-dot,
.studio-pack-status[data-status="running"] .studio-pack-status-dot { background: #4f82e8; box-shadow: 0 0 0 5px rgba(79, 130, 232, 0.12); animation: studio-pack-pulse 1.8s ease-in-out infinite; }
.studio-pack-status[data-status="completed"] .studio-pack-status-dot { background: #55a96e; }
.studio-pack-status[data-status="failed"] .studio-pack-status-dot,
.studio-pack-status[data-status="cancelled"] .studio-pack-status-dot { background: #b45656; }
.studio-pack-actions { margin-top: -2px; }
.studio-pack-actions .song-item-download { background: var(--glass-ink, #242424); color: #fff; border-color: transparent; }
.studio-pack-actions .song-item-download:hover { background: #000; }
.studio-pack-actions .studio-pack-previous-download {
  background: rgba(255, 255, 255, 0.3);
  color: var(--glass-ink, #242424);
  border-color: rgba(39, 50, 74, 0.24);
}
.studio-pack-actions .studio-pack-previous-download:hover { background: rgba(255, 255, 255, 0.58); }
.studio-pack-disclaimer { margin: -7px 0 0; font-size: 0.7rem; line-height: 1.45; }
@keyframes studio-pack-pulse { 50% { opacity: 0.46; transform: scale(0.84); } }
@media (prefers-reduced-motion: reduce) { .studio-pack-status-dot { animation: none !important; } }
@media (max-width: 650px) {
  .studio-pack-grid { grid-template-columns: 1fr; }
  .studio-pack-actions { align-items: stretch; }
  .studio-pack-actions > * { width: 100%; justify-content: center; }
}

/* Lyricist is a compact working surface inside Song drafts, not a second app. */
.lyricist-composer {
  margin-top: 14px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.lyricist-head,
.lyricist-suggestions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lyricist-head > div { min-width: 0; }
.lyricist-head .label-quiet { margin: 0; }
.lyricist-note,
.lyricist-status { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.4; }
.lyricist-suggestions-head { align-items: center; margin-top: 2px; }
.lyricist-suggestions-head button { font-size: 0.78rem; padding: 6px 9px; }
.lyricist-suggestions-action-slot { display: flex; justify-content: flex-end; }
.lyricist-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 0;
}
.lyricist-suggestions-empty {
  width: 100%;
  min-height: 74px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--glass-line) 76%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--glass-accent-blue) 13%, transparent), transparent 72%),
    color-mix(in srgb, var(--glass-surface, #fff) 58%, transparent);
}
.lyricist-suggestions-empty-title {
  margin: 0;
  color: var(--glass-ink);
  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.2;
}
.lyricist-suggestions-empty-copy {
  margin: 4px 0 0;
  max-width: 48ch;
  font-size: 0.75rem;
  line-height: 1.4;
}
.lyricist-suggestions-empty .lyricist-suggestions-action {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.74rem;
}
.lyricist-suggestions-empty.is-error {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--glass-accent-peach) 17%, transparent), transparent 72%),
    color-mix(in srgb, var(--glass-surface, #fff) 58%, transparent);
}
.lyricist-suggestions-loading-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-ink) 14%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .lyricist-suggestions-loading-mark {
    animation: lyricist-suggestion-loading 1.1s ease-in-out infinite alternate;
  }
}
@keyframes lyricist-suggestion-loading {
  from { transform: scaleX(0.42); opacity: 0.44; }
  to { transform: scaleX(1); opacity: 0.9; }
}
.lyricist-suggestion {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--glass-ink) 16%, transparent);
  background: color-mix(in srgb, var(--glass-surface, #fff) 62%, transparent);
  color: var(--glass-ink);
  font-size: 0.78rem;
  line-height: 1.15;
}
.lyricist-suggestion[aria-pressed="true"] {
  border-color: var(--glass-ink);
  background: var(--glass-ink);
  color: var(--glass-paper, #f6f9ff);
}
.lyricist-suggestion:focus-visible,
.lyricist-composer button:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 2px;
}
.lyricist-generate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lyricist-generate-hint {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--glass-line) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-accent-yellow) 24%, transparent);
  color: var(--glass-body);
  font-size: 0.72rem;
  line-height: 1.2;
}

/* ── Vocal Polish comparison table ── */

.vocal-polish-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(900px, calc(100vh - 32px));
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(39, 50, 74, 0.14);
  border-radius: clamp(24px, 3vw, 42px);
  color: var(--glass-body);
  background: rgba(246, 249, 255, 0.97);
  box-shadow: 0 30px 90px rgba(39, 50, 74, 0.2);
}

.vocal-polish-dialog::backdrop {
  background: rgba(25, 24, 23, 0.45);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.vocal-polish-shell {
  height: 100%;
  padding: clamp(20px, 3vw, 36px);
  overflow: auto;
  background:
    radial-gradient(circle at 8% 0%, rgba(207, 225, 251, 0.32), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(49, 95, 155, 0.18), transparent 34%);
}

.vocal-polish-header,
.vocal-polish-project-head,
.vocal-polish-lane-head,
.vocal-polish-edit-head,
.vocal-polish-edit-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.vocal-polish-header {
  margin-bottom: 24px;
}

.vocal-polish-header h2 {
  margin: 5px 0 3px;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
}

.vocal-polish-kicker,
.vocal-polish-subtitle,
.vocal-polish-setup h3,
.vocal-polish-setup p,
.vocal-polish-project-head h3,
.vocal-polish-edit h3,
.vocal-polish-edit p {
  margin-top: 0;
}

.vocal-polish-subtitle {
  margin-bottom: 0;
}

.vocal-polish-close {
  flex: 0 0 auto;
}

.vocal-polish-setup {
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(320px, 1.3fr);
  gap: 24px;
  border: 1px solid rgba(39, 50, 74, 0.1);
}

.vocal-polish-setup h3,
.vocal-polish-project-head h3,
.vocal-polish-edit h3 {
  margin-bottom: 6px;
  font-size: 1.22rem;
}

.vocal-polish-upload-form {
  display: grid;
  gap: 13px;
}

.vocal-polish-drop {
  min-height: 86px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 9px;
  border: 1px dashed color-mix(in srgb, var(--glass-ink) 32%, var(--glass-line));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--glass-ink);
  cursor: pointer;
}

.vocal-polish-drop:focus-within {
  outline: 2px solid #3c6fe0;
  outline-offset: 3px;
}

.vocal-polish-drop input[type="file"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.76rem;
}

.vocal-polish-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vocal-polish-context-grid label {
  display: grid;
  gap: 6px;
}

.vocal-polish-analyze {
  justify-self: start;
}

.vocal-polish-recent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(39, 50, 74, 0.1);
}

.vocal-polish-recent label {
  grid-column: 1 / -1;
}

.vocal-polish-workspace {
  padding: 0;
  overflow: visible;
}

.vocal-polish-project-head {
  align-items: center;
  margin-bottom: 14px;
}

.vocal-polish-project-head .label-quiet {
  margin: 0 0 4px;
}

.vocal-polish-modebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(39, 50, 74, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
}

.vocal-polish-modebar p {
  margin: 0;
}

.vocal-polish-modebar .muted {
  margin-top: 3px;
  font-size: 0.72rem;
}

.vocal-polish-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(39, 50, 74, 0.065);
}

.vocal-polish-mode-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 13px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.vocal-polish-mode-switch button[data-vocal-polish-mode="listen"].is-active {
  border-color: rgba(36, 94, 214, 0.24);
  background: rgba(86, 139, 231, 0.14);
  color: #174ba8;
}

.vocal-polish-mode-switch button[data-vocal-polish-mode="improve"].is-active {
  border-color: rgba(144, 117, 29, 0.26);
  background: rgba(207, 225, 251, 0.42);
  color: #675111;
}

.vocal-polish-mode-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.vocal-polish-mode-swatch.is-listen {
  background: #245ed6;
}

.vocal-polish-mode-swatch.is-improve {
  background: #c4a83e;
}

.vocal-polish-transport {
  min-height: 54px;
  margin-bottom: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(39, 50, 74, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

.vocal-polish-ab {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(39, 50, 74, 0.07);
}

.vocal-polish-ab button {
  min-width: 98px;
  padding: 7px 12px;
  border-color: transparent;
}

.vocal-polish-ab button[aria-pressed="true"] {
  background: #fff;
  border-color: rgba(39, 50, 74, 0.12);
  box-shadow: 0 2px 8px rgba(39, 50, 74, 0.08);
}

.vocal-polish-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--glass-label);
  font-size: 0.76rem;
}

.vocal-polish-loop {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.74rem;
}

.vocal-polish-loop input {
  width: auto;
}

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

.vocal-polish-lane {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(39, 50, 74, 0.11);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.34);
  transition: border-color 150ms ease, background-color 150ms ease;
}

.vocal-polish-lane.is-active {
  border-color: rgba(60, 111, 224, 0.55);
  background: rgba(255, 255, 255, 0.62);
}

.vocal-polish-lane-head {
  min-height: 38px;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.vocal-polish-lane-head select {
  cursor: pointer;
}

.vocal-polish-lane-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.vocal-polish-lane-head strong {
  color: var(--glass-ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.vocal-polish-lane-head .muted,
.vocal-polish-lane-head select {
  max-width: 58%;
  font-size: 0.72rem;
}

.vocal-polish-lane-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-ink);
  color: var(--glass-page);
  font-size: 0.72rem;
}

.vocal-polish-lane audio {
  display: none;
}

.vocal-polish-timeline-shell {
  position: relative;
}

.vocal-polish-canvas-stack {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(39, 50, 74, 0.1);
  border-radius: 14px;
  background: rgba(246, 249, 255, 0.88);
  cursor: crosshair;
  touch-action: none;
}

.vocal-polish-lane-play {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 17px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(29, 29, 29, 0.94);
  box-shadow: 0 12px 34px rgba(20, 20, 20, 0.24);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.vocal-polish-lane-play-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.65rem;
  line-height: 1;
}

.vocal-polish-lane-play-label {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vocal-polish-timeline-shell:hover .vocal-polish-lane-play,
.vocal-polish-timeline-shell:focus-within .vocal-polish-lane-play,
.vocal-polish-lane-play.is-playing {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.vocal-polish-lane-play:hover,
.vocal-polish-lane-play:focus-visible,
.vocal-polish-lane-play.is-playing {
  background: #111;
}

.vocal-polish-lane-play:focus-visible {
  outline: 2px solid #3c6fe0;
  outline-offset: 3px;
}

.vocal-polish-canvas-stack:focus-visible {
  outline: 2px solid #3c6fe0;
  outline-offset: 3px;
}

.vocal-polish-canvas-stack canvas {
  width: 100%;
  display: block;
}

.vocal-polish-wave {
  height: 118px;
  border-bottom: 1px solid rgba(39, 50, 74, 0.08);
}

.vocal-polish-spectrum {
  height: 92px;
}

.vocal-polish-edit {
  margin-top: 12px;
  padding: 17px 18px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(39, 50, 74, 0.11);
}

.vocal-polish-edit-head {
  align-items: center;
}

.vocal-polish-edit-head .label-quiet {
  margin: 0 0 4px;
}

.vocal-polish-region-inputs {
  display: flex;
  gap: 8px;
}

.vocal-polish-region-inputs label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--glass-label);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.vocal-polish-region-inputs input {
  width: 106px;
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
}

.vocal-polish-edit textarea {
  min-height: 72px;
  margin: 0;
}

.vocal-polish-edit-actions {
  align-items: center;
}

.vocal-polish-edit-actions p {
  margin-bottom: 0;
  font-size: 0.76rem;
}

.vocal-polish-status {
  min-height: 20px;
  margin: 14px 2px 0;
  font-size: 0.78rem;
}

.vocal-polish-status.is-error {
  color: #a32020;
}

@media (max-width: 760px) {
  .vocal-polish-dialog {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .vocal-polish-setup,
  .vocal-polish-compare {
    grid-template-columns: 1fr;
  }

  .vocal-polish-transport {
    border-radius: 18px;
    flex-wrap: wrap;
  }

  .vocal-polish-modebar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .vocal-polish-mode-switch,
  .vocal-polish-mode-switch button {
    flex: 1 1 0;
  }

  .vocal-polish-time {
    margin-left: 0;
  }

  .vocal-polish-loop {
    margin-left: auto;
  }

  .vocal-polish-edit-head,
  .vocal-polish-edit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vocal-polish-region-inputs input {
    width: 100%;
  }

  .vocal-polish-region-inputs label {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vocal-polish-lane,
  .vocal-polish-lane-play {
    transition: none;
  }
}

@media (hover: none) {
  .vocal-polish-lane-play {
    top: 18px;
    right: 12px;
    min-height: 38px;
    padding: 0 12px 0 9px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .vocal-polish-timeline-shell:hover .vocal-polish-lane-play,
  .vocal-polish-timeline-shell:focus-within .vocal-polish-lane-play,
  .vocal-polish-lane-play.is-playing {
    transform: none;
  }
}

/* Keep the audition control dark after the generic Observatory button states. */
.vocal-polish-timeline-shell .vocal-polish-lane-play,
.vocal-polish-timeline-shell .vocal-polish-lane-play:hover:not(:disabled),
.vocal-polish-timeline-shell .vocal-polish-lane-play:focus-visible,
.vocal-polish-timeline-shell .vocal-polish-lane-play.is-playing {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(17, 17, 17, 0.96);
  color: #fff;
}
.song-lyrics-editor {
  display: grid;
  gap: 10px;
}
.song-lyrics-editor textarea { min-height: 188px; }
.sound-recipe-editor {
  margin: 20px 0 18px;
  padding: 0 18px 18px;
  border: 1px solid var(--glass-line, var(--line, #cecac8));
  border-radius: var(--radius-nested);
  background: color-mix(in srgb, var(--glass-page) 64%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
  overflow: hidden;
}
.sound-recipe-editor:not([open]) {
  padding-bottom: 0;
}

.sound-recipe-editor summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin: 0 -18px;
  padding: 0 18px;
  cursor: pointer;
  color: var(--glass-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  list-style: none;
  background: color-mix(in srgb, var(--glass-accent-blue) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-line) 72%, transparent);
}
.sound-recipe-editor:not([open]) summary {
  border-bottom-color: transparent;
}

.sound-recipe-summary-title {
  flex: 0 0 auto;
  font-weight: 600;
}

.sound-recipe-summary-meta {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--glass-label);
  font-size: 0.68rem;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-recipe-editor summary::-webkit-details-marker { display: none; }
.sound-recipe-editor summary::before {
  width: 7px;
  height: 7px;
  content: "";
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.sound-recipe-editor[open] summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.sound-recipe-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding-top: 20px;
}
.sound-recipe-field { display: grid; gap: 8px; min-width: 0; font-size: 0.68rem; }
.sound-recipe-field > span { padding-left: 2px; line-height: 1.2; }
.sound-recipe-field input,
.sound-recipe-field select { width: 100%; min-width: 0; min-height: 42px; }
.sound-recipe-field--arrangement { grid-column: 1 / -1; }

.sound-recipe-choices {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 18px -4px 0;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--glass-line) 76%, transparent);
  border-radius: var(--radius-mini);
  background: color-mix(in srgb, var(--glass-accent-blue) 13%, transparent);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.sound-recipe-choice {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 13px;
  border-color: color-mix(in srgb, var(--glass-line) 92%, transparent);
  background: color-mix(in srgb, var(--glass-page) 78%, var(--glass-accent-blue));
  letter-spacing: 0.06em;
  white-space: nowrap;
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.sound-recipe-choice:hover:not(:disabled) {
  border-color: var(--glass-ink);
  background: color-mix(in srgb, var(--glass-ink) 8%, transparent);
}

.sound-recipe-choice[aria-pressed="true"] {
  color: #f6f9ff;
  border-color: var(--glass-ink);
  background: var(--glass-ink);
}

.sound-recipe-surprise {
  min-width: 224px;
  min-height: 46px;
  margin-top: 18px;
}

.sound-recipe-loading-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.square-11-loader {
  display: grid;
  grid-template-columns: repeat(5, 4px);
  grid-template-rows: repeat(5, 4px);
  gap: 3px;
  width: 32px;
  height: 32px;
  place-content: center;
  flex: 0 0 32px;
}

.square-11-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  box-shadow: 0 0 0 currentColor;
  animation: sound-recipe-square-11 1.25s ease-in-out infinite;
}

.sound-recipe-loading-label {
  color: #f6f9ff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes sound-recipe-square-11 {
  0%, 100% { opacity: 0.18; box-shadow: 0 0 0 transparent; transform: scale(0.8); }
  28% { opacity: 0.98; box-shadow: 0 0 9px rgba(246, 249, 255, 0.82); transform: scale(1); }
  56% { opacity: 0.48; box-shadow: 0 0 3px rgba(246, 249, 255, 0.38); transform: scale(0.92); }
}

@media (max-width: 640px) {
  .sound-recipe-editor { padding: 0 14px 14px; }
  .sound-recipe-editor summary { margin: 0 -14px; padding: 0 14px; min-height: 50px; }
  .sound-recipe-fields { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .sound-recipe-field--arrangement { grid-column: auto; }
  .sound-recipe-choices { margin-top: 16px; }
  .sound-recipe-surprise { width: 100%; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .square-11-dot { animation: none; opacity: 0.72; transform: none; box-shadow: none; }
}
.song-lyrics-editor-actions { margin-top: 2px; }
.song-lyrics-editor-meta { margin: 0; font-size: 0.75rem; }

.lyria-audition {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 184px;
  margin-top: 24px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glass-line) 82%, var(--glass-accent-blue));
  border-radius: var(--radius-nested);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--glass-accent-blue) 30%, transparent) 0, transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--glass-page) 84%, white) 0%, color-mix(in srgb, var(--glass-accent-yellow) 14%, var(--glass-page)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.lyria-audition-head,
.lyria-audition-title-row,
.lyria-audition-kicker,
.lyria-audition-actions {
  display: flex;
  align-items: center;
}

.lyria-audition-head { justify-content: space-between; gap: 18px; }
.lyria-audition-identity { display: grid; gap: 7px; }
.lyria-audition-title-row { gap: 10px; }
.lyria-audition-title-row h5 { margin: 0; font-family: var(--font-serif); font-size: 1.02rem; }
.lyria-audition-kicker {
  gap: 9px;
  margin: 0;
  color: var(--glass-label);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lyria-audition-team {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--glass-accent-mint) 62%, var(--glass-line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--glass-ink) 82%, #0a7d4c);
  background: color-mix(in srgb, var(--glass-accent-mint) 32%, transparent);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.lyria-audition-duration {
  color: var(--glass-label);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lyria-audition-lock {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--glass-line) 82%, transparent);
  border-radius: 50%;
  color: var(--glass-label);
  background: color-mix(in srgb, white 36%, transparent);
}

.lyria-audition-body { display: grid; gap: 13px; }
.lyria-audition-copy { max-width: 660px; margin: 0; font-size: 0.86rem; line-height: 1.5; }
.lyria-audition-status { min-height: 1.35em; margin: 0; font-size: 0.72rem; line-height: 1.45; }
.lyria-audition-actions { flex-wrap: wrap; gap: 9px; }
.lyria-audition-actions button { min-height: 42px; }
.lyria-audition-preview,
.lyria-audition-keep {
  min-width: 168px;
  border-color: color-mix(in srgb, var(--glass-line) 94%, var(--glass-ink));
  background: color-mix(in srgb, white 44%, transparent);
}

.lyria-audition-preview:hover:not(:disabled),
.lyria-audition-keep:hover:not(:disabled) {
  border-color: var(--glass-ink);
  background: color-mix(in srgb, var(--glass-ink) 7%, transparent);
}

.lyria-audition-keep {
  border-color: color-mix(in srgb, var(--glass-accent-mint) 54%, var(--glass-line));
  background: color-mix(in srgb, var(--glass-accent-mint) 22%, white);
}

.lyria-audition-preview.is-loading {
  width: 196px;
  color: var(--glass-ink);
  background: color-mix(in srgb, var(--glass-accent-blue) 26%, white);
}

.lyria-audition .square-11-loader { transform: scale(0.74); transform-origin: center; }
.lyria-audition .square-11-dot { color: var(--glass-ink); }
.lyria-audition .sound-recipe-loading-label { color: currentColor; }
.lyria-audition-remove {
  min-width: auto;
  padding-inline: 10px;
  border-color: transparent;
  color: var(--glass-label);
  background: transparent;
}
.lyria-audition-remove:hover:not(:disabled) { color: var(--glass-ink); border-color: var(--glass-line); }
.lyria-audition-audio { width: 100%; max-width: 640px; }
.lyria-audition[data-state="failed"],
.lyria-audition[data-state="rate_limited"] {
  border-color: color-mix(in srgb, var(--error, #9b3f36) 34%, var(--glass-line));
}
.song-production-note { margin: 7px 0 0; font-size: 0.7rem; line-height: 1.45; }

@media (max-width: 640px) {
  .sound-recipe-summary-meta { max-width: 48%; }
  .lyria-audition { min-height: 208px; padding: 18px 16px; }
  .lyria-audition-actions { align-items: stretch; flex-direction: column; }
  .lyria-audition-actions button { width: 100%; }
  .lyria-audition-preview.is-loading { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sound-recipe-editor summary::before { transition: none; }
  .lyria-audition * { scroll-behavior: auto; }
}
@media (max-width: 560px) {
  .lyricist-head,
  .lyricist-suggestions-head { align-items: center; }
  .lyricist-composer { padding: 14px; }
  .lyricist-suggestions-empty { align-items: flex-start; flex-direction: column; min-height: 82px; }
  .lyricist-suggestions-empty .lyricist-suggestions-action { width: 100%; }
}

.song-item-meta {
  margin: 0;
  font-size: 11px;
  color: var(--glass-label);
}

@keyframes song-ready-arrive {
  from {
    opacity: 0.58;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .song-item.is-new {
    animation: none;
  }
}

/* ── Glass art gallery (dark luxury for generated images) ── */

.glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
  justify-content: start;
}

/* Generate CTA lives under the gallery in document flow — never fixed over images. */
.glass-generate-bar {
  display: flex;
  justify-content: stretch;
  margin-top: 14px;
}

.glass-generate-cta {
  width: 100%;
  max-width: none;
  justify-content: center;
}

.glass-toolbar-meta {
  margin-bottom: 4px;
}

.glass-item {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-nested);
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.glass-item-media { position: relative; }

.glass-item-media .glass-item-info {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  transition: opacity 0.12s ease, background 0.12s ease;
  text-transform: none;
  letter-spacing: normal;
}

.glass-item:hover .glass-item-info { opacity: 1; }
.glass-item-media .glass-item-info:hover:not(:disabled) { background: rgba(40, 40, 40, 0.95); border-color: transparent; transform: none; }
.glass-item-media .glass-item-info.is-open,
.glass-item-media .glass-item-info.is-open:hover:not(:disabled) { background: rgba(169, 201, 247, 0.35); color: var(--glass-ink); }

.glass-item-prompt {
  position: absolute;
  top: 36px;
  right: 6px;
  left: 6px;
  z-index: 3;
  max-height: 40%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.94);
  color: rgba(246, 249, 255, 0.88);
  font-size: 11px;
  line-height: 1.45;
  font-family: var(--font-mono);
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-item-media .glass-item-delete {
  position: absolute;
  top: 6px;
  left: 6px;
  right: auto;
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.88;
  transition: opacity 0.12s ease, background 0.12s ease;
  text-transform: none;
  letter-spacing: normal;
}

.glass-item:hover .glass-item-delete { opacity: 1; }
.glass-item-media .glass-item-delete:hover:not(:disabled) { background: rgba(160, 32, 32, 0.92); border-color: transparent; transform: none; }
.glass-item-delete:disabled { opacity: 0.5; cursor: not-allowed; }

.glass-item-media .glass-item-publish {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.glass-item:hover .glass-item-publish { opacity: 1; }
.glass-item-media .glass-item-publish:hover:not(:disabled) { background: rgba(40, 40, 40, 0.95); border-color: transparent; transform: none; }
.glass-item-media .glass-item-publish.is-armed,
.glass-item-media .glass-item-publish.is-armed:hover:not(:disabled) { background: var(--glass-ink); opacity: 1; }
.glass-item-publish:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }

.glass-item-link { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.glass-item-link:hover img { opacity: 0.92; }

.glass-item-link img.is-expanding-source {
  opacity: 0;
  pointer-events: none;
}

.glass-item-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: -2px;
}

/* ── Glass artifact expand (Motion / Framer-style FLIP) ── */

body.glass-expand-open {
  overflow: hidden;
}

.glass-expand-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.glass-expand-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: zoom-out;
  background: rgba(10, 10, 10, 0.78) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: none !important;
  transform: none !important;
  letter-spacing: normal;
  text-transform: none;
}

.glass-expand-backdrop:hover {
  background: rgba(10, 10, 10, 0.78) !important;
  transform: none !important;
  border-color: transparent !important;
}

.glass-expand-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glass-expand-flyer {
  position: fixed;
  z-index: 2;
  display: block;
  margin: 0;
  object-fit: cover;
  background: #0a0a0a;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
  will-change: transform, filter, border-radius;
  user-select: none;
  -webkit-user-drag: none;
}

.glass-expand-chrome {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(920px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  color: rgba(246, 249, 255, 0.88);
  font-family: var(--font-mono);
  will-change: transform, opacity;
}

.glass-expand-caption {
  margin: 0;
  min-width: 0;
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(246, 249, 255, 0.72);
}

.glass-expand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.glass-expand-open-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(246, 249, 255, 0.92);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.glass-expand-open-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}

.glass-expand-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.glass-expand-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .glass-expand-flyer,
  .glass-expand-chrome,
  .glass-expand-backdrop {
    transition: none !important;
  }
}

.glass-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #111;
  transition: opacity 0.12s ease;
}

.glass-item figcaption {
  padding: 8px;
  font-size: 11px;
  color: rgba(246, 249, 255, 0.65);
  letter-spacing: 0.04em;
}

/* AICSS-inspired image generation loader */
.glass-item-generating {
  background: #0a0a0a;
}

.ig-gen {
  display: block;
}

.ig-gen-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-nested) - 2px);
  background: #0c0c0c;
  overflow: hidden;
  isolation: isolate;
}

.ig-gen-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 72%);
  animation: ig-gen-dots 2.2s ease-in-out infinite;
}

.ig-gen-glow {
  position: absolute;
  inset: 22%;
  background: radial-gradient(circle, rgba(169, 201, 247, 0.28), transparent 68%);
  animation: ig-gen-glow 2.8s ease-in-out infinite;
  pointer-events: none;
}

.ig-gen-res {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(246, 249, 255, 0.55);
  font-family: var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

@keyframes ig-gen-dots {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

@keyframes ig-gen-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ── Song DNA proof object ── */

.dna-detail { margin-bottom: 16px; }

.dna-proof-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dna-proof-header h2 { margin: 0 0 4px; }

.dna-proof-toolbar { margin: 0; }

.dna-proof-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.05fr) minmax(220px, 0.95fr);
  gap: 14px;
  align-items: stretch;
}

.dna-proof-grid.is-single {
  grid-template-columns: 1fr;
}

.dna-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.dna-title-row h2 {
  margin: 0;
}

.dna-lyrics-info {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.35);
  color: var(--glass-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dna-lyrics-info:hover:not(:disabled),
.dna-lyrics-info:focus-visible {
  transform: none;
  background: rgba(255, 255, 255, 0.55);
}

.dna-lyrics-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(420px, calc(100vw - 48px));
  max-height: min(360px, 50vh);
  overflow: auto;
  padding: 14px 16px;
  border-radius: var(--radius-nested);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(246, 249, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px -24px rgba(39, 50, 74, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dna-lyrics-anchor:hover .dna-lyrics-pop,
.dna-lyrics-anchor:focus-within .dna-lyrics-pop,
.dna-lyrics-anchor.is-open .dna-lyrics-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dna-lyrics-pop-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glass-label);
}

.dna-lyrics-pop-text {
  margin: 0;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
  color: var(--glass-body);
  font-family: var(--font-mono);
}

.dna-section {
  padding: 0;
}

.dna-section-summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.dna-section-summary::-webkit-details-marker {
  display: none;
}

.dna-section-summary::after {
  content: "▾";
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.dna-section:not([open]) > .dna-section-summary::after {
  transform: rotate(-90deg);
}

.dna-section-body {
  padding: 0 16px 14px;
}

.dna-section-body > :first-child {
  margin-top: 0;
}

.dna-section-summary {
  margin: 0;
}

.dna-sections {
  display: grid;
  gap: 10px;
}

.dna-lamp {
  --lamp-x: 50%;
  --lamp-y: 46%;
  --lamp-r: 108px;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  border-radius: var(--radius-nested);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(160deg, rgba(207, 225, 251, 0.38), transparent 48%),
    rgba(255, 255, 255, 0.16);
}

.dna-lamp-grid {
  position: absolute;
  inset: 16px 14px 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  z-index: 1;
}

.dna-lamp-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.28);
}

.dna-lamp-tile:focus-visible {
  outline: 2px solid rgba(207, 225, 251, 0.95);
  outline-offset: 2px;
}

.dna-lamp-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dna-lamp-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--wash-alpha, 0.7);
  background: radial-gradient(
    ellipse var(--wash-rx, 70%) var(--wash-ry, 58%) at var(--wash-x, 40%) var(--wash-y, 38%),
    var(--wash-color, var(--glass-accent-peach)),
    transparent 72%
  );
}

.dna-lamp-print {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dna-lamp-print::before {
  opacity: 1;
}

.dna-lamp-tile.is-lit .dna-lamp-print {
  opacity: 1;
}

.dna-lamp-latent {
  filter: grayscale(0.28) saturate(0.78) brightness(1.03);
}

.dna-lamp-tile em {
  position: absolute;
  left: 10px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--glass-ink);
  opacity: 0.42;
  line-height: 1.2;
  pointer-events: none;
}

.dna-lamp-kind {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glass-label);
  opacity: 0.5;
  pointer-events: none;
}

.dna-lamp-tile.is-lit em {
  opacity: 0.92;
}

.dna-lamp-tile.is-lit .dna-lamp-kind {
  opacity: 0.85;
}

.dna-lamp-spot {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.dna-lamp.is-live .dna-lamp-spot {
  opacity: 1;
}

.dna-lamp-read {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.dna-lamp-read-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glass-label);
}

.dna-lamp-read-quote {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--glass-ink);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .dna-lamp-spot { display: none; }
  .dna-lamp-tile em { opacity: 0.92; }
  .dna-lamp-kind { opacity: 0.85; }
}

.dna-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dna-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  line-height: 1.35;
}

.dna-prose p,
.dna-archetype-tier p,
.dna-visual-group p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
}

.dna-prose p:last-child,
.dna-archetype-tier p:last-child,
.dna-visual-group p:last-child { margin-bottom: 0; }

.dna-palette-row,
.dna-archetype-tier,
.dna-visual-group {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.dna-palette-row:last-child,
.dna-archetype-tier:last-child,
.dna-visual-group:last-child { margin-bottom: 0; }

.search-result {
  padding: 12px 14px;
  margin-top: 8px;
  transition: transform 0.2s ease;
}

.search-result:hover { transform: translateY(-2px); }

.search-result p { margin: 0; }

.glass-toolbar {
  position: relative;
}

/* ── Footer (editorial nested panel on glass) ── */

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ice-line);
}

.app-footer-copy {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glass-label);
}

.app-footer-logo {
  flex-shrink: 0;
  display: block;
  height: 10px;
  width: auto;
  filter: grayscale(1) opacity(0.45);
}

body.sidebar-open { overflow: hidden; }

@media (max-width: 1023px) {
  .studio-layout {
    grid-template-columns: 1fr;
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  }

  .menu-button { display: inline-grid; }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(39, 50, 74, 0.24);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  aside.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    min-height: 0;
    width: min(320px, calc(100vw - 24px));
    z-index: 190;
    max-height: none;
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    border-right: 1px solid var(--ice-line);
    box-shadow: 0 24px 70px -32px rgba(49, 95, 155, 0.6);
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.2s ease;
  }

  aside.sidebar.is-open { transform: translateX(0); }

  .stats { grid-template-columns: repeat(2, minmax(90px, 1fr)); }

  .dna-proof-grid,
  .grid { grid-template-columns: 1fr; }

  .dna-lamp { min-height: 320px; }

  .studio-main { padding: 14px 14px 24px; gap: 14px; }

  .overview { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  .utility-header { min-height: 64px; padding: 10px 12px; gap: 10px; }

  .utility-title strong { font-size: 17px; }

  .studio-panel { padding: 18px; }

  .song-list { grid-template-columns: 1fr; max-height: 320px; }

  .catalogue-search { grid-template-columns: 1fr; }

  .catalogue-search .primary { justify-self: start; }
}

/* ── Lightweight toast ── */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--radius-mini);
  border: 1px solid rgba(191, 209, 232, 0.85);
  background: rgba(246, 249, 255, 0.92);
  color: var(--glass-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  box-shadow:
    0 12px 32px rgba(39, 50, 74, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-toast.is-error {
  border-color: rgba(49, 95, 155, 0.75);
  background: rgba(230, 240, 254, 0.95);
}

.app-toast.is-success {
  border-color: rgba(75, 127, 196, 0.65);
  background: rgba(230, 240, 254, 0.95);
}

button.is-saved,
button.is-saved:disabled {
  opacity: 0.85;
  cursor: default;
  background: rgba(169, 201, 247, 0.35);
  border-color: rgba(169, 201, 247, 0.65);
  color: var(--glass-ink);
}

/* ── Whitelist admin panel ── */

.whitelist-panel {
  margin: 0;
}

.whitelist-head {
  display: flex;
  align-items: center;
  padding-right: 44px; /* clear the absolute collapse toggle */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.whitelist-head h2 {
  margin: 2px 0 0;
  font-size: 17px;
}

.whitelist-hint {
  margin: 0 0 14px;
  font-size: 12px;
}

.whitelist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whitelist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--ice-line, rgba(102, 133, 180, 0.28));
  border-radius: var(--radius-mini, 10px);
  background: rgba(255, 255, 255, 0.55);
}

.whitelist-info {
  min-width: 0;
}

.whitelist-name {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.whitelist-email,
.whitelist-date {
  margin: 2px 0 0;
  font-size: 12px;
}

.whitelist-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
}

.whitelist-social {
  font-size: 12px;
}

.whitelist-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Catalog admin panel ── */

.catalog-panel { margin: 0; }

.catalog-summary {
  margin: 0 0 12px;
  font-size: 12px;
}

.catalog-add {
  margin: 0 0 14px;
  border: 1px solid var(--ice-line, rgba(102, 133, 180, 0.28));
  border-radius: var(--radius-mini, 10px);
  padding: 10px 14px;
}

.catalog-add > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.catalog-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.catalog-form input,
.catalog-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.catalog-form textarea { min-height: 180px; resize: vertical; }

.catalog-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.catalog-file {
  margin-right: auto;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.catalog-form-status { margin: 0; font-size: 12px; }

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--ice-line, rgba(102, 133, 180, 0.28));
  border-radius: var(--radius-mini, 10px);
  background: rgba(255, 255, 255, 0.55);
}

.catalog-row.is-hidden { opacity: 0.6; }

.catalog-edit {
  margin: -4px 0 4px;
  padding: 10px 14px;
  border: 1px dashed var(--ice-line, rgba(102, 133, 180, 0.28));
  border-radius: var(--radius-mini, 10px);
}

.catalog-info { min-width: 0; }

.catalog-name {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 5px;
}

.catalog-chip {
  padding: 2px 7px;
  border: 1px solid var(--glass-line, rgba(102, 133, 180, 0.28));
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.catalog-chip.is-ok { color: var(--glass-ink, #1a2a44); }
.catalog-chip.is-missing { color: var(--glass-label, #7a8699); border-style: dashed; }

.catalog-album { font-size: 11px; }

.catalog-run { margin: 5px 0 0; font-size: 11px; }
.catalog-run.is-error { color: var(--nordic-error, #b3261e); }

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .catalog-row { flex-direction: column; align-items: stretch; }
  .catalog-actions { justify-content: flex-start; }
}

/* ── Public /apply page ── */

.apply-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--glass-page);
  color: var(--glass-body);
  font-family: var(--font-mono);
}

.apply-wrap {
  width: 100%;
  max-width: 480px;
}

.apply-panel {
  width: 100%;
  padding: 32px 28px;
}

.apply-title {
  margin: 4px 0 8px;
  font-size: 20px;
}

.apply-form {
  margin-top: 18px;
}

.apply-logo {
  display: block;
  margin-bottom: 18px;
}

.song-lyrics-policy-error {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--error, #9b3f36) 55%, transparent);
  background: color-mix(in srgb, var(--error, #9b3f36) 12%, transparent);
  color: var(--text, inherit);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Email sign-in (sign-in.js): email → code, notices, hints ── */

.gate-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.gate-lead b { font-weight: 600; }

.gate-hint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.gate-access-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gate-notice {
  margin: 0 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft, rgba(0, 0, 0, 0.12));
  border-radius: var(--radius-mini, 4px);
  background: rgba(0, 0, 0, 0.03);
  color: var(--glass-ink);
  font-size: 12px;
  line-height: 1.5;
}

/* one wide field for all six digits: paste and autofill land in one place */
.gate-input.gate-otp {
  font-size: 22px;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gate-input.gate-otp::placeholder {
  letter-spacing: 0.4em;
  opacity: 0.35;
}

.gate-code-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
}

html[data-theme] .gate-link-btn {
  min-height: 32px;
  border-radius: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--glass-ink);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html[data-theme] .gate-link-btn:is(:hover, :active):not(:disabled) {
  background: none;
  color: var(--glass-ink);
  text-decoration-thickness: 2px;
}

html[data-theme] .gate-link-btn:disabled {
  color: var(--glass-label);
  text-decoration: none;
  cursor: default;
}

.gate-hints {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
}

.gate-hints li + li { margin-top: 4px; }

/* ── Work deep link (work-view.js, #works/<kind>/<id>) ── */

.work-view {
  max-width: 720px;
  margin: 0 auto;
}

.work-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--glass-label);
  font-size: 12px;
  text-decoration: none;
}

.work-back:hover { color: var(--glass-ink); }

.work-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

/* kind · date over the title, which has the card's full width */
.work-kind { margin: 0 0 6px; }

.work-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* the work's icon row (.sm-ico), left-aligned under its player, image or text */
.work-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-left: -8px; /* the icons' own padding lines the glyphs up with the text */
}

/* the record sleeve (cover = play button) beside the song's data */
.work-song {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.work-sleeve { --sleeve: 188px; }

.work-song-info {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.work-audio {
  display: block;
  width: 100%;
}

/* the /t/ page's data list, in the app's type */
.work-data {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}

.work-data dt { color: var(--glass-label); }
.work-data dd { margin: 0; color: var(--glass-ink); overflow-wrap: anywhere; }

.work-author {
  margin: 4px 0 0;
  font-size: 13px;
}

.work-disclosure {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.work-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--line-soft, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-mini, 4px);
  background: rgba(0, 0, 0, 0.03);
  color: var(--glass-label);
}

.work-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-image { max-width: 560px; width: 100%; }

html[data-theme] .work-lyrics {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
}

.work-note { margin: 0; font-size: 13px; line-height: 1.5; }

.work-card.is-empty { gap: 10px; }
.work-card.is-empty button { justify-self: start; margin-top: 6px; }

/* the library empty-state glyph (.visions-empty-glyph): muted ring, icon inside */
.work-empty-glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: 1px solid var(--glass-line, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  background: var(--nordic-surface, transparent);
  color: var(--glass-label);
}

@media (max-width: 640px) {
  .work-card { padding: 16px; gap: 16px; }
  .work-song { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .work-sleeve { --sleeve: 168px; justify-self: center; }
}

/* magic-link interstitial (/auth/link, both runtimes): auto-posts, button is the no-JS fallback */
.link-panel .apply-title { margin-top: 0; }
.link-sub { margin: 0 0 20px; font-size: 13px; }
.link-hint { margin-top: 18px; }