:root {
	--surface-card: #121a24;
	--surface-input: #0d141d;
	--border-default: #293747;
	--border-input: #546a80;
	--text-primary: #dce5ee;
	--text-secondary: #91a2b2;
	--action-primary: #18864f;
	--action-primary-hover: #126a3e;
	--link-accent: #6ee7a8;
	--focus-ring: #50d890;
}

html {
  font-size: 14px;
  color-scheme: dark;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 60px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 32rem),
    #0b0f14;
  color: #dce5ee;
}

.app-shell .navbar,
.app-shell .footer {
  background: #101720;
  border-color: #263342 !important;
}

.app-shell .navbar-brand {
  color: #f3f7fb;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-shell .nav-link,
.app-shell .footer a {
  color: #aebdca;
}

.app-shell .nav-link:hover,
.app-shell .footer a:hover {
  color: #fff;
}

.card {
  background: var(--surface-card);
  border-color: var(--border-default);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

.form-control,
.form-select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  background-color: var(--surface-input);
  color: #e7eef5;
  font: inherit;
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-input);
  border-color: var(--focus-ring);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(80, 216, 144, 0.18);
}

.text-muted {
  color: var(--text-secondary) !important;
}

.app-shell main .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font: inherit;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.app-shell main .btn-primary {
	border-color: #24a866;
	background: var(--action-primary);
	color: #fff;
}

.app-shell main .btn-primary:hover {
	background: var(--action-primary-hover);
}

.app-shell main .btn-outline-primary {
	border-color: var(--link-accent);
	background: transparent;
	color: var(--link-accent);
}

.app-shell main .btn-outline-primary:hover {
	background: var(--surface-input);
}

.app-shell main .btn-outline-danger {
	border-color: #e27985;
	background: transparent;
	color: #ffc4cb;
}

.app-shell main .btn:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.btn-primary {
  --bs-btn-bg: #18864f;
  --bs-btn-border-color: #24a866;
  --bs-btn-hover-bg: #126a3e;
  --bs-btn-hover-border-color: #32b871;
  --bs-btn-active-bg: #147340;
  --bs-btn-active-border-color: #24a866;
}

.btn-outline-primary {
  --bs-btn-color: #65dda0;
  --bs-btn-border-color: #32b871;
  --bs-btn-hover-bg: #18864f;
  --bs-btn-hover-border-color: #32b871;
}

.signal-chain-panel {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid #2d3d4e;
  border-radius: 0.6rem;
  background:
    linear-gradient(rgba(53, 70, 88, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 70, 88, 0.18) 1px, transparent 1px),
    #0a1017;
  background-size: 2rem 2rem;
}

.signal-chain-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 8), minmax(7.5rem, 1fr));
  align-items: center;
  gap: 1.8rem;
  min-width: 72rem;
  padding: 1.5rem 0.5rem;
}

.signal-block {
  position: relative;
  grid-column: var(--grid-column);
  display: grid;
  grid-row: var(--grid-row, 1);
  min-height: 5.25rem;
  place-content: center;
  padding: 0.7rem;
  border: 2px solid #58708a;
  border-radius: 0.45rem;
  background: linear-gradient(145deg, #253547, #182330);
  color: #f4f8fb;
  text-align: center;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35);
  font: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.signal-block[aria-pressed="true"] { outline: 3px solid #65dda0; outline-offset: 3px; }
.signal-block:focus-visible { outline: 3px solid #f4f8fb; outline-offset: 5px; }
.block-settings[hidden] { display: none; }
.parameter-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .5rem 1rem; }
.parameter-list dt, .parameter-list dd { margin: 0; overflow-wrap: anywhere; }

.proposal-editor { min-width: 0; }
.editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.editor-field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
/* An EQ graph inside a channel panel spans the whole settings grid. */
.editor-fields > .eq-graph { grid-column: 1 / -1; }
.editor-fields > .more-settings { grid-column: 1 / -1; border-top: 1px solid var(--border-default); padding-top: .75rem; }
.more-settings > summary { cursor: pointer; color: var(--text-secondary); }
.eq-graph-reset { margin-left: auto; }
.add-block { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.add-block select { min-height: 36px; border: 1px solid var(--border-input); border-radius: .45rem; background: var(--surface-input); color: var(--text-primary); padding: .3rem .5rem; max-width: 100%; }
.block-settings-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.block-settings-heading h3 { margin: 0; }
.more-settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.editor-field input, .editor-field select, .editor-comment :is(textarea, input), .version-picker select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--border-input);
  border-radius: .45rem;
  color: var(--text-primary);
  background: var(--surface-input);
  font: inherit;
}
.editor-field :is(input, select):focus-visible, .editor-comment :is(textarea, input):focus-visible, .version-picker select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.editor-field small { color: var(--text-secondary); }
.editor-field [aria-invalid="true"] { border-color: #ff9ca7; }
.editor-comment { display: grid; gap: .5rem; margin: 1rem 0; max-width: 42rem; }
.preset-name { font-weight: 600; margin-bottom: .25rem; }
.editor-status { margin: .75rem 0; color: var(--text-secondary); }
.editor-error { border-left: 3px solid #ff9ca7; padding: .75rem 1rem; color: #ffc4cb; }
.version-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; gap: 1rem; }
.version-picker label { display: grid; gap: .5rem; }
.revision-history { display: grid; gap: .75rem; padding: 0; list-style: none; }
.revision-history li { padding: .75rem 0; border-bottom: 1px solid var(--border-default); }
.revision-history time { display: block; margin-top: .3rem; color: var(--text-secondary); font-size: .85rem; }
.revision-history p { margin: .4rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.semantic-diff { width: 100%; border-collapse: collapse; }
.semantic-diff caption { text-align: left; margin-bottom: .75rem; color: var(--text-secondary); }
.semantic-diff th, .semantic-diff td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border-default); overflow-wrap: anywhere; }
.semantic-diff .diff-before { color: #ffc4cb; }
.semantic-diff .diff-after { color: #87edb7; }
@media (max-width: 575px) {
  .semantic-diff { font-size: .85rem; table-layout: fixed; }
  .semantic-diff th, .semantic-diff td { padding: .6rem .35rem; }
  .parameter-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proposal-editor .ui-panel { padding: 1rem; }
}

.signal-block.has-route::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 1.8rem;
  height: 2px;
  background: #55d996;
  box-shadow: 0 0 0.4rem rgba(85, 217, 150, 0.65);
}

.signal-block.has-route::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.28rem);
  left: calc(100% + 1.45rem);
  border-top: 0.32rem solid transparent;
  border-bottom: 0.32rem solid transparent;
  border-left: 0.48rem solid #55d996;
}

.signal-block-position {
  color: #8ca1b5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.signal-block-instance {
  color: #6ee7a8;
  font-size: 0.78rem;
}

.signal-block-input,
.signal-block-output {
  border-color: #4ba3e3;
}

.signal-block-amp {
  border-color: #e5a94d;
  background: linear-gradient(145deg, #4c3820, #251d16);
}

.signal-block-cab {
  border-color: #cb8068;
  background: linear-gradient(145deg, #452b28, #241919);
}

.signal-chain-caption {
  color: #91a2b2;
  font-size: 0.84rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.tone-target-prompt:focus::placeholder { color: transparent; }

.validation-summary-valid {
	display: none;
}

.d-none,
[hidden] {
	display: none !important;
}

.account-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 28rem;
	margin: 2.5rem auto;
	padding: 1rem;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
}

.account-page *,
.account-page *::before,
.account-page *::after {
	box-sizing: border-box;
}

.account-page-single {
	justify-content: center;
}

.account-eyebrow {
	margin: 0 0 1rem;
	color: var(--link-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.account-card {
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--border-default);
	border-radius: 1rem;
	background: var(--surface-card);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

.account-card-header {
	margin-bottom: 1.75rem;
}

.account-card-header .account-eyebrow {
	margin-bottom: 0.6rem;
}

.account-card h1 {
	margin: 0;
	color: #f3f7fb;
	font-size: 1.8rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.account-card-header > p:last-child {
	margin: 0.75rem 0 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.account-form {
	display: grid;
	gap: 1.25rem;
}

.account-field {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.account-field label {
	color: var(--text-primary);
	font-size: 0.875rem;
	font-weight: 500;
}

.account-control {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border-input);
	border-radius: 0.5rem;
	background: var(--surface-input);
	color: #e7eef5;
	font: inherit;
	font-size: 16px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.account-control:focus {
	outline: none;
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 3px rgba(80, 216, 144, 0.18);
}

.account-code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.account-submit {
	min-height: 48px;
	margin-top: 0.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid #24a866;
	border-radius: 0.5rem;
	background: var(--action-primary);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.account-submit:hover {
	background: var(--action-primary-hover);
}

.account-submit:focus-visible,
.account-card a:focus-visible {
	outline: 2px solid var(--link-accent);
	outline-offset: 4px;
}

.account-card a {
	color: var(--link-accent);
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.account-card a:hover {
	color: #a3f3c6;
	text-decoration: underline;
}

.account-help {
	margin-top: 1.25rem;
	font-size: 0.85rem;
}

.account-help p {
	margin: 0.4rem 0 0;
	color: var(--text-secondary);
	font-size: 0.8rem;
}

.account-card-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-default);
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.account-validation.validation-summary-errors {
	margin-bottom: 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid #914650;
	border-radius: 0.5rem;
	background: #331d26;
	color: #ffc4cb;
	font-size: 0.875rem;
}

.account-validation ul {
	margin: 0;
	padding-left: 1rem;
}

@media (max-width: 767px) {
	.account-page {
		grid-template-columns: minmax(0, 28rem);
		justify-content: center;
		gap: 1.5rem;
		margin: 1rem auto;
		padding: 0.5rem;
	}
}

.app-shell .navbar .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.app-shell .container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1rem;
	padding-left: 1rem;
}

.table-responsive {
	max-width: 100%;
	overflow-x: auto;
}

.app-navigation {
	flex: 1;
	min-width: 0;
}

.app-navigation .navbar-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-navigation {
	margin-left: auto;
}

.app-navigation button.nav-link {
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.app-navigation .nav-link {
	display: inline-block;
	padding: 0.65rem 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.page-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
}

.page-heading > div {
	min-width: 0;
}

.page-heading h1 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.3;
}

.page-heading p {
	max-width: 42rem;
	margin: 0.5rem 0 0;
	color: var(--text-secondary);
}

.page-actions,
.page-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.page-actions .btn,
.compact-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

.app-navigation a:focus-visible,
.app-navigation button:focus-visible,
.ui-panel summary:focus-visible,
.page-actions a:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.page-pagination {
	margin: 1rem 0;
}

.page-pagination p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.back-link {
	display: inline-block;
	margin-bottom: 0.6rem;
	color: var(--link-accent);
	font-size: 0.85rem;
}

.ui-panel,
.table-panel {
	min-width: 0;
	margin: 1rem 0;
	border: 1px solid var(--border-default);
	border-radius: 0.75rem;
	background: var(--surface-card);
}

.ui-panel {
	padding: 1.5rem;
	overflow-wrap: anywhere;
}

.ui-panel > .card-body {
	padding: 0;
}

.ui-panel h2 {
	font-size: 1.15rem;
}

.ui-panel summary {
	padding: 0.25rem 0;
	cursor: pointer;
	font-weight: 600;
}

.ui-panel details[open] > summary,
.ui-panel[open] > summary {
	margin-bottom: 1rem;
}

.table-panel {
	/* Contains absolutely positioned screen-reader text, so it scrolls with the table instead of widening the page. */
	position: relative;
	max-width: 100%;
	overflow-x: auto;
}

.job-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.job-table th,
.job-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--border-default);
	text-align: left;
	vertical-align: middle;
}

.job-table th {
	color: var(--text-secondary);
	font-weight: 600;
	white-space: nowrap;
}

.job-table tbody tr:last-child td {
	border-bottom: 0;
}

.job-table td:first-child {
	white-space: nowrap;
}

.job-table a {
	display: inline-block;
	min-width: 10rem;
	color: var(--link-accent);
	text-decoration: none;
}

.job-table a.btn {
	min-width: 0;
	white-space: nowrap;
}

.job-table a:hover {
	text-decoration: underline;
}

.job-status {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--border-input);
	border-radius: 0.4rem;
	color: var(--text-primary);
	font-size: 0.8rem;
	white-space: nowrap;
}

.detail-grid {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
	gap: 0.6rem 1.25rem;
	margin: 1rem 0;
}

.detail-grid dt {
	color: var(--text-secondary);
	font-weight: 500;
}

.detail-grid dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.job-prompt {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid var(--border-default);
	border-radius: 0.5rem;
	background: var(--surface-input);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.job-diagnostics {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-default);
	font-size: 0.875rem;
}

.workspace-note {
	margin: 0.75rem 0;
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.workspace-note summary {
	cursor: pointer;
}

.empty-state {
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.empty-state p {
	color: var(--text-secondary);
}

.compact-form {
	display: grid;
	gap: 0.75rem;
	max-width: 28rem;
}

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

.metric {
	padding: 1rem;
	border: 1px solid var(--border-default);
	border-radius: 0.5rem;
	background: var(--surface-input);
}

.metric strong {
	display: block;
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
}

.metric span {
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.row-actions button {
	min-height: 44px;
}

@media (max-width: 767px) {
	.app-navigation {
		flex-basis: 100%;
	}

	.account-navigation {
		margin-left: 0;
	}

	.page-heading {
		align-items: flex-start;
	}

	.page-actions {
		width: 100%;
	}

	.page-actions > a {
		flex: 1;
	}

	.ui-panel {
		padding: 1rem;
	}

	.detail-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.detail-grid dd {
		margin-bottom: 0.65rem;
	}

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

	.form-control,
	.form-select {
		min-width: 0;
		font-size: 16px;
	}
}

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

.tone-designer-page {
	--surface-card: #111b29;
	--surface-input: #0c1522;
	--text-primary: #edf2f8;
	--text-secondary: #a5b3c7;
	background: #0b111a;
}
.tone-designer-page .container { max-width: 1440px; }
.tone-designer { min-width: 0; }
.designer-workspace {
	display: grid;
	grid-template-columns: minmax(300px, .85fr) minmax(0, 1.45fr);
	gap: 20px;
	align-items: start;
	margin-top: 20px;
}
.designer-workspace > *, .designer-workspace .card-body { min-width: 0; }
/* Stand-alone tone matching: where to start, then the same panel as the designer's tab. */
.tone-match-page .tone-match-panel { margin-top: 20px; }
.tone-match-start-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.tone-match-start-option { display: grid; gap: 8px; align-content: start; border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; }
.tone-match-start-option .btn { justify-self: start; }

/* Opening an uploaded preset; its untouched blocks sit in the chain as plain cards. */
.designer-upload { margin: 4px 0 14px; }
.designer-upload > summary { color: var(--link-accent); cursor: pointer; }
.designer-upload-form { display: grid; gap: 8px; margin-top: 10px; }
.designer-upload-rig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.signal-block-preserved { cursor: default; opacity: .7; border-style: dashed !important; }
.signal-chain-compact { min-width: 0; column-gap: .6rem; }
.signal-shunt { position: relative; grid-column: var(--grid-column); grid-row: var(--grid-row, 1); min-height: 5.25rem;
	display: flex; align-items: center; justify-content: center; }
.signal-shunt::before { content: ""; position: absolute; left: -.3rem; right: -.3rem; top: 50%; border-top: 2px dashed #58708a; }
.signal-shunt span { position: relative; font-size: .62rem; color: var(--text-secondary); background: var(--surface-card); padding: 0 2px; }
.signal-block-preserved small { color: var(--text-secondary); }

/* Screen-reader-only text that must not depend on the CDN stylesheet loading. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* The right column: Preset and Tone matching tabs (stacked when scripts are off). */
.designer-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; align-content: start; }
.designer-column.designer-tabbed { gap: 0; }
.designer-tabs { display: flex; gap: 4px; }
.designer-tabs [role="tab"] { font: inherit; border: 1px solid var(--border-default); border-bottom: 0; border-radius: 10px 10px 0 0;
	background: var(--surface-input); color: var(--text-secondary); padding: 8px 16px; }
.designer-tabs [role="tab"][aria-selected="true"] { background: var(--surface-card); color: var(--text-primary); font-weight: 600; }
.designer-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.designer-tabbed > .card { border-top-left-radius: 0; }

/* Tone matching panel. */
.tone-match-panel .designer-secondary-tools { border-top: 0; margin-top: 0; padding-top: 0; }
.tone-match-recordings > summary { color: var(--text-secondary); font-size: .9rem; }
.tone-match-recordings-line { display: inline-flex; flex-wrap: wrap; gap: .25rem .75rem; }
.tone-match-change { color: var(--link-accent); }
.tone-match-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.tone-match-stat { border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 10px; color: var(--text-secondary); font-size: .85rem; }
.tone-match-stat strong { color: var(--text-primary); font-weight: 600; margin-left: .3rem; }
.tone-match-stat-yours { border-color: #c9a7f0; }
.tone-match-stat-yours strong { color: #c9a7f0; }
.tone-match-eq { border-top: 1px solid var(--border-default); padding-top: 14px; margin-top: 4px; }
.tone-match-eq-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.tone-match-link { font: inherit; font-size: .85rem; background: none; border: 0; padding: 0; color: var(--link-accent); }
.tone-match-link[aria-expanded="true"] { text-decoration: underline; }
.tone-match-reset { font: inherit; font-size: .85rem; margin-left: auto; border: 1px solid var(--border-input); border-radius: 8px;
	background: var(--surface-input); color: var(--text-secondary); padding: 4px 12px; }
.tone-match-eq.tone-match-edited .tone-match-reset { border-color: #c9a7f0; color: #c9a7f0; }
.tone-match-eq .eq-graph { margin-top: .4rem; padding-top: 0; border-top: 0; }
.tone-match-eq .eq-graph-header, .tone-match-eq .eq-graph-legend, .tone-match-eq [data-eq-budget] { display: none !important; }
.tone-match-eq .eq-graph-hint { font-size: .8rem; }
.tone-match-eq .eq-graph-values { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; }
.tone-match-eq.tone-match-values-open .eq-graph-values { display: grid; }
.tone-match-player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.tone-match-sources { display: inline-flex; border: 1px solid var(--border-input); border-radius: 8px; overflow: hidden; }
.tone-match-sources button { font: inherit; font-size: .85rem; background: var(--surface-input); color: var(--text-secondary); border: 0; padding: 6px 12px; }
.tone-match-sources button + button { border-left: 1px solid var(--border-default); }
.tone-match-sources button[aria-checked="true"] { background: #173a2a; color: var(--link-accent); }
.tone-match-play { font: inherit; font-size: .85rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--action-primary); color: #fff; padding: 6px 16px; min-width: 4.5rem; }
.tone-match-play[aria-pressed="true"] { background: var(--surface-input); color: var(--text-primary); }
.tone-match-download { position: relative; margin-left: auto; }
.tone-match-download > summary { list-style: none; cursor: pointer; font-size: .85rem; border: 1px solid var(--border-input); border-radius: 8px; padding: 6px 12px; color: var(--text-primary); }
.tone-match-download > summary::-webkit-details-marker { display: none; }
.tone-match-download > summary::after { content: " \25BE"; color: var(--text-secondary); }
.tone-match-download-menu { position: absolute; right: 0; z-index: 5; display: grid; min-width: 12rem; margin-top: 4px; padding: 4px;
	background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 8px; }
.tone-match-download-menu button { font: inherit; font-size: .85rem; text-align: left; background: none; border: 0; border-radius: 6px; color: var(--text-primary); padding: 7px 10px; }
.tone-match-download-menu button:hover, .tone-match-download-menu button:focus-visible { background: var(--surface-input); }
.tone-match-player [data-audition-status] { flex-basis: 100%; }
.tone-match-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--border-default); padding-top: 12px; margin-top: 4px; }
.tone-match-save label { color: var(--text-secondary); font-size: .85rem; }
.tone-match-save select { width: auto; flex: 1 1 14rem; min-width: 0; }
.tone-match-save [data-matched-scene-name] { flex: 0 1 11rem; }
.tone-match-details { margin-top: 14px; border-top: 1px solid var(--border-default); padding-top: 10px; }
.tone-match-details > summary { color: var(--text-secondary); font-size: .9rem; }
.tone-match-details table { margin-top: .5rem; }
.tone-match-panel .tone-match-spectrum { border: 0; padding: 0; background: none; }
.tone-match-panel .tone-match-spectrum h3, .tone-match-panel .tone-match-spectrum > p.text-muted { display: none; }
.tone-designer .card { background: var(--surface-card); border-radius: 12px; }
.tone-designer .card-body { padding: 22px; }
.designer-rig { border: 0; padding: 0; margin-top: 18px; }
.designer-rig .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.designer-rig .row > div { width: auto; padding: 0; }
.designer-rig > .row > div:first-child { grid-column: 1 / -1; }
.designer-rig select:disabled { opacity: 1; color: var(--text-secondary); }
.designer-transcript { display: grid; gap: 14px; border-top: 1px solid var(--border-default); margin-top: 20px; padding-top: 18px; }
.designer-message { border-left: 2px solid var(--border-default); padding-left: 12px; min-width: 0; }
.designer-message.assistant { border-color: #88ddb3; }
.designer-message strong { color: var(--text-secondary); font-size: .75rem; }
.designer-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.designer-composer { margin-top: 20px; }
.tone-target-prompt:focus::placeholder { color: transparent; }
.designer-generate { width: 100%; }
.designer-empty { text-align: center; padding: 35px 16px; }
.designer-empty > div { color: #88ddb3; font-size: 28px; }
.designer-empty p { color: var(--text-secondary); max-width: 320px; margin: auto; }
.designer-new-preset { margin-top: 12px; }
.designer-secondary-tools { border-top: 1px solid var(--border-default); margin-top: 22px; padding-top: 16px; }
.tone-match-spectrum svg { display: block; width: 100%; height: 220px; }
.spectrum-grid { stroke: var(--border-default); }
.spectrum-label { fill: var(--text-secondary); font-size: 11px; }
.spectrum-curve { fill: none; stroke-width: 1.8; }
.spectrum-user { stroke: #6ab8f5; }
.spectrum-target { stroke: #e5b370; stroke-dasharray: 5 4; }
.spectrum-preview { stroke: #88ddb3; stroke-width: 2.5; }
.spectrum-predicted { stroke: #c9a7f0; stroke-width: 2; stroke-dasharray: 2 3; }
.spectrum-curve[hidden] { display: none; }
.spectrum-legend { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 16px; }
.spectrum-legend button { font: inherit; font-size: .75rem; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-input); color: var(--text-primary); padding: 6px 8px; }
.spectrum-legend button::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 7px; vertical-align: middle; background: #6ab8f5; }
.spectrum-legend [data-spectrum-toggle="target"]::before { background: #e5b370; }
.spectrum-legend [data-spectrum-toggle="preview"]::before { background: #88ddb3; }
.spectrum-legend [data-spectrum-toggle="predicted"]::before { background: #c9a7f0; }
.spectrum-legend [aria-pressed="false"] { opacity: .45; }
.eq-graph { display: grid; gap: .6rem; min-width: 0; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.editor-fields:not(:has(.editor-field)) + .eq-graph { margin-top: 0; padding-top: 0; border-top: 0; }
.eq-graph-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; }
.eq-graph-header h4 { margin: 0; }
.eq-graph-note { color: #e5b370; }
.eq-graph-chart { display: block; width: 100%; height: 240px; border: 1px solid var(--border-default); border-radius: .45rem; background: var(--surface-input); user-select: none; -webkit-user-select: none; }
.eq-graph-summary .eq-graph-chart { height: 150px; }
.eq-graph-editable .eq-graph-chart { touch-action: none; }
.eq-grid { stroke: var(--border-default); }
.eq-grid-zero { stroke: var(--border-input); }
.eq-grid-threshold { stroke: #e5b370; stroke-dasharray: 3 4; opacity: .6; }
.eq-label, .eq-readout { fill: var(--text-secondary); font-size: 11px; }
.eq-readout { fill: var(--text-primary); }
.eq-safe-zone { fill: rgba(136, 221, 179, .07); }
.eq-curve { fill: none; stroke: #88ddb3; stroke-width: 2.5; stroke-linejoin: round; }
.eq-curve-ghost { stroke: #e5b370; stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .8; }
.eq-band-curve { fill: none; stroke: #6ab8f5; stroke-width: 1.4; opacity: .85; }
.eq-graph-off .eq-curve:not(.eq-curve-ghost) { stroke: var(--text-secondary); stroke-dasharray: 2 4; }
.eq-graph-off .eq-node-dot { stroke: var(--text-secondary); }
.eq-node-hit { fill: transparent; }
.eq-node-dot { fill: var(--surface-input); stroke: #88ddb3; stroke-width: 2; }
.eq-node-label { fill: var(--text-primary); font-size: 10px; font-weight: 600; pointer-events: none; }
.eq-node-editable { cursor: grab; }
.eq-node-editable:active { cursor: grabbing; }
.eq-node:focus { outline: none; }
.eq-node[data-active] .eq-node-dot { fill: #88ddb3; stroke: #f4f8fb; }
.eq-node:focus-visible .eq-node-dot { fill: #88ddb3; stroke: #f4f8fb; stroke-width: 3; }
.eq-node[data-active] .eq-node-label, .eq-node:focus-visible .eq-node-label { fill: #0b0f14; }
.eq-graph-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; color: var(--text-secondary); font-size: .75rem; }
.eq-graph-legend span::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid #88ddb3; }
.eq-graph-legend .eq-legend-recommended::before { border-top: 2px dashed #e5b370; }
.eq-graph-budget, .eq-graph-hint { margin: 0; color: var(--text-secondary); font-size: .8rem; overflow-wrap: anywhere; }
.eq-graph-budget[data-over="true"] { padding-left: .6rem; border-left: 3px solid #ff9ca7; color: #ffc4cb; }
.eq-graph-field .designer-value-track { display: none; }
.eq-graph-values:empty { display: none; }
.tone-designer details > summary { cursor: pointer; }
.tone-designer :is(p, li, small) { overflow-wrap: anywhere; }
.tone-designer .signal-chain-grid {
	grid-template-columns: repeat(var(--grid-columns, 8), 10.5rem);
	width: max-content;
	min-width: 0;
	gap: 1.2rem;
	padding: 1rem .3rem;
}
.tone-designer .signal-chain-panel { padding: .7rem; margin-top: 12px; max-width: 100%; }
.tone-designer .signal-block.has-route::after { width: 1.2rem; }
.tone-designer .signal-block.has-route::before { left: calc(100% + .85rem); }
.tone-designer .block-settings { margin-top: 16px; background: var(--surface-input); }
.tone-designer .editor-fields { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.designer-recommendation { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.designer-reset { font: inherit; font-size: .7rem; color: #88ddb3; background: transparent; border: 1px solid var(--border-input); border-radius: 5px; padding: 4px 7px; }
.designer-value-track { position: relative; margin: 4px 3px; padding-bottom: 8px; }
.designer-value-track input[type="range"] { width: 100%; padding: 0; border: 0; min-height: 24px; accent-color: #88ddb3; }
.designer-value-track span { position: absolute; bottom: 0; width: 2px; height: 7px; background: #88ddb3; transform: translateX(-50%); pointer-events: none; }
.tone-designer :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #88ddb3; outline-offset: 3px; }

.signal-block { --family-color: #2d3a3e; }
.signal-block-input { --family-color: #002179; }
.signal-block-output { --family-color: #004100; }
.signal-block-amp { --family-color: #1d1c1c; }
.signal-block-cab { --family-color: #2d3a3e; }
.signal-block-chorus { --family-color: #167ac8; }
.signal-block-delay { --family-color: #0e4172; }
.signal-block-drive { --family-color: #721a11; }
.signal-block-gate, .signal-block-gate-expander, .signal-block-gate---expander { --family-color: #684301; }
.signal-block-peq, .signal-block-parametric-eq { --family-color: #9c571e; }
.signal-block-reverb { --family-color: #44206c; }
.signal-block {
	background: var(--family-color);
	background: linear-gradient(145deg, color-mix(in srgb, var(--family-color) 88%, white), var(--family-color) 65%, color-mix(in srgb, var(--family-color) 85%, black));
	border: 2px solid color-mix(in srgb, var(--family-color) 65%, #a5b3c7);
	border-radius: 5px;
	color: white;
	box-shadow: inset 0 1px 0 #ffffff14;
}
.signal-block .signal-block-position, .signal-block .signal-block-instance { color: #fff; }
.tone-designer .signal-block > strong { white-space: normal; overflow-wrap: normal; font-size: .875rem; }
.tone-designer .signal-block { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.tone-designer .signal-block-instance { overflow-wrap: normal; }
.signal-block-amp { background: radial-gradient(ellipse at 50% 75%, #8d73373d, transparent 68%), #1d1c1c; }
.signal-block-amp > strong { border-top: 3px dotted #a59468; padding-top: 4px; }
@media (max-width: 850px) {
	.designer-workspace { grid-template-columns: minmax(0, 1fr); }
	.tone-designer .card-body { padding: 18px; }
}
@media (max-width: 440px) {
	.tone-designer .card-body { padding: 15px; }
	.tone-designer .editor-fields { grid-template-columns: minmax(0, 1fr); }
	.tone-designer .page-actions > * { max-width: 100%; }
	.tone-designer .version-picker { grid-template-columns: minmax(0, 1fr); }
}
/* Scenes choose each block's channel and bypass; channel tabs hold each channel's settings. */
.scene-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.scene-tab {
	display: grid;
	gap: .1rem;
	min-width: 7rem;
	max-width: 100%;
	padding: .5rem .75rem;
	border: 1px solid var(--border-input);
	border-radius: .45rem;
	background: var(--surface-input);
	color: var(--text-primary);
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.scene-tab span { color: var(--text-secondary); font-size: .8rem; text-transform: capitalize; }
.scene-tab[aria-selected="true"], .channel-tab[aria-selected="true"] { border-color: #65dda0; box-shadow: inset 0 0 0 1px #65dda0; }
.scene-tab:focus-visible, .channel-tab:focus-visible, .channel-add:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scene-settings { margin-bottom: 1rem; }
.scene-settings[hidden], .editor-fields[hidden] { display: none; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.scene-block { display: grid; gap: .35rem; min-width: 0; margin: 0; padding: .6rem .7rem; border: 1px solid var(--border-default); border-radius: .45rem; }
.scene-block legend { float: none; width: auto; margin: 0; padding: 0 .25rem; font-size: .9rem; }
.scene-block :is(select, input) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding: .4rem .5rem;
	border: 1px solid var(--border-input);
	border-radius: .45rem;
	color: var(--text-primary);
	background: var(--surface-input);
	font: inherit;
}
.scene-block :is(select, input):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scene-fixed { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.signal-block-channel { color: #e6edf3; font-size: .72rem; }
.signal-block.is-bypassed { opacity: .55; border-style: dashed; }
.channel-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.channel-tab, .channel-add {
	min-height: 36px;
	padding: .35rem .8rem;
	border: 1px solid var(--border-input);
	border-radius: .45rem;
	background: var(--surface-input);
	color: var(--text-primary);
	font: inherit;
	cursor: pointer;
}
.channel-add { border-style: dashed; color: var(--link-accent); }
.channel-usage { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: .85rem; }