:root {
	color-scheme: light dark;
	--bg: #111827;
	--panel: #1f2937;
	--text: #f9fafb;
	--muted: #9ca3af;
	--accent: #60a5fa;
	--danger: #f87171;
	--warning: #fbbf24;
	--border: #374151;
	--success: #34d399;
	--surface: #111827;
	--surface-strong: #0f172a;
	--status-bg: rgba(17, 24, 39, 0.94);
	--overlay-bg: rgba(3, 7, 18, 0.3);
	--badge-bg: rgba(17, 24, 39, 0.82);
	--card-bg: rgba(255, 255, 255, 0.02);
	--active-bg: rgba(96, 165, 250, 0.14);
	--viewport-bg: #030712;
	--video-bg: #000;
	--fit-excellent: #34d399;
	--fit-good: #60a5fa;
	--fit-fair: #fbbf24;
	--fit-poor: #fb7185;
	--fit-failed: #991b1b;
	--fit-manual: #9ca3af;
	--fit-pending: #4b5563;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #e5edf6;
		--panel: #f8fafc;
		--text: #0f172a;
		--muted: #475569;
		--accent: #2563eb;
		--danger: #dc2626;
		--warning: #b45309;
		--border: #cbd5e1;
		--success: #059669;
		--surface: #ffffff;
		--surface-strong: #f1f5f9;
		--status-bg: rgba(255, 255, 255, 0.96);
		--overlay-bg: rgba(255, 255, 255, 0.22);
		--badge-bg: rgba(255, 255, 255, 0.88);
		--card-bg: rgba(255, 255, 255, 0.72);
		--active-bg: rgba(37, 99, 235, 0.12);
		--viewport-bg: #e2e8f0;
		--video-bg: #dbe4ee;
		--fit-excellent: #059669;
		--fit-good: #2563eb;
		--fit-fair: #d97706;
		--fit-poor: #e11d48;
		--fit-failed: #991b1b;
		--fit-manual: #64748b;
		--fit-pending: #cbd5e1;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: var(--bg);
	color: var(--text);
}

.app {
	display: grid;
	grid-template-columns: 320px 1fr 320px;
	min-height: 100vh;
}

.sidebar {
	padding: 16px;
	background: var(--panel);
	overflow-y: auto;
}

.sidebar-left {
	border-right: 1px solid var(--border);
}

.sidebar-right {
	border-left: 1px solid var(--border);
}

body[data-ui-mode="live"] .analysis-only,
body[data-ui-mode="empty"] .analysis-only {
	display: none;
}

body[data-ui-mode="empty"] .image-tools-section {
	display: none;
}

body[data-ui-mode="analysis"] .live-only,
body[data-ui-mode="empty"] .live-only {
	display: none;
}

body[data-ui-mode="live"] .home-file-actions,
body[data-ui-mode="live"] .project-file-actions {
	display: none;
}

.status-banner {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	min-width: min(92vw, 360px);
	max-width: min(92vw, 720px);
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--status-bg);
	color: var(--text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}

.status-banner.is-visible {
	opacity: 1;
}

.status-banner[data-type="error"] {
	border-color: var(--danger);
}

.status-banner[data-type="success"] {
	border-color: var(--success);
}

.status-banner[data-type="info"] {
	border-color: var(--accent);
}

.canvas-wrap {
	position: relative;
	overflow: hidden;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	height: 100vh;
	min-height: 100vh;
}

.viewport {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	height: auto;
	margin-top: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--viewport-bg);
	position: relative;
}

.overlay-visibility-controls,
.overlay-legend {
	position: absolute;
	top: 10px;
	z-index: 4;
	border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
	border-radius: 9px;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	box-shadow: 0 5px 18px rgba(15, 23, 42, 0.2);
	backdrop-filter: blur(5px);
	color: var(--text);
	font-size: 12px;
}

.overlay-visibility-controls {
	left: 10px;
	display: grid;
	gap: 7px;
	padding: 7px 9px;
}

.overlay-visibility-controls label {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.overlay-legend {
	right: 10px;
	width: min(260px, calc(100% - 20px));
	max-height: calc(100% - 20px);
	overflow: auto;
}

.overlay-legend > summary {
	padding: 7px 9px;
	cursor: pointer;
	font-weight: 700;
	user-select: none;
}

.overlay-legend[open] > summary {
	border-bottom: 1px solid var(--border);
}

.overlay-legend-body {
	padding: 5px;
}

.overlay-legend-group + .overlay-legend-group {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--border);
}

.overlay-legend-group h3 {
	margin: 0;
	padding: 3px 5px;
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.overlay-legend-item {
	border-radius: 6px;
}

.overlay-legend-item.is-editing {
	background: var(--card-bg);
	box-shadow: inset 0 0 0 1px var(--border);
}

.overlay-legend-item-heading {
	display: flex;
	align-items: center;
	gap: 3px;
}

.overlay-legend-item-toggle {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	min-width: 0;
	min-height: 28px;
	flex: 1 1 auto;
	padding: 4px 5px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
}

.overlay-legend-item-toggle:hover,
.overlay-legend-item-toggle:focus-visible {
	background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.overlay-legend-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.overlay-legend-sample {
	position: relative;
	display: block;
	width: 28px;
	height: 14px;
}

.overlay-legend-sample-line {
	position: absolute;
	left: 1px;
	right: 1px;
	top: 50%;
	border-top: var(--overlay-sample-line-width) solid var(--overlay-sample-color);
	transform: translateY(-50%);
}

.overlay-legend-sample.is-dashed .overlay-legend-sample-line {
	border-top-style: dashed;
}

.overlay-legend-sample-point {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--overlay-sample-point-size);
	height: var(--overlay-sample-point-size);
	border-radius: 50%;
	background: var(--overlay-sample-color);
	transform: translate(-50%, -50%);
}

.overlay-legend-lock {
	width: 28px;
	min-width: 28px;
	min-height: 26px;
	padding: 2px;
	border: 0;
	background: transparent;
	font-size: 13px;
}

.overlay-legend-lock.is-locked {
	color: var(--warning);
}

.overlay-style-editor {
	display: grid;
	gap: 5px;
	padding: 5px 7px 8px 41px;
}

.overlay-style-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--muted);
}

.overlay-style-control input[type="color"] {
	width: 38px;
	height: 24px;
	padding: 1px;
}

.overlay-style-number {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--muted);
}

.overlay-style-number input {
	width: 58px;
	padding: 4px 5px;
	font-variant-numeric: tabular-nums;
}

.overlay-default-style {
	justify-self: end;
	padding: 4px 7px;
	font-size: 11px;
}

.camera-overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--overlay-bg);
	pointer-events: auto;
}

.camera-overlay.is-live {
	display: flex;
	cursor: grab;
}

.camera-overlay.is-live.is-panning {
	cursor: grabbing;
}

.camera-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--video-bg);
}

.camera-preview-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.camera-overlay.is-live .camera-video {
	opacity: 0;
}

.camera-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: grid;
	gap: 3px;
	padding: 6px 10px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--badge-bg);
	color: var(--text);
	font-size: 12px;
	pointer-events: none;
}

.camera-badge-title {
	font-weight: 700;
}

.camera-badge-detail {
	color: var(--muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.camera-exposure-meter {
	display: grid;
	gap: 3px;
	min-width: 220px;
}

.camera-exposure-channel {
	display: grid;
	grid-template-columns: 12px minmax(64px, 1fr) 43px minmax(52px, auto);
	gap: 5px;
	align-items: center;
	color: var(--muted);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
}

.camera-exposure-channel strong {
	color: inherit;
	font-size: 10px;
	transition: color 160ms ease;
}

.camera-exposure-channel.is-selected strong {
	color: var(--accent);
}

.camera-exposure-track {
	display: block;
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--border);
}

.camera-exposure-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--muted);
	transition: width 160ms ease, background-color 160ms ease;
}

.camera-exposure-channel[data-level="ok"] .camera-exposure-fill {
	background: var(--success);
}

.camera-exposure-channel[data-level="near"] .camera-exposure-fill {
	background: var(--warning);
}

.camera-exposure-channel[data-level="saturated"] .camera-exposure-fill {
	background: var(--danger);
}

.camera-exposure-channel[data-level="ok"] .camera-exposure-state {
	color: var(--success);
}

.camera-exposure-channel[data-level="near"] .camera-exposure-state {
	color: var(--warning);
}

.camera-exposure-channel[data-level="saturated"] .camera-exposure-state {
	color: var(--danger);
}

.camera-exposure-value {
	text-align: right;
}

.camera-guide-line {
	position: absolute;
	z-index: 2;
	pointer-events: auto;
}

.camera-guide-line-horizontal {
	left: 0;
	right: 0;
	height: 0;
	border-top: 2px dashed #39ff14;
	box-shadow: 0 0 10px rgba(57, 255, 20, 0.8);
	cursor: ns-resize;
}

.camera-guide-line-vertical {
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 2px dashed #7dd3fc;
	box-shadow: 0 0 10px rgba(125, 211, 252, 0.85);
	cursor: ew-resize;
}

h2 {
	font-size: 16px;
	margin: 0 0 8px;
}

.section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.processing-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--badge-bg);
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.processing-badge[data-mode="webgl"] {
	color: var(--success);
	border-color: var(--success);
}

.processing-badge[data-mode="cpu"] {
	color: var(--muted);
}

.section+.section {
	margin-top: 20px;
}

p,
label,
button,
input {
	font-size: 14px;
}

.controls {
	display: grid;
	gap: 10px;
}

.row {
	display: grid;
	gap: 6px;
}

.tool-divider {
	height: 1px;
	background: var(--border);
}

.scene-subsection-title h2 {
	margin-bottom: 0;
}

.esp32-control-section > .section-title {
	margin-top: 12px;
}

.row-inline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.row-inline-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}

.live-capture-row {
	display: none;
}

body[data-ui-mode="live"] .live-capture-row {
	display: block;
}

.live-home-btn {
	display: none;
}

body[data-ui-mode="live"] .live-home-btn {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
}

body[data-ui-mode="live"] #liveCamBtn {
	display: none;
}

.button-icon {
	font-size: 16px;
	line-height: 1;
}

input[type="number"],
input[type="color"],
button,
select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
}

input[type="range"] {
	width: 100%;
	padding: 0;
}

input[type="file"] {
	display: none;
}

.file-button {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	text-align: center;
	display: inline-block;
}

.file-button:hover {
	border-color: var(--accent);
}

input[type="color"] {
	padding: 2px;
	min-height: 28px;
	width: 44px;
	border-radius: 8px;
}

input[type="checkbox"] {
	transform: translateY(1px);
}

button {
	cursor: pointer;
	background: var(--surface-strong);
}

button:hover {
	border-color: var(--accent);
}

button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.button-danger {
	border-color: var(--danger);
}

.circle-card {
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px;
	display: grid;
	gap: 8px;
	background: var(--card-bg);
}

.range-label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.range-label > span:last-child {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.metric {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.esp-panel,
.esp-connection,
.esp-focus-control,
.esp-pump-control,
.esp-illumination {
	display: grid;
	gap: 12px;
}

.esp-console {
	display: grid;
	gap: 8px;
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.esp-console h2 {
	margin-bottom: 0;
}

.esp-status {
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
}

.esp-status.is-connected {
	border-color: var(--success);
	color: var(--success);
}

.esp-speed-readout {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.esp-speed-value {
	color: var(--text);
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.esp-stop {
	border-color: var(--danger);
}

.esp-swatch {
	width: 34px;
	height: 34px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #ffffff;
}

.esp-preset-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.esp-color-control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.esp-color-input {
	width: 92px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: monospace;
	text-transform: uppercase;
}

.esp-color-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.esp-custom-color {
	display: grid;
	gap: 10px;
}

.esp-custom-color summary {
	cursor: pointer;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.esp-custom-color[open] summary {
	color: var(--text);
}

.esp-custom-color-body {
	display: grid;
	gap: 10px;
	padding-top: 4px;
}

.esp-illumination-heading,
.esp-led-matrix-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.esp-illumination-heading {
	position: relative;
	justify-content: flex-start;
}

.esp-illumination-heading h2 {
	margin: 0;
}

.esp-illumination-heading .context-help {
	position: static;
}

.esp-illumination-heading .fit-quality-tooltip {
	right: auto;
	left: 0;
	width: min(260px, 100%);
}

.esp-all-leds-off {
	flex: 0 0 auto;
	padding: 7px 10px;
	border-color: var(--danger);
	font-size: 12px;
}

.esp-led-matrix {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px;
	width: min(100%, 252px);
	margin: 2px auto 0;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: color-mix(in srgb, var(--panel) 88%, #000);
}

.esp-led-cell {
	position: relative;
	min-width: 0;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 4px;
	background: #05070b;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 28%);
	cursor: crosshair;
	outline: none;
}

.esp-led-cell:hover,
.esp-led-cell:focus-visible {
	z-index: 2;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.esp-led-cell::after {
	content: attr(data-value-label);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	padding: 4px 6px;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: var(--panel);
	color: var(--text);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 3px);
	transition: opacity 100ms ease, transform 100ms ease;
}

.esp-led-cell:hover::after,
.esp-led-cell:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.esp-color-preset {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 5px;
	background: var(--preset-color);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}

.esp-color-preset.is-active {
	border-color: var(--accent);
	box-shadow:
		0 0 0 2px var(--panel),
		0 0 0 4px var(--accent),
		inset 0 0 0 1px rgb(255 255 255 / 55%);
}

.esp-wheel {
	position: relative;
	width: min(100%, 220px);
	aspect-ratio: 1;
	justify-self: center;
	border: 1px solid var(--border);
	border-radius: 50%;
	background:
		radial-gradient(circle, #ffffff 0%, rgb(255 255 255 / 0%) 62%),
		conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
	cursor: crosshair;
	touch-action: none;
}

.esp-wheel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%);
	pointer-events: none;
}

.esp-wheel-thumb {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 8px rgb(0 0 0 / 35%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.esp-log {
	min-height: 72px;
	max-height: 150px;
	margin: 0;
	padding: 10px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--muted);
	font-size: 12px;
	white-space: pre-wrap;
}

.burst-panel {
	display: none;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card-bg);
}

.burst-panel.is-visible {
	display: grid;
}

.burst-composite-setting {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(64px, auto);
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 12px;
}

.burst-composite-setting select {
	min-width: 64px;
}

.sweep-settings {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.sweep-settings label {
	display: grid;
	gap: 5px;
	font-size: 12px;
	color: var(--muted);
}

.sweep-settings input {
	min-width: 0;
	width: 100%;
}

.esp-illumination.is-locked .esp-wheel,
.esp-illumination.is-locked .esp-led-matrix {
	opacity: 0.55;
	pointer-events: none;
}

.burst-capture-actions button {
	min-width: 0;
	padding-inline: 4px;
	font-size: 12px;
	white-space: nowrap;
}

#captureReferenceBtn.is-captured,
.reference-frame-button.is-active {
	border-color: var(--success);
	background: color-mix(in srgb, var(--success) 18%, transparent);
	color: var(--text);
}

.burst-navigation {
	display: grid;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
}

.burst-navigation[hidden] {
	display: none;
}

.burst-navigation-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--text);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.burst-navigation-meta span {
	color: var(--muted);
}

.burst-navigation-controls {
	display: grid;
	grid-template-columns: 44px minmax(100px, 1fr) 44px 1px minmax(72px, auto) minmax(72px, auto) 44px;
	gap: 10px;
	align-items: start;
}

.burst-navigation-controls.has-reference {
	grid-template-columns: minmax(52px, auto) 44px minmax(100px, 1fr) 44px 1px minmax(72px, auto) minmax(72px, auto) 44px;
}

.burst-navigation-controls button {
	position: relative;
	z-index: 1;
	min-height: 42px;
}

.burst-frame-slider-wrap {
	--fit-variant-label-width: 128px;
	--fit-variant-row-height: 52px;
	--fit-expanded-row-extra-height: clamp(248px, calc(50vh - var(--fit-variant-row-height)), 468px);
	--fit-plot-left: calc(var(--fit-variant-label-width) + 18px);
	--fit-plot-right: 8px;
	position: relative;
	z-index: 0;
	min-width: 0;
	height: calc(36px + var(--fit-variant-count, 2) * var(--fit-variant-row-height));
}

.burst-frame-slider-wrap.has-expanded-chart {
	height: calc(
		36px
		+ var(--fit-variant-count, 2) * var(--fit-variant-row-height)
		+ var(--fit-expanded-row-extra-height)
	);
}

.burst-frame-slider {
	position: absolute;
	z-index: 2;
	top: 0;
	left: calc(var(--fit-variant-label-width) + 10px);
	width: calc(100% - var(--fit-variant-label-width) - 10px);
	height: 32px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
}

.burst-frame-slider::-webkit-slider-runnable-track {
	height: 8px;
	background: transparent;
}

.burst-frame-slider::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -5px;
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
}

.burst-frame-slider::-moz-range-track {
	height: 8px;
	background: transparent;
}

.burst-frame-slider::-moz-range-progress {
	background: transparent;
}

.burst-frame-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.burst-frame-slider-axis {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: var(--fit-plot-left);
	right: var(--fit-plot-right);
	height: 8px;
	pointer-events: none;
}

.burst-fit-indicator {
	position: absolute;
	inset: 0;
	display: grid;
	overflow: hidden;
	border-radius: 999px;
	background: var(--fit-pending);
}

.burst-frame-slider-thumb {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: 18px;
	height: 18px;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--text);
	box-shadow: 0 0 0 1px var(--border);
	transform: translate(-50%, -50%);
}

.burst-frame-slider:focus-visible + .burst-frame-slider-axis .burst-frame-slider-thumb {
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

.burst-frame-slider:disabled + .burst-frame-slider-axis .burst-frame-slider-thumb {
	opacity: 0.65;
}

.burst-invariant-charts {
	position: absolute;
	top: 36px;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: visible;
}

.burst-invariant-charts[hidden] {
	display: none;
}

.burst-invariant-variant-row {
	display: grid;
	flex: 0 0 var(--fit-variant-row-height);
	grid-template-columns: var(--fit-variant-label-width) minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
	min-width: 0;
}

.burst-invariant-variant-row.is-expanded {
	flex-basis: calc(var(--fit-variant-row-height) + var(--fit-expanded-row-extra-height));
}

.fit-variant-control {
	position: relative;
	align-self: center;
	min-width: 0;
}

.fit-variant-button {
	width: 100%;
	min-width: 0;
	min-height: 34px !important;
	padding: 5px 8px;
	overflow: hidden;
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fit-variant-button.is-active {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-contrast, #fff);
}

.fit-variant-tooltip {
	position: absolute;
	top: 50%;
	left: calc(100% + 8px);
	z-index: 30;
	visibility: hidden;
	width: min(280px, 62vw);
	padding: 7px 9px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--status-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	color: var(--text);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translate(-2px, -50%);
	transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.fit-variant-control:hover .fit-variant-tooltip,
.fit-variant-control:focus-within .fit-variant-tooltip {
	visibility: visible;
	opacity: 1;
	transform: translate(0, -50%);
}

.burst-invariant-chart {
	position: relative;
	min-width: 0;
	margin: 0 8px;
	overflow: visible;
	border-bottom: 1px solid var(--border);
	cursor: crosshair;
}

.burst-invariant-variant-row.is-expanded .burst-invariant-chart {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.burst-navigation-controls .chart-expand-button {
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 12;
	width: 26px;
	min-width: 26px;
	height: 24px;
	min-height: 24px;
	padding: 0;
	border-radius: 6px;
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	font-size: 16px;
	line-height: 1;
}

.burst-navigation-controls .burst-invariant-variant-row.is-expanded .chart-expand-button {
	border-color: var(--accent);
}

.has-chart-expand-button .invariant-statistics-label {
	right: 34px;
}

.burst-invariant-chart.is-empty {
	cursor: default;
}

.burst-invariant-chart svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.invariant-reference-line {
	stroke: var(--muted);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	vector-effect: non-scaling-stroke;
}

.basin-axis-grid-line {
	stroke: color-mix(in srgb, var(--border) 72%, transparent);
	stroke-width: 1;
	stroke-dasharray: 2 5;
	vector-effect: non-scaling-stroke;
}

.basin-calibration-interval {
	stroke: var(--accent);
	stroke-width: 1.5;
	pointer-events: none;
}

.basin-calibration-interval line {
	vector-effect: non-scaling-stroke;
}

.invariant-mean-line {
	stroke: var(--warning);
	stroke-width: 1.25;
	stroke-dasharray: 8 3;
	vector-effect: non-scaling-stroke;
}

.invariant-series-line {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.invariant-reference-label {
	position: absolute;
	right: calc(100% + 3px);
	color: var(--muted);
	font-size: 9px;
	line-height: 1;
	transform: translateY(-50%);
}

.invariant-mean-label {
	position: absolute;
	left: 3px;
	z-index: 3;
	padding: 0 2px;
	color: var(--warning);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

.invariant-series-label {
	position: absolute;
	top: 1px;
	left: 3px;
	z-index: 3;
	color: var(--muted);
	font-size: 9px;
	line-height: 1;
	pointer-events: none;
}

.invariant-statistics-label {
	position: absolute;
	top: 1px;
	right: 3px;
	z-index: 3;
	max-width: calc(100% - 52px);
	padding: 0 2px;
	overflow: hidden;
	color: var(--text);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	font-size: 9px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

.invariant-empty-label {
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--muted);
	font-size: 10px;
	transform: translate(-50%, -50%);
}

.basin-axis-value,
.basin-axis-x-label,
.basin-reference-label {
	position: absolute;
	z-index: 3;
	padding: 0 2px;
	color: var(--muted);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	font-size: 9px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.basin-axis-value {
	left: 3px;
	transform: translateY(-50%);
}

.basin-axis-x-label {
	right: 3px;
	bottom: 1px;
}

.basin-reference-label {
	right: 3px;
	font-weight: 700;
	transform: translateY(-50%);
}

.burst-invariant-point {
	position: absolute;
	z-index: 2;
	width: 7px;
	height: 7px;
	border: 1px solid var(--surface);
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.burst-invariant-point.is-selected {
	width: 11px;
	height: 11px;
	background: var(--text);
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text);
}

.burst-invariant-point:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

.chart-point-tooltip {
	position: absolute;
	z-index: 20;
	visibility: hidden;
	max-width: min(360px, 80vw);
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--status-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	color: var(--text);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 10px));
}

.chart-point-tooltip[data-horizontal="start"] {
	transform: translate(0, calc(-100% - 10px));
}

.chart-point-tooltip[data-horizontal="end"] {
	transform: translate(-100%, calc(-100% - 10px));
}

.chart-point-tooltip[data-vertical="below"] {
	transform: translate(-50%, 12px);
}

.chart-point-tooltip[data-horizontal="start"][data-vertical="below"] {
	transform: translate(0, 12px);
}

.chart-point-tooltip[data-horizontal="end"][data-vertical="below"] {
	transform: translate(-100%, 12px);
}

.chart-point-tooltip.is-visible {
	visibility: visible;
	opacity: 1;
}

.burst-fit-segment {
	min-width: 1px;
	border-right: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
}

.burst-fit-segment:last-child {
	border-right: 0;
}

.burst-fit-segment.is-excellent { background: var(--fit-excellent); }
.burst-fit-segment.is-good { background: var(--fit-good); }
.burst-fit-segment.is-fair { background: var(--fit-fair); }
.burst-fit-segment.is-poor { background: var(--fit-poor); }
.burst-fit-segment.is-failed { background: var(--fit-failed); }
.burst-fit-segment.is-manual { background: var(--fit-manual); }
.burst-fit-segment.is-pending { background: var(--fit-pending); }

.burst-fit-segment.is-selected {
	box-shadow: inset 0 0 0 2px var(--text);
}

.burst-frame-action-divider {
	width: 1px;
	height: 28px;
	background: var(--border);
}

.icon-button {
	display: inline-grid;
	place-items: center;
	padding: 8px;
}

.icon-button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.danger-button {
	border-color: var(--danger);
	color: var(--danger);
}

.segmented {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
}

.segmented button {
	padding: 10px 8px;
}

.segmented button.is-active {
	border-color: var(--accent);
	background: var(--active-bg);
}

.image-tools-section .view-mode-tabs {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.image-tools-section .view-mode-tabs button {
	min-width: 0;
	padding-inline: 6px;
	overflow-wrap: anywhere;
}

.geometry-tabs {
	min-width: 0;
}

.section-divider {
	margin-bottom: 20px;
}

.context-help {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.rotation-label-heading {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rotation-label-heading .fit-quality-tooltip {
	right: auto;
	left: 0;
}

.alignment-control-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.alignment-control-row button {
	width: auto;
	padding: 8px 10px;
	white-space: nowrap;
}

.geometry-heading-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.geometry-heading-row h2 {
	margin: 0;
}

.needle-fit-settings {
	display: grid;
	gap: 10px;
}

.basin-fit-settings select {
	width: 100%;
	min-width: 0;
}

.basin-window-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.basin-window-heading > label {
	font-weight: 600;
}

.basin-window-heading .context-help {
	position: static;
}

.basin-window-heading .fit-quality-tooltip {
	right: auto;
	left: 0;
	width: 100%;
	max-width: 100%;
}

.basin-window-status {
	font-size: 11px;
}

.basin-setting-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.basin-setting-heading .context-help {
	position: static;
}

.basin-setting-heading .fit-quality-tooltip {
	right: auto;
	left: 0;
	width: min(300px, 68vw);
}

.basin-fit-settings .basin-advanced-settings > .basin-window-control {
	padding: 5px 10px 8px;
}

.basin-fit-settings .settings-details > .range-label {
	align-items: center;
	padding: 5px 10px;
	font-size: 11px;
}

.basin-fit-settings .settings-details > .range-label:last-child {
	padding-bottom: 10px;
}

.basin-fit-settings .basin-advanced-settings > .range-label input {
	width: 92px;
}

.basin-series-label {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
}

.basin-series-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.basin-series-unit {
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
}

.basin-series-label .context-help {
	margin-left: auto;
}

.basin-series-label .fit-quality-help {
	flex-basis: 16px;
	min-width: 16px;
	width: 16px;
	max-width: 16px;
	min-height: 16px;
	height: 16px;
	max-height: 16px;
	aspect-ratio: 1;
	font-size: 10px;
}

.basin-series-label .fit-variant-tooltip {
	width: min(320px, 68vw);
}

.needle-fit-side-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.settings-details {
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--card-bg);
}

.settings-details summary {
	padding: 9px 10px;
	color: var(--muted);
	cursor: pointer;
}

.settings-details[open] summary {
	color: var(--text);
}

.geometry-fit-controls {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.fit-run-button-slot {
	display: grid;
}

.fit-run-button-slot > button {
	grid-area: 1 / 1;
}

.fit-run-button-slot > button[hidden],
.batch-export-controls[hidden] {
	display: none;
}

.fit-diagnostics {
	display: grid;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card-bg);
}

.fit-diagnostics h3 {
	margin: 0;
	font-size: 14px;
}

.fit-quality-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 3px 9px;
	padding: 9px 10px;
	border: 1px solid var(--border);
	border-left: 4px solid var(--accent);
	border-radius: 8px;
	background: var(--surface);
}

.fit-quality-summary strong {
	color: var(--accent);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.fit-quality-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.fit-quality-heading .context-help {
	position: static;
}

.fit-quality-grade {
	font-weight: 700;
}

.fit-quality-help {
	display: inline-grid;
	place-items: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 50%;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.fit-quality-tooltip {
	position: absolute;
	top: calc(100% + 7px);
	right: 0;
	z-index: 20;
	visibility: hidden;
	width: min(240px, 70vw);
	padding: 7px 9px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--status-bg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	color: var(--text);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-2px);
	transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.fit-quality-help:hover + .fit-quality-tooltip,
.fit-quality-help:focus-visible + .fit-quality-tooltip {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.fit-quality-summary[data-grade="excellent"] {
	border-left-color: var(--success);
}

.fit-quality-summary[data-grade="excellent"] strong {
	color: var(--success);
}

.fit-quality-summary[data-grade="fair"] {
	border-left-color: var(--warning);
}

.fit-quality-summary[data-grade="fair"] strong {
	color: var(--warning);
}

.fit-quality-summary[data-grade="poor"] {
	border-left-color: var(--danger);
}

.fit-quality-summary[data-grade="poor"] strong {
	color: var(--danger);
}

.fit-diagnostic-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
}

.fit-diagnostic-grid > div {
	min-width: 0;
	padding: 7px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--surface);
}

.fit-diagnostic-grid dt {
	margin-bottom: 3px;
	color: var(--muted);
	font-size: 11px;
}

.fit-diagnostic-grid dd {
	margin: 0;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.fit-warning-list {
	display: grid;
	gap: 5px;
	margin: 0;
	padding-left: 18px;
	color: var(--warning);
	font-size: 12px;
	line-height: 1.4;
}

.fit-warning-heading {
	color: var(--warning);
	font-size: 12px;
	font-weight: 700;
}

.fit-technical-diagnostics {
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.fit-technical-diagnostics summary {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.fit-technical-diagnostics[open] summary {
	margin-bottom: 8px;
}

.fit-diagnostics table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.fit-diagnostics th,
.fit-diagnostics td {
	padding: 4px 5px;
	border-bottom: 1px solid var(--border);
	text-align: right;
}

.fit-diagnostics th:first-child,
.fit-diagnostics td:first-child {
	text-align: left;
}

.invariant-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
}

.invariant-heading .context-help {
	position: static;
}

.invariant-heading .fit-quality-tooltip {
	right: auto;
	left: 0;
	width: min(240px, 100%);
}

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

.invariant-parameter,
.invariant-value {
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 6px 7px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--surface);
}

.invariant-parameter span,
.invariant-value span {
	color: var(--muted);
	font-size: 11px;
}

.invariant-parameter input {
	width: 100%;
	min-width: 0;
	padding: 4px 5px;
	font-variant-numeric: tabular-nums;
}

.invariant-parameter input[aria-invalid="true"] {
	border-color: var(--danger);
}

.invariant-value output {
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.fit-placeholder-warning {
	color: var(--danger);
	font-size: 12px;
}

.inline-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.scale-compact-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
}

.scale-compact-row h2 {
	margin: 0;
	white-space: nowrap;
}

.scale-divider {
	margin-top: 20px;
}

#scalePanel {
	min-width: 0;
}

.scale-inline {
	display: grid;
	grid-template-columns: minmax(70px, 1fr);
	gap: 8px;
	align-items: center;
}

.basin-calibration-editor { display:grid; gap:8px; margin-top:8px; }
.basin-calibration-editor label { display:grid; gap:4px; font-size:12px; }
.basin-calibration-coordinates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.basin-calibration-coordinates input, .basin-calibration-editor select { width:100%; min-width:0; }
.basin-calibration-editor .basin-calibration-confirm { display:flex; align-items:flex-start; gap:6px; }
.basin-calibration-confirm input { flex:0 0 auto; margin-top:2px; }
.basin-calibration-editor p { margin:0; }

canvas {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--video-bg);
	cursor: grab;
}

canvas.dragging {
	cursor: grabbing;
}

@media (max-width: 1200px) {
	.app {
		grid-template-columns: 280px 1fr;
		grid-template-areas:
			"left main"
			"right right";
	}

	.sidebar-left {
		grid-area: left;
	}

	.canvas-wrap {
		grid-area: main;
		height: auto;
		min-height: auto;
	}

	.sidebar-right {
		grid-area: right;
		border-left: 0;
		border-top: 1px solid var(--border);
	}

	.viewport {
		height: min(70vh, 900px);
	}
}

@media (max-width: 900px) {
	.app {
		grid-template-columns: 1fr;
		grid-template-areas:
			"left"
			"main"
			"right";
	}

	.sidebar {
		border: 0;
		border-bottom: 1px solid var(--border);
	}

	.canvas-wrap {
		padding: 12px;
	}

	.viewport {
		width: 100%;
		height: min(62vh, 700px);
	}
}

@media (max-width: 640px) {
	.sidebar {
		padding: 12px;
	}

	.row-inline,
	.row-inline-3,
	.segmented {
		grid-template-columns: 1fr;
	}

	.burst-capture-actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.burst-navigation-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.burst-navigation-controls {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.burst-navigation-controls.has-reference {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.burst-frame-slider-wrap {
		--fit-expanded-row-extra-height: clamp(188px, calc(65vh - var(--fit-variant-row-height)), 348px);
	}

	#prevBurstFrameBtn { grid-column: 1; grid-row: 1; }
	.burst-frame-slider-wrap { grid-column: 2 / 6; grid-row: 1; }
	#nextBurstFrameBtn { grid-column: 6; grid-row: 1; }
	.burst-frame-action-divider { display: none; }
	#refitSelectedFrameBtn { grid-column: 1 / 3; grid-row: 2; }
	#resetSelectedGeometryBtn { grid-column: 3 / 5; grid-row: 2; }
	#deleteBurstFrameBtn { grid-column: 5 / 7; grid-row: 2; }
	.burst-navigation-controls.has-reference #referenceFrameBtn { grid-column: 1; grid-row: 1; }
	.burst-navigation-controls.has-reference #prevBurstFrameBtn { grid-column: 2; grid-row: 1; }
	.burst-navigation-controls.has-reference .burst-frame-slider-wrap { grid-column: 3 / 8; grid-row: 1; }
	.burst-navigation-controls.has-reference #nextBurstFrameBtn { grid-column: 8; grid-row: 1; }
	.burst-navigation-controls.has-reference #refitSelectedFrameBtn { grid-column: 1 / 3; grid-row: 2; }
	.burst-navigation-controls.has-reference #resetSelectedGeometryBtn { grid-column: 3 / 6; grid-row: 2; }
	.burst-navigation-controls.has-reference #deleteBurstFrameBtn { grid-column: 6 / 9; grid-row: 2; }

	.viewport {
		height: 52vh;
		border-radius: 10px;
	}
}