:root {
	--bg: #f6f7f9;
	--card: #ffffff;
	--border: #e6e8ec;
	--text: #1c1f24;
	--muted: #6b7280;
	--faint: #9aa1ab;
	--accent: #e23636;
	--accent-soft: rgba(226, 54, 54, 0.12);
	--warn: #f59e0b;
	--warn-soft: rgba(245, 158, 11, 0.14);
	--good: #1f9d55;
	--mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(16, 18, 22, 0.04), 0 6px 18px rgba(16, 18, 22, 0.05);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1013;
		--card: #16191e;
		--border: #262b32;
		--text: #e7e9ee;
		--muted: #9aa1ab;
		--faint: #6b7280;
		--accent: #ff5a5a;
		--accent-soft: rgba(255, 90, 90, 0.16);
		--warn: #f59e0b;
		--warn-soft: rgba(245, 158, 11, 0.16);
		--good: #34d399;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
	}
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.topbar {
	border-bottom: 1px solid var(--border);
	background: var(--card);
}
.topbar h1 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 22px 0 2px;
}
.subtitle { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-family: var(--mono); }

.controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	align-items: flex-end;
	margin: 26px 0 8px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

select {
	font: inherit;
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 12px;
	min-width: 210px;
	cursor: pointer;
}

.status { margin: 0 0 0 auto; color: var(--faint); font-size: 13px; font-family: var(--mono); align-self: center; }

.results { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 14px 0 32px; }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head .meta { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.card-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.evo-btn {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 6px 11px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.evo-btn:hover { background: var(--accent); color: #fff; }

.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.fa-legend { display: flex; gap: 14px; }
.fa-legend i.on { background: var(--accent); }
.fa-legend i.off { background: var(--warn); }

.chart { padding: 8px 8px 14px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .ax-x, .chart-svg .ax-y { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.chart-svg .line-on { stroke: var(--accent); }
.chart-svg .line-off { stroke: var(--warn); }
.chart-svg .dot-on { fill: var(--accent); }
.chart-svg .dot-off { fill: var(--warn); }

.evo-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 18px; text-align: left; vertical-align: middle; }
th { font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr + tr td, tbody tr + tr th { border-top: 1px solid var(--border); }

.quant { font-family: var(--mono); font-weight: 600; white-space: nowrap; width: 4%; min-width: 64px; }

.metric { width: 48%; }
td.metric .cell + .cell { margin-top: 5px; }
.cell { display: flex; align-items: center; gap: 10px; }
.bar {
	height: 9px;
	border-radius: 999px;
	flex: 1;
	overflow: hidden;
	min-width: 28px;
}
.bar.on { background: var(--accent-soft); }
.bar.on > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: calc(var(--v) / var(--m) * 100%); }
.bar.off { background: var(--warn-soft); }
.bar.off > i { display: block; height: 100%; background: var(--warn); border-radius: 999px; width: calc(var(--v) / var(--m) * 100%); }
.val { font-family: var(--mono); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 9px; justify-content: flex-end; white-space: nowrap; flex: 0 0 6ch; min-width: 0; }
.val .ts { flex: 0 0 5ch; min-width: 0; text-align: right; font-weight: 600; }
.best .val .ts { color: var(--good); }
.muted-cell { color: var(--faint); font-size: 12px; }

/* ---- phone layout -----------------------------------------------------------
   On narrow screens the 3-column table (Quant | PP512 | TG128) overflows, so
   each <tr> becomes a stacked block: the quant acts as a heading and the two
   metric cells drop into full-width rows labelled via their data-m attribute.
*/
@media (max-width: 560px) {
	.wrap { padding: 0 14px; }
	.topbar h1 { font-size: 18px; padding: 18px 0 2px; }
	.subtitle { font-size: 12px; margin-bottom: 14px; word-break: break-word; }
	.controls { margin: 18px 0 8px; gap: 12px; }
	select { min-width: 0; width: 100%; }

	.card-head { padding: 14px 16px; gap: 10px; }

	/* each table → block, each row → its own stacked sub-card */
	table { display: block; }
	thead { display: none; }
	tbody, tr { display: block; }
	tbody tr + tr td,
	tbody tr + tr th { border-top: none; }
	tbody tr + tr { margin-top: 10px; }
	tbody th, tbody td { display: block; width: 100%; padding: 0; border: 0; }

	/* quant heading: compact bold title, not a stretched grey bar */
	.quant {
		width: auto;
		display: block;
		padding: 11px 16px 9px;
		margin: 0;
		background: transparent;
		border-bottom: 1px solid var(--border);
		border-radius: 0;
		font-size: 14px;
	}
	tbody tr { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

	/* a metric block: label on top, full-width stacked bars below */
	/* width:auto beats the desktop `.metric {width:48%}` (class-only specificity)
	   so the cell spans the full row and bars can stretch as far as possible. */
	td.metric { width: auto; padding: 12px 12px 13px; }
	td.metric + td.metric { border-top: 1px solid var(--border); }
	td.metric::before {
		content: attr(data-m) " · tok/s";
		display: block;
		font-size: 11px;
		font-weight: 600;
		color: var(--muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-bottom: 7px;
	}

	/* let the bar fill the width: shrink the value column on phones */
	.cell { gap: 8px; }
	.cell .bar { flex: 1 1 auto; min-width: 20px; height: 12px; }
	.val { gap: 6px; flex-basis: 8ch; }
	.val .ts { flex-basis: 7ch; font-size: 12px; }

	.evo-controls { padding: 12px 14px; gap: 12px 16px; }
	.evo-controls .field { width: 100%; }
	.evo-controls select { width: 100%; min-width: 0; }
}

.foot {
	color: var(--faint);
	font-size: 12px;
	padding: 18px 20px 40px;
}
.foot a { color: var(--muted); }

.empty { color: var(--muted); padding: 60px 0; text-align: center; font-size: 14px; }