@tea-agent/loop-agent 0.17.1 → 0.18.0

package/dist/worker/observe/static/styles.css

@@ -12,6 +12,7 @@
 	--hairline-strong: #cfcdc4;
 	--orange: #f54e00;
 	--orange-active: #d04200;
+	--orange-soft: color-mix(in srgb, var(--orange) 12%, white);
 	--blue: #3f6ea4;
 	--green: #1f8a65;
 	--amber: #a66a00;
@@ -29,11 +30,15 @@
 	--space-8: 32px;
 	--space-10: 40px;
 	--space-12: 48px;
-	--radius-sm: 4px;
-	--radius-md: 6px;
-	--radius-lg: 8px;
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-pill: 999px;
 	--transition-fast: 160ms ease;
-	--transition-base: 240ms ease;
+	--transition-base: 220ms ease;
+	--shadow-panel: 0 1px 2px rgb(38 37 30 / 4%), 0 8px 24px rgb(38 37 30 / 3%);
+	--shadow-soft: 0 10px 30px rgb(38 37 30 / 6%);
+	color-scheme: light;
 }
 
 * {
@@ -41,17 +46,30 @@
 }
 
 html {
-	background: var(--canvas);
+	background:
+		radial-gradient(1200px 480px at 8% -10%, rgb(241 216 203 / 45%), transparent 55%),
+		radial-gradient(900px 420px at 100% 0%, rgb(216 234 213 / 35%), transparent 50%),
+		var(--canvas);
+	min-height: 100%;
 	scroll-behavior: smooth;
 }
 
 body {
 	min-width: 320px;
 	margin: 0;
-	background: var(--canvas);
+	min-height: 100vh;
+	background: transparent;
 	color: var(--ink);
+	/* Keep system-ui first for shell contract tests; Chinese fonts follow. */
 	font-family:
-		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+		system-ui,
+		-apple-system,
+		"Segoe UI",
+		"PingFang SC",
+		"Hiragino Sans GB",
+		"Noto Sans SC",
+		BlinkMacSystemFont,
+		sans-serif;
 	font-size: 14px;
 	line-height: 1.5;
 }
@@ -111,35 +129,43 @@ td:first-child,
 	top: 0;
 	z-index: 30;
 	display: grid;
-	grid-template-columns: auto auto 1fr;
+	grid-template-columns: auto 1fr auto;
 	grid-template-areas: "brand nav status" "crumb crumb crumb";
-	column-gap: var(--space-6);
+	column-gap: var(--space-5);
 	align-items: center;
-	min-height: 76px;
-	margin-bottom: var(--space-8);
+	min-height: 72px;
+	margin-bottom: var(--space-6);
 	padding: 14px 0 12px;
-	background: color-mix(in srgb, var(--canvas) 94%, transparent);
+	background: color-mix(in srgb, var(--canvas) 82%, transparent);
 	border-bottom: 1px solid var(--hairline);
-	backdrop-filter: blur(10px);
+	backdrop-filter: blur(12px);
 }
 
 .logo {
 	grid-area: brand;
 	display: inline-flex;
 	align-items: center;
-	gap: 9px;
+	gap: 10px;
 	color: var(--ink);
-	font-size: 16px;
+	font-size: 15px;
 	font-weight: 650;
-	letter-spacing: 0;
+	letter-spacing: -0.01em;
 	text-decoration: none;
 }
 
 .logo > i {
-	color: var(--orange);
-	font-size: 20px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--radius-md);
+	background: var(--orange-soft);
+	color: var(--orange-active);
+	font-size: 18px;
 	font-weight: 400;
 }
+
 .logo:hover {
 	color: var(--orange-active);
 }
@@ -147,18 +173,25 @@ td:first-child,
 .top-nav {
 	grid-area: nav;
 	display: inline-flex;
+	flex-wrap: wrap;
 	align-items: center;
 	gap: 4px;
+	justify-self: start;
+	padding: 5px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: color-mix(in srgb, var(--surface) 88%, transparent);
+	box-shadow: var(--shadow-panel);
 }
 
 .nav-link {
 	display: inline-flex;
 	align-items: center;
 	gap: 7px;
-	min-height: 36px;
-	padding: 0 10px;
+	min-height: 34px;
+	padding: 0 14px;
 	border: 1px solid transparent;
-	border-radius: var(--radius-sm);
+	border-radius: var(--radius-pill);
 	color: var(--body);
 	font-size: 13px;
 	font-weight: 600;
@@ -166,24 +199,34 @@ td:first-child,
 	transition:
 		border-color var(--transition-fast),
 		background-color var(--transition-fast),
-		color var(--transition-fast);
+		color var(--transition-fast),
+		box-shadow var(--transition-fast);
 }
 
 .nav-link > i {
-	font-size: 16px;
+	font-size: 15px;
 	font-weight: 400;
 }
+
 .nav-link:hover,
 .nav-link:focus-visible {
-	border-color: var(--hairline-strong);
+	border-color: transparent;
 	background: var(--surface);
 	color: var(--ink);
 	outline: none;
 }
+
 .nav-link-active {
-	border-color: var(--orange);
-	background: var(--surface);
-	color: var(--ink);
+	border-color: transparent;
+	background: var(--ink);
+	color: #fff;
+	box-shadow: none;
+}
+
+.nav-link-active:hover,
+.nav-link-active:focus-visible {
+	background: var(--ink);
+	color: #fff;
 }
 
 .header-meta {
@@ -191,15 +234,21 @@ td:first-child,
 	display: inline-flex;
 	justify-self: end;
 	align-items: center;
-	gap: 7px;
+	gap: 8px;
+	min-height: 34px;
+	padding: 0 12px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
 	color: var(--muted);
 	font-size: 12px;
 	font-variant-numeric: tabular-nums;
+	box-shadow: var(--shadow-panel);
 }
 
 .header-meta > i {
-	color: var(--green);
-	font-size: 16px;
+	color: color-mix(in srgb, var(--green) 70%, white);
+	font-size: 14px;
 }
 
 .breadcrumb {
@@ -247,20 +296,26 @@ td:first-child,
 }
 
 .view-kicker {
+	display: inline-flex;
+	align-items: center;
+	width: fit-content;
 	margin: 0;
-	color: var(--orange);
+	padding: 4px 10px;
+	border-radius: var(--radius-pill);
+	background: var(--orange-soft);
+	color: var(--orange-active);
 	font-size: 11px;
 	font-weight: 700;
-	letter-spacing: 0.08em;
+	letter-spacing: 0.04em;
 }
 
 .view h2 {
 	margin: 0;
 	color: var(--ink);
-	font-size: 28px;
-	font-weight: 500;
-	line-height: 1.16;
-	letter-spacing: 0;
+	font-size: clamp(24px, 3vw, 30px);
+	font-weight: 650;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
 }
 
 .view-heading > p:last-child {
@@ -271,14 +326,15 @@ td:first-child,
 
 .panel {
 	min-width: 0;
-	background: var(--surface);
+	background: color-mix(in srgb, var(--surface) 96%, transparent);
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-lg);
 	padding: var(--space-5);
+	box-shadow: var(--shadow-panel);
 }
 
 .panel-primary {
-	border-color: var(--hairline-strong);
+	border-color: var(--hairline);
 	box-shadow: var(--shadow-panel);
 }
 .panel-features {
@@ -292,6 +348,7 @@ td:first-child,
 .panel-table {
 	overflow: hidden;
 	padding: 0;
+	box-shadow: var(--shadow-panel);
 }
 .panel-output {
 	background: #fbfbf9;
@@ -366,18 +423,20 @@ td:first-child,
 }
 .pool-refresh-btn {
 	appearance: none;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-md);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
 	background: var(--surface);
 	color: var(--ink);
 	font-size: 13px;
 	font-weight: 700;
 	padding: 8px 14px;
 	cursor: pointer;
+	box-shadow: var(--shadow-panel);
 }
 .pool-refresh-btn:hover {
 	border-color: var(--orange);
 	color: var(--orange-active);
+	background: var(--orange-soft);
 }
 .pool-auto-refresh-label {
 	display: inline-flex;
@@ -403,15 +462,16 @@ td:first-child,
 	border-radius: var(--radius-md);
 	background: var(--canvas-soft);
 	border-left: 3px solid var(--hairline-strong);
+	box-shadow: none;
 }
 .pool-ops-card-attention {
-	border-left-color: var(--red);
-	border-color: color-mix(in srgb, var(--red) 35%, var(--hairline));
-	background: #fff8f9;
+	border-left-color: color-mix(in srgb, var(--red) 70%, var(--hairline));
+	border-color: var(--hairline);
+	background: color-mix(in srgb, var(--red) 4%, var(--surface));
 }
 .pool-ops-card-ready {
-	border-left-color: var(--orange);
-	background: #fffaf5;
+	border-left-color: color-mix(in srgb, var(--orange) 70%, var(--hairline));
+	background: color-mix(in srgb, var(--orange) 4%, var(--surface));
 }
 .pool-ops-card-title {
 	margin-bottom: 6px;
@@ -605,8 +665,9 @@ td:first-child,
 	grid-template-columns: repeat(5, minmax(0, 1fr));
 	overflow: visible;
 	border: 1px solid var(--hairline);
-	border-radius: var(--radius-md);
+	border-radius: var(--radius-lg);
 	background: var(--surface);
+	box-shadow: var(--shadow-panel);
 	height: 100%;
 }
 
@@ -683,10 +744,10 @@ td:first-child,
 	color: var(--muted);
 }
 .kpi-card.kpi-risk .kpi-value {
-	color: var(--amber);
+	color: color-mix(in srgb, var(--amber) 80%, var(--ink));
 }
 .kpi-card.kpi-danger .kpi-value {
-	color: var(--red);
+	color: color-mix(in srgb, var(--red) 78%, var(--ink));
 }
 .kpi-value-with-link {
 	display: flex;
@@ -823,16 +884,15 @@ td:first-child,
 	align-items: start;
 	column-gap: var(--space-3);
 	row-gap: 4px;
-	padding: 14px;
-	padding-left: 12px;
-	border: 1px solid color-mix(in srgb, var(--red) 35%, var(--hairline));
-	border-left: 3px solid var(--red);
+	padding: 14px 16px;
+	border: 1px solid var(--hairline);
+	border-left: 3px solid color-mix(in srgb, var(--red) 55%, var(--hairline));
 	border-radius: var(--radius-md);
-	background: #fff8f9;
+	background: color-mix(in srgb, var(--red) 4%, var(--surface));
 }
 .risk-block-label {
 	grid-area: label;
-	color: var(--ink);
+	color: var(--muted);
 	font-size: 11px;
 	font-weight: 700;
 	letter-spacing: 0.04em;
@@ -841,15 +901,18 @@ td:first-child,
 .risk-total {
 	grid-area: total;
 	margin: 0;
-	color: var(--red);
-	font-size: 32px;
-	font-weight: 500;
+	color: var(--ink);
+	font-size: 28px;
+	font-weight: 650;
 	line-height: 1;
 	font-variant-numeric: tabular-nums;
 	align-self: center;
 	text-align: right;
 	min-width: 1.5ch;
 }
+.risk-block:not(:has(.risk-empty)) .risk-total {
+	color: color-mix(in srgb, var(--red) 82%, var(--ink));
+}
 .risk-summary {
 	grid-area: summary;
 	margin: 0;
@@ -871,13 +934,15 @@ td:first-child,
 	align-items: flex-start;
 	gap: var(--space-3);
 	padding: 14px 16px;
-	border: 1px solid color-mix(in srgb, var(--red) 50%, var(--hairline));
+	border: 1px solid var(--hairline);
+	border-left: 3px solid color-mix(in srgb, var(--red) 55%, var(--hairline));
 	border-radius: var(--radius-lg);
-	background: #fff8f9;
+	background: color-mix(in srgb, var(--red) 4%, var(--surface));
+	box-shadow: var(--shadow-panel);
 }
 .projection-fault > i {
-	color: var(--red);
-	font-size: 20px;
+	color: color-mix(in srgb, var(--red) 75%, var(--ink));
+	font-size: 18px;
 	line-height: 1.4;
 }
 .projection-fault-body {
@@ -936,21 +1001,24 @@ td:first-child,
 	gap: 10px;
 }
 .active-dag-card {
-	padding: 14px;
+	padding: 14px 16px;
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-md);
-	background: var(--canvas-soft);
+	background: var(--surface);
 	border-left: 3px solid var(--hairline-strong);
-	padding-left: 12px;
+	box-shadow: var(--shadow-panel);
+	transition:
+		border-color var(--transition-fast),
+		box-shadow var(--transition-fast);
 }
 .active-dag-card-running {
-	border-left-color: var(--orange);
-	background: #fffaf5;
+	border-left-color: color-mix(in srgb, var(--orange) 70%, var(--hairline));
+	background: color-mix(in srgb, var(--orange) 4%, var(--surface));
 }
 .active-dag-card-attention {
-	border-left-color: var(--red);
-	border-color: color-mix(in srgb, var(--red) 35%, var(--hairline));
-	background: #fff8f9;
+	border-left-color: color-mix(in srgb, var(--red) 55%, var(--hairline));
+	border-color: var(--hairline);
+	background: color-mix(in srgb, var(--red) 4%, var(--surface));
 }
 .active-dag-header {
 	display: flex;
@@ -986,14 +1054,20 @@ td:first-child,
 	grid-template-columns: minmax(120px, 0.9fr) minmax(88px, 0.55fr) minmax(0, 1.6fr) auto;
 	align-items: center;
 	gap: var(--space-3);
-	padding: 10px 12px;
+	padding: 12px 14px;
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-md);
 	background: var(--surface);
+	box-shadow: var(--shadow-panel);
 	cursor: pointer;
+	transition:
+		border-color var(--transition-fast),
+		background-color var(--transition-fast),
+		transform var(--transition-fast);
 }
 .feature-decision-row:hover {
-	border-color: var(--hairline-strong);
+	border-color: color-mix(in srgb, var(--orange) 35%, var(--hairline));
+	background: color-mix(in srgb, var(--orange) 3%, var(--surface));
 }
 .feature-decision-id {
 	min-width: 0;
@@ -1014,7 +1088,7 @@ td:first-child,
 	white-space: nowrap;
 }
 .feature-decision-open {
-	color: var(--ink);
+	color: var(--orange-active);
 	font-size: 12px;
 	font-weight: 700;
 	white-space: nowrap;
@@ -1052,7 +1126,7 @@ table {
 }
 th,
 td {
-	padding: 11px 14px;
+	padding: 12px 14px;
 	border-bottom: 1px solid var(--hairline);
 	text-align: left;
 	vertical-align: top;
@@ -1061,10 +1135,11 @@ th {
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	background: var(--surface-muted);
-	color: var(--body);
+	background: color-mix(in srgb, var(--canvas-soft) 88%, var(--surface));
+	color: var(--muted);
 	font-size: 11px;
 	font-weight: 700;
+	letter-spacing: 0.02em;
 }
 td {
 	color: var(--body);
@@ -1076,25 +1151,25 @@ tbody tr {
 	transition: background-color var(--transition-fast);
 }
 tbody tr:hover {
-	background: #fff8f4;
+	background: color-mix(in srgb, var(--orange) 4%, var(--surface));
 }
 tr.clickable {
 	cursor: pointer;
 }
 tr.clickable:focus-within {
-	outline: 2px solid var(--orange);
+	outline: 2px solid color-mix(in srgb, var(--orange) 55%, transparent);
 	outline-offset: -2px;
 }
 
 .badge {
 	display: inline-flex;
 	align-items: center;
-	min-height: 22px;
-	padding: 2px 7px;
-	border: 1px solid currentColor;
-	border-radius: 999px;
-	background: transparent;
-	color: var(--muted);
+	min-height: 24px;
+	padding: 2px 10px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-pill);
+	background: var(--surface-muted);
+	color: var(--body);
 	font-size: 11px;
 	font-weight: 700;
 	line-height: 1.2;
@@ -1106,23 +1181,23 @@ tr.clickable:focus-within {
 .badge-completed,
 .badge-done,
 .liveness-active {
-	color: var(--green);
-	background: #f2faf5;
+	color: color-mix(in srgb, var(--green) 78%, var(--ink));
+	background: color-mix(in srgb, var(--mint) 45%, var(--surface));
 }
 .badge-failed,
 .badge-error,
 .liveness-stale {
-	color: var(--red);
-	background: #fff5f7;
+	color: color-mix(in srgb, var(--red) 78%, var(--ink));
+	background: color-mix(in srgb, var(--red) 8%, var(--surface));
 }
 .badge-partial-failed {
-	color: #9a3a4f;
-	background: #fff7f8;
+	color: color-mix(in srgb, var(--red) 70%, var(--ink));
+	background: color-mix(in srgb, var(--red) 6%, var(--surface));
 }
 .badge-running,
 .badge-started {
 	color: var(--orange-active);
-	background: #fff5ed;
+	background: var(--orange-soft);
 }
 .badge-pending,
 .badge-queued,
@@ -1134,8 +1209,8 @@ tr.clickable:focus-within {
 .badge-skipped,
 .badge-reused,
 .liveness-quiet {
-	color: var(--blue);
-	background: #f2f6fb;
+	color: color-mix(in srgb, var(--blue) 75%, var(--ink));
+	background: color-mix(in srgb, var(--blue) 8%, var(--surface));
 }
 .liveness-timeout-risk {
 	color: var(--amber);
@@ -1159,8 +1234,10 @@ tr.clickable:focus-within {
 	min-width: 0;
 	padding: 0;
 	overflow: hidden;
-	border-color: var(--hairline-strong);
-	box-shadow: 0 20px 48px rgba(38, 37, 30, 0.16);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+	box-shadow: var(--shadow-soft);
 	opacity: 0;
 	pointer-events: none;
 	transform: translateX(calc(100% + 24px));
@@ -1225,9 +1302,9 @@ body.is-resizing-dag-graph {
 	grid-template-columns: minmax(0, 1fr) auto;
 	gap: var(--space-3);
 	align-items: start;
-	padding: var(--space-4) var(--space-4) var(--space-3);
+	padding: var(--space-4) var(--space-5) var(--space-3);
 	border-bottom: 1px solid var(--hairline);
-	background: var(--canvas-soft);
+	background: color-mix(in srgb, var(--canvas-soft) 80%, var(--surface));
 }
 .dag-inspector-title {
 	display: grid;
@@ -1255,8 +1332,8 @@ body.is-resizing-dag-graph {
 	place-items: center;
 	width: 32px;
 	height: 32px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-sm);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
 	background: var(--surface);
 	color: var(--body);
 	cursor: pointer;
@@ -1265,19 +1342,27 @@ body.is-resizing-dag-graph {
 .dag-inspector-close:focus-visible {
 	border-color: var(--orange);
 	color: var(--orange-active);
+	background: var(--orange-soft);
 	outline: none;
 }
 .dag-inspector-tabs {
 	display: flex;
 	grid-column: 1 / -1;
 	gap: 4px;
-	margin-top: 2px;
+	margin-top: 4px;
+	padding: 4px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+	width: fit-content;
+	max-width: 100%;
+	flex-wrap: wrap;
 }
 .dag-inspector-tab {
-	min-height: 32px;
-	padding: 0 10px;
+	min-height: 30px;
+	padding: 0 12px;
 	border: 1px solid transparent;
-	border-radius: var(--radius-sm);
+	border-radius: var(--radius-pill);
 	background: transparent;
 	color: var(--muted);
 	font-size: 12px;
@@ -1290,9 +1375,9 @@ body.is-resizing-dag-graph {
 	outline: none;
 }
 .dag-inspector-tab[aria-selected="true"] {
-	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
-	background: #fff5ed;
-	color: var(--orange-active);
+	border-color: transparent;
+	background: var(--ink);
+	color: #fff;
 }
 .dag-inspector-content {
 	min-height: 0;
@@ -1322,19 +1407,21 @@ body.is-resizing-dag-graph {
 }
 .dag-graph-reset {
 	min-height: 32px;
-	padding: 0 10px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-sm);
+	padding: 0 12px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
 	background: var(--surface);
 	color: var(--ink);
 	font-size: 12px;
 	font-weight: 650;
 	cursor: pointer;
+	box-shadow: var(--shadow-panel);
 }
 .dag-graph-reset:hover,
 .dag-graph-reset:focus-visible {
 	border-color: var(--orange);
 	color: var(--orange-active);
+	background: var(--orange-soft);
 	outline: none;
 }
 .dag-graph-viewport {
@@ -1342,23 +1429,26 @@ body.is-resizing-dag-graph {
 	max-height: 560px;
 	overflow: auto;
 	border: 1px solid var(--hairline);
-	border-radius: var(--radius-md);
-	background: var(--canvas-soft);
+	border-radius: var(--radius-lg);
+	background:
+		radial-gradient(800px 280px at 0% 0%, rgb(241 216 203 / 28%), transparent 55%),
+		var(--canvas-soft);
 	scroll-behavior: auto;
+	box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
 }
 .dag-graph {
 	display: block;
 }
 .dag-edge {
 	fill: none;
-	stroke: var(--hairline-strong);
-	stroke-width: 2;
+	stroke: color-mix(in srgb, var(--hairline-strong) 80%, var(--muted));
+	stroke-width: 1.75;
 	transition:
 		opacity var(--transition-fast),
 		stroke var(--transition-fast);
 }
 #dag-arrow path {
-	fill: var(--hairline-strong);
+	fill: color-mix(in srgb, var(--hairline-strong) 80%, var(--muted));
 }
 .dag-graph-node {
 	cursor: pointer;
@@ -1366,8 +1456,9 @@ body.is-resizing-dag-graph {
 }
 .dag-graph-node rect {
 	fill: var(--surface);
-	stroke: var(--hairline-strong);
+	stroke: var(--hairline);
 	stroke-width: 1.5;
+	filter: drop-shadow(0 1px 2px rgb(38 37 30 / 4%));
 }
 .dag-graph-node:hover rect,
 .dag-graph-node:focus-visible rect {
@@ -1379,17 +1470,18 @@ body.is-resizing-dag-graph {
 }
 .dag-graph-node.selected rect {
 	stroke: var(--orange);
-	stroke-width: 3;
+	stroke-width: 2.5;
+	fill: color-mix(in srgb, var(--orange) 6%, var(--surface));
 }
 .dag-graph-node.status-running rect,
 .dag-graph-node.status-started rect {
 	stroke: var(--orange);
-	fill: #fff7f0;
+	fill: color-mix(in srgb, var(--orange) 8%, var(--surface));
 }
 .dag-graph-node.status-failed rect,
 .dag-graph-node.status-error rect {
-	stroke: var(--red);
-	fill: #fff7f8;
+	stroke: color-mix(in srgb, var(--red) 70%, var(--hairline));
+	fill: color-mix(in srgb, var(--red) 6%, var(--surface));
 }
 .dag-graph-node.status-succeeded:hover rect,
 .dag-graph-node.status-succeeded:focus-visible rect,
@@ -1399,15 +1491,15 @@ body.is-resizing-dag-graph {
 .dag-graph-node.status-completed:focus-visible rect,
 .dag-graph-node.status-done:hover rect,
 .dag-graph-node.status-done:focus-visible rect {
-	stroke: var(--green);
-	fill: #f2faf5;
+	stroke: color-mix(in srgb, var(--green) 70%, var(--hairline));
+	fill: color-mix(in srgb, var(--mint) 40%, var(--surface));
 }
 .dag-graph-node.selected.status-succeeded rect,
 .dag-graph-node.selected.status-finished rect,
 .dag-graph-node.selected.status-completed rect,
 .dag-graph-node.selected.status-done rect {
-	stroke: var(--green);
-	fill: #f2faf5;
+	stroke: color-mix(in srgb, var(--green) 70%, var(--hairline));
+	fill: color-mix(in srgb, var(--mint) 40%, var(--surface));
 }
 .dag-graph-node.status-skipped rect {
 	stroke-dasharray: 5 4;
@@ -1861,16 +1953,16 @@ body.is-resizing-dag-graph {
 .spec-evidence-list li > i { flex-shrink: 0; margin-top: 2px; color: var(--muted); font-size: 13px; }
 .spec-evidence-list code { font-size: 11px; }
 .spec-evidence-time { margin-left: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.spec-evidence-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--hairline)); border-radius: var(--radius-sm); background: #fff8e7; color: var(--body); font-size: 12px; line-height: 1.6; }
+.spec-evidence-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4); padding: 10px 12px; border: 1px solid var(--hairline); border-left: 3px solid color-mix(in srgb, var(--amber) 60%, var(--hairline)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); color: var(--body); font-size: 12px; line-height: 1.6; }
 .spec-evidence-warning > i { flex-shrink: 0; margin-top: 2px; color: var(--amber); }
-.spec-evidence-file-btn { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 4px 0; background: none; border: none; text-align: left; cursor: pointer; color: inherit; font: inherit; line-height: 1.5; overflow-wrap: anywhere; border-radius: var(--radius-sm); }
-.spec-evidence-file-btn:hover, .spec-evidence-file-btn:focus-visible { background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent); outline: none; }
-.spec-evidence-file-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent, #2563eb); }
+.spec-evidence-file-btn { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 6px 8px; background: none; border: none; text-align: left; cursor: pointer; color: inherit; font: inherit; line-height: 1.5; overflow-wrap: anywhere; border-radius: var(--radius-md); }
+.spec-evidence-file-btn:hover, .spec-evidence-file-btn:focus-visible { background: var(--orange-soft); outline: none; }
+.spec-evidence-file-btn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 35%, transparent); }
 .spec-evidence-detail { display: grid; gap: var(--space-3); }
-.spec-evidence-back { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface, #fff); color: var(--ink); font-size: 12px; cursor: pointer; }
-.spec-evidence-back:hover, .spec-evidence-back:focus-visible { background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--surface, #fff)); }
+.spec-evidence-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; }
+.spec-evidence-back:hover, .spec-evidence-back:focus-visible { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-active); outline: none; }
 .spec-evidence-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--body); }
-.spec-evidence-detail-content { min-height: 0; max-width: 100%; margin: 0; padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface, #fff); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
+.spec-evidence-detail-content { min-height: 0; max-width: 100%; margin: 0; padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
 .spec-evidence-detail-error { margin: 0; color: var(--red, #c00); font-size: 12px; }
 .spec-evidence-detail-truncated { margin: 0; color: var(--muted); font-size: 11px; }
 
@@ -1956,22 +2048,26 @@ body.is-resizing-dag-graph {
 	place-items: center;
 	width: 16px;
 	height: 16px;
-	border: 1px solid var(--hairline-strong);
+	border: 1.5px solid var(--hairline-strong);
 	border-radius: 50%;
 	color: var(--muted);
 	font-size: 10px;
+	background: var(--surface);
 }
 .step-marker.succeeded {
-	border-color: var(--green);
-	color: var(--green);
+	border-color: color-mix(in srgb, var(--green) 55%, var(--hairline));
+	color: color-mix(in srgb, var(--green) 75%, var(--ink));
+	background: color-mix(in srgb, var(--mint) 40%, var(--surface));
 }
 .step-marker.running {
 	border-color: var(--orange);
 	color: var(--orange-active);
+	background: var(--orange-soft);
 }
 .step-marker.failed {
-	border-color: var(--red);
-	color: var(--red);
+	border-color: color-mix(in srgb, var(--red) 55%, var(--hairline));
+	color: color-mix(in srgb, var(--red) 75%, var(--ink));
+	background: color-mix(in srgb, var(--red) 8%, var(--surface));
 }
 .step-name {
 	min-width: 0;
@@ -2053,7 +2149,8 @@ body.is-resizing-dag-graph {
 .dag-run-timeline-item:focus-visible {
 	margin-inline: -8px;
 	padding-inline: 8px;
-	background: #fff8f4;
+	background: color-mix(in srgb, var(--orange) 4%, transparent);
+	border-radius: var(--radius-md);
 	outline: none;
 }
 .dag-run-timeline-rail {
@@ -2070,16 +2167,17 @@ body.is-resizing-dag-graph {
 	border: 2px solid var(--surface);
 	border-radius: 50%;
 	background: var(--muted-soft);
+	box-shadow: 0 0 0 1px var(--hairline);
 }
 .dag-run-timeline-dot.status-finished,
 .dag-run-timeline-dot.status-succeeded,
 .dag-run-timeline-dot.status-completed {
-	background: var(--green);
+	background: color-mix(in srgb, var(--green) 75%, white);
 }
 .dag-run-timeline-dot.status-failed,
 .dag-run-timeline-dot.status-error,
 .dag-run-timeline-dot.status-partial_failed {
-	background: var(--red);
+	background: color-mix(in srgb, var(--red) 75%, white);
 }
 .dag-run-timeline-dot.status-running,
 .dag-run-timeline-dot.status-started {
@@ -2107,8 +2205,8 @@ body.is-resizing-dag-graph {
 
 #failures-list .row-failed td:first-child,
 #failures-list .row-blocked td:first-child {
-	color: var(--red);
-	font-weight: 700;
+	color: color-mix(in srgb, var(--red) 72%, var(--ink));
+	font-weight: 650;
 }
 
 @media (max-width: 1320px) {
@@ -2154,7 +2252,7 @@ body.is-resizing-dag-graph {
 		width: min(100% - 32px, 1680px);
 	}
 	.site-header {
-		grid-template-columns: auto auto 1fr;
+		grid-template-columns: auto 1fr auto;
 		grid-template-areas: "brand nav status" "crumb crumb crumb";
 		row-gap: 8px;
 	}
@@ -2267,54 +2365,61 @@ body.is-resizing-dag-graph {
 
 /* R3: object relation bar + recommended commands (copy-only) */
 .object-relations-panel {
-	padding: var(--space-3) var(--space-4);
+	padding: var(--space-4) var(--space-5);
+	background: color-mix(in srgb, var(--canvas-soft) 70%, var(--surface));
 }
 
 .object-relation-bar {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--space-2);
-	font-size: 0.9rem;
+	gap: var(--space-2) var(--space-3);
+	font-size: 13px;
 }
 
 .object-relation-item {
 	display: inline-flex;
 	align-items: baseline;
-	gap: 0.25rem;
+	gap: 0.35rem;
+	padding: 4px 10px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
 }
 
 .object-relation-label {
-	color: var(--muted, #6b6560);
-	font-weight: 600;
-	font-size: 0.75rem;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
+	color: var(--muted);
+	font-weight: 650;
+	font-size: 11px;
+	letter-spacing: 0.02em;
 }
 
 .object-relation-sep {
-	color: var(--muted, #6b6560);
-	opacity: 0.7;
+	color: var(--muted-soft);
+	opacity: 0.8;
 	user-select: none;
 }
 
 .object-link {
-	color: var(--accent, #8a5a2b);
+	color: var(--orange-active);
 	text-decoration: none;
 	word-break: break-all;
+	font-weight: 600;
 }
 
 .object-link:hover,
 .object-link:focus-visible {
 	text-decoration: underline;
+	text-underline-offset: 2px;
 }
 
 .recommended-command {
-	border: 1px solid var(--border, #e2ddd4);
-	border-radius: 8px;
-	padding: var(--space-3);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	padding: var(--space-4);
 	margin: var(--space-2) 0;
-	background: #fbf9f4;
+	background: var(--surface);
+	box-shadow: var(--shadow-panel);
 }
 
 .recommended-command-head {
@@ -2326,14 +2431,15 @@ body.is-resizing-dag-graph {
 }
 
 .recommended-command-kind {
-	font-size: 0.75rem;
-	font-weight: 600;
-	color: var(--muted, #6b6560);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--orange-active);
+	letter-spacing: 0.03em;
 	text-transform: uppercase;
 }
 
 .recommended-command-label {
-	font-weight: 600;
+	font-weight: 650;
 }
 
 .recommended-command-body {
@@ -2345,36 +2451,44 @@ body.is-resizing-dag-graph {
 
 .recommended-command-text {
 	flex: 1 1 12rem;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	font-size: 0.85rem;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 12px;
 	word-break: break-all;
-	background: #f0ebe3;
-	padding: 0.35rem 0.5rem;
-	border-radius: 4px;
+	background: var(--canvas-soft);
+	border: 1px solid var(--hairline);
+	padding: 0.45rem 0.65rem;
+	border-radius: var(--radius-md);
 }
 
 button.copy-command {
 	appearance: none;
-	border: 1px solid var(--border, #d4cdc2);
-	background: #fff;
-	border-radius: 6px;
-	padding: 0.35rem 0.75rem;
+	border: 1px solid var(--hairline);
+	background: var(--surface);
+	border-radius: var(--radius-md);
+	padding: 0.4rem 0.85rem;
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 650;
 	cursor: pointer;
-	font-size: 0.85rem;
 }
 
 button.copy-command:hover,
 button.copy-command:focus-visible {
-	border-color: var(--accent, #8a5a2b);
+	border-color: var(--orange);
+	color: var(--orange-active);
+	background: var(--orange-soft);
+	outline: none;
 }
 
 .executed-facts {
-	border-left: 3px solid #6b8f71;
+	border-left: 3px solid color-mix(in srgb, var(--green) 55%, var(--hairline));
+	padding-left: var(--space-3);
 }
 
 .advisory-note {
 	margin: 0 0 var(--space-2);
 	font-size: 0.85rem;
+	color: var(--muted);
 }
 
 .blocking-list {
@@ -2388,7 +2502,7 @@ button.copy-command:focus-visible {
 
 .blocking-meta {
 	font-size: 0.85rem;
-	color: var(--muted, #6b6560);
+	color: var(--muted);
 	margin: 0.15rem 0 0.35rem;
 }
 
@@ -2396,18 +2510,19 @@ button.copy-command:focus-visible {
 
 /* R5: unified view states + information hierarchy */
 .view-state {
-	border-radius: var(--radius, 8px);
-	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
-	margin: 0 0 var(--space-3, 0.75rem);
+	border-radius: var(--radius-lg);
+	padding: var(--space-5) var(--space-6);
+	margin: 0 0 var(--space-3);
+	box-shadow: var(--shadow-panel);
 }
 .view-state-loading {
-	border: 1px dashed var(--border, #e2dcd4);
-	background: var(--surface-muted, #f7f4ef);
-	color: var(--muted, #6b6560);
+	border: 1px dashed var(--hairline-strong);
+	background: var(--canvas-soft);
+	color: var(--muted);
 }
 .view-state-empty {
-	border: 1px solid var(--border, #e2dcd4);
-	background: var(--surface, #fffdf9);
+	border: 1px solid var(--hairline);
+	background: var(--surface);
 }
 .view-state-degraded {
 	/* projection-fault styles also apply */