:root {
  --teal: #087f89;
  --teal-bright: #0b969c;
  --teal-dark: #066c75;
  --teal-soft: #e9f6f6;
  --navy: #071a35;
  --ink: #101828;
  --slate: #445970;
  --muted: #667085;
  --line: #d8e0e8;
  --line-strong: #b8c4d0;
  --soft: #f6f9fb;
  --surface: #ffffff;
  --shadow: 0 5px 18px rgba(15, 35, 55, .08);
  --font: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

html { background: #fff; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 10%, rgba(8, 127, 137, .022), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
}

body.large-text {
  font-size: 15px;
}

body.large-text .app-header,
body.large-text main {
  width: calc(100% / 1.12);
  margin-inline: auto;
  zoom: 1.12;
}

body.large-text .settings-dialog { zoom: 1.08; }

body.high-contrast {
  --teal: #006c73;
  --teal-dark: #004e54;
  --ink: #000712;
  --navy: #000b22;
  --muted: #344054;
  --line: #8290a1;
  --line-strong: #344054;
  --shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

button, input, select { font: inherit; }

button { color: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(8, 127, 137, .28);
  outline-offset: 2px;
}

button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .42; }

svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.screen[hidden] { display: none !important; }
.screen.active { display: block; }

.surface-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
}

.app-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto auto minmax(420px, 1fr) auto;
  align-items: center;
  gap: 36px;
  height: 58px;
  padding: 0 24px 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  padding: 0;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .015em;
}

.brand-mark { width: 32px; height: 32px; color: var(--teal); }

.header-project,
.outline-button,
.icon-button,
.access-button,
.reset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}

.header-project:hover,
.outline-button:hover,
.icon-button:hover,
.access-button:hover,
.reset-button:hover { border-color: var(--teal); box-shadow: 0 3px 10px rgba(8,127,137,.08); }

.header-project svg,
.outline-button svg,
.reset-button svg { width: 19px; height: 19px; }

.header-project { min-width: 108px; color: #344054; }

.compact-stepper {
  justify-self: center;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.compact-stepper button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  color: #344054;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
}

.compact-stepper button span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 11px;
}

.compact-stepper button[aria-current="step"] { color: var(--teal-dark); font-weight: 700; }
.compact-stepper button[aria-current="step"] span { border-color: var(--teal); color: #fff; background: var(--teal); }
.compact-stepper i { color: #a6b1bd; font-size: 22px; font-style: normal; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .icon-button { width: 38px; padding: 0; }
.header-actions .icon-button svg { width: 19px; height: 19px; }
.export-shortcut { color: var(--teal-dark); }
.access-actions { display: none; }
.access-button { border-radius: 20px; font-weight: 700; }
.access-button { white-space: nowrap; }
a.access-button { color: var(--teal-dark); text-decoration: none; }
.support-link { text-decoration: none; color: var(--teal-dark); background: var(--teal-light, #edf8f9); }
.support-link span { font-size: 14px; }
.access-button b { font-size: 21px; font-weight: 500; }
.contrast-dot { width: 20px; height: 20px; border: 1px solid var(--navy); border-radius: 50%; background: linear-gradient(90deg, var(--navy) 50%, #fff 50%); }

body:not([data-screen="tune"]) .app-header {
  grid-template-columns: 1fr auto;
  height: 70px;
  padding-inline: 30px 20px;
}

body:not([data-screen="tune"]) .brand { color: var(--navy); font-size: 27px; }
body:not([data-screen="tune"]) .brand-mark,
body:not([data-screen="tune"]) .header-project,
body:not([data-screen="tune"]) .compact-stepper,
body:not([data-screen="tune"]) .standard-actions { display: none; }
body:not([data-screen="tune"]) .access-actions { display: flex; }

body[data-screen="compare"] .app-header { height: 61px; }

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #07949a, #057983);
  box-shadow: 0 5px 12px rgba(4, 117, 126, .2);
  cursor: pointer;
  font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.primary-button:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(4, 117, 126, .24); filter: saturate(1.05); }
.primary-button:active { transform: translateY(0); }
.primary-button svg { width: 22px; height: 22px; }
.primary-button.compact { min-height: 35px; padding: 0 22px; border-radius: 8px; box-shadow: none; }

.text-button {
  padding: 5px;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

/* Shared four-stage navigation */
.large-stepper {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 42px minmax(220px, 1fr) 42px minmax(220px, 1fr) 42px minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.step-node {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 13px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 4px 13px rgba(15, 35, 55, .05);
  cursor: pointer;
  text-align: left;
}

.step-node.active { border: 2px solid var(--teal); }
.step-node .step-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }
.step-node.active .step-icon { border: 0; color: #fff; background: linear-gradient(145deg, #0ca2a6, #087985); }
.step-node strong, .step-node small { display: block; }
.step-node strong { font-size: 16px; }
.step-node small { margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.step-line { height: 1px; background: var(--line-strong); }

/* Upload */
.wide-shell { width: min(1444px, calc(100% - 64px)); margin: 0 auto; padding: 24px 0 42px; }

.upload-card {
  width: min(980px, 100%);
  margin: 52px auto 0;
  padding: 38px;
  box-shadow: var(--shadow);
}

.upload-heading { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 30px; }
.round-feature { display: grid; flex: 0 0 84px; width: 84px; height: 84px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #0ba6aa, #087782); box-shadow: 0 8px 25px rgba(8,127,137,.18); }
.round-feature svg { width: 45px; height: 45px; }
.upload-heading h1 { margin: 3px 0 5px; color: var(--navy); font-size: 32px; line-height: 1.25; }
.upload-heading p { margin: 0; color: var(--muted); }
.upload-heading .eyebrow { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .15em; }

.drop-zone {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px;
  border: 2px dashed #b9c8d2;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfefe, #f7fbfc);
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.drop-zone.dragging { border-color: var(--teal); background: var(--teal-soft); transform: scale(1.005); }
.drop-zone > svg { width: 48px; height: 48px; margin-bottom: 12px; color: var(--teal); }
.drop-zone h2 { margin: 0 0 5px; color: var(--navy); font-size: 22px; word-break: keep-all; overflow-wrap: anywhere; }
.drop-zone p { margin: 0 0 20px; color: var(--muted); }
.drop-zone small { margin-top: 13px; color: #8793a2; }

.privacy-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 16px 18px; border-radius: 10px; background: var(--soft); color: var(--slate); }
.privacy-row svg { color: var(--teal); }
.privacy-row .text-button { margin-left: auto; white-space: nowrap; }

/* Processing */
.process-shell { width: min(1366px, calc(100% - 88px)); margin: 0 auto; padding: 34px 0 42px; }

.process-steps {
  display: grid;
  grid-template-columns: 220px 1fr 280px 1fr 220px 1fr 220px;
  align-items: center;
  gap: 24px;
  margin: 4px 32px 25px;
}

.process-step { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; min-height: 112px; padding: 7px 15px; border: 0; border-radius: 30px; color: var(--navy); background: transparent; cursor: pointer; font-size: 20px; }
.process-step > span { display: grid; width: 70px; height: 70px; place-items: center; border: 1.5px solid #68788a; border-radius: 50%; background: #fff; }
.process-step > span svg { width: 35px; height: 35px; }
.process-step.active { border: 2px solid var(--teal); color: var(--teal); border-radius: 32px; }
.process-step.active > span { border: 0; color: #fff; background: linear-gradient(145deg, #0ca0a5, #087984); }
.process-steps > i { height: 1px; background: #9aa8b5; }

.processing-card { padding: 28px 32px 25px; box-shadow: var(--shadow); }

.file-summary { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 26px; margin-bottom: 22px; }
.file-summary > div { min-width: 0; }
.file-summary strong { overflow-wrap: anywhere; }
.file-icon { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #f9fbfc; }
.file-icon svg { width: 37px; height: 37px; }
.file-summary strong, .file-summary small { display: block; }
.file-summary strong { color: var(--navy); font-size: 23px; }
.file-summary small { margin-top: 8px; color: var(--slate); font-size: 16px; }
.file-summary .outline-button { min-height: 56px; padding-inline: 24px; border-color: #8795a5; font-size: 16px; font-weight: 700; }

.waveform-overview { position: relative; height: 184px; padding: 12px 0 30px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(180deg, #fafcfd, #fff); }
.wave-canvas { display: block; width: 100%; height: 100%; }
.waveform-overview .wave-canvas { height: 132px; }
.time-ticks { position: absolute; right: 0; bottom: 7px; left: 0; display: flex; justify-content: space-between; color: var(--navy); font-size: 14px; }

.analysis-panel { display: grid; grid-template-columns: 180px minmax(400px, 1fr) 440px; align-items: center; gap: 30px; min-height: 268px; margin-top: 28px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }

.progress-orb { position: relative; display: grid; width: 158px; height: 158px; margin: auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--progress) * 1%), #dbe3e8 0); }
.progress-orb::after { content: ""; position: absolute; inset: 11px; border-radius: inherit; background: #fff; }
.progress-orb > div { position: relative; z-index: 1; display: grid; width: 110px; height: 110px; place-items: center; border-radius: 50%; color: var(--teal); }
.progress-orb svg { width: 61px; height: 61px; }

.analysis-copy h1 { margin: 0 0 8px; color: var(--navy); font-size: 36px; line-height: 1.25; letter-spacing: -.035em; }
.analysis-copy > p { margin: 0; color: var(--navy); font-size: 18px; }
.progress-line { height: 15px; margin: 28px 0 8px; overflow: hidden; border-radius: 10px; background: #d8dee4; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0c9fa3, #07858d); transition: width .5s ease; }
.progress-meta { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; color: var(--slate); }
.progress-meta > strong { color: var(--teal); font-size: 22px; }
.progress-meta span { display: flex; align-items: center; gap: 8px; }
.progress-meta span svg, .progress-meta button svg { width: 20px; height: 20px; }
.progress-meta i { width: 1px; height: 22px; background: var(--line); }
.progress-meta button { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--slate); background: transparent; cursor: pointer; }

.analysis-tasks { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; list-style: none; }
.analysis-tasks li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; min-height: 57px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 17px; }
.analysis-tasks li:last-child { border: 0; }
.analysis-tasks svg { width: 27px; height: 27px; }
.analysis-tasks em { padding: 5px 13px; border-radius: 7px; color: var(--slate); background: #f0f3f6; font-size: 13px; font-style: normal; font-weight: 700; }
.analysis-tasks li.active svg, .analysis-tasks li.done svg { color: var(--teal); }
.analysis-tasks li.active em { color: var(--teal-dark); background: #e4f4f4; }
.analysis-tasks li.done em { color: #08744f; background: #e7f6ee; }

.secure-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 30px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 11px; color: var(--slate); font-size: 15px; }
.secure-note > svg { width: 34px; height: 34px; color: var(--teal); }

/* Detailed tune screen */
.tune-shell { width: min(1464px, calc(100% - 70px)); margin: 0 auto; padding: 11px 0 18px; }
.page-title { margin-bottom: 9px; }
.page-title h1 { margin: 0; color: #06090e; font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.page-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.genre-required-choice { margin: 18px 0 20px; padding: 16px 18px; border: 1px solid #b8cbd4; border-radius: 12px; background: #f4fafb; }
.genre-required-choice.is-selected { border-color: #54a6a9; background: #f1fbf8; }
.genre-required-choice label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #102b38; font-weight: 700; }
.genre-required-choice select { min-width: 250px; }
.genre-required-choice p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.intro-fade-option { display: flex; align-items: flex-start; gap: 12px; margin: -4px 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.intro-fade-option > input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--teal); }
.intro-fade-option > span { display: grid; gap: 5px; }
.intro-fade-option strong { color: var(--ink); font-size: 14px; }
.intro-fade-option strong small { margin-left: 6px; color: var(--muted); font-weight: 400; }
.intro-fade-option > span > span { color: var(--slate); font-size: 13px; line-height: 1.6; font-weight: 400; }
.intro-fade-option:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
.intro-fade-option:has(input:disabled) { cursor: default; opacity: .6; }
.fade-settings { min-width: 0; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.fade-settings legend { padding: 0 6px; font-weight: 700; color: var(--ink); }
.fade-settings legend small { font-weight: 400; color: var(--slate); }
.fade-setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 6px 0; }
.fade-enable { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.fade-enable input { width: 20px; height: 20px; accent-color: var(--teal); }
.fade-duration { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: 13px; }
.fade-duration input { width: 82px; min-height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font: inherit; }
.fade-duration input:disabled { opacity: .5; }
.fade-settings p { margin: 10px 0 0; color: var(--slate); font-size: 13px; line-height: 1.6; }
.result-master-settings { margin: 20px 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.result-master-settings h2 { margin: 0 0 16px; font-size: 18px; }
.result-genre-label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 700; }
.result-genre-label select { flex: 1; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--white); font: inherit; }
.result-master-settings > p { color: var(--slate); font-size: 13px; line-height: 1.6; }
.result-master-settings .fade-settings { margin-top: 16px; }
.preset-card { display: grid; grid-template-columns: 54px 1fr 24px; align-items: center; gap: 14px; min-height: 78px; padding: 11px 21px; border: 1px solid #aebdcc; border-radius: 8px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.preset-card:hover { border-color: var(--teal); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,127,137,.09); }
.preset-card > svg:first-child { width: 43px; height: 43px; color: var(--teal); stroke-width: 1.65; }
.preset-card .chevron { width: 19px; height: 19px; color: #344054; }
.preset-card strong, .preset-card small { display: block; }
.preset-card strong { color: #070b10; font-size: 17px; }
.preset-card small { margin-top: 2px; color: var(--muted); font-size: 13px; }

.eq-card { margin-top: 11px; overflow: hidden; }
.panel-header { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.panel-header .panel-title-button { min-width: 0; text-align: left; word-break: keep-all; }
.panel-header .reset-button, .panel-title-button svg { flex-shrink: 0; }
.panel-title-button { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 17px; }
.panel-title-button svg { width: 17px; height: 17px; transition: transform .18s ease; }
.panel-title-button[aria-expanded="false"] svg { transform: rotate(-90deg); }
.reset-button { min-height: 30px; padding: 0 14px; font-size: 12px; }
.eq-scroll.collapsed { display: none; }
.eq-scroll { overflow-x: auto; scrollbar-color: #a7b2be transparent; scrollbar-width: thin; }
.eq-scroll:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.eq-scroll-help { display: none; }
.eq-stage { position: relative; min-width: 1120px; height: 230px; }
.eq-axis { position: absolute; z-index: 2; top: 63px; bottom: 48px; left: 24px; display: flex; flex-direction: column; justify-content: space-between; color: #182230; font-size: 12px; }
.eq-curve { position: absolute; z-index: 0; top: 58px; right: 45px; left: 82px; width: calc(100% - 127px); height: 126px; overflow: visible; }
.eq-grid-lines path { fill: none; stroke: #dde4e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eq-fill { fill: url(#eqFill); stroke: none; }
.eq-line { fill: none; stroke: #078a91; stroke-width: 2; vector-effect: non-scaling-stroke; }
.eq-bands { position: absolute; z-index: 3; top: 9px; right: 48px; bottom: 3px; left: 84px; display: grid; grid-template-columns: repeat(8, 1fr); }
.eq-band { display: grid; grid-template-rows: 25px 29px 1fr 29px; justify-items: center; align-items: center; min-width: 0; color: #080b10; }
.eq-band > label { font-size: 13px; font-weight: 700; }
.gain-readout { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.gain-readout input { width: 58px; height: 27px; padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--navy); background: #fff; text-align: center; font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.gain-readout input:focus-visible, .q-readout input:focus-visible, .compact-gain-input input:focus-visible, .studio-value-input input:focus-visible { outline: 3px solid rgba(8,127,137,.24); outline-offset: 1px; border-color: var(--teal); }
.eq-band input[type="range"] {
  width: 30px;
  height: 118px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  accent-color: var(--teal);
  cursor: ns-resize;
}
.eq-band input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; }
.q-readout { display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-size: 13px; }
.q-readout input { width: 54px; height: 26px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: center; font-family: var(--font); font-size: 12px; font-variant-numeric: tabular-nums; }

.effect-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px 18px; margin-top: 10px; }
.effect-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto 36px; align-items: center; gap: 5px 11px; min-width: 0; min-height: 105px; padding: 11px 20px; }
.effect-icon { grid-row: 1; width: 37px; height: 37px; color: #063c52; }
.effect-copy { min-width: 0; align-self: center; word-break: keep-all; overflow-wrap: anywhere; }
.effect-copy strong, .effect-copy small { display: block; }
.effect-copy strong { color: #070b10; font-size: 16px; }
.effect-copy small { margin-top: 1px; color: var(--muted); font-size: 12px; white-space: normal; }
.switch { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); cursor: pointer; font-size: 12px; font-weight: 700; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: relative; display: block; width: 38px; height: 21px; border-radius: 20px; background: #c7d0d8; transition: background .18s ease; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .18s ease; }
.switch input:checked + i { background: var(--teal); }
.switch input:checked + i::after { transform: translateX(17px); }
.switch input:focus-visible + i { outline: 3px solid rgba(8,127,137,.28); outline-offset: 2px; }
.effect-control { grid-column: 1 / -1; display: grid; grid-template-columns: auto 58px minmax(0,1fr); align-items: center; gap: 12px; min-width: 0; }
.effect-control label { color: #2d3748; font-size: 12px; }
.effect-control output { min-width: 48px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #080b10; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

input[type="range"] { accent-color: var(--teal); }
.effect-control input[type="range"], .transport input[type="range"] { width: 100%; height: 4px; margin: 0; appearance: none; border-radius: 4px; background: linear-gradient(90deg, var(--teal) 0 var(--range-pct, 30%), #d9dee3 var(--range-pct, 30%) 100%); cursor: pointer; }
.effect-control input[type="range"]::-webkit-slider-thumb, .transport input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: var(--teal); box-shadow: 0 1px 4px rgba(0,0,0,.26); }
.effect-card.is-off .effect-control { opacity: .42; }
.effect-card.is-off .switch span { color: var(--muted); }

.sound-map { margin-top: 11px; padding: 8px 19px 12px; }
.sound-map > header { display: flex; height: 28px; align-items: center; gap: 8px; color: #070b10; }
.sound-map > header svg { width: 22px; height: 22px; color: #68788a; }
.sound-map > header strong { font-size: 16px; }
.sound-map > header small { font-size: 12px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px; }
.guide-grid details { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; }
.guide-grid summary { position: relative; padding: 6px 36px 6px 18px; color: #475467; cursor: pointer; list-style: none; }
.guide-grid summary::-webkit-details-marker { display: none; }
.guide-grid summary::after { content: "⌄"; position: absolute; top: 3px; right: 18px; color: var(--navy); font-size: 17px; }
.guide-grid details[open] summary { color: var(--navy); font-weight: 700; }
.guide-grid details[open] summary::after { transform: rotate(180deg); }
.guide-grid details p { margin: 0; padding: 0 18px 6px; color: var(--muted); }
.guide-grid details button { margin: 0 0 9px 18px; padding: 3px 8px; border: 1px solid var(--teal); border-radius: 5px; color: var(--teal-dark); background: #fff; cursor: pointer; font-size: 11px; }

.listen-cta { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 13px; }
.listen-cta [data-offline-preview] { margin-bottom: 12px; }
.listen-cta .primary-button { min-width: 500px; min-height: 55px; border-radius: 12px; font-size: 19px; }
.listen-cta p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* A/B comparison screen */
.compare-shell { width: min(1444px, calc(100% - 72px)); margin: 0 auto; padding: 21px 0 4px; }
.card-stepper { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-stepper > button { display: grid; grid-template-columns: 36px 34px 1fr; align-items: center; gap: 10px; min-height: 74px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 4px 13px rgba(15,35,55,.05); cursor: pointer; text-align: left; }
.card-stepper > button.active { border: 1.5px solid var(--teal); }
.card-stepper > button b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: #3c4b60; font-size: 18px; }
.card-stepper > button.complete b, .card-stepper > button.active b { background: var(--teal); }
.card-stepper > button > svg { width: 30px; height: 30px; }
.card-stepper strong, .card-stepper small { display: block; }
.card-stepper strong { color: var(--navy); font-size: 15px; }
.card-stepper small { overflow: hidden; margin-top: 1px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-stepper > i { color: #778494; font-size: 28px; font-style: normal; text-align: center; }

.uploaded-strip { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; min-height: 56px; padding: 7px 16px; border: 1px solid var(--teal); border-radius: 9px; background: #fff; }
.uploaded-strip > div strong, .uploaded-strip > div small { display: block; }
.uploaded-strip > div strong { color: var(--navy); font-size: 13px; }
.uploaded-strip > div small { color: var(--muted); font-size: 11px; }
.upload-ok { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.upload-ok i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #fff; background: #0c9a7e; }
.upload-ok svg { width: 12px; height: 12px; stroke-width: 2.5; }
.uploaded-strip .outline-button { min-height: 36px; font-size: 12px; }

.ab-player { margin-top: 9px; overflow: hidden; box-shadow: var(--shadow); }
.ab-player > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; min-height: 39px; padding: 10px 20px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 14px; font-weight: 700; }
.active-track-label { padding: 5px 9px; border: 1px solid var(--teal); border-radius: 6px; color: var(--teal-dark); background: var(--teal-soft); font-size: 12px; line-height: 1.5; }
.ab-body { min-width: 0; }
.wave-tracks { position: relative; min-width: 0; }
.wave-row { position: relative; height: 84px; background: #f8fafb; }
.wave-row:first-child { border-bottom: 1px solid var(--line); }
.wave-row.selected { background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal); }
.wave-row canvas { height: 100%; opacity: .4; transition: opacity .12s ease; }
.wave-row.selected canvas { opacity: 1; }
.wave-row .wave-seek { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wave-row .wave-seek:disabled { cursor: default; }
.wave-row:focus-within { outline: 3px solid var(--teal); outline-offset: -3px; }
.wave-source-label { position: absolute; z-index: 2; top: 5px; left: 10px; padding: 2px 6px; border-radius: 4px; color: var(--slate); background: rgba(255,255,255,.92); font-size: 10px; font-weight: 700; pointer-events: none; }
.wave-row.selected .wave-source-label { color: var(--teal-dark); }
.wave-row.selected .wave-source-label::after { content: " · 선택됨"; }
.playhead { position: absolute; z-index: 5; top: 0; bottom: 0; left: 26%; width: 1.5px; background: var(--navy); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -6px; left: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--navy); }

.transport { display: grid; grid-template-columns: 100px 76px 76px 86px minmax(0,1fr) 24px 100px 42px; align-items: center; gap: 8px; min-height: 68px; padding: 8px 14px; border-top: 1px solid var(--line); }
.transport button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.transport button svg { width: 24px; height: 24px; }
.transport .transport-seek { width: 100%; min-width: 0; height: auto; min-height: 52px; align-content: center; gap: 3px; padding: 4px; border-radius: 8px; color: var(--navy); }
.transport-seek-label { min-width: 0; max-width: 100%; font-size: 11px; font-weight: 700; line-height: 1.35; text-align: center; word-break: keep-all; }
.transport .transport-seek:hover { background: var(--teal-soft); color: var(--teal-dark); }
.transport .transport-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; height: 42px; padding: 0 6px; border: 1px solid var(--teal); border-radius: 8px; color: var(--teal-dark); background: var(--teal-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.transport .transport-play svg { flex-shrink: 0; width: 20px; height: 20px; fill: currentColor; stroke-width: 2; }
.transport time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.transport > svg { width: 20px; height: 20px; }
.transport input[type="range"] { --range-pct: 0%; }
.transport .volume-range { --range-pct: 72%; }

.compare-section { margin-top: 9px; padding: 9px 16px; border: 1px solid #e5e9ed; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 4px 12px rgba(15,35,55,.05); }
.compare-section h2 { margin: 0 0 7px; color: var(--navy); font-size: 15px; }
.compare-section h2 small { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 500; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.section-title-row h2 { margin-bottom: 0; }
.headphone-badge, .analysis-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); font-size: 10px; font-weight: 750; white-space: nowrap; }
.headphone-badge svg { width: 16px; height: 16px; }
.analysis-count { color: var(--slate); background: #f0f3f6; }

/* Non-destructive section trim editor */
.trim-section { padding: 13px 16px 14px; border-color: #d7e1e6; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,250,251,.9)); }
.trim-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.trim-heading > div { min-width: 0; }
.trim-section .trim-heading h2 { margin: 0; font-size: 15px; }
.trim-heading p { margin: 1px 0 0; color: var(--muted); font-size: 9px; }
.trim-safe-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); font-size: 8px; font-weight: 800; white-space: nowrap; }
.trim-safe-badge svg { width: 14px; height: 14px; }

.trim-time-readouts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.trim-time-readouts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.trim-time-readouts span { overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.trim-time-readouts output { color: var(--navy); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trim-duration-readout { border-color: rgba(8,127,137,.28) !important; background: var(--teal-soft) !important; }
.trim-duration-readout output { color: var(--teal-dark); }

.trim-timeline { --trim-start: 0%; --trim-end: 100%; position: relative; height: 72px; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, #fbfcfd, #f2f6f7); }
.trim-timeline::before { content: ""; position: absolute; z-index: 0; top: 50%; right: 0; left: 0; height: 1px; background: #cfd8de; }
.trim-waveform { position: absolute; z-index: 1; inset: 8px 7px; width: calc(100% - 14px); height: calc(100% - 16px); overflow: visible; }
.trim-waveform path { fill: none; stroke: #8da2ad; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.trim-outside { position: absolute; z-index: 2; top: 0; bottom: 0; background: rgba(231,236,240,.72); backdrop-filter: grayscale(.7); pointer-events: none; }
.trim-outside-start { left: 0; width: var(--trim-start); border-right: 1px solid #9ba9b5; }
.trim-outside-end { right: 0; width: calc(100% - var(--trim-end)); border-left: 1px solid #9ba9b5; }
.trim-selection { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--trim-start); right: calc(100% - var(--trim-end)); border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal); background: rgba(8,127,137,.055); pointer-events: none; }
.trim-selection i { position: absolute; top: 50%; width: 4px; height: 36px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(7,61,67,.22); transform: translateY(-50%); }
.trim-selection i:first-child { left: -2px; }
.trim-selection i:last-child { right: -2px; }
.trim-range { position: absolute; z-index: 4; top: 50%; left: 0; width: 100%; height: 30px; margin: 0; appearance: none; background: transparent; pointer-events: none; transform: translateY(-50%); }
.trim-range-end { z-index: 5; }
.trim-range::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.trim-range::-webkit-slider-thumb { width: 18px; height: 28px; margin-top: -13px; appearance: none; border: 2px solid #fff; border-radius: 7px; background: var(--teal); box-shadow: 0 1px 5px rgba(7,61,67,.28); cursor: ew-resize; pointer-events: auto; }
.trim-range::-moz-range-track { height: 2px; background: transparent; }
.trim-range::-moz-range-thumb { width: 15px; height: 25px; border: 2px solid #fff; border-radius: 7px; background: var(--teal); box-shadow: 0 1px 5px rgba(7,61,67,.28); cursor: ew-resize; pointer-events: auto; }
.trim-range:focus-visible { outline: 0; }
.trim-range:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(8,127,137,.28); outline-offset: 3px; }
.trim-range:focus-visible::-moz-range-thumb { outline: 3px solid rgba(8,127,137,.28); outline-offset: 3px; }
.trim-ticks { display: flex; justify-content: space-between; padding: 2px 2px 0; color: var(--muted); font-size: 7px; font-variant-numeric: tabular-nums; }

.trim-actions { display: grid; grid-template-columns: minmax(290px,1fr) minmax(330px,1.1fr) auto auto; align-items: end; gap: 9px; margin-top: 9px; }
.trim-action-group { position: relative; display: grid; gap: 6px; min-width: 0; margin: 0; padding: 16px 0 0; border: 0; }
.trim-action-group:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
.trim-intro-presets { grid-template-columns: repeat(3,minmax(0,1fr)); }
.trim-action-group legend { position: absolute; top: 0; left: 0; padding: 0; color: var(--slate); font-size: 8px; font-weight: 700; }
.trim-action-group button, .trim-utility-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 35px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; cursor: pointer; font-size: 8px; font-weight: 700; white-space: nowrap; transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; }
.trim-action-group button:hover, .trim-utility-button:hover { border-color: var(--teal); color: var(--teal-dark); box-shadow: 0 2px 8px rgba(8,127,137,.08); }
.trim-action-group button:active, .trim-action-group button.is-active, .trim-utility-button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); }
.trim-action-group button svg, .trim-utility-button svg { flex: 0 0 auto; width: 14px; height: 14px; }
.trim-reset-button { color: var(--slate); }
.trim-summary { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 30px; margin-top: 9px; padding: 5px 10px; border-radius: 7px; color: var(--slate); background: #f0f5f6; font-size: 8px; }
.trim-summary > svg { width: 15px; height: 15px; color: var(--teal-dark); }
.trim-summary > i { width: 1px; height: 13px; background: var(--line-strong); }
.trim-summary b, .trim-summary strong { color: var(--navy); font-size: 9px; font-variant-numeric: tabular-nums; }
.trim-summary strong { color: var(--teal-dark); }

body.high-contrast .trim-section,
body.high-contrast .trim-time-readouts > div,
body.high-contrast .trim-timeline,
body.high-contrast .trim-action-group button,
body.high-contrast .trim-utility-button { border-color: var(--line-strong); }
body.high-contrast .trim-waveform path { stroke: var(--navy); }
body.high-contrast .trim-outside { background: rgba(210,216,222,.88); }
body.large-text .trim-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
body.large-text .trim-heading p, body.large-text .trim-time-readouts span, body.large-text .trim-action-group legend { font-size: 11px; }
body.large-text .trim-action-group { padding-top: 23px; }
body.large-text .trim-action-group button, body.large-text .trim-utility-button { min-height: 40px; font-size: 12px; white-space: normal; }
body.large-text .trim-time-readouts > div { flex-wrap: wrap; gap: 3px 8px; }
body.large-text .trim-ticks { font-size: 10px; }
body.large-text .trim-summary, body.large-text .trim-summary b, body.large-text .trim-summary strong { font-size: 11px; }

/* Quality-first automatic mastering analysis */
.auto-master-section { padding: 15px 16px 16px; border-color: #cfdde3; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,249,249,.72)); }
.auto-master-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.auto-master-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.auto-master-title > div { min-width: 0; }
.analysis-shield { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(8,127,137,.22); border-radius: 12px; color: var(--teal-dark); background: var(--teal-soft); }
.analysis-shield svg { width: 24px; height: 24px; }
.analysis-eyebrow { display: block; margin-bottom: 1px; color: var(--teal-dark); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.auto-master-section .auto-master-title h2 { margin: 0; font-size: 17px; }
.auto-master-title p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.analysis-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 29px; padding: 4px 10px; border: 1px solid #b7e2d6; border-radius: 999px; color: #087255; background: #eefaf5; font-size: 10px; font-weight: 800; white-space: nowrap; }
.analysis-status i { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #0b8e6d; }
.analysis-status svg { width: 11px; height: 11px; stroke-width: 2.5; }
.analysis-status.is-waiting { border-color: var(--line); color: var(--slate); background: #f5f7f9; }
.analysis-status.is-waiting i { background: #748297; }
.analysis-status.is-running { border-color: #b8dfe2; color: var(--teal-dark); background: var(--teal-soft); }
.analysis-status.is-running i { background: var(--teal); }
.analysis-status.is-complete { border-color: #9fd5c5; color: #065e47; background: #e9f8f2; }
.analysis-status.is-complete i { background: #078263; }
.analysis-status.is-error { border-color: #e4aaa6; color: #8c2f29; background: #fff1ef; }
.analysis-status.is-error i { background: #b64239; }

.analysis-setup { display: grid; grid-template-columns: minmax(170px,.65fr) minmax(170px,.65fr) minmax(520px,2fr) auto; align-items: end; gap: 12px; margin-top: 13px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.88); }
.analysis-select { display: grid; gap: 4px; min-width: 0; color: var(--navy); font-size: 10px; font-weight: 750; }
.analysis-select select { width: 100%; min-height: 39px; padding: 0 32px 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--navy); background: #fff; font-size: 11px; font-weight: 650; }
.analysis-select small { overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.source-profile-select select { border-color: rgba(8,127,137,.36); background: linear-gradient(135deg, #fff, var(--teal-soft)); }
.master-mode-picker { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.master-mode-picker legend { margin-bottom: 4px; padding: 0; color: var(--navy); font-size: 10px; font-weight: 750; }
.master-mode-option { position: relative; min-width: 0; cursor: pointer; }
.master-mode-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.master-mode-option > span { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 7px; min-height: 39px; padding: 5px 9px 5px 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--slate); background: #fff; }
.master-mode-option > span::before { content: ""; position: absolute; top: 50%; left: 9px; width: 12px; height: 12px; border: 1px solid #aeb9c5; border-radius: 50%; transform: translateY(-50%); }
.master-mode-option b { overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.master-mode-option small { grid-row: 2; color: var(--muted); font-size: 8px; }
.master-mode-option em { grid-column: 2; grid-row: 1 / 3; padding: 2px 5px; border-radius: 99px; color: var(--teal-dark); background: var(--teal-soft); font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.master-mode-option input:checked + span { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); box-shadow: 0 0 0 1px rgba(8,127,137,.08); }
.master-mode-option input:checked + span::before { border: 3px solid #fff; background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.master-mode-option input:focus-visible + span { outline: 3px solid rgba(8,127,137,.24); outline-offset: 2px; }
.master-mode-option.is-disabled { cursor: not-allowed; opacity: .58; }
.master-mode-option.is-disabled > span { background: #f3f5f7; }
.mode-confidence-note { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(180px,1fr); align-items: center; gap: 4px 10px; margin: 1px 0 0; padding: 5px 8px; border: 1px solid #dbe5e8; border-radius: 6px; color: var(--muted); background: #f8fbfb; font-size: 7px; font-weight: 500; line-height: 1.4; }
.mode-confidence-note b { color: var(--navy); font-size: 8px; }
.mode-confidence-note span { color: var(--teal-dark); font-weight: 750; white-space: nowrap; }
.mode-confidence-note small { min-width: 0; color: var(--muted); font-size: inherit; }
.is-unavailable { opacity: .62; }
.is-unavailable input { cursor: not-allowed; }
.is-unavailable .switch span { color: var(--muted); }
.analysis-run-button { min-height: 39px; padding-inline: 15px; border-radius: 8px; font-size: 10px; white-space: nowrap; }
.analysis-run-button svg { width: 17px; height: 17px; }

.studio-pipeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
.studio-pipeline li { position: relative; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 58px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.9); }
.studio-pipeline li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 50%; right: -10px; width: 10px; height: 1px; background: var(--line-strong); }
.pipeline-step-number { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #bdc8d1; border-radius: 50%; color: var(--slate); background: #f6f8fa; font-size: 10px; font-weight: 850; }
.studio-pipeline li > div { min-width: 0; }
.studio-pipeline strong, .studio-pipeline small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-pipeline strong { color: var(--navy); font-size: 10px; }
.studio-pipeline small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.studio-pipeline em { padding: 2px 6px; border-radius: 99px; color: var(--slate); background: #eef1f4; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.studio-pipeline [data-step-status="ready"] { border-color: rgba(8,127,137,.34); background: linear-gradient(135deg, #fff, rgba(225,245,244,.68)); }
.studio-pipeline [data-step-status="ready"] .pipeline-step-number,
.studio-pipeline [data-step-status="running"] .pipeline-step-number,
.studio-pipeline [data-step-status="pass"] .pipeline-step-number { border-color: var(--teal); color: #fff; background: var(--teal); }
.studio-pipeline [data-step-status="ready"] em,
.studio-pipeline [data-step-status="running"] em { color: var(--teal-dark); background: var(--teal-soft); }
.studio-pipeline [data-step-status="pass"] { border-color: #bfe0d6; background: #f7fcfa; }
.studio-pipeline [data-step-status="pass"] em { color: #087255; background: #e7f6f0; }
.studio-pipeline [data-step-status="backed-off"] { border-color: #ebcf9b; background: #fffaf1; }
.studio-pipeline [data-step-status="backed-off"] em { color: #765000; background: #fff0cc; }
.studio-pipeline [data-step-status="blocked"] { border-color: #e4aaa6; background: #fff7f6; }
.studio-pipeline [data-step-status="blocked"] em { color: #9c3028; background: #fff0ee; }

.analysis-state-view { display: none; margin-top: 12px; }
[data-analysis-state="idle"] [data-analysis-view="idle"] { display: grid; }
[data-analysis-state="running"] [data-analysis-view="running"] { display: grid; }
[data-analysis-state="result"] [data-analysis-view="result"] { display: grid; }
.analysis-idle-view, .analysis-running-view { grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 13px; min-height: 92px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: #fff; }
.state-orb { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(8,127,137,.25); border-radius: 50%; color: var(--teal); background: var(--teal-soft); }
.state-orb svg { width: 27px; height: 27px; }
.state-orb.is-running { border-top-color: var(--teal); animation: analysis-spin 1.5s linear infinite; }
.state-orb.is-running svg { animation: analysis-unspin 1.5s linear infinite; }
.analysis-idle-view strong, .analysis-running-view strong { color: var(--navy); font-size: 13px; }
.analysis-idle-view p, .analysis-running-view p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.running-copy { min-width: 0; }
.analysis-progress-track { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #dce3e8; }
.analysis-progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #13a8a3); transition: width .2s ease; }
.analysis-progress-number { color: var(--teal-dark); font-size: 16px; font-variant-numeric: tabular-nums; }
.analysis-cancel { padding: 5px 2px; color: var(--muted); font-size: 9px; }
@keyframes analysis-spin { to { transform: rotate(360deg); } }
@keyframes analysis-unspin { to { transform: rotate(-360deg); } }

.analysis-result-view { grid-template-columns: minmax(250px,.72fr) minmax(0,2fr); gap: 10px; }
.safe-result-card { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 12px; min-width: 0; padding: 13px; border: 1px solid rgba(8,127,137,.3); border-radius: 10px; background: linear-gradient(135deg, #fff 35%, var(--teal-soft)); }
.safe-result-gauge { position: relative; display: grid; width: 78px; height: 78px; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) 0 78%, #dbe5e7 78% 100%); transform: rotate(-45deg); }
.safe-result-gauge::before { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #fff; }
.safe-result-gauge span { position: relative; width: 27px; height: 2px; background: var(--teal-dark); transform: rotate(24deg); transform-origin: right center; }
.safe-result-gauge i { position: absolute; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-dark); }
.safe-result-copy { min-width: 0; }
.safe-result-copy > span { display: block; color: var(--slate); font-size: 9px; font-weight: 650; }
.safe-result-copy > strong { display: block; margin-top: -1px; color: var(--teal-dark); font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.safe-result-copy > strong small { font-size: 11px; }
.safe-result-copy p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.safe-result-copy p b { color: var(--navy); }
.safe-result-badge { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 24px; border-radius: 6px; color: #087255; background: rgba(11,142,109,.09); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.safe-result-badge svg { width: 14px; height: 14px; }

.quality-gates { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.quality-gates-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quality-gates-heading strong, .quality-gates-heading small { display: block; }
.quality-gates-heading strong { color: var(--navy); font-size: 11px; }
.quality-gates-heading small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.quality-gates-heading > span { display: inline-flex; align-items: center; gap: 5px; color: #087255; font-size: 8px; font-weight: 750; white-space: nowrap; }
.quality-gates-heading > span i { width: 7px; height: 7px; border-radius: 50%; background: #0b9b73; box-shadow: 0 0 0 3px rgba(11,155,115,.1); }
.quality-gate-grid { display: grid; grid-template-columns: repeat(7,minmax(83px,1fr)); gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.quality-gate-grid li { display: grid; gap: 4px; min-width: 0; min-height: 68px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfd; }
.quality-gate-grid li > span { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--slate); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.quality-gate-grid li > span svg { flex: 0 0 auto; width: 13px; height: 13px; }
.quality-gate-grid li > b { overflow: hidden; color: var(--navy); font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.quality-gate-grid li > em { display: inline-flex; align-items: center; align-self: end; gap: 3px; width: max-content; color: #087255; font-size: 7px; font-style: normal; font-weight: 800; }
.quality-gate-grid li > em svg { width: 10px; height: 10px; stroke-width: 2.5; }
.quality-gate-grid li.is-pass { border-color: #cce7de; background: #f8fcfa; }
.quality-gate-grid li.is-warning { border-color: #efd694; background: #fffaf0; }
.quality-gate-grid li.is-fail { border-color: #edb6b2; background: #fff7f6; }

.candidate-analysis { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,1fr); gap: 10px; }
.candidate-ladder { min-width: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.candidate-heading { display: flex; align-items: baseline; gap: 8px; }
.candidate-heading strong { color: var(--navy); font-size: 11px; }
.candidate-heading small { color: var(--muted); font-size: 8px; }
.candidate-ladder ol { position: relative; display: grid; grid-template-columns: repeat(5,1fr); margin: 7px 0 1px; padding: 0; list-style: none; }
.candidate-ladder ol::before { content: ""; position: absolute; z-index: 0; top: 28px; right: 9%; left: 9%; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #8fcfc2 0 74%, #e7a8a2 74% 100%); }
.candidate-ladder li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; color: var(--muted); }
.candidate-ladder li b { font-size: 10px; font-variant-numeric: tabular-nums; }
.candidate-ladder li span { display: grid; width: 13px; height: 13px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #61b6a5; box-shadow: 0 0 0 1px #61b6a5; }
.candidate-ladder li em { padding: 1px 5px; border-radius: 99px; font-size: 7px; font-style: normal; font-weight: 800; }
.candidate-ladder li.is-pass em { color: #087255; background: #eef8f4; }
.candidate-ladder li.is-predicted span { background: #fff; box-shadow: 0 0 0 1px #8995a3; }
.candidate-ladder li.is-predicted span::after { content: "?"; color: #5e6b79; font-size: 8px; font-weight: 850; line-height: 1; }
.candidate-ladder li.is-predicted em { color: #52606d; background: #eef1f4; }
.candidate-ladder li.is-selected { color: var(--teal-dark); }
.candidate-ladder li.is-selected b { font-size: 13px; }
.candidate-ladder li.is-selected span { width: 17px; height: 17px; background: var(--teal); box-shadow: 0 0 0 2px var(--teal), 0 0 0 6px rgba(8,127,137,.1); }
.candidate-ladder li.is-selected em { color: #fff; background: var(--teal); }
.candidate-ladder li.is-rejected { color: #9c3028; }
.candidate-ladder li.is-rejected span { background: #fff; box-shadow: 0 0 0 1px #c9574e; }
.candidate-ladder li.is-rejected span::after { content: "×"; color: #b23c34; font-size: 9px; font-weight: 850; line-height: 1; }
.candidate-ladder li.is-rejected em { color: #9c3028; background: #fff0ee; }
.candidate-scale { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 7px; }
.candidate-scale i { height: 1px; background: var(--line); }
.analysis-failure { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #ebcf9b; border-radius: 10px; background: #fffaf1; }
.analysis-failure > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #996515; background: #fff0cc; }
.analysis-failure > span svg { width: 20px; height: 20px; }
.analysis-failure strong { display: block; color: #67450c; font-size: 10px; }
.analysis-failure p { margin: 2px 0 0; color: #765b2b; font-size: 8px; line-height: 1.45; }
.analysis-fallback { grid-column: 1 / -1; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #b9ded4; border-radius: 10px; background: linear-gradient(135deg, #f9fdfb, #eef9f5); }
.analysis-fallback > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: #087255; background: #dff3eb; }
.analysis-fallback > span svg { width: 21px; height: 21px; }
.analysis-fallback strong { display: block; color: #075f49; font-size: 10px; }
.analysis-fallback p { margin: 2px 0 0; color: #3f665b; font-size: 8px; line-height: 1.45; }
.analysis-fallback > em { padding: 3px 7px; border-radius: 99px; color: #087255; background: #dff3eb; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.analysis-fallback[data-fallback-state="active"] { border-color: #d5b667; background: #fffaf0; }
.analysis-fallback[data-fallback-state="active"] > em { color: #765000; background: #fff0cc; }
.analysis-fallback[data-fallback-state="blocked"] { border-color: #e4aaa6; background: #fff7f6; }
.analysis-fallback[data-fallback-state="blocked"] > em { color: #9c3028; background: #fff0ee; }

body.high-contrast .auto-master-section,
body.high-contrast .analysis-setup,
body.high-contrast .studio-pipeline li,
body.high-contrast .safe-result-card,
body.high-contrast .quality-gates,
body.high-contrast .candidate-ladder,
body.high-contrast .analysis-fallback { border-color: var(--line-strong); }
body.high-contrast .analysis-status,
body.high-contrast .quality-gate-grid li.is-pass { border-color: #17654f; color: #003e2e; }
body.high-contrast .mode-confidence-note { border-color: var(--line-strong); color: #17202d; background: #fff; }
body.high-contrast .analysis-failure { border-color: #765000; }
body.high-contrast .analysis-failure strong,
body.high-contrast .analysis-failure p { color: #4d3400; }
body.high-contrast .analysis-fallback strong,
body.high-contrast .analysis-fallback p { color: #003e2e; }
body.high-contrast .source-profile-select select { border-color: var(--line-strong); background: #fff; }
body.high-contrast :focus-visible { outline: 3px solid #004e54 !important; outline-offset: 3px; }
body.high-contrast .switch input:focus-visible + i,
body.high-contrast .master-mode-option input:focus-visible + span,
body.high-contrast .format-option input:focus-visible + span { outline: 3px solid #004e54 !important; outline-offset: 3px; }

body.large-text .card-stepper { grid-template-columns: repeat(4,minmax(205px,1fr)); overflow-x: auto; padding-bottom: 4px; }
body.large-text .card-stepper > i { display: none; }
body.large-text .analysis-setup { grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); }
body.large-text .analysis-setup .master-mode-picker { grid-column: 1 / -1; }
body.large-text .analysis-run-button { grid-column: 1 / -1; justify-self: end; }
body.large-text .studio-pipeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.large-text .studio-pipeline li::after { display: none; }
body.large-text .mode-confidence-note { font-size: 11px; }
body.large-text .mode-confidence-note b { font-size: 12px; }
body.large-text .master-mode-option b { font-size: 12px; }
body.large-text .master-mode-option small { font-size: 11px; }
body.large-text .master-mode-option em { font-size: 10px; }
body.large-text .quality-gates-heading strong,
body.large-text .candidate-heading strong { font-size: 13px; }
body.large-text .quality-gates-heading small,
body.large-text .candidate-heading small { font-size: 11px; }
body.large-text .quality-gate-grid li > span { font-size: 11px; }
body.large-text .quality-gate-grid li > b { font-size: 13px; }
body.large-text .quality-gate-grid li > em { font-size: 10px; }
body.large-text .analysis-failure strong,
body.large-text .analysis-fallback strong { font-size: 13px; }
body.large-text .analysis-failure p,
body.large-text .analysis-fallback p { font-size: 11px; }
body.large-text .analysis-fallback > em { font-size: 10px; }
body.large-text .safe-result-copy > span { font-size: 12px; }
body.large-text .safe-result-copy p { font-size: 11px; }
body.large-text .safe-result-badge { font-size: 11px; }
body.large-text .candidate-ladder li b { font-size: 12px; }
body.large-text .candidate-ladder li em,
body.large-text .candidate-scale { font-size: 10px; }

.spatial-section { container: spatial-options / inline-size; padding-bottom: 13px; }
.spatial-availability { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: #f4f8fa; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.spatial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spatial-card { position: relative; display: grid; grid-template-columns: 88px 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 9px 14px; min-width: 0; min-height: 154px; padding: 13px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(135deg, #fff 35%, rgba(8,127,137,.045)); }
.spatial-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal); opacity: .85; }
.spatial-card.is-off::before { background: #9ca8b5; opacity: .5; }
.spatial-orbit { position: relative; grid-row: 1 / 3; width: 78px; height: 78px; border: 1px solid rgba(8,127,137,.45); border-radius: 50%; background: radial-gradient(circle, rgba(8,127,137,.12) 0 8%, transparent 9% 100%); }
.spatial-orbit::before, .spatial-orbit::after, .spatial-orbit span { content: ""; position: absolute; border: 1px solid rgba(8,127,137,.3); border-radius: 50%; }
.spatial-orbit::before { inset: 10px; }
.spatial-orbit::after { top: 50%; right: 5px; left: 5px; height: 25px; transform: translateY(-50%) rotate(-18deg); }
.spatial-orbit span { top: 5px; bottom: 5px; left: 50%; width: 25px; transform: translateX(-50%) rotate(18deg); }
.spatial-orbit i { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--teal); box-shadow: 0 2px 8px rgba(8,127,137,.28); transform: translate(-50%,-50%); }
.spatial-orbit b { position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,137,.12); transform-origin: 0 31px; }
.spatial-card.is-on .eight-d-orbit b { animation: spatial-orbit 4.2s linear infinite; }
.spatial-card.is-off .spatial-orbit { filter: grayscale(.8); opacity: .48; }
.spatial-copy { min-width: 0; }
.spatial-copy strong, .spatial-copy small, .spatial-kicker { display: block; }
.spatial-copy strong { margin-top: 1px; color: var(--navy); font-size: 19px; letter-spacing: .025em; }
.spatial-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.spatial-kicker { color: var(--teal-dark); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.spatial-switch { align-self: start; }
.spatial-controls { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spatial-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; color: var(--slate); font-size: 10px; }
.spatial-controls output { color: var(--navy); font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.spatial-controls input, .advanced-control input { grid-column: 1 / -1; width: 100%; height: 4px; margin: 2px 0 0; appearance: none; border-radius: 4px; background: linear-gradient(90deg, var(--teal) 0 var(--range-pct, 40%), #d9dee3 var(--range-pct, 40%) 100%); cursor: pointer; }
.spatial-controls input::-webkit-slider-thumb, .advanced-control input::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: var(--teal); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.spatial-card.is-off .spatial-controls { opacity: .42; }

@keyframes spatial-orbit {
  from { transform: rotate(0deg) translateY(-31px); }
  to { transform: rotate(360deg) translateY(-31px); }
}

.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.metric-grid article { display: grid; grid-template-columns: 31px 1fr; gap: 9px; min-width: 0; min-height: 113px; padding: 10px 12px 7px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.metric-grid article > svg { width: 28px; height: 28px; color: var(--navy); }
.metric-grid article > div > strong { display: block; color: var(--navy); font-size: 12px; line-height: 1.25; }
.metric-grid article p { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 16px; text-align: center; }
.metric-grid article p span, .metric-grid article p b { font-weight: 500; }
.metric-grid article p b { color: var(--teal-dark); font-weight: 750; }
.metric-grid article p small { display: block; color: var(--muted); font-size: 9px; font-weight: 500; }
.metric-grid article > small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; }

/* Read-only studio processing report */
.studio-chain-section { padding: 15px 16px 16px; overflow: hidden; border-color: #cddde3; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,248,248,.76)); }
.studio-chain-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.studio-chain-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.studio-chain-title-wrap > div { min-width: 0; }
.studio-chain-mark { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(8,127,137,.22); border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--teal-bright), var(--teal-dark)); box-shadow: 0 7px 17px rgba(8,127,137,.18); }
.studio-chain-mark svg { width: 23px; height: 23px; }
.studio-chain-eyebrow, .studio-panel-kicker { display: block; color: var(--teal-dark); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.studio-chain-section .studio-chain-title-wrap h2 { margin: 1px 0 0; font-size: 17px; }
.studio-chain-title-wrap p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.studio-chain-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 30px; padding: 4px 11px 4px 5px; border: 1px solid #a9d8cb; border-radius: 999px; color: #066348; background: #edf9f4; font-size: 10px; font-weight: 800; white-space: nowrap; }
.studio-chain-badge i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: #098665; }
.studio-chain-badge svg { width: 12px; height: 12px; stroke-width: 2.5; }

.studio-chain-layout { display: grid; grid-template-columns: minmax(390px,.9fr) minmax(560px,1.25fr); gap: 12px; margin-top: 13px; }
.auto-eq-report, .master-chain-report { min-width: 0; padding: 13px; border: 1px solid #d7e1e6; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 3px 10px rgba(15,35,55,.035); }
.auto-eq-report > header, .master-chain-report > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.auto-eq-report > header > div, .master-chain-report > header > div { min-width: 0; }
.auto-eq-report h3, .master-chain-report h3 { margin: 1px 0 0; color: var(--navy); font-size: 14px; line-height: 1.25; }
.auto-eq-report header p, .master-chain-report header p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.studio-panel-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--slate); background: #eef2f5; font-size: 8px; font-weight: 800; white-space: nowrap; }
[data-eq-state="ready"] .studio-panel-status, [data-eq-state="complete"] .studio-panel-status, [data-chain-state="ready"] .studio-chain-badge, [data-chain-state="complete"] .studio-chain-badge { color: #066348; background: #e9f8f2; }

.auto-eq-visual { position: relative; height: 250px; margin-top: 10px; overflow: hidden; border: 1px solid #183953; border-radius: 10px; background: radial-gradient(circle at 76% 14%, rgba(24,194,196,.15), transparent 32%), linear-gradient(155deg, #071b35, #0c2b3b); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.auto-eq-visual > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auto-eq-grid path { fill: none; stroke: rgba(176,213,222,.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.auto-eq-area { fill: url(#studioEqArea); stroke: none; }
.auto-eq-curve { fill: none; stroke: #21d2d0; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(33,210,208,.38)); vector-effect: non-scaling-stroke; }
.auto-eq-placeholder > path { fill: none; stroke: rgba(197,222,228,.28); stroke-width: 1.5; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; }
.auto-eq-placeholder rect { fill: rgba(7,26,53,.82); stroke: rgba(161,205,211,.32); stroke-width: 1; }
.auto-eq-placeholder text { fill: #d6e7eb; stroke: none; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.auto-eq-axis text { fill: #9fb7c2; stroke: none; font-family: var(--font); font-size: 11px; font-weight: 650; letter-spacing: 0; }
[data-eq-state="ready"] .auto-eq-placeholder, [data-eq-state="complete"] .auto-eq-placeholder { display: none; }

.auto-eq-band-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.auto-eq-band-list li { min-width: 0; padding: 7px 7px 6px; border: 1px solid #e1e7eb; border-radius: 8px; background: linear-gradient(180deg, #fff, #f8fafb); }
.auto-eq-band-list li > span { display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 0 5px; align-items: center; min-width: 0; }
.auto-eq-band-list li i { grid-row: 1 / 3; display: block; width: 5px; height: 26px; border-radius: 99px; background: #2ababb; }
.auto-eq-band-list li:nth-child(2) i { background: #16a3ad; }
.auto-eq-band-list li:nth-child(3) i { background: #087f89; }
.auto-eq-band-list li:nth-child(4) i { background: #176b85; }
.auto-eq-band-list li:nth-child(5) i { background: #294f73; }
.auto-eq-band-list b, .auto-eq-band-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-eq-band-list b { color: var(--navy); font-size: 9px; }
.auto-eq-band-list small { color: var(--muted); font-size: 7px; }
.auto-eq-band-list output { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
[data-eq-state="ready"] .auto-eq-band-list output, [data-eq-state="complete"] .auto-eq-band-list output { color: var(--teal-dark); }

.master-chain-list { position: relative; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.master-chain-list::before { content: ""; position: absolute; z-index: 0; top: 24px; bottom: 24px; left: 28px; width: 2px; border-radius: 2px; background: linear-gradient(var(--teal), #8ca2b3); }
.master-chain-list li { position: relative; z-index: 1; display: grid; grid-template-columns: 30px 32px minmax(0,1fr) auto 38px; align-items: center; gap: 8px; min-width: 0; min-height: 50px; padding: 7px 8px; border: 1px solid #e0e6ea; border-radius: 9px; background: linear-gradient(90deg, #fff, #fbfcfd); }
.chain-stage-index { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--teal-dark); box-shadow: 0 0 0 1px rgba(8,127,137,.32); font-size: 7px; font-weight: 850; letter-spacing: .03em; }
.chain-stage-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: #0b5262; background: var(--teal-soft); }
.chain-stage-icon svg { width: 18px; height: 18px; }
.master-chain-list li > div { min-width: 0; }
.master-chain-list strong, .master-chain-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-chain-list strong { color: var(--navy); font-size: 10px; letter-spacing: .01em; }
.master-chain-list small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.master-chain-list output { min-width: 0; max-width: 260px; padding: 4px 7px; border: 1px solid #dfe5e9; border-radius: 6px; color: var(--muted); background: #fff; font-size: 7px; font-weight: 700; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.master-chain-list em { padding: 3px 6px; border-radius: 999px; color: var(--slate); background: #eef2f5; font-size: 7px; font-style: normal; font-weight: 800; text-align: center; white-space: nowrap; }
.master-chain-list [data-stage-state="pass"] { border-color: #b9ddd3; background: linear-gradient(90deg, #fff, #f3fbf8); }
.master-chain-list [data-stage-state="pass"] output { border-color: #b9ddd3; color: #066348; }
.master-chain-list [data-stage-state="pass"] em { color: #066348; background: #e5f6ef; }
.master-chain-list [data-stage-state="running"] { border-color: #9bcfd4; box-shadow: 0 0 0 2px rgba(8,127,137,.07); }
.master-chain-list [data-stage-state="running"] em { color: var(--teal-dark); background: var(--teal-soft); }

.master-chain-note { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; margin-top: 8px; padding: 8px 10px; border: 1px solid #dce6e8; border-radius: 8px; color: var(--slate); background: #f5f9f9; }
.master-chain-note > svg { width: 22px; height: 22px; color: var(--teal-dark); }
.master-chain-note p { min-width: 0; margin: 0; }
.master-chain-note strong, .master-chain-note span { display: block; }
.master-chain-note strong { color: var(--navy); font-size: 8px; }
.master-chain-note span { margin-top: 1px; font-size: 7px; }

.studio-tuning-panel { margin-top: 12px; padding: 13px; border: 1px solid #c9dce1; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 3px 11px rgba(15,35,55,.04); }
.studio-tuning-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.studio-tuning-heading > div { min-width: 0; }
.studio-tuning-heading h3 { margin: 2px 0 0; color: var(--navy); font-size: 14px; }
.studio-tuning-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.studio-tuning-heading .reset-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.studio-tuning-heading .reset-button svg { width: 14px; height: 14px; }
.studio-tuning-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 14px; }
.studio-tuning-panel fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid #dce5e8; border-radius: 9px; }
.studio-tuning-panel legend { max-width: 100%; padding: 0 6px; color: var(--navy); font-size: 12px; font-weight: 800; }
.studio-tuning-panel legend small { display: inline-block; margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 600; }
/* Each name, value and slider gets its own row; columns follow available card space. */
.studio-eq-control-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr)); gap: 10px; }
.studio-eq-control-grid > label { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #e3e8eb; border-radius: 8px; background: #fafcfc; }
.studio-eq-control-grid > label > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.studio-eq-control-grid > label > span:first-child b, .studio-eq-control-grid > label > span:first-child small { display: block; }
.studio-eq-control-grid > label > span:first-child b { color: var(--navy); font-size: 12px; }
.studio-eq-control-grid > label > span:first-child small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.studio-eq-control-grid > label.has-adjustment { border-color: #9acfd3; background: #f0f9f9; }
.studio-eq-control-grid input[type="range"], .studio-module-grid input[type="range"] { grid-column: 1 / -1; width: 100%; height: 5px; margin: 4px 0 1px; appearance: none; border-radius: 5px; background: linear-gradient(90deg,var(--teal) 0 var(--range-pct,50%),#d9e1e5 var(--range-pct,50%) 100%); cursor: pointer; }
.studio-eq-control-grid input[type="range"]::-webkit-slider-thumb, .studio-module-grid input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: var(--teal); box-shadow: 0 1px 4px rgba(0,0,0,.24); }
.studio-value-input { display: grid; grid-template-columns: minmax(0,1fr) auto; min-width: 0; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.studio-value-input input { width: 100%; min-width: 0; height: 30px; padding: 0 2px; border: 0; outline: 0; color: var(--navy); background: transparent; text-align: right; font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.studio-value-input i { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.studio-module-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 10px; }
.studio-module-grid article { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #dfe6e9; border-radius: 8px; background: #fff; }
.studio-module-grid article.is-off { opacity: .62; background: #f7f9fa; }
.studio-module-switch { display: grid; grid-template-columns: 18px minmax(0,1fr); min-width: 0; align-items: center; gap: 4px 7px; cursor: pointer; }
.studio-module-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.studio-module-switch span { min-width: 0; color: var(--navy); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
.studio-module-switch em { grid-column: 2; justify-self: start; padding: 2px 5px; border-radius: 999px; color: #066348; background: #e5f6ef; font-size: 10px; font-style: normal; font-weight: 800; }
.studio-module-grid article.is-off .studio-module-switch em { color: var(--muted); background: #e9edf0; }
.studio-module-grid input:disabled { cursor: not-allowed; opacity: .55; }

body.high-contrast .studio-tuning-panel, body.high-contrast .studio-tuning-panel fieldset, body.high-contrast .studio-eq-control-grid > label, body.high-contrast .studio-module-grid article { border-width: 2px; border-color: #000; }
body.high-contrast .gain-readout input:focus-visible, body.high-contrast .q-readout input:focus-visible, body.high-contrast .compact-gain-input input:focus-visible, body.high-contrast .studio-value-input input:focus-visible { outline: 3px solid #004e54; }
body.large-text .studio-tuning-grid { grid-template-columns: 1fr; }
body.large-text .studio-tuning-heading p { font-size: 12px; }
body.large-text .studio-tuning-panel legend, body.large-text .studio-eq-control-grid > label > span:first-child b, body.large-text .studio-module-switch span { font-size: 14px; }
body.large-text .studio-eq-control-grid > label > span:first-child small, body.large-text .studio-tuning-panel legend small, body.large-text .studio-module-switch em, body.large-text .studio-value-input i { font-size: 12px; }
body.large-text .studio-value-input input { font-size: 15px; }

body.high-contrast .studio-chain-section,
body.high-contrast .auto-eq-report,
body.high-contrast .master-chain-report,
body.high-contrast .auto-eq-band-list li,
body.high-contrast .master-chain-list li,
body.high-contrast .master-chain-note { border-color: var(--line-strong); }
body.high-contrast .auto-eq-visual { border-width: 2px; border-color: #000; background: #000b22; }
body.high-contrast .auto-eq-grid path { stroke: rgba(255,255,255,.3); }
body.high-contrast .auto-eq-placeholder text { fill: #fff; }
body.high-contrast .studio-chain-badge { border-color: #006c52; color: #003f30; background: #d9f5e9; }
body.high-contrast .studio-panel-status, body.high-contrast .master-chain-list em { color: var(--navy); border: 1px solid var(--line-strong); background: #fff; }
body.large-text .studio-chain-layout { grid-template-columns: 1fr; }
body.large-text .studio-chain-title-wrap p,
body.large-text .auto-eq-report header p,
body.large-text .master-chain-report header p { font-size: 11px; }
body.large-text .auto-eq-band-list b, body.large-text .master-chain-list strong { font-size: 11px; }
body.large-text .auto-eq-band-list small, body.large-text .master-chain-list small { font-size: 9px; }
body.large-text .auto-eq-band-list output, body.large-text .master-chain-list output, body.large-text .master-chain-list em { font-size: 9px; }
body.large-text .master-chain-note strong { font-size: 10px; }
body.large-text .master-chain-note span { font-size: 9px; }

.quick-section { container: quick-sound / inline-size; }
.quick-instructions { margin: 0 0 14px; color: var(--slate); font-size: 13px; line-height: 1.6; }
.quick-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.quick-grid article { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,360px); align-items: center; gap: 12px 24px; min-width: 0; padding: 14px 16px; }
.quick-grid article + article { border-top: 1px solid var(--line); }
.quick-grid strong, .quick-grid small { display: block; }
.quick-grid strong { color: var(--navy); font-size: 15px; }
.quick-grid small { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.choice-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; min-width: 0; }
.choice-row button { min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; line-height: 1.4; white-space: normal; font-variant-numeric: tabular-nums; }
.choice-row button > span { white-space: nowrap; }
.choice-row button.active { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); font-weight: 700; }
.quick-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.quick-footer button { min-height: 42px; max-width: 100%; white-space: normal; }

.advanced-section { padding-bottom: 13px; }
.advanced-section .reset-button { min-height: 31px; font-size: 10px; }
.advanced-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.advanced-module { display: grid; grid-template-columns: 31px 1fr auto; grid-template-rows: auto 33px; align-items: center; gap: 7px 9px; min-width: 0; min-height: 108px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: border-color .16s ease, opacity .16s ease; }
.advanced-module > svg { width: 27px; height: 27px; color: #0b4356; }
.advanced-module > div { min-width: 0; }
.advanced-module > div strong, .advanced-module > div small { display: block; }
.advanced-module > div strong { color: var(--navy); font-size: 12px; overflow-wrap: anywhere; }
.advanced-module > div small { margin-top: 1px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.advanced-module .switch { gap: 5px; }
.advanced-module .switch span { font-size: 9px; }
.advanced-module .switch i { width: 34px; height: 19px; }
.advanced-module .switch i::after { width: 15px; height: 15px; }
.advanced-module .switch input:checked + i::after { transform: translateX(15px); }
.advanced-control { grid-column: 1 / -1; display: grid; grid-template-columns: auto 58px minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; color: var(--slate); font-size: 11px; }
.advanced-control output { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--navy); background: #fff; text-align: center; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.advanced-control input { grid-column: auto; min-width: 0; width: 100%; margin: 0; }
.advanced-module.is-off { border-color: #e5e9ed; background: #fafbfc; }
.advanced-module.is-off > svg, .advanced-module.is-off > div, .advanced-module.is-off .advanced-control { opacity: .42; }

.compact-eq-section { padding-bottom: 10px; container: compact-eq / inline-size; }
.compact-eq-wrap { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.compact-eq-actions { display: flex; align-items: stretch; justify-content: center; flex-direction: column; gap: 9px; padding: 10px; border-right: 1px solid var(--line); }
.compact-eq-actions .eq-enable { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--teal-dark); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.compact-eq-actions .eq-enable svg { width: 19px; height: 19px; }
.compact-eq-actions .outline-button { min-height: 34px; padding: 0 8px; font-size: 11px; }
.compact-eq-actions .text-button { font-size: 10px; }
.compact-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px,1fr)); min-width: 0; }
.compact-band { display: grid; grid-template-rows: 25px 34px 92px 22px; justify-items: center; min-width: 0; padding: 8px 2px; border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; color: var(--navy); font-size: 11px; }
.compact-band label { font-weight: 600; }
.compact-gain-input { display: inline-flex; align-items: center; gap: 2px; }
.compact-gain-input input { width: 48px; height: 30px; padding: 1px 3px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--navy); background: #fff; text-align: right; font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.compact-gain-input span { color: var(--muted); font-size: 9px; }
.compact-band > input[type="range"] { width: 28px; height: 88px; writing-mode: vertical-lr; direction: rtl; appearance: slider-vertical; accent-color: var(--slate); cursor: ns-resize; }
.compact-band > input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.compact-band small { font-family: Georgia,serif; }
.compact-curve { display: block; grid-column: 1 / -1; justify-self: center; width: min(100% - 24px, 560px); max-width: 100%; min-width: 0; height: auto; margin: 0 12px 12px; overflow: visible; }
.compact-curve .mini-grid { fill: none; stroke: #e2e7eb; stroke-width: 1; vector-effect: non-scaling-stroke; }
.compact-curve [data-mini-eq-line] { fill: none; stroke: var(--teal); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.compact-curve .mini-node { fill: #fff; stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.compact-curve text { fill: var(--navy); stroke: rgba(255,255,255,.94); stroke-width: 2.5px; paint-order: stroke fill; font-family: var(--font); font-size: 12px; font-weight: 750; letter-spacing: 0; }
.compact-curve .x-label { font-size: 11px; }

/* Reflow against the card width, including nested panels and large-text zoom. */
@container compact-eq (min-width: 800px) {
  .compact-bands { grid-template-columns: repeat(8, minmax(0,1fr)); }
}
@container compact-eq (max-width: 799px) {
  .compact-eq-wrap { grid-template-columns: minmax(0,1fr); }
  .compact-eq-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
  .compact-eq-actions .text-button { margin-left: auto; }
  .compact-bands { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@container compact-eq (max-width: 319px) {
  .compact-bands { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compact-eq-actions .text-button { flex-basis: 100%; margin-left: 0; text-align: left; }
}

.export-panel { margin-top: 9px; padding: 14px 16px 13px; border: 1px solid #dce4e9; border-radius: 11px; background: linear-gradient(180deg, #fff, #fbfdfd); box-shadow: 0 5px 16px rgba(15,35,55,.06); }
.export-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.export-panel-heading > div { min-width: 0; }
.export-panel-heading strong, .export-panel-heading small { display: block; }
.export-panel-heading strong { color: var(--navy); font-size: 16px; }
.export-panel-heading small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.export-panel-heading .outline-button { min-height: 32px; padding: 0 12px; font-size: 10px; }
.export-panel-heading .outline-button svg { width: 15px; height: 15px; }
.export-format-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 11px 0 0; padding: 0; border: 0; }
.format-option { position: relative; min-width: 0; cursor: pointer; }
.format-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.format-option > span { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; min-height: 58px; padding: 8px 35px 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--slate); background: #fff; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.format-option b { color: var(--navy); font-size: 15px; letter-spacing: .02em; }
.format-option small { font-size: 10px; }
.format-option > span::after { content: ""; position: absolute; top: 50%; right: 13px; width: 18px; height: 18px; border: 1px solid #bcc7d0; border-radius: 50%; transform: translateY(-50%); }
.format-option input:checked + span { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); box-shadow: 0 0 0 1px rgba(8,127,137,.09); }
.format-option input:checked + span::after { content: "✓"; display: grid; place-items: center; border-color: var(--teal); color: #fff; background: var(--teal); font-size: 11px; font-weight: 800; }
.format-option input:focus-visible + span { outline: 3px solid rgba(8,127,137,.22); outline-offset: 2px; }
.format-option input:disabled + span { opacity: .5; cursor: wait; }
.export-cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 11px; }
.export-cta .primary-button { min-width: 365px; min-height: 44px; font-size: 17px; }
.export-cta > span { color: var(--slate); font-size: 12px; }
.export-progress { display: grid; grid-template-columns: minmax(180px,1fr) auto; align-items: center; gap: 12px; max-width: 700px; margin: 10px auto 0; }
.export-progress > i { height: 7px; overflow: hidden; border-radius: 99px; background: #dde3e8; }
.export-progress > i span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #10a6a6); transition: width .14s ease; }
.export-progress > b { color: var(--teal-dark); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dialog and feedback */
.settings-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 24px 70px rgba(5,20,40,.26); }
.settings-dialog::backdrop { background: rgba(7,26,53,.32); backdrop-filter: blur(3px); }
.settings-dialog form { padding: 22px; }
.settings-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.settings-dialog header strong { min-width: 0; color: var(--navy); font-size: 20px; word-break: keep-all; }
.settings-dialog header .icon-button { flex-shrink: 0; min-height: 36px; width: 36px; padding: 0; }
.settings-dialog label { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; margin-top: 12px; color: var(--slate); }
.settings-dialog select { min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.settings-dialog p { display: flex; align-items: center; gap: 10px; margin: 20px 0; padding: 12px; border-radius: 8px; color: var(--slate); background: var(--soft); font-size: 12px; }
.settings-dialog p svg { color: var(--teal); }
.settings-dialog footer { display: flex; justify-content: flex-end; gap: 10px; }
.settings-dialog footer .primary-button { min-height: 39px; }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(420px, calc(100% - 48px)); padding: 13px 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; color: #fff; background: rgba(7,26,53,.94); box-shadow: 0 10px 35px rgba(7,26,53,.22); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1250px) {
  .app-header { gap: 16px; }
  .compact-stepper button { padding-inline: 5px; }
  .process-shell { width: min(1120px, calc(100% - 40px)); }
  .process-steps { grid-template-columns: 160px 1fr 220px 1fr 160px 1fr 160px; gap: 12px; margin-inline: 0; }
  .analysis-panel { grid-template-columns: 160px 1fr 340px; gap: 18px; }
  .analysis-copy h1 { font-size: 30px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .advanced-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-gate-grid { grid-template-columns: repeat(4, 1fr); }
  .analysis-setup { grid-template-columns: minmax(160px,.65fr) minmax(160px,.65fr) minmax(430px,2fr) auto; }
  .trim-actions { grid-template-columns: minmax(280px,1fr) minmax(320px,1.1fr); }
  .trim-utility-button { width: 100%; }
}

@media (max-width: 1050px) {
  .app-header { grid-template-columns: auto 1fr auto; }
  .header-project { display: none; }
  .compact-stepper { justify-self: end; }
  .preset-grid { gap: 10px; }
  .preset-card { grid-template-columns: 42px 1fr 18px; padding-inline: 13px; }
  .preset-card > svg:first-child { width: 34px; height: 34px; }
  .effect-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-grid { grid-template-columns: 1fr; }
  .spatial-grid { grid-template-columns: 1fr; }
  .analysis-panel { grid-template-columns: 150px 1fr; }
  .analysis-tasks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
  .analysis-tasks li { grid-template-columns: 26px 1fr; padding-inline: 10px; border-right: 1px solid var(--line); border-bottom: 0; font-size: 13px; }
  .analysis-tasks li em { grid-column: 2; justify-self: start; }
  .process-steps { grid-template-columns: repeat(4, 1fr); }
  .process-steps > i { display: none; }
  .card-stepper { grid-template-columns: repeat(4, minmax(205px,1fr)); overflow-x: auto; padding-bottom: 4px; }
  .card-stepper > i { display: none; }
  .analysis-setup { grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); }
  .analysis-setup .master-mode-picker { grid-column: 1 / -1; }
  .analysis-run-button { grid-column: 1 / -1; justify-self: end; }
  .studio-pipeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-pipeline li::after { display: none; }
  .analysis-result-view { grid-template-columns: 1fr; }
  .candidate-analysis { grid-column: auto; }
  .trim-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .app-header, body:not([data-screen="tune"]) .app-header { grid-template-columns: 1fr auto; height: 62px; padding: 0 14px; }
  .brand, body:not([data-screen="tune"]) .brand { font-size: 19px; }
  .brand-mark { width: 26px; height: 26px; }
  .compact-stepper, .header-project, .export-shortcut span { display: none; }
  .standard-actions { display: flex; }
  body:not([data-screen="tune"]) .access-actions { gap: 5px; }
  .access-button { min-height: 34px; padding-inline: 10px; font-size: 11px; }
  .access-button b { display: none; }
  .contrast-dot { width: 16px; height: 16px; }
  .wide-shell, .tune-shell, .compare-shell, .process-shell { width: calc(100% - 28px); padding-top: 16px; }
  .large-stepper { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; }
  .step-node { flex: 0 0 230px; min-height: 68px; }
  .step-line { flex: 0 0 25px; }
  .upload-card { margin-top: 18px; padding: 22px 16px; }
  .upload-heading { align-items: flex-start; gap: 14px; }
  .round-feature { flex-basis: 58px; width: 58px; height: 58px; }
  .round-feature svg { width: 32px; height: 32px; }
  .upload-heading h1 { font-size: 24px; }
  .drop-zone { min-height: 280px; padding-inline: 14px; }
  .genre-required-choice label { display: grid; gap: 8px; }
  .genre-required-choice select { min-width: 0; width: 100%; }
  .privacy-row { align-items: flex-start; flex-wrap: wrap; }
  .privacy-row .text-button { margin-left: 34px; }
  .process-steps { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; }
  .process-step { flex: 0 0 130px; min-height: 92px; font-size: 14px; }
  .process-step > span { width: 52px; height: 52px; }
  .processing-card { padding: 18px 14px; }
  .file-summary { grid-template-columns: 54px minmax(0,1fr); gap: 12px; }
  .file-icon { width: 54px; height: 54px; }
  .file-summary strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .file-summary small { font-size: 12px; }
  .file-summary .outline-button { grid-column: 1 / -1; min-height: 42px; }
  .analysis-panel { display: flex; flex-direction: column; padding: 22px 14px; }
  .progress-orb { width: 132px; height: 132px; }
  .analysis-copy { width: 100%; text-align: center; }
  .analysis-copy h1 { font-size: 27px; }
  .analysis-copy > p { font-size: 14px; }
  .progress-meta { grid-template-columns: auto 1fr auto; text-align: left; }
  .progress-meta i { display: none; }
  .analysis-tasks { display: block; width: 100%; }
  .analysis-tasks li { grid-template-columns: 30px 1fr auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .analysis-tasks li em { grid-column: auto; }
  .secure-note { grid-template-columns: auto 1fr; }
  .secure-note button { grid-column: 1 / -1; }
  .page-title h1 { font-size: 25px; }
  .preset-grid, .effect-grid, .guide-grid { grid-template-columns: 1fr; }
  .preset-card { min-height: 72px; }
  .eq-stage { min-width: 940px; }
  .effect-copy small { white-space: normal; }
  .listen-cta .primary-button { width: 100%; min-width: 0; font-size: 16px; }
  .card-stepper { grid-template-columns: repeat(4, 230px); }
  .uploaded-strip { grid-template-columns: auto 1fr; gap: 9px; }
  .upload-ok { grid-column: 1 / 2; }
  .uploaded-strip > .outline-button { grid-column: 2; }
  .trim-section { padding-inline: 11px; }
  .trim-heading { align-items: flex-start; }
  .trim-timeline { height: 80px; }
  .trim-actions,
  body.large-text .trim-actions { grid-template-columns: 1fr; }
  .trim-action-group,
  .trim-utility-button { width: 100%; }
  .trim-summary { flex-wrap: wrap; }
  .auto-master-section { padding-inline: 11px; }
  .auto-master-heading { align-items: flex-start; }
  .auto-master-title { align-items: flex-start; }
  .analysis-shield { flex-basis: 38px; width: 38px; height: 38px; }
  .auto-master-title p { line-height: 1.4; }
  .analysis-setup,
  body.large-text .analysis-setup { grid-template-columns: 1fr; padding-inline: 9px; }
  .analysis-select small { white-space: normal; }
  .analysis-setup .master-mode-picker,
  body.large-text .analysis-setup .master-mode-picker { grid-column: auto; }
  .master-mode-picker { grid-template-columns: 1fr; }
  .mode-confidence-note { grid-template-columns: 1fr; }
  .mode-confidence-note span { white-space: normal; }
  .master-mode-option > span { min-height: 45px; }
  .analysis-run-button { grid-column: auto; width: 100%; }
  .studio-pipeline,
  body.large-text .studio-pipeline { grid-template-columns: 1fr; }
  .studio-pipeline strong,
  .studio-pipeline small { white-space: normal; }
  .analysis-fallback { grid-template-columns: 36px minmax(0,1fr); align-items: start; }
  .analysis-fallback > em { grid-column: 2; justify-self: start; }
  .analysis-idle-view { grid-template-columns: auto 1fr; }
  .analysis-running-view { grid-template-columns: auto minmax(0,1fr) auto; }
  .analysis-running-view .analysis-cancel { grid-column: 2 / -1; justify-self: end; }
  .analysis-result-view { grid-template-columns: 1fr; }
  .quality-gates-heading { align-items: flex-start; flex-direction: column; }
  .quality-gate-grid { grid-template-columns: repeat(2,1fr); }
  .candidate-analysis { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid article { min-height: 105px; }
  .advanced-grid { grid-template-columns: 1fr; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .section-title-row h2 small { display: block; margin: 2px 0 0; line-height: 1.4; }
  .export-cta { flex-direction: column; gap: 7px; }
  .export-cta .primary-button { width: 100%; min-width: 0; }
  .export-panel { padding-inline: 11px; }
  .export-panel-heading { align-items: flex-start; }
  .export-format-picker { grid-template-columns: 1fr; gap: 7px; }
  .format-option > span { min-height: 52px; }
  .export-progress { grid-template-columns: 1fr; gap: 6px; }
  .settings-dialog label { grid-template-columns: 1fr; gap: 5px; }

  body.large-text .app-header { gap: 4px; padding-inline: 6px; }
  body.large-text .brand { gap: 6px; font-size: 17px; }
  body.large-text .access-actions { gap: 3px; }
  body.large-text .access-button { padding-inline: 5px; font-size: 10px; }
  body.large-text .contrast-dot { width: 14px; height: 14px; }
}

@media (max-width: 440px) {
  .trim-heading { flex-direction: column; gap: 7px; }
  .trim-safe-badge { align-self: flex-start; }
  .trim-time-readouts { grid-template-columns: 1fr 1fr; }
  .trim-time-readouts > div:first-child { grid-column: 1; grid-row: 1; }
  .trim-time-readouts > div:last-child { grid-column: 2; grid-row: 1; }
  .trim-duration-readout { grid-column: 1 / -1; grid-row: 2; }
  .trim-action-group:first-child,
  .trim-intro-presets { grid-template-columns: 1fr; }
  .trim-summary { justify-content: flex-start; }
  .auto-master-heading { flex-direction: column; gap: 9px; }
  .analysis-status { align-self: flex-start; }
  .analysis-running-view { grid-template-columns: 1fr auto; }
  .analysis-running-view .state-orb { display: none; }
  .analysis-running-view .analysis-cancel { grid-column: 1 / -1; }
  .safe-result-card { grid-template-columns: 68px 1fr; padding-inline: 9px; }
  .safe-result-gauge { width: 64px; height: 64px; }
  .quality-gate-grid { grid-template-columns: 1fr; }
  .quality-gate-grid li { grid-template-columns: 1fr auto; min-height: 54px; }
  .quality-gate-grid li > em { grid-column: 1 / -1; }
  .candidate-ladder { padding-inline: 7px; }
  .candidate-heading { align-items: flex-start; flex-direction: column; gap: 1px; }
  .candidate-ladder li b { font-size: 9px; }
  .analysis-failure { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .studio-chain-layout { grid-template-columns: 1fr; }
  .studio-tuning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .studio-chain-section { padding-inline: 11px; }
  .studio-chain-heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .studio-chain-title-wrap { align-items: flex-start; }
  .studio-chain-mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
  .studio-chain-badge { align-self: flex-start; }
  .auto-eq-report, .master-chain-report { padding: 10px; }
  .auto-eq-visual { height: 170px; }
  .auto-eq-band-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auto-eq-band-list li:last-child { grid-column: 1 / -1; }
  .master-chain-list li { grid-template-columns: 28px 30px minmax(0,1fr) auto; row-gap: 4px; padding-inline: 6px; }
  .master-chain-list li > div { grid-column: 3 / 5; }
  .master-chain-list output { grid-column: 3 / 5; grid-row: 2; justify-self: stretch; max-width: 100%; }
  .master-chain-list em { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .master-chain-list strong, .master-chain-list small { white-space: normal; }
  .studio-tuning-panel { padding: 10px; }
  .studio-tuning-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .studio-chain-title-wrap p { line-height: 1.4; }
  .auto-eq-report > header, .master-chain-report > header { flex-direction: column; gap: 7px; }
  .auto-eq-visual { height: 155px; }
  .auto-eq-placeholder text { font-size: 12px; }
  .master-chain-note { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
.playback-note { margin: 0; padding: 0 24px 14px; color: var(--text-muted, #687278); font-size: 12px; line-height: 1.6; }
.playback-note:empty { display: none; }

/* Beginner flow: one result, one save action, optional tools on demand. */
.workflow-steps { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.workflow-steps li { display: flex; align-items: center; gap: 8px; }
.workflow-steps li > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
.workflow-steps [aria-current="step"] { color: var(--teal-dark); font-weight: 750; }
.workflow-steps [aria-current="step"] > span { color: #fff; background: var(--teal); border-color: var(--teal); }
.compare-shell { max-width: 1120px; padding-top: 26px; padding-bottom: 44px; }
.beginner-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 24px; }
.beginner-result h1 { margin: 0 0 8px; color: var(--navy); font-size: clamp(23px, 3vw, 32px); line-height: 1.3; letter-spacing: -.035em; }
.beginner-result p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }
.beginner-result[data-result-state="blocked"] h1, .beginner-result[data-result-state="error"] h1 { color: #963e26; }
.uploaded-strip { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.uploaded-strip > div { flex: 1; min-width: 0; }
.uploaded-strip > button { flex: none; }
.uploaded-strip strong { overflow-wrap: anywhere; }
.listen-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 16px 20px; }
.listen-choice { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 700; cursor: pointer; word-break: keep-all; }
.listen-choice[aria-pressed="true"] { color: #fff; background: var(--teal); border-color: var(--teal); }
.listen-choice:disabled { opacity: .45; cursor: default; }
.listen-choice svg { flex-shrink: 0; width: 19px; height: 19px; }
.export-panel { margin-top: 22px; }
.export-panel-heading h2 { font-size: 20px; }
.export-panel-heading p, .export-panel-heading small { font-size: 14px; }
.export-cta .primary-button { min-height: 50px; font-size: 17px; }
.optional-intro { margin: 32px 0 14px; color: var(--slate); font-size: 14px; line-height: 1.6; }
.developer-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--teal-dark); background: var(--teal-soft); text-decoration: none; }
.developer-entry > span:first-child { min-width: 0; }
.developer-entry strong { display: block; font-size: 15px; }
.developer-entry small { display: block; margin-top: 4px; color: var(--slate); font-size: 12px; line-height: 1.6; }
.developer-entry > span:last-child { flex-shrink: 0; font-size: 22px; }
.developer-entry:hover { border-color: var(--teal); }
.developer-entry:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.optional-tools { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.optional-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; list-style: none; cursor: pointer; }
.optional-tools > summary::-webkit-details-marker { display: none; }
.optional-tools summary strong { display: block; color: var(--navy); font-size: 17px; }
.optional-tools summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.disclosure-mark { color: var(--teal); font-size: 23px; }
.optional-tools[open] > summary .disclosure-mark { transform: rotate(45deg); }
.optional-tools-content { min-width: 0; padding: 0 14px 14px; }
.optional-tools .compare-section { margin-top: 10px; box-shadow: none; }
.optional-tools .studio-chain-layout { grid-template-columns: minmax(0, 1fr); }
.optional-tools .analysis-setup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.optional-tools .master-mode-picker, .optional-tools .analysis-run-button { grid-column: 1 / -1; }
.optional-tools .quick-grid { grid-template-columns: minmax(0, 1fr); }
.optional-tools .quick-section { padding: 10px 8px; border: 0; background: transparent; }
.optional-tools .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advanced-tools { margin-top: 18px; border-top: 1px solid var(--line); }
.advanced-tools > summary { padding: 18px 8px; color: var(--slate); font-size: 14px; font-weight: 700; cursor: pointer; }
.advanced-tools > p { margin: 0 8px 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.inline-apply { margin: 14px 8px; }
.process-shell { max-width: 1000px; }
.analysis-panel { grid-template-columns: 125px minmax(0, 1fr); gap: 24px; }
.analysis-panel .progress-orb { width: 120px; height: 120px; }
.analysis-panel .progress-orb > div { width: 96px; height: 96px; }
.analysis-copy h1 { font-size: clamp(23px, 3vw, 32px); }
.analysis-copy > p { font-size: 15px; line-height: 1.7; }
.analysis-tasks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; }
.analysis-tasks li { grid-template-columns: 24px 1fr; gap: 6px; padding: 12px; border-bottom: 0; font-size: 13px; }
.analysis-tasks svg { width: 21px; height: 21px; }
.analysis-tasks em { grid-column: 2; justify-self: start; padding: 2px 6px; font-size: 11px; }
.progress-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.progress-meta > strong { font-size: 18px; }
.progress-meta i { display: none; }
.processing-attempt { color: var(--teal-dark); font-weight: 700; }
.processing-attempt:empty { display: none; }
.phase-progress-help { display: block; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.background-help { margin: 22px 4px 0; color: var(--slate); font-size: 14px; line-height: 1.7; }
.progress-orb[data-progress-indeterminate="true"] { background: conic-gradient(var(--teal) 0 28%, var(--line) 28% 100%); }
[data-progress-bar][data-progress-indeterminate="true"], [data-analysis-progress-bar][data-progress-indeterminate="true"] { width: 35% !important; animation: progress-working 1.4s ease-in-out infinite alternate; }
.job-banner { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px 18px; background: var(--teal-soft); color: var(--teal-dark); font-size: 14px; }
.job-banner button { padding: 5px 8px; border: 0; background: transparent; color: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
.resume-row { margin: 18px 0; text-align: center; }
@keyframes progress-working { to { transform: translateX(180%); } }
@media (prefers-reduced-motion: reduce) { [data-progress-indeterminate="true"] { animation: none !important; } }
@media (max-width: 700px) {
  .workflow-steps { gap: 16px; margin-bottom: 22px; font-size: 12px; }
  .workflow-steps li { gap: 5px; }
  .workflow-steps li > span { width: 23px; height: 23px; font-size: 11px; }
  .beginner-result { align-items: stretch; flex-direction: column; margin-bottom: 20px; }
  .beginner-result p { font-size: 14px; }
  .listen-choices { padding: 14px; gap: 8px; }
  .listen-choice { padding: 10px; font-size: 14px; }
  .optional-tools > summary { padding: 18px 16px; }
  .optional-tools-content { padding: 0 5px 8px; }
  .analysis-panel { display: flex; gap: 18px; }
  .analysis-copy { min-width: 0; width: 100%; }
  .analysis-tasks { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .optional-tools .analysis-setup, .optional-tools .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .optional-tools .analysis-setup > * { grid-column: 1; }
  .background-help { font-size: 13px; }
}
.studio-box { padding: 20px; border: 1px solid var(--border, #e2e7ec); border-radius: 14px; background: var(--card, #fff); margin: 16px 0; }
/* The listening-goal control is kept in the DOM for backwards-compatible
   settings/batch state, but the product now uses the selected genre as its
   only visible mastering preset. */
.listening-goal { display: none; padding: 16px 18px; margin: 14px 0; border: 1px solid var(--line, #dce5e8); border-radius: 12px; background: #f6faf9; }
.batch-goal-control { display: none; }
.listening-goal label { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 14px; }
.listening-goal select { max-width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #a7b9bd; border-radius: 8px; background: #fff; color: #193740; font: inherit; }
.listening-goal p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #526873; }
.listening-goal .listening-goal-status { color: var(--navy); font-weight: 600; }
.listening-goal-apply { max-width: 100%; margin-top: 12px; white-space: normal; overflow-wrap: anywhere; }
body.high-contrast .listening-goal { background: #fff; border-color: #101820; }
@media(max-width:600px) { .listening-goal label { align-items: stretch; flex-direction: column; gap: 8px; } .listening-goal select, .listening-goal-apply { width: 100%; } }
.optional-tools-content.studio-box { margin: 0; border: 0; }
.studio-box p, .session-note { font-size: 13px; line-height: 1.7; color: #536773; overflow-wrap: anywhere; }
.studio-box button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin: 6px 6px 6px 0; }
.studio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 16px 0; }
.studio-grid label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.studio-grid input { min-width: 0; max-width: 100%; padding: 9px; border: 1px solid #ccd7de; border-radius: 8px; }
.studio-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 16px 0; }
.studio-box audio { width: 100%; margin: 10px 0; }
.separator-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.separator-progress progress { flex: 1; min-width: 0; height: 10px; accent-color: var(--teal); }
.separator-progress span { min-width: 3.5em; text-align: right; color: var(--slate); font-variant-numeric: tabular-nums; }
.stem-separator-results { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; list-style: none; }
.stem-separator-results li { margin: 0; }
.stem-separator-results a { display: inline-flex; align-items: center; }
.drum-file-label { display: grid; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 700; }
.drum-file-label input { max-width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.drum-settings { grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 10px; background: var(--teal-soft); }
.drum-settings label { position: relative; align-content: start; }
.drum-settings input[type="number"] { width: 100px; background: #fff; color: var(--navy); font: inherit; }
.drum-settings input[type="range"] { width: 100%; padding-inline: 0; accent-color: var(--teal); }
.drum-settings output { position: absolute; top: 0; right: 0; color: var(--teal-dark); }
.drum-settings small { color: var(--slate); font-weight: 400; line-height: 1.6; }
.drum-actions { display: flex; flex-wrap: wrap; align-items: center; }
.drum-result-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.drum-result-list li { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.drum-result-list h4 { margin: 0; font-size: 16px; color: var(--navy); }
.drum-result-list a { display: inline-flex; }
.drum-result-list audio { display: block; }
.drum-content [data-drum-status] { color: var(--navy); font-weight: 600; }
.drum-content .drum-engine-note { padding-top: 10px; border-top: 1px solid var(--line); color: var(--slate); }
body.high-contrast .drum-settings { background: #fff; border: 1px solid #101820; }
.ambience-file-label { display: grid; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 700; }
.ambience-file-label input { max-width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.ambience-settings { padding: 16px; border-radius: 10px; background: var(--teal-soft); }
.ambience-settings label { position: relative; align-content: start; }
.ambience-settings input[type="number"] { width: 100px; background: #fff; color: var(--navy); font: inherit; }
.ambience-settings input[type="range"] { width: 100%; padding-inline: 0; accent-color: var(--teal); }
.ambience-settings output { position: absolute; top: 0; right: 0; color: var(--teal-dark); }
.ambience-settings small { color: var(--slate); font-weight: 400; line-height: 1.6; }
.ambience-actions { display: flex; flex-wrap: wrap; align-items: center; }
.ambience-source, .ambience-result-list li { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.ambience-source h3, .ambience-result-list h4 { margin: 0; font-size: 16px; color: var(--navy); }
.ambience-source [data-ambience-filename] { overflow-wrap: anywhere; }
.ambience-result-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.ambience-result-list a { display: inline-flex; }
.ambience-content [data-ambience-status] { color: var(--navy); font-weight: 600; }
.ambience-content .ambience-note { padding-top: 10px; border-top: 1px solid var(--line); color: var(--slate); }
.ambience-content .ambience-preview-note { margin-top: -8px; font-size: 12px; color: var(--slate); }
body.high-contrast .ambience-settings { background: #fff; border: 1px solid #101820; }
.session-note { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.studio-muted { color: #637681; }
body.high-contrast .studio-box { background: #fff; color: #101820; border-color: #101820; }
@media(max-width:600px) { .studio-grid { grid-template-columns: minmax(0,1fr); } .studio-box { padding: 15px; } .studio-box button { max-width: 100%; white-space: normal; } }

/* Keep all controls reachable at narrow widths and increased text size. */
.effect-control input { min-width: 0; }
@media (max-width: 1050px) and (min-width: 761px) {
  body[data-screen="tune"] .app-header { grid-template-columns: minmax(0,1fr) auto; height: auto; padding-block: 12px; gap: 12px; }
  body[data-screen="tune"] .compact-stepper { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  body[data-screen="tune"] .standard-actions { grid-column: 2; grid-row: 1; }
}
.transport > *, .export-cta > *, .export-progress > * { min-width: 0; }
.export-progress > b, .export-cta > span { overflow-wrap: anywhere; }
.quick-grid article > div, .optional-tools > summary > span:first-child { min-width: 0; }
.optional-tools > summary .disclosure-mark { flex-shrink: 0; }
body.large-text .settings-dialog { max-width: calc((100vw - 32px) / 1.08); max-height: calc((100dvh - 32px) / 1.08); }
@media (max-width: 760px) {
  .app-header, body:not([data-screen="tune"]) .app-header { column-gap: 8px; }
  .compact-eq-wrap { grid-template-columns: minmax(0,1fr); }
  .compact-eq-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
  .compare-section h2 small { display: block; margin: 4px 0 0; line-height: 1.5; }
}
@media (max-width: 440px) {
  .panel-header { flex-wrap: wrap; }
  .panel-header .panel-title-button { flex: 1 1 160px; }
  .effect-card { grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto auto; padding: 14px; gap: 10px; }
  .effect-card .switch { grid-column: 2; justify-self: start; }
  .effect-control { grid-template-columns: auto minmax(0,1fr); }
  .effect-control input { grid-column: 1 / -1; min-height: 4px; margin-block: 8px; }
  .candidate-ladder ol { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px 4px; }
  .candidate-ladder ol::before { display: none; }
  .settings-dialog form { padding: 16px; }
  .settings-dialog footer { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  body[data-screen] .app-header { grid-template-columns: minmax(0,1fr); height: auto; min-height: 62px; padding: 10px 14px; gap: 8px; }
  .app-header .header-actions { justify-self: end; }
  .access-actions { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .workflow-steps { gap: 9px; font-size: 11px; }
  .workflow-steps li { gap: 4px; }
  .workflow-steps li > span { flex-shrink: 0; }
}

/* Audition controls keep the current song and changes within reach. */
.live-preview-panel { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.live-preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.live-preview-actions button { min-height: 40px; max-width: 100%; white-space: normal; }
.preview-toggle { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--slate); background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.preview-toggle[aria-pressed="true"] { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); }
.live-preview-panel p { margin: 10px 0 4px; color: var(--teal-dark); font-size: 13px; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.live-preview-panel > small { display: block; color: var(--slate); font-size: 12px; line-height: 1.7; }
.optional-tools[data-optional-tools="sound"] .live-preview-panel { margin: 0; padding: 8px; border: 0; background: transparent; }
.ready-download { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; color: var(--slate); font-size: 12px; }
.ready-download a { display: inline-flex; align-items: center; text-decoration: none; min-height: 42px; }
.ready-download span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.inline-apply { max-width: calc(100% - 16px); white-space: normal; }
.uploaded-strip > button, .export-panel-heading > button { white-space: normal; }
.preset-card, .preset-card > span, .file-summary, .file-summary > div, .drop-zone > * { min-width: 0; }
.preset-card strong, .preset-card small, .file-summary small { overflow-wrap: anywhere; }
.sound-map > header { height: auto; min-height: 28px; flex-wrap: wrap; }
.sound-map > header svg, .switch i, .settings-dialog p svg { flex-shrink: 0; }
.privacy-row > span, .upload-heading > div { min-width: 0; overflow-wrap: anywhere; }
.privacy-row > svg { flex-shrink: 0; }
.quality-gates { container: quality-gates / inline-size; }
@container quality-gates (max-width: 650px) {
  .quality-gate-grid { grid-template-columns: repeat(auto-fit, minmax(112px,1fr)); }
  .quality-gate-grid li > span, .quality-gate-grid li > b { white-space: normal; overflow-wrap: anywhere; }
}
@container quality-gates (max-width: 260px) {
  .quality-gate-grid { grid-template-columns: minmax(0,1fr); }
}
body.high-contrast .wave-row.selected { box-shadow: inset 4px 0 0 var(--navy); }
body.high-contrast .wave-row.selected .wave-source-label { color: var(--navy); outline: 1px solid var(--navy); }
body.high-contrast .wave-row:not(.selected) canvas { opacity: .6; }
body.high-contrast .live-preview-panel { border-color: var(--line-strong); background: #fff; }
@media (max-width: 900px) {
  .transport, body.large-text .transport { grid-template-columns: 100px 76px 76px minmax(0,1fr); }
  .transport time { text-align: right; }
  .transport [data-seekbar] { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
  .transport > svg { grid-column: 1; grid-row: 3; justify-self: center; }
  .transport .volume-range { grid-column: 2 / -1; grid-row: 3; min-width: 0; width: 100%; }
  .transport [data-open-settings] { display: none; }
}
@media (max-width: 600px) {
  .transport, body.large-text .transport { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 10px; }
  .transport .transport-play { flex-direction: column; height: 54px; gap: 2px; font-size: 11px; }
  .transport time, body.large-text .transport time { grid-column: 1 / -1; grid-row: 2; text-align: right; font-size: 12px; white-space: nowrap; }
  .transport [data-seekbar], body.large-text .transport [data-seekbar] { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; margin-block: 4px; }
  .transport > svg, body.large-text .transport > svg { grid-column: 1; grid-row: 4; justify-self: center; }
  .transport .volume-range, body.large-text .transport .volume-range { grid-column: 2 / -1; grid-row: 4; width: 100%; min-width: 0; }
  .uploaded-strip { align-items: flex-start; flex-wrap: wrap; }
  .uploaded-strip > div { flex-basis: 180px; }
  .uploaded-strip > button { margin-left: auto; }
  .listen-choice { flex-direction: column; gap: 4px; font-size: 13px; }
}
@media (max-width: 1250px) {
  .eq-scroll-help { position: sticky; left: 0; display: block; margin: 0; padding: 10px 14px 0; color: var(--slate); font-size: 12px; line-height: 1.6; }
}
@media (max-width: 440px) {
  .ab-player > header { padding-inline: 12px; }
  .playback-note { padding-inline: 12px; }
  .live-preview-panel { padding: 12px; }
  .live-preview-actions { align-items: stretch; }
  .live-preview-actions button { flex: 1 1 150px; }
  .advanced-module { grid-template-rows: auto auto; }
  .advanced-control { grid-template-columns: minmax(0,1fr) 58px; row-gap: 10px; }
  .advanced-control input { grid-column: 1 / -1; }
  .export-panel-heading { flex-wrap: wrap; gap: 8px; }
  .export-panel-heading > button { margin-left: auto; }
  .settings-dialog footer > button { flex: 1; }
}

@container quick-sound (max-width: 600px) {
  .quick-grid article { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 12px; }
  .quick-copy { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
  .quick-grid small { margin: 0; }
}
@container quick-sound (max-width: 400px) {
  .choice-row { gap: 5px; }
  .quick-footer button { width: 100%; }
}
@container quick-sound (max-width: 240px) {
  .choice-row { gap: 3px; }
  .choice-row button { padding-inline: 0; }
}

/* Space effects use the card width for readable copy, including enlarged text. */
@container spatial-options (max-width: 640px) {
  .spatial-grid { grid-template-columns: minmax(0,1fr); }
  .spatial-card { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: repeat(4,auto); gap: 4px 12px; min-height: 0; padding: 14px 12px; }
  .spatial-orbit { display: none; }
  .spatial-copy { display: contents; }
  .spatial-kicker { grid-column: 1; grid-row: 1; font-size: 10px; letter-spacing: .035em; }
  .spatial-copy strong { grid-column: 1; grid-row: 2; margin: 0; white-space: nowrap; }
  .spatial-switch { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; white-space: nowrap; }
  .spatial-copy small { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 10px; font-size: 12px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
  .spatial-controls { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .spatial-controls label { min-width: 0; grid-template-columns: minmax(0,1fr) auto; }
  .spatial-controls input { min-width: 0; margin-block: 7px; }
}

/* Notices stay reachable on every screen without replacing the active session. */
.rights-note { margin: 14px 0; color: var(--slate); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.rights-note a, .site-notices a { color: var(--teal-dark); text-underline-offset: 3px; }
.rights-note a:focus-visible, .site-notices a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.site-notices { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; padding: 24px 20px 32px; border-top: 1px solid var(--line); color: var(--slate); font-size: 13px; line-height: 1.7; }

/* Batch mastering follows the existing upload flow and stays readable at 320px. */
.batch-content { display: grid; gap: 16px; min-width: 0; }
.batch-content p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.batch-options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 16px; }
.batch-options label { display: grid; gap: 8px; font-weight: 700; min-width: 0; }
.batch-options .batch-intro-fade { display: flex; grid-column: 1 / -1; gap: 12px; margin: 0; }
.batch-options select { max-width: 100%; width: 100%; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--white,#fff); color: var(--ink); font: inherit; }
.batch-options small, .batch-help { color: var(--slate); font-size: 12px; }
.batch-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border: 1px dashed var(--teal); border-radius: 12px; background: var(--teal-light,#edf8f9); }
.batch-drop.dragging { outline: 3px solid var(--teal); outline-offset: 2px; }
.batch-drop span { font-size: 13px; color: var(--slate); }
.batch-toolbar, .batch-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.batch-toolbar button, .batch-downloads button, .batch-downloads a { min-width: 0; white-space: normal; height: auto; min-height: 44px; text-align: center; padding: 12px 18px; }
.batch-downloads p { flex-basis: 100%; }
.batch-status { color: var(--teal-dark); font-weight: 650; }
[data-batch-recovery] { margin: 0 24px 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #f5f9fa; color: var(--slate); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
[data-batch-recovery] p { margin: 0; }
[data-batch-recovery] button { margin-top: 10px; max-width: 100%; white-space: normal; }
[data-batch-recovery][data-state="quota"], [data-batch-recovery][data-state="conflict"], [data-batch-recovery][data-state="storage-error"], [data-batch-recovery][data-state="unavailable"] { color: #85452c; background: #fff9f3; }
body.high-contrast [data-batch-recovery] { background: #fff; color: #111; border-color: #111; }
.batch-progress { display: grid; gap: 8px; padding: 16px; background: #f5f9fa; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.batch-progress progress { width: 100%; height: 8px; accent-color: var(--teal); }
.batch-progress > p:first-of-type { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.batch-progress [data-batch-current], .batch-progress [data-batch-time] { font-size: 12px; color: var(--slate); }
.batch-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow: auto; }
.batch-list:empty { display: none; }
.batch-list li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.batch-list li > span { color: var(--slate); font-size: 12px; text-align: center; }
.batch-list strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.batch-list small { display: block; font-size: 12px; line-height: 1.5; color: var(--slate); overflow-wrap: anywhere; margin-top: 4px; }
.batch-list li[data-state="processing"] { background: #edf8f9; }
.batch-list li[data-state="failed"] small { color: #9a402d; }
.batch-list a { min-height: 36px; display: inline-flex; align-items: center; padding: 8px; color: var(--teal-dark); font-weight: 700; font-size: 12px; white-space: nowrap; }
.batch-options .fade-settings { grid-column: 1 / -1; margin: 0; }
.batch-options .fade-enable, .batch-options .fade-duration { display: flex; }
.batch-compare-button { min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--teal-dark); font-weight: 700; cursor: pointer; }
.batch-comparison { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--teal-soft); }
.batch-comparison-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.batch-comparison-heading > strong { min-width: 0; flex: 1; margin: 0; overflow-wrap: anywhere; font-size: 16px; }
.batch-comparison-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.batch-comparison-choices button { flex: 1; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-weight: 700; cursor: pointer; }
.batch-comparison-choices button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: white; }
.batch-comparison audio { display: block; width: 100%; margin: 12px 0; }
.batch-comparison-match { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.batch-comparison-match input { width: 18px; height: 18px; accent-color: var(--teal); }
.batch-comparison-status { margin: 10px 0 0; color: var(--slate); font-size: 13px; line-height: 1.6; }
.batch-runner-frame { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }
body.high-contrast .batch-progress, body.high-contrast .batch-drop, body.high-contrast .batch-list li[data-state="processing"] { background: #fff; color: #111; }
body.high-contrast .batch-help, body.high-contrast .batch-list small { color: #111; }
@media (max-width: 650px) {
  [data-batch-recovery] { margin: 0 12px 14px; padding: 12px; }
  .batch-options { grid-template-columns: minmax(0,1fr); }
  .batch-toolbar > *, .batch-downloads > button, .batch-downloads > a { flex: 1 1 160px; }
  .batch-content { gap: 14px; }
  .batch-list li { grid-template-columns: 22px minmax(0,1fr); gap: 7px; }
  .batch-list a { grid-column: 2; justify-self: start; }
  .batch-list .batch-compare-button { grid-column: 2; justify-self: start; }
  .result-master-settings { padding: 16px; }
  .result-genre-label select { flex-basis: 100%; }
  .batch-drop { padding: 12px; }
}