.gauge-demo-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: stretch;
	margin-bottom: 1.5rem;
}

.gauge-control-panel {
	flex: 1 1 18rem;
	min-width: 16rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.gauge-control-panel h4 {
	margin: 0 0 0.75rem;
	color: var(--text-primary);
}

.gauge-slider-group {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 0.9rem;
}

.gauge-slider-group label {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 0.92rem;
}

.gauge-slider-group input[type="range"] {
	width: 100%;
	accent-color: var(--primary);
}

.gauge-set,
.arcgauge-set {
	flex: 1 1 24rem;
	min-width: 20rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.gauge-set-header,
.arcgauge-set-header {
	margin-bottom: 1rem;
}

.gauge-set-header h3,
.arcgauge-set-header h3 {
	margin: 0 0 0.3rem;
	color: var(--text-primary);
}

.gauge-set-header p,
.arcgauge-set-header p {
	margin: 0;
	color: var(--text-secondary);
}

.gauge-card,
.arcgauge-card {
	display: flex;
	flex-direction: column;
	padding: 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-elevated, var(--surface));
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: relative;
	overflow: hidden;
}

.gauge-card::before,
.arcgauge-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
	opacity: 0.5;
}

.gauge-metric-label {
	color: var(--text-secondary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gauge-metric-value {
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 700;
	font-family: var(--font-mono, ui-monospace, monospace);
	letter-spacing: -0.03em;
}

.gauge-metric-meta {
	color: var(--text-muted);
	font-size: 0.84rem;
	font-family: var(--font-mono, ui-monospace, monospace);
}

.progressbar-set-horizontal,
.progressbar-set-vertical {
	align-self: stretch;
}

.progressbar-grid-horizontal {
	display: grid;
	gap: 0.85rem;
}

.progressbar-grid-vertical {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	align-items: stretch;
}

.progressbar-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.7rem;
}

.progressbar-card-horizontal {
	gap: 0.7rem;
}

.progressbar-card-vertical {
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	gap: 0.7rem;
}

.progressbar-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.progressbar-background {
	position: relative;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
	background: color-mix(in srgb, var(--bg-color) 72%, var(--surface) 28%);
	display: flex;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.progressbar-background-horizontal {
	height: 0.9rem;
	border-radius: 999px;
}

.progressbar-background-vertical {
	height: var(--progressbar-height, 240px);
	width: 100%;
	max-width: 4rem;
	margin: 0 auto;
	border-radius: 1.2rem;
	justify-content: flex-end;
	padding: 0.35rem;
	flex-direction: column;
}


.progressbar-bar {
	transition: all 0.35s ease;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 24px color-mix(in srgb, currentColor 28%, transparent 72%);
}

.progressbar-background-horizontal .progressbar-bar {
	height: 100%;
	border-radius: 999px;
}

.progressbar-background-vertical .progressbar-bar {
	width: 100%;
	border-radius: 0.95rem;
}

.progressbar-marker {
	position: absolute;
	z-index: 10;
	opacity: 0.72;
	background: var(--text-color, var(--text-primary, #333));
	box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}

.progressbar-marker:hover {
	opacity: 1;
}

.progressbar-background-horizontal .progressbar-marker {
	height: 100%;
	top: 0;
	width: 3px;
	transform: translateX(-50%);
}

.progressbar-background-vertical .progressbar-marker {
	width: 100%;
	left: 0;
	height: 3px;
	transform: translateY(50%);
}

.needlegauge-svg .needle {
	transition: all 0.3s ease;
}

.progressbar-meta {
	margin-top: 0.1rem;
}

.needlegauge-grid {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.needlegauge-card {
	align-items: center;
	text-align: center;
	gap: 0.55rem;
}

.needlegauge-label-head {
	align-self: flex-start;
}

.needlegauge-visual {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.needlegauge-svg {
	max-width: 100%;
	overflow: visible;
}


.needlegauge-svg .ticks line {
	opacity: 0.8;
}

.needlegauge-svg .ticks text {
	font-family: var(--font-mono, ui-monospace, monospace);
	fill: var(--text-muted);
}

.needlegauge-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

.arcgauge-label {
	margin-bottom: 0.35rem;
}

.arcgauge-svg {
	width: 130px;
	height: 72px;
	margin: 0.1rem 0 0.35rem;
	overflow: visible;
}

.arcgauge-track {
	stroke: color-mix(in srgb, var(--border) 70%, transparent 30%);
}

.arcgauge-arc-dyn {
	transition: stroke-dasharray 0.6s ease, stroke 0.6s ease;
}

.arcgauge-watermark {
	stroke-width: 1.5;
	stroke-linecap: round;
}

.arcgauge-watermark-lo {
	stroke: var(--primary);
}

.arcgauge-watermark-hi {
	stroke: var(--accent);
}

.arcgauge-value {
	fill: var(--text-primary);
	font-size: 17px;
	font-weight: 700;
	font-family: var(--font-mono, ui-monospace, monospace);
}

.arcgauge-caption {
	fill: var(--text-muted);
	font-size: 7px;
	letter-spacing: 1.5px;
	font-family: var(--font-sans, system-ui, sans-serif);
}

.arcgauge-meta {
	width: 100%;
	text-align: center;
}

.arcgauge-grid {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.arcgauge-card {
	align-items: center;
	text-align: center;
}

@media (max-width: 768px) {
	.gauge-demo-row {
		flex-direction: column;
	}
}