:root {
	--bg: #0f1115;
	--panel: #181b22;
	--panel-2: #1f232c;
	--border: #2a2f3a;
	--text: #e6e8ee;
	--muted: #9aa3b2;
	--accent: #6c8cff;
	--accent-2: #4d6ef5;
	--ok: #3ecf8e;
	--warn: #f5b74d;
	--err: #ff6b6b;
	--radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.4;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
p { margin: 0.25rem 0; }
pre {
	background: var(--bg);
	padding: 0.75rem;
	border-radius: 6px;
	overflow: auto;
	font-size: 0.8rem;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: var(--panel);
	flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.logo { font-size: 1.75rem; }
.sub { color: var(--muted); font-size: 0.85rem; }
.status { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.pill {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--panel-2);
	font-size: 0.78rem;
	color: var(--muted);
}
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.err { border-color: var(--err); color: var(--err); }
.pill:empty { display: none; }

.layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding: 1rem 1.25rem 3rem;
	max-width: 1400px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.layout { grid-template-columns: 1fr; }
}
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.hint, .muted { color: var(--muted); font-size: 0.85rem; }

.drop {
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}
.drop.over { border-color: var(--accent); background: var(--panel-2); }
.drop p { color: var(--muted); margin-bottom: 0.5rem; }

.row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.row.right { justify-content: flex-end; }
.row.presets { justify-content: flex-start; }

.btn {
	background: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
	cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.small { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn.big { padding: 0.8rem; font-size: 1.05rem; }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); }
.btn.primary:hover:not(:disabled) { background: var(--accent); }
.btn.recording { background: var(--err); border-color: var(--err); }
.link {
	background: none;
	border: none;
	color: var(--accent);
	cursor: pointer;
	font-size: 0.85rem;
	padding: 0;
}
.link:hover { text-decoration: underline; }
.link.danger { color: var(--err); }

.select {
	background: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	font-size: 0.9rem;
}
.select.wide { width: 100%; }
.drop .select { max-width: 14rem; }

.picked {
	background: var(--panel-2);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.picked-row {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.picked-name { overflow-wrap: anywhere; }
.picked-dur { color: var(--muted); font-size: 0.85rem; }
audio { width: 100%; height: 36px; }

.recent summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.35rem 0.25rem;
	border-bottom: 1px solid var(--border);
	font-size: 0.9rem;
}
.list li:last-child { border-bottom: none; }
.list li.active { background: var(--panel-2); border-radius: 6px; }
.list .name { flex: 1; overflow-wrap: anywhere; text-align: left; }
.list .dur { color: var(--muted); font-size: 0.8rem; }

.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field > span { font-size: 0.9rem; display: flex; justify-content: space-between; }
.field small { color: var(--muted); font-size: 0.78rem; }
.field.check { flex-direction: row; align-items: center; gap: 0.5rem; }
.field.check span { font-size: 0.9rem; }
input[type=range] { width: 100%; accent-color: var(--accent); }
output { color: var(--accent); font-variant-numeric: tabular-nums; }
.param-group { display: none; flex-direction: column; gap: 0.75rem; }
.param-group.show { display: flex; }

.jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.job {
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.6rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.job-head { display: flex; gap: 0.5rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.job-title { font-size: 0.9rem; overflow-wrap: anywhere; }
.job-meta { color: var(--muted); font-size: 0.8rem; }
.job .state { font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); }
.job.done .state { color: var(--ok); border-color: var(--ok); }
.job.running .state { color: var(--accent); border-color: var(--accent); }
.job.error .state { color: var(--err); border-color: var(--err); }
.job.cancelled .state { color: var(--warn); border-color: var(--warn); }
.job .error-text { color: var(--err); font-size: 0.8rem; white-space: pre-wrap; }
.job-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); transition: width 0.3s; }
.bar.indeterminate > div {
	width: 30% !important;
	animation: slide 1.2s infinite ease-in-out;
}
@keyframes slide {
	0% { margin-left: -30%; }
	100% { margin-left: 100%; }
}

dialog {
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	max-width: 560px;
	width: calc(100vw - 2rem);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2 { margin-bottom: 0.75rem; }
dialog .row { margin: 0.75rem 0; }

.toast {
	position: fixed;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
	max-width: 90vw;
	z-index: 10;
}
.toast.err { border-color: var(--err); }

.rt-stats {
	font-size: 0.8rem;
	color: var(--muted);
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	min-height: 1.2em;
}
.rt-stats .bad { color: var(--warn); }
.rt-stats .err { color: var(--err); }
#rt-card .field .select { min-width: 12rem; max-width: 100%; }
#rt-card.live { border-color: var(--ok); }