Merge branch 'main' into lm/restrict-content-type

1 files changed, 700 insertions, 124 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index cc53c0519..a968aecab 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -2,66 +2,202 @@
 
 /* theme -------------------------------------------------------------------- */
 
+/* system preference (default) */
 @media (prefers-color-scheme: light) {
 	:root {
-		--theme_g0:	#000;
-		--theme_g4:	#fff;
-		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 45%);
-		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 80%);
-		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 96%);
-
-		--theme_p0:	#069;
-		--theme_p4:	hsl(210deg 40% 94%);
+		--theme_g0:	#1f2328;
+		--theme_g1:	#656d76;
+		--theme_g2:	#d0d7de;
+		--theme_g3:	#f6f8fa;
+		--theme_g4:	#ffffff;
+
+		--theme_p0:	#0969da;
+		--theme_p4:	#ddf4ff;
 		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
 		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
 		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
 
 		--theme_ln:	var(--theme_p0);
-		--theme_er:	#fcc;
+		--theme_er:	#ffebe9;
+
+		--theme_ok:		#1a7f37;
+		--theme_warn:	#9a6700;
+		--theme_fail:	#cf222e;
+
+		--theme_bright:			#1f2328;
+		--theme_faint:			#6e7781;
+		--theme_border_subtle:	#d8dee4;
 	}
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
-		--theme_g0:	#ddd;
-		--theme_g4:	#222;
-		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 35%);
-		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 65%);
-		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 88%);
-
-		--theme_p0:	#479;
-		--theme_p4:	#333;
+		--theme_g0:	#c9d1d9;
+		--theme_g1:	#8b949e;
+		--theme_g2:	#30363d;
+		--theme_g3:	#161b22;
+		--theme_g4:	#0d1117;
+
+		--theme_p0:	#58a6ff;
+		--theme_p4:	#1c2128;
 		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
 		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
 		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
 
-		--theme_ln:	#feb;
-		--theme_er:	#622;
+		--theme_ln:	#58a6ff;
+		--theme_er:	#1c1c1c;
+
+		--theme_ok:		#3fb950;
+		--theme_warn:	#d29922;
+		--theme_fail:	#f85149;
+
+		--theme_bright:			#f0f6fc;
+		--theme_faint:			#6e7681;
+		--theme_border_subtle:	#21262d;
 	}
 }
 
+/* manual overrides (higher specificity than media queries) */
+:root[data-theme="light"] {
+	--theme_g0:	#1f2328;
+	--theme_g1:	#656d76;
+	--theme_g2:	#d0d7de;
+	--theme_g3:	#f6f8fa;
+	--theme_g4:	#ffffff;
+
+	--theme_p0:	#0969da;
+	--theme_p4:	#ddf4ff;
+	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+	--theme_ln:	var(--theme_p0);
+	--theme_er:	#ffebe9;
+
+	--theme_ok:		#1a7f37;
+	--theme_warn:	#9a6700;
+	--theme_fail:	#cf222e;
+
+	--theme_bright:			#1f2328;
+	--theme_faint:			#6e7781;
+	--theme_border_subtle:	#d8dee4;
+}
+
+:root[data-theme="dark"] {
+	--theme_g0:	#c9d1d9;
+	--theme_g1:	#8b949e;
+	--theme_g2:	#30363d;
+	--theme_g3:	#161b22;
+	--theme_g4:	#0d1117;
+
+	--theme_p0:	#58a6ff;
+	--theme_p4:	#1c2128;
+	--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+	--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+	--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+	--theme_ln:	#58a6ff;
+	--theme_er:	#1c1c1c;
+
+	--theme_ok:		#3fb950;
+	--theme_warn:	#d29922;
+	--theme_fail:	#f85149;
+
+	--theme_bright:			#f0f6fc;
+	--theme_faint:			#6e7681;
+	--theme_border_subtle:	#21262d;
+}
+
+/* theme toggle ------------------------------------------------------------- */
+
+#zen_ws_toggle {
+	position:			fixed;
+	top:				16px;
+	right:				60px;
+	z-index:			10;
+	width:				36px;
+	height:				36px;
+	border-radius:		6px;
+	border:				1px solid var(--theme_g2);
+	background:			var(--theme_g3);
+	color:				var(--theme_g1);
+	cursor:				pointer;
+	display:			flex;
+	align-items:		center;
+	justify-content:	center;
+	font-size:			18px;
+	line-height:		1;
+	transition:			color 0.15s, background 0.15s, border-color 0.15s;
+	user-select:		none;
+}
+
+#zen_ws_toggle:hover {
+	color:				var(--theme_g0);
+	background:			var(--theme_p4);
+	border-color:		var(--theme_g1);
+}
+
+#zen_theme_toggle {
+	position:			fixed;
+	top:				16px;
+	right:				16px;
+	z-index:			10;
+	width:				36px;
+	height:				36px;
+	border-radius:		6px;
+	border:				1px solid var(--theme_g2);
+	background:			var(--theme_g3);
+	color:				var(--theme_g1);
+	cursor:				pointer;
+	display:			flex;
+	align-items:		center;
+	justify-content:	center;
+	font-size:			18px;
+	line-height:		1;
+	transition:			color 0.15s, background 0.15s, border-color 0.15s;
+	user-select:		none;
+}
+
+#zen_theme_toggle:hover {
+	color:				var(--theme_g0);
+	background:			var(--theme_p4);
+	border-color:		var(--theme_g1);
+}
+
 /* page --------------------------------------------------------------------- */
 
-body, input {
-	font-family:	consolas, monospace;
-	font-size:		11pt;
+body, input, button {
+	font-family:	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+	font-size:		14px;
 }
 
 body {
 	overflow-y:			scroll;
 	margin:				0;
+	padding:			20px;
 	background-color:	var(--theme_g4);
 	color:				var(--theme_g0);
 }
 
-pre {
-	margin:				0;
+pre, code {
+	font-family:	'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+	font-size:		13px;
+	margin:			0;
 }
 
 input {
 	color:				var(--theme_g0);
 	background-color:	var(--theme_g3);
 	border:				1px solid var(--theme_g2);
+	border-radius:		4px;
+	padding:			4px 8px;
+}
+
+button {
+	color:				var(--theme_g0);
+	background:			transparent;
+	border:				none;
+	cursor:				pointer;
 }
 
 * {
@@ -69,17 +205,44 @@ input {
 }
 
 #container {
-	max-width:				130em;
-	min-width:				80em;
+	max-width:				1400px;
 	margin:					auto;
 
 	> div {
-		margin:				0.0em 2.2em 0.0em 2.2em;
 		padding-top:		1.0em;
 		padding-bottom:		1.5em;
 	}
 }
 
+/* service nav -------------------------------------------------------------- */
+
+#service_nav {
+	display:			flex;
+	align-items:		center;
+	gap:				4px;
+	margin-bottom:		16px;
+	padding:			4px;
+	background-color:	var(--theme_g3);
+	border:				1px solid var(--theme_g2);
+	border-radius:		6px;
+
+	a {
+		padding:			6px 14px;
+		border-radius:		4px;
+		font-size:			13px;
+		font-weight:		500;
+		color:				var(--theme_g1);
+		text-decoration:	none;
+		transition:			color 0.15s, background 0.15s;
+	}
+
+	a:hover {
+		background-color:	var(--theme_p4);
+		color:				var(--theme_g0);
+		text-decoration:	none;
+	}
+}
+
 /* links -------------------------------------------------------------------- */
 
 a {
@@ -103,28 +266,37 @@ a {
 	}
 
 	h1 {
-		font-size:			1.5em;
+		font-size:			20px;
+		font-weight:		600;
 		width:				100%;
+		color:				var(--theme_bright);
 		border-bottom:		1px solid var(--theme_g2);
+		padding-bottom:		0.4em;
+		margin-bottom:		16px;
 	}
 
 	h2 {
-		font-size:			1.25em;
-		margin-bottom:		0.5em;
+		font-size:			16px;
+		font-weight:		600;
+		margin-bottom:		12px;
 	}
 
 	h3 {
-		font-size:			1.1em;
+		font-size:			14px;
+		font-weight:		600;
 		margin:				0em;
-		padding:			0.4em;
-		background-color:	var(--theme_p4);
-		border-left:		5px solid var(--theme_p2);
-		font-weight:		normal;
+		padding:			8px 12px;
+		background-color:	var(--theme_g3);
+		border:				1px solid var(--theme_g2);
+		border-radius:		6px 6px 0 0;
+		color:				var(--theme_g1);
+		text-transform:		uppercase;
+		letter-spacing:		0.5px;
 	}
 
-	margin-bottom:	3em;
+	margin-bottom:	2em;
 	> *:not(h1) {
-		margin-left:	2em;
+		margin-left:	0;
 	}
 }
 
@@ -134,23 +306,36 @@ a {
 .zen_table {
 	display:				grid;
 	border:					1px solid var(--theme_g2);
-	border-left-style:		none;
+	border-radius:			6px;
+	overflow:				hidden;
 	margin-bottom:			1.2em;
+	font-size:				13px;
 
 	> div {
 		display: contents;
 	}
 
-	> div:nth-of-type(odd) {
+	> div:nth-of-type(odd) > div {
+		background-color:	var(--theme_g4);
+	}
+
+	> div:nth-of-type(even) > div {
 		background-color:	var(--theme_g3);
 	}
 
 	> div:first-of-type {
-		font-weight:		bold;
-		background-color:	var(--theme_p3);
+		font-weight:		600;
+		> div {
+			background-color:	var(--theme_g3);
+			color:				var(--theme_g1);
+			text-transform:		uppercase;
+			letter-spacing:		0.5px;
+			font-size:			11px;
+			border-bottom:		1px solid var(--theme_g2);
+		}
 	}
 
-	> div:hover {
+	> div:not(:first-of-type):hover > div {
 		background-color:	var(--theme_p4);
 	}
 
@@ -160,16 +345,37 @@ a {
 	}
 
 	> div > div {
-		padding:			0.3em;
-		padding-left:		0.75em;
-		padding-right:		0.75em;
+		padding:			8px 12px;
 		align-content:		center;
-		border-left:		1px solid var(--theme_g2);
+		border-left:		1px solid var(--theme_border_subtle);
 		overflow:			auto;
 		overflow-wrap:		break-word;
-		background-color:	inherit;
 		white-space: 		pre-wrap;
 	}
+
+	> div > div:first-child {
+		border-left:		none;
+	}
+}
+
+/* expandable cell ---------------------------------------------------------- */
+
+.zen_expand_icon {
+	cursor:                 pointer;
+	margin-right:           0.5em;
+	color:                  var(--theme_g1);
+	font-weight:            bold;
+	user-select:            none;
+}
+
+.zen_expand_icon:hover {
+	color:                  var(--theme_ln);
+}
+
+.zen_data_text {
+	user-select:            text;
+	font-family:			'SF Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
+	font-size:				13px;
 }
 
 /* toolbar ------------------------------------------------------------------ */
@@ -178,6 +384,7 @@ a {
 	display:			flex;
 	margin-top:			0.5em;
 	margin-bottom:		0.6em;
+	font-size:			13px;
 
 	> div {
 		display:		flex;
@@ -225,15 +432,16 @@ a {
 		z-index:				-1;
 		top:					0;
 		left:					0;
-		width:						100%;
+		width:					100%;
 		height:					100%;
 		background:				var(--theme_g0);
 		opacity:				0.4;
 	}
 
 	> div {
-		border-radius:			0.5em;
-		background-color:		var(--theme_g4);
+		border-radius:			6px;
+		background-color:		var(--theme_g3);
+		border:					1px solid var(--theme_g2);
 		opacity:				1.0;
 		width:					35em;
 		padding:				0em 2em 2em 2em;
@@ -244,10 +452,11 @@ a {
 	}
 
 	.zen_modal_title {
-		font-size:				1.2em;
+		font-size:				16px;
+		font-weight:			600;
 		border-bottom:			1px solid var(--theme_g2);
 		padding:				1.2em 0em 0.5em 0em;
-		color:					var(--theme_g1);
+		color:					var(--theme_bright);
 	}
 
 	.zen_modal_buttons {
@@ -257,16 +466,19 @@ a {
 
 	> div {
 			margin:				0em 1em 0em 1em;
-			padding:			1em;
+			padding:			10px 16px;
 			align-content:		center;
-			border-radius:		0.3em;
-			background-color:	var(--theme_p3);
+			border-radius:		6px;
+			background-color:	var(--theme_p4);
+			border:				1px solid var(--theme_g2);
 			width:				6em;
 			cursor:				pointer;
+			font-weight:		500;
+			transition:			background 0.15s;
 		}
 
 		> div:hover {
-			background-color:	var(--theme_p4);
+			background-color:	var(--theme_p3);
 		}
 	}
 
@@ -284,15 +496,18 @@ a {
 	top:					0;
 	left:					0;
 	width:					100%;
-	height:					0.5em;
+	height:					4px;
+	border-radius:			2px;
+	overflow:				hidden;
 
 	> div:first-of-type {
 		/* label */
 		padding:			0.3em;
-		padding-top:		0.8em;
-		background-color:	var(--theme_p4);
+		padding-top:		8px;
+		background-color:	var(--theme_g3);
 		width:				max-content;
-		font-size:			0.8em;
+		font-size:			12px;
+		color:				var(--theme_g1);
 	}
 
 	> div:last-of-type {
@@ -302,7 +517,8 @@ a {
 		left:				0;
 		width:				0%;
 		height:				100%;
-		background-color:	var(--theme_p1);
+		background-color:	var(--theme_p0);
+		transition:			width 0.3s ease;
 	}
 
 	> div:nth-of-type(2) {
@@ -312,7 +528,7 @@ a {
 		left:				0;
 		width:				100%;
 		height:				100%;
-		background-color:	var(--theme_p3);
+		background-color:	var(--theme_g3);
 	}
 }
 
@@ -321,53 +537,25 @@ a {
 #crumbs {
 	display:			flex;
 	position:			relative;
-	top:				-1em;
+	top:				-0.5em;
+	font-size:			13px;
+	color:				var(--theme_g1);
 
 	> div {
 		padding-right:	0.5em;
 	}
 
 	> div:nth-child(odd)::after {
-		content:		":";
-		font-weight:	bolder;
-		color:			var(--theme_p2);
+		content:		"/";
+		color:			var(--theme_g2);
+		padding-left:	0.5em;
 	}
 }
 
-/* branding ----------------------------------------------------------------- */
-
-#branding {
-	font-size:			10pt;
-	font-weight:		bolder;
-	margin-bottom:		2.6em;
-	position:			relative;
+/* banner ------------------------------------------------------------------- */
 
-	#logo {
-		width:			min-content;
-		margin:			auto;
-		user-select:	none;
-		position:		relative;
-
-		#go_home {
-			width:		100%;
-			height:		100%;
-			position:	absolute;
-			top:		0;
-			left:		0;
-		}
-	}
-
-	#logo:hover {
-		filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
-	}
-
-	#ue_logo {
-		position:		absolute;
-		top:			1em;
-		right:			0;
-		width:			5em;
-		margin:			auto;
-	}
+zen-banner {
+	margin-bottom:		24px;
 }
 
 /* error -------------------------------------------------------------------- */
@@ -378,26 +566,23 @@ a {
 	z-index:				1;
 	color:					var(--theme_g0);
 	background-color:		var(--theme_er);
-	padding:				1.0em 2em 2em 2em;
+	padding:				12px 20px 16px 20px;
 	width:					100%;
-	border-top:				1px solid var(--theme_g0);
+	border-top:				1px solid var(--theme_g2);
 	display:				flex;
+	gap:					16px;
+	align-items:			center;
+	font-size:				13px;
 
 	> div:nth-child(1) {
-		font-size:			2.5em;
-		font-weight:		bolder;
-		font-family:		serif;
-		transform:			rotate(-13deg);
-		color:				var(--theme_p0);
-	}
-
-	> div:nth-child(2) {
-		margin-left:		2em;
+		font-size:			24px;
+		font-weight:		bold;
+		color:				var(--theme_fail);
 	}
 
 	> div:nth-child(2) > pre:nth-child(2) {
-		margin-top:			0.5em;
-		font-size:			0.8em;
+		margin-top:			4px;
+		font-size:			12px;
 		color:				var(--theme_g1);
 	}
 }
@@ -409,18 +594,144 @@ a {
 	min-width:		15%;
 }
 
+/* sections ----------------------------------------------------------------- */
+
+.zen_sector {
+	position:			relative;
+}
+
+.dropall {
+	position:			absolute;
+	top:				16px;
+	right:				0;
+	font-size:			12px;
+	margin:				0;
+}
+
+/* stats tiles -------------------------------------------------------------- */
+
+.stats-tiles {
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.stats-tile {
+	cursor:				pointer;
+	transition:			border-color 0.15s, background 0.15s;
+}
+
+.stats-tile:hover {
+	border-color:		var(--theme_p0);
+	background:			var(--theme_p4);
+}
+
+.stats-tile-detailed {
+	position:			relative;
+}
+
+.stats-tile-detailed::after {
+	content:			"details \203A";
+	position:			absolute;
+	bottom:				12px;
+	right:				20px;
+	font-size:			11px;
+	color:				var(--theme_g1);
+	opacity:			0.6;
+	transition:			opacity 0.15s;
+}
+
+.stats-tile-detailed:hover::after {
+	opacity:			1;
+	color:				var(--theme_p0);
+}
+
+.stats-tile-selected {
+	border-color:		var(--theme_p0);
+	background:			var(--theme_p4);
+	box-shadow:			0 0 0 1px var(--theme_p0);
+}
+
+.stats-tile-selected::after {
+	content:			"details \2039";
+	opacity:			1;
+	color:				var(--theme_p0);
+}
+
+.tile-metrics {
+	display:			flex;
+	flex-direction:		column;
+	gap:				12px;
+}
+
+.tile-columns {
+	display:			flex;
+	gap:				24px;
+}
+
+.tile-columns > .tile-metrics {
+	flex:				1;
+	min-width:			0;
+}
+
+.tile-metric .metric-value {
+	font-size:			16px;
+}
+
+.tile-metric-hero .metric-value {
+	font-size:			28px;
+}
+
 /* start -------------------------------------------------------------------- */
 
 #start {
-	.dropall {
-		text-align:	right;
-		font-size:	0.85em;
-		margin:		-0.5em 0 0.5em 0;
-	}
 	#version {
-		color:		var(--theme_g1);
+		color:		var(--theme_faint);
 		text-align: center;
-		font-size:	0.85em;
+		font-size:	12px;
+		margin-top:	24px;
+	}
+}
+
+/* info --------------------------------------------------------------------- */
+
+#info {
+	.info-tiles {
+		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	}
+
+	.info-tile {
+		overflow:			hidden;
+	}
+
+	.info-props {
+		display:			flex;
+		flex-direction:		column;
+		gap:				1px;
+		font-size:			13px;
+	}
+
+	.info-prop {
+		display:			flex;
+		gap:				12px;
+		padding:			4px 0;
+		border-bottom:		1px solid var(--theme_border_subtle);
+	}
+
+	.info-prop:last-child {
+		border-bottom:		none;
+	}
+
+	.info-prop-label {
+		color:				var(--theme_g1);
+		min-width:			140px;
+		flex-shrink:		0;
+		text-transform:		capitalize;
+	}
+
+	.info-prop-value {
+		color:				var(--theme_bright);
+		word-break:			break-all;
+		margin-left:		auto;
+		text-align:			right;
 	}
 }
 
@@ -437,6 +748,8 @@ a {
 /* tree --------------------------------------------------------------------- */
 
 #tree {
+	font-size:					13px;
+
 	#tree_root > ul {
 		margin-left:			0em;
 	}
@@ -448,29 +761,33 @@ a {
 	li > div {
 		display:				flex;
 		border-bottom:			1px solid transparent;
-		padding-left:			0.3em;
-		padding-right:			0.3em;
+		padding:				4px 6px;
+		border-radius:			4px;
 	}
 	li > div > div[active] {
 		text-transform:			uppercase;
+		color:					var(--theme_p0);
+		font-weight:			600;
 	}
 	li > div > div:nth-last-child(3) {
 		margin-left:			auto;
 	}
 	li > div > div:nth-last-child(-n + 3) {
-		font-size:				0.8em;
+		font-size:				12px;
 		width:					10em;
 		text-align:				right;
+		color:					var(--theme_g1);
+		font-family:			'SF Mono', 'Cascadia Mono', Consolas, monospace;
 	}
 	li > div > div:nth-last-child(1) {
 		width:					6em;
 	}
 	li > div:hover {
 		background-color:		var(--theme_p4);
-		border-bottom:			1px solid var(--theme_g2);
+		border-bottom:			1px solid var(--theme_border_subtle);
 	}
 	li a {
-		font-weight:			bolder;
+		font-weight:			600;
 	}
 	li::marker {
 		content:				"+";
@@ -503,3 +820,262 @@ html:has(#map) {
 		}
 	}
 }
+
+/* ========================================================================== */
+/* Shared classes for compute / dashboard pages                               */
+/* ========================================================================== */
+
+/* cards -------------------------------------------------------------------- */
+
+.card {
+	background:			var(--theme_g3);
+	border:				1px solid var(--theme_g2);
+	border-radius:		6px;
+	padding:			20px;
+}
+
+.card-title {
+	font-size:			14px;
+	font-weight:		600;
+	color:				var(--theme_g1);
+	margin-bottom:		12px;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+}
+
+/* grid --------------------------------------------------------------------- */
+
+.grid {
+	display:			grid;
+	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+	gap:				20px;
+	margin-bottom:		24px;
+}
+
+/* metrics ------------------------------------------------------------------ */
+
+.metric-value {
+	font-size:			36px;
+	font-weight:		600;
+	color:				var(--theme_bright);
+	line-height:		1;
+}
+
+.metric-label {
+	font-size:			12px;
+	color:				var(--theme_g1);
+	margin-top:			4px;
+}
+
+/* section titles ----------------------------------------------------------- */
+
+.section-title {
+	font-size:			20px;
+	font-weight:		600;
+	margin-bottom:		16px;
+	color:				var(--theme_bright);
+}
+
+/* html tables (compute pages) ---------------------------------------------- */
+
+table {
+	width:				100%;
+	border-collapse:	collapse;
+	font-size:			13px;
+}
+
+th {
+	text-align:			left;
+	color:				var(--theme_g1);
+	padding:			8px 12px;
+	border-bottom:		1px solid var(--theme_g2);
+	font-weight:		600;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+	font-size:			11px;
+}
+
+td {
+	padding:			8px 12px;
+	border-bottom:		1px solid var(--theme_border_subtle);
+	color:				var(--theme_g0);
+}
+
+tr:last-child td {
+	border-bottom:		none;
+}
+
+.total-row td {
+	border-top:			2px solid var(--theme_g2);
+	font-weight:		600;
+	color:				var(--theme_bright);
+}
+
+/* status badges ------------------------------------------------------------ */
+
+.status-badge {
+	display:			inline-block;
+	padding:			2px 8px;
+	border-radius:		4px;
+	font-size:			11px;
+	font-weight:		600;
+}
+
+.status-badge.active,
+.status-badge.success {
+	background:			color-mix(in srgb, var(--theme_ok) 15%, transparent);
+	color:				var(--theme_ok);
+}
+
+.status-badge.inactive {
+	background:			color-mix(in srgb, var(--theme_g1) 15%, transparent);
+	color:				var(--theme_g1);
+}
+
+.status-badge.failure {
+	background:			color-mix(in srgb, var(--theme_fail) 15%, transparent);
+	color:				var(--theme_fail);
+}
+
+/* health dots -------------------------------------------------------------- */
+
+.health-dot {
+	display:			inline-block;
+	width:				10px;
+	height:				10px;
+	border-radius:		50%;
+	background:			var(--theme_g1);
+}
+
+.health-green {
+	background:			var(--theme_ok);
+}
+
+.health-yellow {
+	background:			var(--theme_warn);
+}
+
+.health-red {
+	background:			var(--theme_fail);
+}
+
+/* inline progress bar ------------------------------------------------------ */
+
+.progress-bar {
+	width:				100%;
+	height:				8px;
+	background:			var(--theme_border_subtle);
+	border-radius:		4px;
+	overflow:			hidden;
+	margin-top:			8px;
+}
+
+.progress-fill {
+	height:				100%;
+	background:			var(--theme_p0);
+	transition:			width 0.3s ease;
+}
+
+/* stats row (label + value pair) ------------------------------------------- */
+
+.stats-row {
+	display:			flex;
+	justify-content:	space-between;
+	margin-bottom:		12px;
+	padding:			8px 0;
+	border-bottom:		1px solid var(--theme_border_subtle);
+}
+
+.stats-row:last-child {
+	border-bottom:		none;
+	margin-bottom:		0;
+}
+
+.stats-label {
+	color:				var(--theme_g1);
+	font-size:			13px;
+}
+
+.stats-value {
+	color:				var(--theme_bright);
+	font-weight:		600;
+	font-size:			13px;
+}
+
+/* detail tag (inline badge) ------------------------------------------------ */
+
+.detail-tag {
+	display:			inline-block;
+	padding:			2px 8px;
+	border-radius:		4px;
+	background:			var(--theme_border_subtle);
+	color:				var(--theme_g0);
+	font-size:			11px;
+	margin:				2px 4px 2px 0;
+}
+
+/* timestamp ---------------------------------------------------------------- */
+
+.timestamp {
+	font-size:			12px;
+	color:				var(--theme_faint);
+}
+
+/* inline error ------------------------------------------------------------- */
+
+.error {
+	color:				var(--theme_fail);
+	padding:			12px;
+	background:			var(--theme_er);
+	border-radius:		6px;
+	margin:				20px 0;
+	font-size:			13px;
+}
+
+/* empty state -------------------------------------------------------------- */
+
+.empty-state {
+	color:				var(--theme_faint);
+	font-size:			13px;
+	padding:			20px 0;
+	text-align:			center;
+}
+
+/* header layout ------------------------------------------------------------ */
+
+.header {
+	display:			flex;
+	justify-content:	space-between;
+	align-items:		center;
+	margin-bottom:		24px;
+}
+
+/* history tabs ------------------------------------------------------------- */
+
+.history-tabs {
+	display:			flex;
+	gap:				4px;
+	background:			var(--theme_g4);
+	border-radius:		6px;
+	padding:			2px;
+}
+
+.history-tab {
+	background:			transparent;
+	color:				var(--theme_g1);
+	font-size:			12px;
+	font-weight:		600;
+	padding:			4px 12px;
+	border-radius:		4px;
+	text-transform:		uppercase;
+	letter-spacing:		0.5px;
+}
+
+.history-tab:hover {
+	color:				var(--theme_g0);
+}
+
+.history-tab.active {
+	background:			var(--theme_g2);
+	color:				var(--theme_bright);
+}