:root {
	--bg: #f6f5f1;
	--surface: #ffffff;
	--surface-muted: #efede6;
	--text: #1f1e1b;
	--text-secondary: #5f5e5a;
	--text-muted: #8a8983;
	--border: rgba(31, 30, 27, 0.12);
	--accent: #185fa5;
	--good: #3b6d11;
	--bad: #a32d2d;
	--series-1: #378add;
	--series-2: #1d9e75;
	--series-3: #7f77dd;
	--series-4: #d85a30;
	--series-5: #ef9f27;
	--series-6: #d4537e;
	--series-7: #888780;
	--radius: 10px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #161614;
		--surface: #201f1d;
		--surface-muted: #2a2927;
		--text: #eceae4;
		--text-secondary: #b4b2a9;
		--text-muted: #888780;
		--border: rgba(236, 234, 228, 0.12);
		--accent: #85b7eb;
		--good: #97c459;
		--bad: #f09595;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #161614;
	--surface: #201f1d;
	--surface-muted: #2a2927;
	--text: #eceae4;
	--text-secondary: #b4b2a9;
	--text-muted: #888780;
	--border: rgba(236, 234, 228, 0.12);
	--accent: #85b7eb;
	--good: #97c459;
	--bad: #f09595;
	color-scheme: dark;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }

header.top {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 20px 0 8px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--series-1); }
.brand small { color: var(--text-muted); font-weight: 400; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.segmented button {
	border: 0; background: transparent; color: var(--text-secondary);
	padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--border); }
.segmented button[aria-pressed="true"] { background: var(--surface-muted); color: var(--text); font-weight: 600; }

.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 20px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 16px; margin: 0 0 2px; font-weight: 600; }
.lead { color: var(--text-secondary); margin: 0; }
.meta { color: var(--text-muted); font-size: 13px; }

.grid { display: grid; gap: 12px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 12px; }
.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 12px; }

.kpi { background: var(--surface-muted); border-radius: var(--radius); padding: 14px 16px; }
.kpi .label { color: var(--text-secondary); font-size: 13px; }
.kpi .value { font-size: 28px; font-weight: 650; line-height: 1.25; }
.kpi .delta { font-size: 12px; color: var(--text-muted); }
.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--bad); }

.card {
	background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
	padding: 16px 18px; margin-bottom: 12px; min-width: 0;
}
.card .sub { color: var(--text-muted); font-size: 12.5px; margin: 0 0 12px; }
.chart { position: relative; height: 220px; }
.chart.small { height: 190px; }

.bars { display: grid; gap: 8px; font-size: 13.5px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 34%) 52px; align-items: center; gap: 10px; }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.bar-row .track { height: 8px; background: var(--surface-muted); border-radius: 4px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--series-1); border-radius: 4px; }
.bar-row .pct { text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .name small { color: var(--text-muted); }

.more { margin-top: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
	border-radius: var(--radius); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.more:hover { background: var(--surface-muted); }

.projects { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.project-card { display: block; color: var(--text); }
.project-card:hover { text-decoration: none; border-color: var(--accent); }
.project-card .numbers { display: flex; gap: 20px; margin: 10px 0 6px; }
.project-card .numbers b { display: block; font-size: 24px; line-height: 1.2; }
.project-card .numbers span { color: var(--text-muted); font-size: 12.5px; }
.spark { height: 48px; position: relative; }

.empty { color: var(--text-muted); padding: 24px 0; text-align: center; }

.fields { display: grid; gap: 0; }
.field { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.field:first-child { border-top: 0; }
.field .key code { color: var(--text); }
.field .key small { display: block; color: var(--text-muted); font-size: 12px; }
.field p { margin: 0; color: var(--text-secondary); }
.never { background: var(--surface-muted); border-radius: var(--radius); padding: 12px 16px; color: var(--text-secondary); }
.never ul { margin: 6px 0 0; padding-left: 20px; }

footer { color: var(--text-muted); font-size: 13px; margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 560px) {
	h1 { font-size: 22px; }
	.field { grid-template-columns: 1fr; gap: 4px; }
	.bar-row { grid-template-columns: minmax(0, 1fr) 70px 46px; }
}