:root {
  --success: #5fbf9d;
  --danger: #d97088;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.hero h1 .hero-line--main {
  color: var(--navy);
}

.hero h1 .hero-line--accent {
  color: #50aeda;
}

.site-header,
.hero,
.studio-shell,
.how article,
button,
a,
select {
  transition: background-color .22s, border-color .22s, color .22s, transform .2s, box-shadow .2s;
}

.dropzone:focus-visible,
.preset:focus-visible,
.master-button:focus-visible {
  outline: 3px solid #2a8fb9;
  outline-offset: 3px;
}

.step-label {
  opacity: .64;
}

.step-label.is-active,
.step-label.is-done {
  opacity: 1;
  color: var(--navy);
}

.step-label.is-done b {
  color: #256f59;
  background: #cbeadd;
  border-color: #9cd1bf;
}

.step-label.is-active b {
  color: var(--navy);
  background: #a7dff5;
  border-color: #a7dff5;
}

#workbench {
  min-width: 0;
}

.workspace[aria-busy="true"] {
  cursor: wait;
}

.workspace[aria-busy="true"] .dropzone {
  pointer-events: none;
  opacity: .72;
}

.waveform span {
  transition: height .22s, background-color .22s;
}

.audio-player {
  color-scheme: light;
}

.preset b span {
  display: inline;
}

.master-button:hover:not(:disabled),
.download:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px #193d4f3b;
}

.progress-track[role="progressbar"] {
  overflow: hidden;
}

.result-card {
  animation: result-in .42s ease both;
}

.error-card {
  animation: result-in .25s ease both;
}

.toast {
  text-align: center;
}

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

html[data-theme="dark"] .hero h1 .hero-line--main {
  color: #e8f7fd;
}

html[data-theme="dark"] .hero h1 .hero-line--accent {
  color: #72ccef;
}

html[data-theme="dark"] .step-label.is-active,
html[data-theme="dark"] .step-label.is-done {
  color: #e8f7fd;
}

html[data-theme="dark"] .step-label.is-done b {
  color: #b9ead9;
  background: #1c4b3d;
  border-color: #397a65;
}

html[data-theme="dark"] .audio-player {
  color-scheme: dark;
}

@media (max-width: 1000px) {
  .studio-grid {
    grid-template-columns: 86px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 42px;
  }

  .workspace {
    min-width: 0;
  }

  .track-card {
    padding: 14px;
  }

  .waveform {
    height: 68px;
  }

  .result-actions .download,
  .result-actions button {
    min-height: 42px;
  }
}

.result-summary {
  grid-column: 1 / -1;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 0.75rem;
  background: rgba(201, 162, 39, 0.08);
  color: var(--text-strong, #f7f3e8);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mix-eq {
  --eq-low: #d69532;
  --eq-mid: #208c7b;
  --eq-high: #3978bd;
  position: relative;
  overflow: hidden;
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid rgba(24, 39, 43, 0.16);
  border-radius: 1rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.82), rgba(232, 237, 231, 0.92)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(20, 37, 41, 0.035) 40px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 32px rgba(25, 39, 40, 0.08);
  color: #172629;
}

[data-theme="dark"] .mix-eq {
  border-color: rgba(230, 218, 179, 0.15);
  background:
    linear-gradient(115deg, rgba(29, 38, 39, 0.96), rgba(17, 25, 27, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.025) 40px);
  color: #f2eddd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 38px rgba(0, 0, 0, 0.25);
}

.mix-eq::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--eq-low), var(--eq-mid), var(--eq-high));
}

.mix-eq__header,
.mix-eq__actions,
.eq-band__top,
.eq-band__scale {
  display: flex;
  align-items: center;
}

.mix-eq__header {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mix-eq__eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  color: #758083;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.mix-eq h3 {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 1.18rem;
  letter-spacing: 0.08em;
}

.mix-eq h3 small {
  margin-left: 0.35rem;
  padding: 0.18rem 0.38rem;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 0.55rem;
  vertical-align: middle;
  opacity: 0.55;
}

.mix-eq__actions {
  gap: 0.45rem;
}

.mix-eq__actions button {
  min-height: 2rem;
  padding: 0.35rem 0.62rem;
  border: 1px solid rgba(35, 50, 52, 0.22);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font: 800 0.64rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}

[data-theme="dark"] .mix-eq__actions button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.mix-eq__actions button.is-active {
  border-color: #c7563d;
  background: #c7563d;
  color: #fff;
}

.eq-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.eq-band {
  display: block;
  padding: 0.8rem;
  border: 1px solid rgba(30, 47, 49, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.48);
  transition: opacity 180ms ease, transform 180ms ease;
}

[data-theme="dark"] .eq-band {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.eq-band__top {
  justify-content: space-between;
  gap: 0.5rem;
}

.eq-band__top b {
  font: 900 0.75rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.12em;
}

.eq-band__top em {
  color: #788285;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
}

.eq-band output {
  display: block;
  margin: 0.65rem 0 0.45rem;
  font: 800 1.25rem/1 "Trebuchet MS", sans-serif;
  font-variant-numeric: tabular-nums;
}

.eq-band--low output,
.eq-band--low .eq-band__top b { color: var(--eq-low); }
.eq-band--mid output,
.eq-band--mid .eq-band__top b { color: var(--eq-mid); }
.eq-band--high output,
.eq-band--high .eq-band__top b { color: var(--eq-high); }

.eq-band input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 0.45rem 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(79, 90, 92, 0.25), currentColor, rgba(79, 90, 92, 0.25));
  accent-color: currentColor;
  cursor: ew-resize;
}

.eq-band--low input { color: var(--eq-low); }
.eq-band--mid input { color: var(--eq-mid); }
.eq-band--high input { color: var(--eq-high); }

.eq-band__scale {
  justify-content: space-between;
  color: #858d8f;
  font-size: 0.55rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.eq-band__scale i {
  font-style: normal;
}

.mix-eq__note {
  margin: 0.8rem 0 0;
  color: #737e80;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.mix-eq__note span {
  margin-right: 0.35rem;
  color: #27a170;
  font-size: 0.55rem;
}

.mix-eq--bypassed .eq-band {
  opacity: 0.42;
}

.mix-eq--bypassed .mix-eq__note span {
  color: #c7563d;
}

@media (max-width: 720px) {
  .mix-eq__header {
    align-items: flex-start;
  }

  .eq-band-grid {
    grid-template-columns: 1fr;
  }

  .eq-band {
    padding: 0.75rem 0.85rem;
  }

  .eq-band output {
    margin-top: 0.45rem;
  }
}

.phase-one-suite {
  --lab-ink: #142427;
  --lab-paper: #f2f0e7;
  --lab-accent: #e2a52f;
  --lab-teal: #168878;
  --lab-red: #c7543d;
  margin: 1rem 0 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(20, 36, 39, 0.18);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 92% 0%, rgba(226, 165, 47, 0.19), transparent 31%),
    linear-gradient(135deg, #f8f6ef, #e9eee9 72%);
  color: var(--lab-ink);
  box-shadow: 0 18px 45px rgba(24, 42, 43, 0.11);
}

[data-theme="dark"] .phase-one-suite {
  --lab-ink: #f3eedf;
  --lab-paper: #172326;
  border-color: rgba(240, 226, 180, 0.16);
  background:
    radial-gradient(circle at 92% 0%, rgba(226, 165, 47, 0.16), transparent 31%),
    linear-gradient(135deg, #1b292b, #111b1e 72%);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.32);
}

.phase-one-suite__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem 1rem;
  border-bottom: 1px solid rgba(27, 44, 46, 0.12);
}

[data-theme="dark"] .phase-one-suite__header {
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.phase-one-suite__eyebrow,
.learn-intro > span,
.expert-intro span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--lab-teal);
  font: 900 0.62rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.18em;
}

.phase-one-suite__header h3,
.expert-intro h4,
.learn-intro h4,
.one-click-hero h4 {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

.phase-one-suite__header h3 {
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.phase-one-suite__header p {
  margin: 0.35rem 0 0;
  color: #6f7b7d;
  font-size: 0.82rem;
}

.phase-one-suite__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgba(22, 136, 120, 0.25);
  border-radius: 99px;
  background: rgba(22, 136, 120, 0.08);
  color: var(--lab-teal);
  font-size: 0.67rem;
  font-weight: 900;
}

.phase-one-suite__status i {
  width: 0.43rem;
  height: 0.43rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22, 136, 120, 0.13);
}

.phase-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(25, 42, 44, 0.12);
}

.phase-mode-tabs button {
  min-height: 4rem;
  padding: 0.75rem 0.85rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: rgba(255, 255, 255, 0.52);
  color: inherit;
  font: 900 0.78rem/1.2 "Trebuchet MS", sans-serif;
  cursor: pointer;
}

[data-theme="dark"] .phase-mode-tabs button {
  background: rgba(255, 255, 255, 0.035);
}

.phase-mode-tabs button small {
  display: block;
  margin-top: 0.28rem;
  color: #7c8587;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 700;
}

.phase-mode-tabs button.is-active {
  border-bottom-color: var(--lab-accent);
  background: var(--lab-paper);
  color: var(--lab-ink);
}

.phase-panel {
  padding: 1.15rem 1.25rem;
}

.phase-panel[hidden] {
  display: none !important;
}

.one-click-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  overflow: hidden;
  padding: 1.15rem;
  border: 1px solid rgba(226, 165, 47, 0.3);
  border-radius: 0.9rem;
  background:
    linear-gradient(110deg, rgba(15, 39, 43, 0.98), rgba(21, 74, 70, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, 0.035) 31px);
  color: #fff8e6;
}

.featured-preset-carousel {
  margin-bottom: 0.8rem;
}

.featured-preset-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.featured-preset-carousel__header > div:first-child b,
.featured-preset-carousel__header > div:first-child span {
  display: block;
}

.featured-preset-carousel__header > div:first-child b {
  color: var(--lab-teal);
  font: 900 0.6rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.14em;
}

.featured-preset-carousel__header > div:first-child span {
  margin-top: 0.2rem;
  color: #71858e;
  font-size: 0.58rem;
}

.featured-preset-carousel__controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.featured-preset-carousel__controls button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #bfd7e0;
  border-radius: 50%;
  background: #ffffff;
  color: #176f80;
  font-size: 1.2rem;
  cursor: pointer;
}

.featured-preset-carousel__controls button:hover {
  border-color: #55acbb;
  background: #eaf7f9;
}

.featured-preset-carousel__controls span {
  min-width: 3.3rem;
  color: #607b86;
  font: 900 0.6rem/1 "Trebuchet MS", sans-serif;
  text-align: center;
}

.featured-preset-track .featured-preset-slide {
  display: none;
}

.featured-preset-track .featured-preset-slide.is-active {
  display: grid;
  animation: featured-preset-enter 260ms ease both;
}

@keyframes featured-preset-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.featured-preset-dots {
  display: flex;
  justify-content: center;
  gap: 0.28rem;
  margin-top: 0.55rem;
}

.featured-preset-dots button {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #c4d8df;
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.featured-preset-dots button.is-active {
  width: 1.35rem;
  background: var(--lab-accent);
}

.featured-preset-slide[data-featured-tone="depth"] {
  background: linear-gradient(115deg, #183e58 0%, #1b6680 100%);
}

.featured-preset-slide[data-featured-tone="wide"],
.featured-preset-slide[data-featured-tone="air"] {
  background: linear-gradient(115deg, #164c65 0%, #188295 100%);
}

.featured-preset-slide[data-featured-tone="clean"],
.featured-preset-slide[data-featured-tone="stream"] {
  background: linear-gradient(115deg, #244b58 0%, #2d7783 100%);
}

.featured-preset-slide[data-featured-tone="voice"],
.featured-preset-slide[data-featured-tone="acoustic"] {
  background: linear-gradient(115deg, #1b5260 0%, #268a84 100%);
}

.featured-preset-slide[data-featured-tone="bass"],
.featured-preset-slide[data-featured-tone="club"] {
  background: linear-gradient(115deg, #173b46 0%, #176b70 100%);
}

.featured-preset-slide[data-featured-tone="warm"] {
  background: linear-gradient(115deg, #284b52 0%, #447e79 100%);
}

.featured-preset-slide[data-featured-tone="mono"] {
  background: linear-gradient(115deg, #253f49 0%, #526f78 100%);
}

.featured-preset-slide .one-click-8d.is-active {
  box-shadow: 0 0 0 3px rgba(117, 224, 231, 0.26), 0 10px 24px rgba(3, 47, 57, 0.28);
}

[data-theme="dark"] .featured-preset-carousel__controls button {
  border-color: rgba(109, 192, 208, 0.24);
  background: #173139;
  color: #70d2dc;
}

[data-theme="dark"] .featured-preset-dots button {
  background: #38545d;
}

.one-click-hero::after {
  content: "";
  position: absolute;
  width: 13rem;
  height: 13rem;
  right: -4rem;
  top: -6rem;
  border: 1px solid rgba(240, 189, 79, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(240, 189, 79, 0.035), 0 0 0 4rem rgba(240, 189, 79, 0.025);
  pointer-events: none;
}

.one-click-hero__copy {
  position: relative;
  z-index: 1;
}

.one-click-hero__copy > span {
  color: #e9b955;
  font: 900 0.58rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.17em;
}

.one-click-hero h4 {
  margin-top: 0.35rem;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
}

.one-click-hero p {
  max-width: 34rem;
  margin: 0.45rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  line-height: 1.55;
}

.one-click-8d {
  position: relative;
  z-index: 1;
  min-width: 11rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.8rem;
  background: linear-gradient(145deg, #e9b54b, #cf8128);
  color: #182527;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.one-click-8d > span {
  display: block;
  margin-bottom: 0.28rem;
  font: 900 1.45rem/1 "Trebuchet MS", sans-serif;
}

.one-click-8d b,
.one-click-8d small {
  display: block;
}

.one-click-8d b { font-size: 0.82rem; }
.one-click-8d small { margin-top: 0.2rem; font-size: 0.56rem; opacity: 0.72; }

.beginner-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.auto-recipe-card,
.auto-analysis-card {
  padding: 0.95rem;
  border: 1px solid rgba(27, 44, 46, 0.13);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .auto-recipe-card,
[data-theme="dark"] .auto-analysis-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.phase-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.phase-card-title > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--lab-ink);
  color: var(--lab-paper);
  font: 900 0.58rem/1 "Trebuchet MS", sans-serif;
}

.phase-card-title b,
.phase-card-title small {
  display: block;
}

.phase-card-title b { font-size: 0.78rem; }
.phase-card-title small { margin-top: 0.15rem; color: #7b8587; font-size: 0.58rem; }

.auto-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.auto-profile-group + .auto-profile-group {
  margin-top: 0.7rem;
}

.auto-profile-group > span {
  display: block;
  margin-bottom: 0.38rem;
  color: #788386;
  font: 900 0.52rem/1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.12em;
}

.auto-profile-grid button,
.smart-mix-button {
  padding: 0.68rem;
  border: 1px solid rgba(26, 44, 46, 0.15);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

[data-theme="dark"] .auto-profile-grid button,
[data-theme="dark"] .smart-mix-button {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
}

.auto-profile-grid button.is-active {
  border-color: var(--lab-accent);
  box-shadow: inset 0 0 0 1px var(--lab-accent);
}

.auto-profile-grid b,
.auto-profile-grid small {
  display: block;
}

.auto-profile-grid b { font: 900 0.68rem/1 "Trebuchet MS", sans-serif; }
.auto-profile-grid small { margin-top: 0.25rem; color: #7b8587; font-size: 0.57rem; }

.auto-intensity > span {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
}

.auto-intensity output {
  color: var(--lab-accent);
  font-weight: 900;
}

.auto-intensity input {
  width: 100%;
  margin: 0.65rem 0 0.3rem;
  accent-color: var(--lab-accent);
}

.auto-intensity > small,
.analysis-summary {
  color: #778284;
  font-size: 0.59rem;
  line-height: 1.5;
}

.smart-mix-button {
  width: 100%;
  margin-top: 0.65rem;
  border-color: rgba(22, 136, 120, 0.38);
  background: rgba(22, 136, 120, 0.1);
  color: var(--lab-teal);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.analysis-summary {
  min-height: 2.5rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.65rem;
  border-left: 3px solid var(--lab-teal);
  background: rgba(22, 136, 120, 0.055);
}

.module-signal-strip {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  margin-top: 0.8rem;
  padding-bottom: 0.2rem;
}

.module-signal-strip span {
  flex: 0 0 auto;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(28, 45, 47, 0.13);
  border-radius: 99px;
  color: #899194;
  font: 800 0.56rem/1 "Trebuchet MS", sans-serif;
}

.module-signal-strip span.is-on {
  border-color: rgba(22, 136, 120, 0.3);
  background: rgba(22, 136, 120, 0.09);
  color: var(--lab-teal);
}

.headphone-tip {
  margin: 0.65rem 0 0;
  color: #768184;
  font-size: 0.62rem;
  line-height: 1.5;
}

.headphone-tip b {
  margin-right: 0.35rem;
  color: var(--lab-accent);
}

.expert-intro,
.learn-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.expert-intro h4,
.learn-intro h4 { font-size: 1.15rem; }
.expert-intro p,
.learn-intro p { max-width: 29rem; margin: 0; color: #778184; font-size: 0.66rem; line-height: 1.55; }

.expert-module {
  margin-bottom: 0.55rem;
  border: 1px solid rgba(26, 44, 46, 0.13);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.44);
}

[data-theme="dark"] .expert-module {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.expert-module summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  list-style: none;
  cursor: pointer;
}

.expert-module summary::-webkit-details-marker { display: none; }
.expert-module summary > i { color: var(--lab-accent); font: 900 0.62rem/1 "Trebuchet MS", sans-serif; font-style: normal; }
.expert-module summary b { display: block; font-size: 0.76rem; }
.expert-module summary small { display: block; margin-top: 0.15rem; color: #7b8587; font-size: 0.58rem; }
.expert-module summary::after { content: "+"; margin-left: auto; font-size: 1rem; font-weight: 900; }
.expert-module[open] summary::after { content: "−"; }

.expert-module__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0 0.9rem 0.9rem;
}

.expert-control {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(9rem, 1.2fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(26, 44, 46, 0.1);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.42);
}

[data-theme="dark"] .expert-control {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.expert-control > span b,
.expert-control > span small { display: block; }
.expert-control > span b { font-size: 0.66rem; }
.expert-control > span small { margin-top: 0.12rem; color: #7d8789; font-size: 0.53rem; line-height: 1.35; }
.expert-control__input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.45rem; }
.expert-control input[type="range"] { width: 100%; accent-color: var(--lab-accent); }
.expert-control input[type="number"],
.expert-control select {
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(27, 44, 46, 0.18);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.65);
  color: inherit;
}

[data-theme="dark"] .expert-control input[type="number"],
[data-theme="dark"] .expert-control select {
  border-color: rgba(255, 255, 255, 0.13);
  background: #162326;
}

.expert-control output { min-width: 3.7rem; color: var(--lab-accent); font: 900 0.63rem/1 "Trebuchet MS", sans-serif; text-align: right; }
.expert-control--toggle input { width: 1.1rem; height: 1.1rem; margin-left: auto; accent-color: var(--lab-teal); }
.expert-control--wide { grid-column: 1 / -1; }

.eq-expert-band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 6.5rem repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid rgba(27, 44, 46, 0.1);
  border-radius: 0.58rem;
}

.eq-expert-band > b { align-self: center; color: var(--lab-teal); font-size: 0.66rem; }
.eq-expert-band label span { display: block; margin-bottom: 0.2rem; color: #7b8587; font-size: 0.5rem; font-weight: 800; }
.eq-expert-band input,
.eq-expert-band select { width: 100%; min-height: 2rem; }

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

.learn-card {
  position: relative;
  padding: 0.9rem 0.95rem 0.9rem 3rem;
  border: 1px solid rgba(27, 44, 46, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.44);
}

[data-theme="dark"] .learn-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.learn-card > span {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--lab-accent);
  color: #172427;
  font: 900 0.58rem/1 "Trebuchet MS", sans-serif;
}

.learn-card h5 { margin: 0; font-size: 0.78rem; }
.learn-card p { margin: 0.35rem 0 0; color: #737f81; font-size: 0.65rem; line-height: 1.58; }
.learn-card strong { color: var(--lab-teal); }

.phase-live-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  align-self: stretch;
  padding-bottom: 4px;
  background: rgba(20, 36, 39, 0.12);
}

.phase-live-meter > div:not(.phase-live-meter__bar) {
  padding: 0.72rem 1rem;
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .phase-live-meter > div:not(.phase-live-meter__bar) { background: rgba(255, 255, 255, 0.025); }
.phase-live-meter span,
.phase-live-meter b,
.phase-live-meter small { display: block; }
.phase-live-meter span { color: #7d8789; font: 800 0.52rem/1 "Trebuchet MS", sans-serif; letter-spacing: 0.11em; }
.phase-live-meter b { margin-top: 0.28rem; font: 900 1rem/1 "Trebuchet MS", sans-serif; font-variant-numeric: tabular-nums; }
.phase-live-meter small { margin-top: 0.18rem; color: #8a9294; font-size: 0.5rem; }
.phase-live-meter__bar { position: absolute; inset: auto 0 0; height: 4px; background: rgba(20, 36, 39, 0.18); }
.phase-live-meter__bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lab-teal), var(--lab-accent), var(--lab-red)); transition: width 80ms linear; }

@media (max-width: 760px) {
  .phase-one-suite__header,
  .expert-intro,
  .learn-intro { display: block; }
  .phase-one-suite__status { width: fit-content; margin-top: 0.75rem; }
  .phase-mode-tabs button { min-height: 3.5rem; padding: 0.65rem 0.35rem; font-size: 0.67rem; }
  .phase-mode-tabs button small { font-size: 0.51rem; }
  .one-click-hero { grid-template-columns: 1fr; }
  .one-click-8d { width: 100%; }
  .featured-preset-carousel__header > div:first-child span { display: none; }
  .featured-preset-dots { gap: 0.2rem; }
  .beginner-control-grid,
  .learn-grid,
  .expert-module__body { grid-template-columns: 1fr; }
  .expert-intro p,
  .learn-intro p { margin-top: 0.45rem; }
  .expert-control,
  .expert-control--wide { grid-column: 1; grid-template-columns: 1fr; }
  .eq-expert-band { grid-template-columns: 1fr 1fr; }
  .eq-expert-band > b { grid-column: 1 / -1; }
  .phase-panel { padding: 0.9rem; }
}

/* Phase 01 palette alignment: match the studio's cool white and cyan system. */
.phase-one-suite {
  --lab-ink: #173440;
  --lab-paper: #ffffff;
  --lab-accent: #168fa2;
  --lab-teal: #117f91;
  --lab-red: #d65f52;
  border-color: #c8dce5;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fb 100%);
  box-shadow: 0 15px 38px rgba(39, 84, 104, 0.09);
}

[data-theme="dark"] .phase-one-suite {
  --lab-ink: #eef9fb;
  --lab-paper: #14282f;
  --lab-accent: #4ec1ce;
  --lab-teal: #4ec1ce;
  --lab-red: #ee7569;
  border-color: rgba(126, 192, 210, 0.22);
  background: linear-gradient(180deg, #152a31 0%, #102128 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.phase-one-suite__header {
  border-bottom-color: #d6e4ea;
  background: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .phase-one-suite__header {
  border-bottom-color: rgba(145, 198, 212, 0.15);
  background: rgba(17, 37, 44, 0.76);
}

.phase-one-suite__header p,
.expert-intro p,
.learn-intro p,
.auto-intensity > small,
.analysis-summary,
.headphone-tip {
  color: #657f8a;
}

[data-theme="dark"] .phase-one-suite__header p,
[data-theme="dark"] .expert-intro p,
[data-theme="dark"] .learn-intro p,
[data-theme="dark"] .auto-intensity > small,
[data-theme="dark"] .analysis-summary,
[data-theme="dark"] .headphone-tip {
  color: #9bb5bd;
}

.phase-one-suite__status {
  border-color: rgba(22, 143, 162, 0.28);
  background: #edf8fa;
  color: #117f91;
}

[data-theme="dark"] .phase-one-suite__status {
  border-color: rgba(78, 193, 206, 0.3);
  background: rgba(78, 193, 206, 0.09);
  color: #65cfda;
}

.phase-mode-tabs {
  background: #d9e6eb;
}

.phase-mode-tabs button {
  background: #f1f6f8;
}

.phase-mode-tabs button.is-active {
  border-bottom-color: var(--lab-accent);
  background: #ffffff;
  color: #173440;
}

[data-theme="dark"] .phase-mode-tabs {
  background: rgba(135, 192, 207, 0.13);
}

[data-theme="dark"] .phase-mode-tabs button.is-active {
  background: #19323a;
  color: #eef9fb;
}

.one-click-hero {
  border-color: #9fcbd7;
  background:
    radial-gradient(circle at 88% 24%, rgba(80, 195, 205, 0.22), transparent 26%),
    linear-gradient(115deg, #123f4b 0%, #176474 100%);
  color: #f4fcfe;
  box-shadow: 0 12px 28px rgba(30, 92, 108, 0.15);
}

.one-click-hero::after {
  border-color: rgba(112, 216, 224, 0.27);
  box-shadow: 0 0 0 2rem rgba(112, 216, 224, 0.045), 0 0 0 4rem rgba(112, 216, 224, 0.025);
}

.one-click-hero__copy > span {
  color: #79dbe2;
}

.one-click-hero p {
  color: rgba(235, 250, 252, 0.76);
}

.one-click-8d {
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(145deg, #42bdc8, #16899b);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(3, 47, 57, 0.28);
}

.auto-recipe-card,
.auto-analysis-card,
.expert-module,
.learn-card {
  border-color: #d2e1e7;
  background: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .auto-recipe-card,
[data-theme="dark"] .auto-analysis-card,
[data-theme="dark"] .expert-module,
[data-theme="dark"] .learn-card {
  border-color: rgba(135, 192, 207, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.phase-card-title > span {
  background: #1b5968;
  color: #ffffff;
}

.auto-profile-grid button,
.smart-mix-button,
.expert-control {
  border-color: #d5e3e9;
  background: #f8fbfc;
}

.auto-profile-grid button:hover,
.smart-mix-button:hover {
  border-color: #75b9c8;
  background: #eef8fa;
}

.auto-profile-grid button.is-active {
  border-color: var(--lab-accent);
  background: #eaf7f9;
  box-shadow: inset 0 0 0 1px var(--lab-accent);
}

[data-theme="dark"] .auto-profile-grid button.is-active {
  background: rgba(78, 193, 206, 0.12);
}

.smart-mix-button {
  border-color: #97cbd5;
  background: #eaf7f9;
  color: #117f91;
}

.analysis-summary {
  border-left-color: #168fa2;
  background: #edf8fa;
}

[data-theme="dark"] .analysis-summary {
  background: rgba(78, 193, 206, 0.07);
}

.module-signal-strip span.is-on {
  border-color: #9acbd5;
  background: #edf8fa;
  color: #117f91;
}

[data-theme="dark"] .module-signal-strip span.is-on {
  border-color: rgba(78, 193, 206, 0.28);
  background: rgba(78, 193, 206, 0.09);
  color: #65cfda;
}

.expert-control,
.eq-expert-band {
  border-color: #d6e4e9;
}

.learn-card > span {
  background: #168fa2;
  color: #ffffff;
}

.phase-live-meter {
  border-top: 1px solid #d4e3e8;
  background: #d8e6eb;
}

.phase-live-meter > div:not(.phase-live-meter__bar) {
  background: #f8fbfc;
}

.phase-live-meter__bar {
  background: #d2e1e7;
}

.phase-live-meter__bar i {
  background: linear-gradient(90deg, #168fa2 0%, #3db7bb 52%, #e0a844 78%, #d65f52 100%);
}
/* Suno source diagnosis */
.suno-source-tip {
  margin: 14px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(10, 126, 132, 0.22);
  border-radius: 12px;
  color: #24484a;
  background: linear-gradient(135deg, rgba(231, 248, 246, 0.92), rgba(255, 248, 225, 0.9));
  font-size: 12px;
  line-height: 1.65;
}

.suno-diagnosis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #073f43;
}

.suno-diagnosis-head strong {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.suno-diagnosis-head span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #087d83;
  background: rgba(8, 125, 131, 0.1);
  font-size: 10px;
  font-weight: 800;
}

.suno-diagnosis-metrics {
  margin-top: 8px;
  color: #527174;
  font-size: 11px;
  line-height: 1.65;
}

.suno-issue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.suno-issue {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  cursor: help;
}

.suno-issue--danger {
  color: #8f2d20;
  border-color: rgba(185, 64, 44, 0.22);
  background: #fff0e9;
}

.suno-issue--warn {
  color: #7c5600;
  border-color: rgba(206, 145, 17, 0.24);
  background: #fff7d9;
}

.suno-issue--info {
  color: #125f78;
  border-color: rgba(28, 132, 164, 0.22);
  background: #eaf8fc;
}

.suno-issue--good {
  color: #11684e;
  border-color: rgba(21, 139, 100, 0.22);
  background: #eaf8f1;
}

.suno-diagnosis-note {
  margin: 10px 0 0;
  color: #718487;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .suno-source-tip {
    margin-inline: 12px;
  }

  .suno-diagnosis-head {
    align-items: flex-start;
  }

  .suno-diagnosis-metrics {
    line-height: 1.8;
  }
}
.suno-taxonomy {
  margin-top: 12px;
  border-top: 1px solid rgba(20, 100, 105, 0.13);
  color: #315c60;
}

.suno-taxonomy summary {
  padding: 11px 0 5px;
  color: #087d83;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.suno-taxonomy__group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.suno-taxonomy__group strong {
  flex: 0 0 100%;
  color: #173f43;
  font-size: 10px;
}

.suno-taxonomy__group span {
  padding: 3px 7px;
  border-radius: 7px;
  color: #526f72;
  background: rgba(223, 239, 240, 0.7);
  font-size: 9px;
}

.suno-taxonomy__group--limit span {
  color: #7b5849;
  background: #faeee7;
}

.suno-taxonomy > p {
  margin: 10px 0 0;
  color: #718487;
  font-size: 9px;
  line-height: 1.6;
}
/* Phase 02 restoration and commercial verification */
.phase-two-suite{margin-top:18px;border:1px solid #c8dce5;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 92% 3%,rgba(235,184,72,.13),transparent 24%),linear-gradient(180deg,#fff 0%,#f4fafb 100%);box-shadow:0 15px 38px rgba(39,84,104,.09)}
.phase-two-suite__header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border-bottom:1px solid #d6e4ea}
.phase-two-suite__eyebrow{color:#a36e0a;font:900 9px/1 "Trebuchet MS","Segoe UI",sans-serif;letter-spacing:.18em}
.phase-two-suite__header h3{margin:7px 0 0;color:#173440;font-size:24px;letter-spacing:-.04em}.phase-two-suite__header p{margin:7px 0 0;color:#657f8a;font-size:11px}
.phase-two-suite__status{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 12px;border:1px solid rgba(163,110,10,.22);border-radius:999px;color:#8e610b;background:#fff8e6;font-size:10px;font-weight:850}.phase-two-suite__status i{width:7px;height:7px;border-radius:50%;background:#dca22e;box-shadow:0 0 0 4px rgba(220,162,46,.13)}
.phase-two-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d9e6eb}.phase-two-tabs button{min-height:64px;padding:10px;border:0;border-bottom:3px solid transparent;color:#607985;background:#f1f6f8;font-size:11px;font-weight:900;cursor:pointer}.phase-two-tabs button small{display:block;margin-top:4px;color:#81939a;font-size:8px;font-weight:600}.phase-two-tabs button.is-active{border-bottom-color:#dca22e;color:#173440;background:#fff}
.phase-two-panel{padding:18px}.restore-score-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;border:1px solid #9ecbd4;border-radius:14px;color:#f6fdff;background:radial-gradient(circle at 83% 20%,rgba(227,171,55,.2),transparent 29%),linear-gradient(115deg,#123f4b 0%,#176474 100%)}.restore-score-hero>div:first-child>span{color:#efbf58;font:900 9px/1 "Trebuchet MS",sans-serif;letter-spacing:.16em}.restore-score-hero h4{margin:7px 0 0;font-size:20px}.restore-score-hero p{max-width:520px;margin:7px 0 0;color:rgba(239,252,253,.74);font-size:10px;line-height:1.6}
.restore-score-steps{display:flex;align-items:center;gap:8px}.restore-score-steps>div{min-width:82px;padding:11px;border:1px solid rgba(255,255,255,.16);border-radius:11px;text-align:center;background:rgba(255,255,255,.08)}.restore-score-steps>div.is-final{border-color:rgba(239,191,88,.45);background:rgba(239,191,88,.16)}.restore-score-steps small,.restore-score-steps b,.restore-score-steps span{display:block}.restore-score-steps small{color:rgba(255,255,255,.66);font-size:8px}.restore-score-steps b{margin:5px 0 3px;font:900 24px/1 "Trebuchet MS",sans-serif}.restore-score-steps span{color:rgba(255,255,255,.56);font-size:7px}.restore-score-steps>i{color:#efbf58;font-style:normal}
.phase-two-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:12px}.restore-recipe-card,.license-audit-card{padding:16px;border:1px solid #d2e1e7;border-radius:13px;background:rgba(255,255,255,.84)}
.restore-profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.restore-profile-grid button{padding:11px;border:1px solid #d5e3e9;border-radius:9px;color:#173440;background:#f8fbfc;text-align:left;cursor:pointer}.restore-profile-grid button:hover{border-color:#d5aa4e;background:#fffaf0}.restore-profile-grid button.is-active{border-color:#dca22e;background:#fff7e4;box-shadow:inset 0 0 0 1px #dca22e}.restore-profile-grid b,.restore-profile-grid small{display:block}.restore-profile-grid b{font-size:10px}.restore-profile-grid small{margin-top:4px;color:#71858c;font-size:8px;line-height:1.4}
.restore-intensity{display:block;margin-top:14px;padding-top:12px;border-top:1px solid #e0e9ec}.restore-intensity>span{display:flex;justify-content:space-between;font-size:10px}.restore-intensity output{color:#a36e0a;font-weight:900}.restore-intensity input{width:100%;margin:9px 0 4px;accent-color:#dca22e}.restore-intensity>small{color:#788b91;font-size:8px}
.restore-module-strip{display:flex;gap:5px;overflow-x:auto;margin-top:12px;padding-bottom:3px}.restore-module-strip span{flex:0 0 auto;padding:6px 8px;border:1px solid #d6e2e6;border-radius:999px;color:#94a0a4;background:#f8fafb;font:800 8px/1 "Trebuchet MS",sans-serif}.restore-module-strip span.is-on{border-color:rgba(220,162,46,.42);color:#91610a;background:#fff6df}
.engine-license-summary{display:grid;gap:6px;padding:12px;border-left:3px solid #3a9b85;border-radius:8px;color:#3a5f63;background:#edf8f4;font-size:9px}.engine-license-summary b{color:#176b58;font-size:11px}.engine-license-summary small{margin-top:2px;color:#6e8387;line-height:1.5}
.license-source-select{display:grid;gap:6px;margin-top:12px;color:#405e64;font-size:9px;font-weight:800}.license-source-select select{width:100%;min-height:38px;padding:8px 10px;border:1px solid #d2e1e7;border-radius:8px;background:#fff}.license-checklist{display:grid;gap:7px;margin-top:11px}.license-checklist label{display:flex;align-items:flex-start;gap:8px;color:#516d73;font-size:9px;line-height:1.4}.license-checklist input{margin-top:1px;accent-color:#168fa2}
.license-risk-result{margin-top:12px;padding:11px;border:1px solid #e0e8eb;border-radius:9px;background:#fbfcfc}.license-risk-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:8px}.license-risk-badge--low,.quality-risk--low{color:#176b58;background:#e6f6ef}.license-risk-badge--medium,.quality-risk--medium{color:#855d0b;background:#fff3d5}.license-risk-badge--high,.quality-risk--high{color:#963f31;background:#ffebe6}.license-risk-result p{margin:7px 0 0;color:#6f8287;font-size:8px;line-height:1.55}.license-source-links{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.license-source-links a{padding:4px 7px;border:1px solid #d2e1e7;border-radius:6px;color:#168092;font-size:8px}
.restore-module{margin-bottom:8px;border:1px solid #d2e1e7;border-radius:11px;background:rgba(255,255,255,.78)}.restore-module summary{display:flex;align-items:center;gap:10px;padding:13px;list-style:none;cursor:pointer}.restore-module summary::-webkit-details-marker{display:none}.restore-module summary>i{color:#a36e0a;font:900 9px/1 "Trebuchet MS",sans-serif;font-style:normal}.restore-module summary b,.restore-module summary small{display:block}.restore-module summary b{font-size:11px}.restore-module summary small{margin-top:3px;color:#71858c;font-size:8px}.restore-module summary::after{content:"+";margin-left:auto;font-weight:900}.restore-module[open] summary::after{content:"?"}.restore-module__body{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 13px 13px}
.restore-control{display:grid;grid-template-columns:minmax(115px,.8fr) minmax(130px,1.2fr);align-items:center;gap:10px;min-height:58px;padding:9px;border:1px solid #dce7ea;border-radius:9px;background:#f9fbfc}.restore-control>span b,.restore-control>span small{display:block}.restore-control>span b{font-size:9px}.restore-control>span small{margin-top:3px;color:#7b8c91;font-size:7px;line-height:1.45}.restore-control__input{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.restore-control input[type=range]{width:100%;accent-color:#dca22e}.restore-control output{min-width:50px;color:#a36e0a;font-size:9px;font-weight:900;text-align:right}.restore-control select{min-height:34px;padding:6px;border:1px solid #d5e3e9;border-radius:7px;background:#fff}.restore-control--toggle input{width:18px;height:18px;margin-left:auto;accent-color:#dca22e}
.quality-comparison{grid-column:1/-1;padding:14px;border:1px solid #c9dfe3;border-radius:11px;background:linear-gradient(135deg,#fffef9,#f0faf8)}.quality-comparison header{display:flex;justify-content:space-between;gap:12px}.quality-comparison header span,.quality-comparison header b{display:block}.quality-comparison header span{color:#a36e0a;font:900 8px/1 "Trebuchet MS",sans-serif;letter-spacing:.14em}.quality-comparison header b{margin-top:4px;font-size:11px}.quality-comparison header>small{color:#77898d;font-size:7px}
.quality-comparison__scores{display:grid;grid-template-columns:1fr auto 1fr 1fr 1.25fr;align-items:stretch;gap:6px;margin-top:11px}.quality-comparison__scores>div{padding:9px;border-radius:8px;background:#fff}.quality-comparison__scores>div.is-after{background:#e9f7f2}.quality-comparison__scores>div.is-delta{background:#fff5dc}.quality-comparison__scores>i{align-self:center;color:#dca22e;font-style:normal}.quality-comparison__scores span,.quality-comparison__scores b{display:block}.quality-comparison__scores span{color:#6e8388;font-size:7px}.quality-comparison__scores b{margin-top:4px;font-size:12px}.quality-risk{display:inline-flex!important;width:fit-content;padding:4px 6px;border-radius:6px;font-size:8px!important}
.quality-components{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:9px}.quality-components>div{position:relative;overflow:hidden;min-height:44px;padding:8px;border-radius:7px;background:#edf4f5}.quality-components span,.quality-components b{position:relative;z-index:1;display:block}.quality-components span{color:#63797e;font-size:7px}.quality-components b{margin-top:3px;font-size:10px}.quality-components i{position:absolute;inset:auto auto 0 0;height:3px;background:linear-gradient(90deg,#168fa2,#4fb798)}.quality-comparison>p{margin:9px 0 0;color:#496b6e;font-size:8px}.quality-comparison>small{display:block;margin-top:6px;color:#7d8d91;font-size:7px;line-height:1.5}
[data-theme=dark] .phase-two-suite{border-color:rgba(126,192,210,.22);background:linear-gradient(180deg,#152a31 0%,#102128 100%)}[data-theme=dark] .phase-two-suite__header,[data-theme=dark] .phase-two-tabs button.is-active{color:#eef9fb;background:rgba(17,37,44,.76)}[data-theme=dark] .phase-two-suite__header h3{color:#eef9fb}[data-theme=dark] .phase-two-suite__header p{color:#9bb5bd}[data-theme=dark] .phase-two-tabs{background:rgba(135,192,207,.13)}[data-theme=dark] .phase-two-tabs button{background:#142a31}[data-theme=dark] .restore-recipe-card,[data-theme=dark] .license-audit-card,[data-theme=dark] .restore-module,[data-theme=dark] .restore-control{border-color:rgba(135,192,207,.14);background:rgba(255,255,255,.035)}[data-theme=dark] .restore-profile-grid button,[data-theme=dark] .license-source-select select,[data-theme=dark] .restore-control select,[data-theme=dark] .quality-comparison__scores>div{color:#e8f7fa;border-color:rgba(135,192,207,.16);background:#173139}[data-theme=dark] .restore-profile-grid button.is-active{border-color:#dca22e;background:rgba(220,162,46,.12)}[data-theme=dark] .engine-license-summary{color:#a9c4bd;background:rgba(50,143,116,.12)}[data-theme=dark] .license-risk-result,[data-theme=dark] .quality-comparison{border-color:rgba(135,192,207,.16);background:#142a31}
@media(max-width:900px){.restore-score-hero,.phase-two-grid{grid-template-columns:1fr}.restore-score-steps{justify-content:stretch}.restore-score-steps>div{flex:1;min-width:0}}@media(max-width:640px){.phase-two-suite__header{display:block}.phase-two-suite__status{margin-top:12px}.phase-two-tabs button{min-height:58px;padding-inline:5px;font-size:9px}.restore-score-steps{gap:4px}.restore-score-steps>div{padding:8px 4px}.restore-score-steps b{font-size:19px}.restore-profile-grid,.restore-module__body{grid-template-columns:1fr}.restore-control{grid-template-columns:1fr}.quality-comparison__scores{grid-template-columns:1fr 1fr}.quality-comparison__scores>i{display:none}.quality-components{grid-template-columns:repeat(2,1fr)}.quality-comparison header{display:block}.quality-comparison header>small{display:block;margin-top:5px}}
/* Beginner-first one-click flow */
.easy-master-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 22px;
  border: 2px solid #6abfc9;
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 10%, rgba(241, 188, 72, 0.2), transparent 28%),
    linear-gradient(135deg, #f7ffff, #eaf8f7);
  box-shadow: 0 14px 32px rgba(36, 111, 119, 0.12);
}

.easy-master-card__copy > span {
  color: #0b8591;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.easy-master-card__copy h4 {
  margin: 7px 0 0;
  color: #123f4b;
  font-size: clamp(19px, 3vw, 27px);
  letter-spacing: -0.04em;
}

.easy-master-card__copy p {
  max-width: 580px;
  margin: 9px 0 0;
  color: #58777b;
  font-size: 11px;
  line-height: 1.65;
}

.easy-master-button {
  min-width: 230px;
  padding: 18px 22px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #087f8a, #145662);
  box-shadow: 0 13px 25px rgba(9, 84, 94, 0.25);
  cursor: pointer;
}

.easy-master-button:hover {
  transform: translateY(-2px);
}

.easy-master-button b,
.easy-master-button small {
  display: block;
}

.easy-master-button b {
  font-size: 14px;
}

.easy-master-button small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
}

.easy-problem-picker,
.easy-license-rule {
  grid-column: 1 / -1;
}

.easy-problem-picker {
  padding-top: 15px;
  border-top: 1px solid rgba(27, 103, 109, 0.14);
}

.easy-problem-picker > span {
  display: block;
  margin-bottom: 8px;
  color: #6a8083;
  font-size: 9px;
}

.easy-problem-picker > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.easy-problem-picker button {
  padding: 11px;
  border: 1px solid #c7dee1;
  border-radius: 9px;
  color: #274c51;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
}

.easy-problem-picker button.is-active {
  border-color: #15939d;
  background: #e4f7f5;
  box-shadow: inset 0 0 0 1px #15939d;
}

.easy-problem-picker b,
.easy-problem-picker small {
  display: block;
}

.easy-problem-picker b {
  font-size: 10px;
}

.easy-problem-picker small {
  margin-top: 4px;
  color: #71878a;
  font-size: 8px;
}

.easy-license-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  color: #6b5430;
  background: #fff7e6;
  font-size: 8px;
}

.easy-license-rule b {
  margin-right: 3px;
  color: #8d5f0b;
}

.easy-license-rule span::before {
  content: "¡¤";
  margin-right: 6px;
  color: #d29a2d;
}

.restore-score-hero {
  margin-top: 12px;
}

.restore-more-options {
  margin-top: 12px;
  border: 1px solid #d4e3e7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.restore-more-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  color: #31565c;
  cursor: pointer;
}

.restore-more-options > summary::-webkit-details-marker {
  display: none;
}

.restore-more-options > summary::after {
  content: "¿­±â +";
  color: #118894;
  font-size: 9px;
  font-weight: 900;
}

.restore-more-options[open] > summary::after {
  content: "´Ý±â ?";
}

.restore-more-options > summary b,
.restore-more-options > summary small {
  display: block;
}

.restore-more-options > summary b {
  font-size: 11px;
}

.restore-more-options > summary small {
  color: #7d9094;
  font-size: 8px;
}

.restore-more-options .phase-two-grid {
  margin: 0;
  padding: 0 12px 12px;
}

[data-theme="dark"] .easy-master-card {
  border-color: rgba(78, 193, 206, 0.45);
  background: linear-gradient(135deg, #17333a, #13292f);
}

[data-theme="dark"] .easy-master-card__copy h4 {
  color: #eefbfc;
}

[data-theme="dark"] .easy-problem-picker button,
[data-theme="dark"] .restore-more-options {
  color: #dff3f5;
  border-color: rgba(135, 192, 207, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .easy-problem-picker button.is-active {
  border-color: #4ec1ce;
  background: rgba(78, 193, 206, 0.13);
}

@media (max-width: 760px) {
  .easy-master-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .easy-master-button {
    width: 100%;
    min-width: 0;
  }

  .easy-problem-picker,
  .easy-license-rule {
    grid-column: 1;
  }

  .easy-problem-picker > div {
    grid-template-columns: 1fr 1fr;
  }

  .restore-score-hero {
    display: block;
  }

  .restore-score-steps {
    margin-top: 14px;
  }
}

@media (max-width: 430px) {
  .easy-problem-picker > div {
    grid-template-columns: 1fr;
  }

  .easy-license-rule {
    display: grid;
  }

  .easy-license-rule span::before {
    content: "";
    margin: 0;
  }
}
/* Collapse Phase 01 complexity for true beginners */
.phase-one-easy-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #9ccfd7;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fcfd, #e9f7f5);
}

.phase-one-easy-bridge span,
.phase-one-easy-bridge b,
.phase-one-easy-bridge p {
  display: block;
}

.phase-one-easy-bridge span {
  color: #0d8793;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.phase-one-easy-bridge b {
  margin-top: 5px;
  color: #163f48;
  font-size: 13px;
}

.phase-one-easy-bridge p {
  margin: 5px 0 0;
  color: #687f84;
  font-size: 9px;
}

.phase-one-easy-bridge a {
  flex: 0 0 auto;
  padding: 11px 14px;
  border-radius: 9px;
  color: #fff;
  background: #128996;
  font-size: 9px;
  font-weight: 900;
}

.phase-one-more-options {
  margin-top: 10px;
  border: 1px solid #d4e3e7;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.48);
}

.phase-one-more-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  list-style: none;
  color: #47666e;
  cursor: pointer;
}

.phase-one-more-options > summary::-webkit-details-marker {
  display: none;
}

.phase-one-more-options > summary::after {
  content: "¿­±â +";
  color: #138b97;
  font-size: 9px;
  font-weight: 900;
}

.phase-one-more-options[open] > summary::after {
  content: "´Ý±â ?";
}

.phase-one-more-options > summary b,
.phase-one-more-options > summary small {
  display: block;
}

.phase-one-more-options > summary b {
  font-size: 10px;
}

.phase-one-more-options > summary small {
  color: #839397;
  font-size: 8px;
}

.phase-one-more-options .featured-preset-carousel,
.phase-one-more-options .beginner-control-grid,
.phase-one-more-options .module-signal-strip,
.phase-one-more-options .headphone-tip,
.phase-one-more-options .suno-source-tip {
  margin-left: 10px;
  margin-right: 10px;
}

.phase-one-more-options .suno-source-tip {
  margin-bottom: 10px;
}

[data-theme="dark"] .phase-one-easy-bridge,
[data-theme="dark"] .phase-one-more-options {
  border-color: rgba(110, 195, 207, 0.2);
  background: rgba(255, 255, 255, 0.035);
}

[data-theme="dark"] .phase-one-easy-bridge b {
  color: #edfafd;
}

@media (max-width: 640px) {
  .phase-one-easy-bridge {
    display: block;
  }

  .phase-one-easy-bridge a {
    display: block;
    margin-top: 11px;
    text-align: center;
  }

  .phase-one-more-options > summary {
    align-items: flex-start;
  }
}

/* Main-entry creator support dialog */
.support-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  border: 0;
  background: transparent;
}
.support-dialog::backdrop {
  background: rgba(9, 31, 42, 0.58);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: support-backdrop-in 240ms ease both;
}
.support-dialog[open] {
  animation: support-dialog-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.support-dialog__card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(83, 165, 190, 0.38);
  border-radius: 26px;
  background: radial-gradient(circle at 92% 10%, rgba(245, 216, 223, 0.95), transparent 29%), radial-gradient(circle at 4% 94%, rgba(203, 234, 221, 0.9), transparent 32%), linear-gradient(145deg, #fcfeff 0%, #edf8fc 100%);
  box-shadow: 0 32px 90px rgba(9, 39, 52, 0.3);
}
.support-dialog__card::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -82px;
  width: 185px;
  height: 185px;
  border: 1px solid rgba(52, 157, 201, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(130, 204, 239, 0.08), 0 0 0 52px rgba(130, 204, 239, 0.05);
  pointer-events: none;
}
.support-dialog__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #456774;
  border: 1px solid rgba(77, 132, 151, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.support-dialog__close:hover {
  background: #fff;
  transform: rotate(4deg);
}
.support-dialog__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: #244b5d;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
}
.support-dialog__brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.support-dialog__eyebrow {
  margin: 0 0 8px;
  color: #bd6178;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.support-dialog h2 {
  position: relative;
  z-index: 1;
  max-width: 400px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(25px, 5vw, 36px);
  font-weight: 900;
  line-height: 1.23;
  letter-spacing: -0.055em;
}
.support-dialog__description {
  position: relative;
  z-index: 1;
  max-width: 415px;
  margin: 16px 0 0;
  color: #587482;
  font-size: 13px;
  line-height: 1.75;
}
.support-dialog__note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 11px 13px;
  color: #56716f;
  border: 1px solid rgba(87, 165, 143, 0.2);
  border-radius: 12px;
  background: rgba(231, 247, 240, 0.72);
  font-size: 10px;
  font-weight: 700;
}
.support-dialog__note b { color: #d76c84; }
.support-dialog__actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 22px;
}
.support-dialog__actions a,
.support-dialog__actions button {
  min-height: 48px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.support-dialog__actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px;
  color: #fff;
  background: linear-gradient(135deg, #173f51, #235f72);
  box-shadow: 0 12px 24px rgba(23, 63, 81, 0.22);
}
.support-dialog__actions a:hover { transform: translateY(-2px); }
.support-dialog__actions button {
  padding: 0 15px;
  color: #617b87;
  border: 1px solid rgba(92, 134, 151, 0.2);
  background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .support-dialog__card {
  border-color: rgba(104, 198, 225, 0.25);
  background: radial-gradient(circle at 92% 10%, rgba(105, 45, 61, 0.48), transparent 30%), radial-gradient(circle at 4% 94%, rgba(35, 92, 75, 0.5), transparent 34%), linear-gradient(145deg, #102832 0%, #0b1d25 100%);
}
[data-theme="dark"] .support-dialog__brand,
[data-theme="dark"] .support-dialog h2 { color: #ebf8fc; }
[data-theme="dark"] .support-dialog__description,
[data-theme="dark"] .support-dialog__actions button { color: #aac2cc; }
[data-theme="dark"] .support-dialog__close,
[data-theme="dark"] .support-dialog__actions button {
  border-color: rgba(147, 207, 226, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .support-dialog__note {
  color: #b8d6ce;
  border-color: rgba(112, 198, 173, 0.17);
  background: rgba(52, 114, 96, 0.16);
}
@keyframes support-dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes support-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 560px) {
  .support-dialog { width: calc(100vw - 24px); }
  .support-dialog__card { padding: 28px 21px 22px; border-radius: 22px; }
  .support-dialog__brand { margin-bottom: 18px; }
  .support-dialog h2 { padding-right: 24px; font-size: 27px; }
  .support-dialog__actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .support-dialog[open],
  .support-dialog::backdrop { animation: none; }
}