:root {
	/* ── Brand colours ─────────────────────────────────────── */
	--accent: #3535b0;
	--accent-light: #e8e8ff;

	--green: #1d9e75;
	--green-dark: #0a7a55;
	--green-bg: #f0fff8;
	--green-bg-hover: #ddfff0;

	--red: #cc2222;
	--red-bright: #ff0000;
	--red-mid: #ff5555;
	--red-bg: #fff0f0;

	/* ── Neutrals ───────────────────────────────────────────── */
	--text: #111111;
	--text-med: #444444;
	--text-muted: #888888;
	--text-faint: #aaaaaa;

	--border: #cccccc;
	--border-light: #dddddd;
	--border-faint: #bbbbbb;

	--bg-app: #ffffff;
	--bg-sidebar: #ffffff;
	--bg-body: #e8e4dc;
	--bg-white: #ffffff;
	--bg-input: #ffffff;
	--bg-sel: #f0f0f0;

	/* ── Layout ─────────────────────────────────────────────── */
	--sidebar-width: 260px;
	--sidebar-pad: 14px;
	--content-pad: 20px;

	/* ── Typography ─────────────────────────────────────────── */
	--font: "Space Mono", monospace;
	--font-size: 10px;
	--font-size-sm: 10px;
	--font-size-md: 11px;

	/* ── Borders ────────────────────────────────────────────── */
	--border-width: 1.5px;
	--border-thin: 1px;
	--divider: var(--border-thin) solid var(--border-light);

	/* ── Radii ──────────────────────────────────────────────── */
	--radius-pill: 99px;
	--radius-lg: 4px;
	--radius-md: 6px;
	--radius-sm: 4px;
	--radius-xs: 3px;

	/* ── Transitions ────────────────────────────────────────── */
	--transition: 0.12s;
	--transition-fast: 0.1s;
	--transition-slow: 0.15s;

	/* ── Shadows ────────────────────────────────────────────── */
	--shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.15);
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ── Reset ───────────────────────────────────────────────────── */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

input[type="range"] {
	height: 2px;
}

html,
body {
	background: var(--bg-body);
	height: 100%;
	overflow: hidden;
}

/* ── App shell ───────────────────────────────────────────────── */
#app {
	font-family: var(--font);
	background: var(--bg-app);
	color: var(--text);
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

/* ── Top controls ────────────────────────────────────────────── */
#controls-top {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

#ct-buttons {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

#ct-tabs {
	display: flex;
	flex-direction: row;
	padding-left: var(--content-pad);
	border-bottom: var(--divider);
}

#ct-tabs::after {
	content: "";
	width: var(--sidebar-width);
	flex-shrink: 0;
	border-left: var(--divider);
	background: var(--bg-sidebar);
}

#top-left {
	flex: 1;
	min-width: 0;
	padding: 10px var(--content-pad) 0;
	display: flex;
	flex-direction: column;
}

#top-right {
	width: var(--sidebar-width);
	flex-shrink: 0;
	border-left: var(--divider);
	background: var(--bg-sidebar);
	padding: 10px var(--sidebar-pad) 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#top-right #btn-play {
	width: 100%;
	text-align: center;
	padding: 5px 11px;
}

#top .pill {
	padding: 5px 11px;
}

h1 {
	font-size: 11px;
	color: var(--text-faint);
	letter-spacing: 0.18em;
	margin-bottom: 8px;
	text-transform: lowercase;
}

/* ── Pill buttons ────────────────────────────────────────────── */
.pill {
	font-size: var(--font-size);
	padding: 3px 11px;
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--border-faint);
	background: var(--bg-white);
	color: var(--text-med);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-slow);
}
.pill:hover {
	border-color: #777;
	color: var(--text);
}
.pill.on {
	background: var(--accent-light);
	border-color: var(--accent);
	color: var(--accent);
}
.pill.rec {
	border-color: var(--red);
	color: var(--red);
}
.pill.rec:hover {
	border-color: var(--red-bright);
	color: var(--red-bright);
}
.pill.rec.busy {
	background: var(--red-bg);
	border-color: var(--red-bright);
	color: var(--red-bright);
	animation: rp 1s ease-in-out infinite;
}

@keyframes rp {
	0%,
	100% {
		border-color: var(--red);
	}
	50% {
		border-color: var(--red-mid);
	}
}

/* ── Top row ─────────────────────────────────────────────────── */
#top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 8px;
	margin-bottom: 10px;
}

#bpm-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size);
	color: var(--text-muted);
	width: 100%;
	margin-top: 8px;
}
#bpm-wrap input[type="range"] {
	flex: 1;
	accent-color: var(--accent);
	cursor: pointer;
}

/* ── Tabs ────────────────────────────────────────────────────── */
#tabs {
	display: flex;
	gap: 6px;
}

.tab {
	font-size: 13px;
	padding: 8px 22px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border: var(--border-width) solid var(--border);
	border-bottom: none;
	color: var(--text-muted);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-fast);
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.tab.active {
	background: var(--bg-white);
	color: var(--accent);
	border-color: var(--border-faint);
	font-weight: 700;
}

.tab-mute {
	display: inline-block;
	font-size: 14px;
	color: var(--green);
	cursor: pointer;
	vertical-align: middle;
	transition: var(--transition-fast);
}
.tab-mute:hover {
	color: var(--red);
}
.tab-mute.muted {
	color: var(--border);
}

.tab-clear {
	display: inline-block;
	font-size: 14px;
	color: var(--border);
	cursor: pointer;
	vertical-align: middle;
	transition: var(--transition-fast);
}
.tab-clear:hover {
	color: var(--red);
}

/* ── Canvas area ─────────────────────────────────────────────── */
#main-area {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: row;
}

#canvas-wrap {
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}

canvas {
	display: block;
	background: var(--bg-white);
	touch-action: none;
	cursor: crosshair;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#controls-bottom {
	width: var(--sidebar-width);
	flex-shrink: 0;
	padding: 12px var(--sidebar-pad);
	border-left: var(--divider);
	background: var(--bg-sidebar);
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
}

#mode-bar {
	display: flex;
	gap: 6px;
	align-items: center;
}

.mode-icon {
	flex: 1;
	height: 32px;
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--border);
	background: var(--bg-white);
	color: var(--text-muted);
	cursor: pointer;
	font-size: var(--font-size);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	transition: var(--transition);
}
.mode-icon:hover {
	border-color: #777;
	color: var(--text-med);
}
.mode-icon.active {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-light);
}

#channel-vols {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ch-vol-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size);
	color: var(--text-muted);
}
.ch-label {
	min-width: 24px;
}
.ch-slider {
	flex: 1;
	cursor: pointer;
}
/* ── Swing + Reverb rows ─────────────────────────────────────── */
#swing-row,
#reverb-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size);
	color: var(--text-muted);
}
#swing-sl {
	flex: 1;
	accent-color: var(--accent);
	cursor: pointer;
}
#reverb-sl {
	flex: 1;
	accent-color: var(--accent);
	cursor: pointer;
}

#scale-sel {
	font-family: var(--font);
	font-size: var(--font-size);
	background: var(--bg-white);
	border: var(--border-width) solid var(--border);
	color: #555;
	border-radius: var(--radius-sm);
	padding: 8px 24px 8px 6px;
	cursor: pointer;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}

/* ── Group cards ─────────────────────────────────────────────── */
#groups-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

#groups-panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px 1px;
}

.gcard {
	font-size: var(--font-size);
	padding: 7px 8px;
	padding-bottom: 12px;
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--border-faint);
	background: var(--bg-white);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.gcard-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.gname {
	flex: 1;
	color: var(--text-med);
	font-size: var(--font-size);
	font-family: var(--font);
	cursor: text;
}
.gname-input {
	flex: 1;
	font-size: var(--font-size);
	font-family: var(--font);
	color: var(--text-med);
	border: none;
	border-bottom: 1px solid var(--accent);
	background: transparent;
	outline: none;
	width: 0;
	min-width: 0;
}

.gvol {
	width: 100%;
	height: 4px;
	cursor: pointer;
	display: block;
	margin-top: 4px;
}

.gdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.gsq {
	width: 7px;
	height: 7px;
	border-radius: 1px;
	flex-shrink: 0;
}

.gspeed,
.gdir {
	display: flex;
	gap: 2px;
}

.gspeed button,
.gdir button {
	flex: 1;
	font-size: var(--font-size);
	padding: 2px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-fast);
	text-align: center;
}
.gspeed button.sel,
.gdir button.sel {
	border-color: var(--red);
	color: var(--red);
	font-weight: 700;
}
.gspeed button:hover,
.gdir button:hover {
	border-color: #777;
	color: #333;
}

.gcolor-pick {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	background: none;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
}
.gcolor-pick::-webkit-color-swatch-wrapper {
	padding: 0;
}
.gcolor-pick::-webkit-color-swatch {
	border: none;
	border-radius: 50%;
}
.gcolor-pick::-moz-color-swatch {
	border: none;
	border-radius: 50%;
}

.gdup {
	color: var(--border);
	cursor: pointer;
	font-size: 11px;
	padding: 0 2px;
	transition: var(--transition-fast);
}
.gdup:hover {
	color: var(--accent);
}

.gdel {
	color: var(--border);
	cursor: pointer;
	font-size: 12px;
	padding: 0 2px;
	transition: var(--transition-fast);
}
.gdel:hover {
	color: var(--red);
}

/* ── Waveform row (tone groups only) ────────────────────────── */
.gwaveform {
	display: flex;
	gap: 2px;
}
.gwaveform button {
	flex: 1;
	font-size: var(--font-size-sm);
	padding: 2px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-fast);
	text-align: center;
}
.gwaveform button.sel {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 700;
}
.gwaveform button:hover {
	border-color: #777;
	color: #333;
}

/* ── Chord toggle ────────────────────────────────────────────── */
.gchord-row {
	display: flex;
}
.gchord-btn {
	flex: 1;
	font-size: var(--font-size-sm);
	padding: 2px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-fast);
	text-align: center;
}
.gchord-btn.active {
	border-color: var(--green);
	color: var(--green);
	font-weight: 700;
}
.gchord-btn:hover {
	border-color: #777;
	color: #333;
}

/* ── Pan row ─────────────────────────────────────────────────── */
.gpan-row {
	display: flex;
	align-items: center;
	gap: 4px;
}
.gpan-lbl {
	font-size: var(--font-size-sm);
	color: var(--text-faint);
	min-width: 8px;
	text-align: center;
}
.gpan-slider {
	flex: 1;
	cursor: pointer;
}

/* ── Transpose row (tone groups only) ───────────────────────── */
.gtranspose {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
}
.gtranspose button {
	width: 22px;
	height: 18px;
	font-size: 13px;
	line-height: 1;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-family: var(--font);
	transition: var(--transition-fast);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gtranspose button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.gtranspose-lbl {
	flex: 1;
	font-size: var(--font-size-sm);
	color: var(--text-faint);
	text-align: center;
	letter-spacing: 0.02em;
}

/* ── WAV filename row ───────────────────────────────────────── */
#wav-name-row {
	display: flex;
	align-items: center;
	gap: 4px;
}
#wav-name {
	flex: 1;
	font-size: var(--font-size);
	font-family: var(--font);
	color: var(--text);
	background: var(--bg-input);
	border: var(--border-thin) solid var(--border);
	border-radius: var(--radius-xs);
	padding: 3px 6px;
	outline: none;
}
#wav-name:focus {
	border-color: var(--accent);
}
#wav-name::placeholder {
	color: var(--text-faint);
}
#wav-ext {
	font-size: var(--font-size);
	color: var(--text-faint);
	white-space: nowrap;
}

/* ── Loop override row ──────────────────────────────────────── */
#loop-override-row {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-size);
	color: var(--text-muted);
}
#loop-mode-btns {
	display: flex;
	gap: 2px;
}
#loop-mode-btns button {
	font-size: var(--font-size-sm);
	font-family: var(--font);
	padding: 1px 5px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: var(--transition-fast);
}
#loop-mode-btns button.active {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 700;
}
#loop-fps-sel {
	display: none;
	font-family: var(--font);
	font-size: var(--font-size-sm);
	background: var(--bg-white);
	border: var(--border-thin) solid var(--border);
	color: var(--text-muted);
	border-radius: var(--radius-xs);
	padding: 1px 2px;
	cursor: pointer;
}
#loop-len-input {
	width: 52px;
	font-size: var(--font-size);
	font-family: var(--font);
	color: var(--text);
	background: var(--bg-input);
	border: var(--border-thin) solid var(--border);
	border-radius: var(--radius-xs);
	padding: 2px 4px;
	text-align: center;
	-moz-appearance: textfield;
}
#loop-len-input::-webkit-outer-spin-button,
#loop-len-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#loop-len-input:focus {
	outline: none;
	border-color: var(--accent);
}
#loop-len-auto {
	font-size: var(--font-size);
	font-family: var(--font);
	padding: 2px 6px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: var(--transition-fast);
}
#loop-len-auto.active {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 700;
}
#loop-len-auto:hover {
	border-color: #777;
	color: #333;
}
#bpm-sync-btn {
	font-size: var(--font-size);
	font-family: var(--font);
	padding: 2px 5px;
	border-radius: var(--radius-xs);
	border: var(--border-thin) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: var(--transition-fast);
	white-space: nowrap;
}
#bpm-sync-btn.active {
	border-color: var(--green);
	color: var(--green);
	font-weight: 700;
}
#bpm-sync-btn:hover {
	border-color: #777;
	color: #333;
}

/* ── Bottom row (export) ─────────────────────────────────────── */
#bottom-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

#export-info {
	font-size: var(--font-size);
	color: var(--text-muted);
}

#loop-count-sel {
	font-family: var(--font);
	font-size: var(--font-size);
	background: var(--bg-white);
	border: var(--border-thin) solid var(--border);
	color: var(--text-muted);
	border-radius: var(--radius-xs);
	padding: 1px 3px;
	cursor: pointer;
}

#pbar-exp {
	flex: 1;
	height: 2px;
	background: var(--border-light);
	border-radius: 1px;
	overflow: hidden;
	min-width: 60px;
}
#pbar-fill {
	height: 100%;
	background: var(--accent);
	width: 0%;
	transition: width 0.1s;
}

#btn-vid {
	font-size: var(--font-size);
	font-family: var(--font);
	padding: 4px 8px;
	border-radius: var(--radius-pill);
	border: var(--border-width) solid var(--border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--transition-slow);
}
#vid-fps-sel {
	font-family: var(--font);
	font-size: var(--font-size);
	background: var(--bg-white);
	border: var(--border-thin) solid var(--border);
	color: var(--text-muted);
	border-radius: var(--radius-xs);
	padding: 1px 3px;
	cursor: pointer;
}

#btn-vid:hover {
	border-color: #777;
	color: var(--text-med);
}
#btn-vid.busy {
	border-color: var(--red-bright);
	color: var(--red-bright);
	background: var(--red-bg);
	animation: rp 1s ease-in-out infinite;
}

#dl-link {
	display: none;
	font-size: var(--font-size);
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	border: var(--border-width) solid var(--green);
	color: var(--green);
	background: var(--green-bg);
	text-decoration: none;
	font-family: var(--font);
	transition: var(--transition-slow);
	white-space: nowrap;
	font-weight: 700;
}
#dl-link:hover {
	background: var(--green-bg-hover);
	border-color: var(--green-dark);
	color: var(--green-dark);
}

#hint {
	font-size: var(--font-size);
	color: var(--text-faint);
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin-top: auto;
}

/* ── Pressure bar ────────────────────────────────────────────── */
#pressure-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size);
	color: var(--border-faint);
	height: 12px;
}
.pb-outer {
	width: 70px;
	height: 3px;
	background: var(--border-light);
	border-radius: 2px;
	overflow: hidden;
}
.pb-inner {
	height: 100%;
	background: var(--accent);
	width: 0%;
	transition: width 0.05s;
}

/* ── Group delete overlay ────────────────────────────────────── */
#group-del-btn {
	display: none;
	position: absolute;
	z-index: 15;
	background: var(--bg-white);
	border: var(--border-width) solid var(--red);
	color: var(--red);
	border-radius: var(--radius-lg);
	font-size: var(--font-size);
	font-family: var(--font);
	padding: 4px 12px;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
	transition: background var(--transition-fast);
	pointer-events: all;
}
#group-del-btn:hover {
	background: var(--red-bg);
}

/* ── Popups ──────────────────────────────────────────────────── */
#drum-popup,
#pitch-popup {
	display: none;
	background: var(--bg-white);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-lg);
	padding: 10px;
	position: absolute;
	z-index: 20;
	box-shadow: var(--shadow-popup);
}
#drum-popup {
	min-width: 220px;
}
#pitch-popup {
	min-width: 175px;
}

#drum-popup .ppt,
#pitch-popup .ppt {
	font-size: var(--font-size);
	color: var(--text-muted);
	margin-bottom: 6px;
}

#drum-popup input[type="range"] {
	flex: 1;
	accent-color: var(--accent);
	cursor: pointer;
	min-width: 0;
}

.dp-lbl {
	font-size: var(--font-size);
	color: var(--text-muted);
	width: 38px;
	flex-shrink: 0;
}
.dp-val {
	font-family: var(--font);
	font-size: var(--font-size);
	background: var(--bg-input);
	border: var(--border-thin) solid var(--border);
	color: var(--text);
	border-radius: var(--radius-xs);
	padding: 2px 5px;
	width: 58px;
	text-align: right;
	flex-shrink: 0;
}

#pitch-popup .ppr {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
}
#pitch-popup select,
#pitch-popup input[type="number"] {
	font-family: var(--font);
	font-size: var(--font-size);
	background: var(--bg-input);
	border: var(--border-thin) solid var(--border);
	color: var(--text);
	border-radius: var(--radius-xs);
	padding: 2px 5px;
}
#pitch-popup select {
	flex: 1;
}
#pitch-popup input[type="number"] {
	width: 48px;
}

#pitch-popup .ppb,
#drum-popup .ppb {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}
#pitch-popup .ppb button,
#drum-popup .ppb button {
	font-size: var(--font-size);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	border: var(--border-thin) solid var(--border);
	background: var(--bg-white);
	color: #555;
	cursor: pointer;
	font-family: var(--font);
}
#pitch-popup .ppb button.ok,
#drum-popup .ppb button.ok {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-light);
	font-weight: 700;
}