@tea-agent/loop-agent 0.1.0-fe-test.0

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

@@ -0,0 +1,3567 @@
+:root {
+	--canvas: #f7f7f4;
+	--canvas-soft: #fafaf7;
+	--surface: #ffffff;
+	--surface-muted: #f0efe9;
+	--surface-ink: #26251e;
+	--ink: #26251e;
+	--body: #5a5852;
+	--muted: #807d72;
+	--muted-soft: #a09c92;
+	--hairline: #e6e5e0;
+	--hairline-strong: #cfcdc4;
+	--orange: #f54e00;
+	--orange-active: #d04200;
+	--orange-soft: color-mix(in srgb, var(--orange) 12%, white);
+	--blue: #3f6ea4;
+	--green: #1f8a65;
+	--amber: #a66a00;
+	--red: #c72d53;
+	--lavender: #e4daf1;
+	--mint: #d8ead5;
+	--peach: #f1d8cb;
+	--gold: #d8b166;
+	--space-1: 4px;
+	--space-2: 8px;
+	--space-3: 12px;
+	--space-4: 16px;
+	--space-5: 20px;
+	--space-6: 24px;
+	--space-8: 32px;
+	--space-10: 40px;
+	--space-12: 48px;
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-pill: 999px;
+	--transition-fast: 160ms 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;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	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;
+	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, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
+		"Noto Sans SC", BlinkMacSystemFont, sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea {
+	font: inherit;
+}
+
+a {
+	color: inherit;
+}
+
+code,
+pre,
+.output-block,
+.dag-node-label,
+.dag-node-meta,
+.dag-node-status,
+.dag-node-table td:nth-child(2),
+td:first-child,
+.meta-item dd,
+.kpi-value,
+.risk-total,
+.process-timeline-time {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.skip-link {
+	position: fixed;
+	top: -64px;
+	left: var(--space-4);
+	z-index: 100;
+	padding: 9px 12px;
+	background: var(--orange);
+	color: #fff;
+	font-weight: 700;
+	text-decoration: none;
+	transition: top var(--transition-fast);
+}
+
+.skip-link:focus {
+	top: var(--space-3);
+}
+
+#app {
+	width: min(100% - 48px, 1680px);
+	margin: 0 auto;
+	padding: var(--space-5) 0 56px;
+}
+
+.breadcrumb {
+	display: flex;
+	min-height: 16px;
+	margin-bottom: var(--space-4);
+	gap: 7px;
+	color: var(--muted);
+	font-size: 12px;
+}
+
+.breadcrumb[hidden] {
+	display: none;
+}
+
+.breadcrumb a {
+	color: var(--body);
+	text-decoration: none;
+}
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+	color: var(--orange);
+	text-decoration: underline;
+	outline: none;
+}
+
+.dashboard-main:focus {
+	outline: none;
+}
+.view {
+	min-width: 0;
+}
+.view[hidden] {
+	display: none !important;
+}
+.view:not(.view-dashboard) {
+	display: grid;
+	gap: var(--space-4);
+}
+
+/* 「昨夜班次」条带：夜间结果在观测总览的唯一一级呈现（管理动作在操作侧） */
+.night-strip {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 13px 18px;
+	margin-bottom: var(--space-4);
+	border-left: 3px solid var(--lavender);
+	background: linear-gradient(
+		90deg,
+		color-mix(in srgb, var(--lavender) 22%, var(--surface)),
+		var(--surface) 55%
+	);
+}
+.night-strip[hidden] {
+	display: none;
+}
+.night-strip-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+	width: 34px;
+	height: 34px;
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--lavender) 55%, var(--surface));
+	color: #6a4a9e;
+	font-size: 16px;
+}
+.night-strip-main {
+	min-width: 0;
+}
+.night-strip-title {
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--ink);
+}
+.night-strip-sub {
+	margin-top: 1px;
+	font-size: 12px;
+	color: var(--body);
+	font-variant-numeric: tabular-nums;
+}
+.night-strip-actions {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+.night-strip-manage {
+	border-color: color-mix(in srgb, var(--orange) 35%, var(--hairline));
+	color: var(--orange-active);
+}
+.night-strip-manage:hover {
+	border-color: var(--orange);
+	background: var(--orange-soft);
+}
+
+.view-heading {
+	display: grid;
+	gap: 4px;
+	margin-bottom: var(--space-6);
+}
+
+.view-kicker {
+	display: inline-flex;
+	align-items: center;
+	width: fit-content;
+	margin: 0;
+	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.04em;
+}
+
+.view h2 {
+	margin: 0;
+	color: var(--ink);
+	font-size: clamp(24px, 3vw, 30px);
+	font-weight: 650;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+}
+
+.view-heading > p:last-child {
+	max-width: 66ch;
+	margin: 0;
+	color: var(--body);
+}
+
+.panel {
+	min-width: 0;
+	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);
+	box-shadow: var(--shadow-panel);
+}
+.panel-features {
+	background: var(--canvas-soft);
+	border-color: var(--hairline);
+}
+.panel-meta {
+	background: transparent;
+	border-color: var(--hairline-strong);
+}
+.panel-table {
+	overflow: hidden;
+	padding: 0;
+	box-shadow: var(--shadow-panel);
+}
+.panel-output {
+	background: #fbfbf9;
+}
+
+.section-heading,
+.panel h3 {
+	margin: 0 0 var(--space-4);
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.empty,
+.risk-empty {
+	margin: 0;
+	color: var(--muted);
+}
+.empty-state {
+	padding: var(--space-8);
+	text-align: center;
+	color: var(--body);
+}
+
+.view-dashboard {
+	--dashboard-cols: minmax(0, 1.65fr) minmax(280px, 0.85fr);
+	/* Secondary: timeline + batch table — more even, batch side slightly wider. */
+	--dashboard-secondary-cols: minmax(0, 1fr) minmax(0, 1.2fr);
+	--dashboard-gap: var(--space-4);
+	display: grid;
+	gap: var(--space-4);
+}
+
+.view-pool {
+	display: grid;
+	gap: var(--space-4);
+}
+.page-header,
+.pool-page-header,
+.dashboard-page-header {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: var(--space-4) var(--space-6);
+	align-items: start;
+	padding-bottom: var(--space-4);
+	border-bottom: 1px solid var(--hairline);
+}
+.page-header-heading,
+.view-dashboard .page-header-heading,
+.view-pool .page-header-heading {
+	margin-bottom: 0;
+}
+.page-header-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 10px 12px;
+	padding-top: 2px;
+}
+.page-action-btn,
+.pool-refresh-btn {
+	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 34px;
+	padding: 8px 14px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+	line-height: 1.2;
+	text-decoration: none;
+	cursor: pointer;
+	box-shadow: var(--shadow-panel);
+	transition:
+		background-color var(--transition-fast),
+		border-color var(--transition-fast),
+		color var(--transition-fast);
+}
+.page-action-btn:hover,
+.page-action-btn:focus-visible,
+.pool-refresh-btn:hover,
+.pool-refresh-btn:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	background: var(--orange-soft);
+	outline: none;
+}
+.pool-toolbar {
+	display: grid;
+	justify-items: end;
+	gap: 8px;
+	padding-top: 2px;
+}
+.pool-toolbar-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 10px 12px;
+}
+.pool-toolbar .pool-updated-at {
+	margin: 0;
+	max-width: 28ch;
+	font-size: 11px;
+	line-height: 1.4;
+	text-align: right;
+}
+.pool-auto-refresh-label {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--body);
+	font-size: 13px;
+	cursor: pointer;
+}
+.pool-workspace {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+	align-items: start;
+}
+.pool-ops-list {
+	display: grid;
+	gap: 10px;
+}
+.pool-ops-card {
+	padding: 12px 14px;
+	border: 1px solid var(--hairline);
+	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: 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: 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;
+	font-size: 14px;
+	font-weight: 700;
+}
+.pool-ops-card-meta {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	color: var(--muted);
+	font-size: 12px;
+}
+.pool-ops-card-detail {
+	margin: 8px 0 0;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.5;
+}
+.pool-filters {
+	display: block;
+}
+.pool-filters-inner {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: end;
+	gap: var(--space-3);
+}
+.pool-filters-inner label {
+	display: grid;
+	gap: 4px;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+}
+.pool-filters-inner select,
+.pool-filters-inner input[type="search"] {
+	min-width: 160px;
+	padding: 7px 10px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 13px;
+}
+.pool-table-wrap {
+	overflow-x: auto;
+}
+.pool-ref-links {
+	display: inline;
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.pool-events-details {
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+	padding: 0 var(--space-5) var(--space-4);
+}
+.pool-events-details > summary {
+	cursor: pointer;
+	padding: var(--space-4) 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+.pool-events-details > summary:hover {
+	color: var(--orange-active);
+}
+.pool-events-details .panel-timeline {
+	border: 0;
+	padding: 0;
+	box-shadow: none;
+}
+#pool-kpi.panel-kpi {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--space-2);
+}
+#pool-kpi .section-heading {
+	margin: 0;
+}
+.pool-fault-active {
+	display: grid;
+	gap: var(--space-3);
+}
+
+.panel-kpi {
+	display: grid;
+	grid-template-columns: var(--dashboard-cols);
+	gap: var(--space-2) var(--dashboard-gap);
+	align-items: stretch;
+	padding: 0;
+	background: transparent;
+	border: 0;
+}
+
+.kpi-group {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	min-width: 0;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: var(--space-2);
+}
+.kpi-group + .kpi-group {
+	margin-top: 0;
+}
+.kpi-group-legend {
+	padding: 0;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.kpi-grid {
+	display: grid;
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	overflow: visible;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+	box-shadow: var(--shadow-panel);
+	height: 100%;
+}
+
+/* Must follow .kpi-grid so display:flex wins over display:grid. */
+.kpi-grid.pool-health-grid {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: stretch;
+	overflow-x: auto;
+	height: auto;
+	grid-template-columns: none;
+}
+.kpi-grid.pool-health-grid .kpi-card {
+	flex: 1 1 0;
+	min-width: 96px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: baseline;
+	justify-content: flex-start;
+	gap: 8px;
+	padding: 8px 12px;
+	border-top: 0;
+	border-left: 1px solid var(--hairline);
+}
+.kpi-grid.pool-health-grid .kpi-card:first-child {
+	border-left: 0;
+}
+.kpi-grid.pool-health-grid .kpi-value {
+	font-size: 18px;
+	line-height: 1.1;
+}
+.kpi-grid.pool-health-grid .kpi-label {
+	margin: 0;
+	font-size: 11px;
+	font-weight: 650;
+	color: var(--muted);
+	white-space: nowrap;
+}
+
+.kpi-card {
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	padding: 10px 12px 9px;
+	border-left: 1px solid var(--hairline);
+}
+
+.kpi-card:first-child {
+	border-left: 0;
+}
+.kpi-label {
+	margin-bottom: 4px;
+	color: var(--muted);
+	font-size: 10px;
+	font-weight: 650;
+}
+.kpi-value-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 6px;
+}
+.kpi-value {
+	color: var(--ink);
+	font-size: 22px;
+	font-weight: 500;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+.kpi-card.kpi-highlight .kpi-value {
+	color: var(--orange-active);
+}
+.kpi-card.kpi-muted .kpi-value {
+	color: var(--muted);
+}
+.kpi-card.kpi-risk .kpi-value {
+	color: color-mix(in srgb, var(--amber) 80%, var(--ink));
+}
+.kpi-card.kpi-danger .kpi-value {
+	color: color-mix(in srgb, var(--red) 78%, var(--ink));
+}
+.kpi-value-with-link {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
+}
+.kpi-value-with-link .kpi-value-num {
+	font-variant-numeric: tabular-nums;
+}
+.kpi-value-with-link .inbox-link {
+	font-size: 10px;
+	font-weight: 650;
+	line-height: 1.2;
+	text-underline-offset: 2px;
+}
+
+.kpi-help {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--muted-soft);
+	cursor: help;
+	font-size: 13px;
+	line-height: 1;
+}
+.kpi-help:hover,
+.kpi-help:focus-visible {
+	color: var(--ink);
+	background: var(--surface-muted);
+	outline: none;
+}
+.kpi-help:focus-visible {
+	box-shadow: 0 0 0 2px var(--hairline-strong);
+}
+.kpi-tip {
+	position: absolute;
+	left: 12px;
+	right: auto;
+	top: calc(100% - 8px);
+	z-index: 10;
+	/* Stable readable width independent of narrow KPI cards; viewport-safe cap. */
+	width: min(280px, calc(100vw - 24px));
+	min-width: min(240px, calc(100vw - 24px));
+	max-width: min(280px, calc(100vw - 24px));
+	box-sizing: border-box;
+	padding: 8px 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-md);
+	background: var(--surface-ink);
+	color: var(--canvas);
+	font-size: 11px;
+	font-weight: 400;
+	line-height: 1.5;
+	box-shadow: var(--shadow-panel);
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transition: opacity var(--transition-fast);
+}
+/* Five-column default: right two columns open inward (left) to avoid viewport overflow. */
+.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(5n - 1) .kpi-tip,
+.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(5n) .kpi-tip {
+	left: auto;
+	right: 12px;
+}
+.kpi-help:hover + .kpi-tip,
+.kpi-help:focus-visible + .kpi-tip {
+	opacity: 1;
+	visibility: visible;
+}
+
+.dashboard-workspace,
+.dashboard-secondary {
+	display: grid;
+	gap: var(--dashboard-gap);
+	align-items: start;
+}
+
+.dashboard-workspace {
+	grid-template-columns: var(--dashboard-cols);
+}
+.dashboard-secondary {
+	grid-template-columns: var(--dashboard-secondary-cols);
+}
+#dashboard-batches {
+	min-width: 0;
+	overflow-x: auto;
+}
+#dashboard-batches table {
+	width: 100%;
+	min-width: 0;
+}
+#dashboard-batches th,
+#dashboard-batches td {
+	white-space: nowrap;
+}
+#dashboard-batches td:last-child {
+	white-space: normal;
+	min-width: 12rem;
+}
+
+.panel-primary,
+.panel-risk {
+	min-width: 0;
+}
+
+.panel-risk {
+	display: block;
+	background: var(--surface);
+	border-color: var(--hairline-strong);
+	box-shadow: var(--shadow-panel);
+	position: sticky;
+	top: 16px;
+}
+
+/* Attention state stays on inner cards; outer shell matches active DAG panel. */
+.panel-risk-attention {
+	border-color: var(--hairline-strong);
+	background: var(--surface);
+}
+.panel-risk .section-heading {
+	margin: 0 0 var(--space-4);
+}
+.risk-blocks {
+	display: grid;
+	gap: 10px;
+}
+.risk-block,
+.risk-block-dag,
+.risk-block-worker {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	grid-template-areas:
+		"label total"
+		"summary total"
+		"link total";
+	align-items: start;
+	column-gap: var(--space-3);
+	row-gap: 4px;
+	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: color-mix(in srgb, var(--red) 4%, var(--surface));
+}
+.risk-block-label {
+	grid-area: label;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+.risk-total {
+	grid-area: total;
+	margin: 0;
+	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;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.6;
+}
+.risk-block .risk-link {
+	grid-area: link;
+	justify-self: start;
+	margin-top: 6px;
+}
+.panel-risk .risk-empty {
+	margin: 0;
+}
+
+.projection-fault {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--space-3);
+	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-lg);
+	background: color-mix(in srgb, var(--red) 4%, var(--surface));
+	box-shadow: var(--shadow-panel);
+}
+.projection-fault > i {
+	color: color-mix(in srgb, var(--red) 75%, var(--ink));
+	font-size: 18px;
+	line-height: 1.4;
+}
+.projection-fault-body {
+	display: grid;
+	gap: 4px;
+	min-width: 0;
+}
+.projection-fault-title {
+	margin: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+.projection-fault-message {
+	margin: 0;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.projection-fault-at {
+	margin: 0;
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.risk-link,
+.active-dag-link,
+.link,
+.inbox-link,
+.artifact-link,
+.step-link {
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+	text-decoration-color: var(--orange);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 4px;
+}
+
+.risk-link {
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.risk-link:hover,
+.active-dag-link:hover,
+.link:hover,
+.inbox-link:hover,
+.artifact-link:hover,
+.step-link:hover {
+	color: var(--orange-active);
+}
+
+.active-dag-list {
+	display: grid;
+	gap: 10px;
+}
+.active-dag-card {
+	padding: 14px 16px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--surface);
+	border-left: 3px solid var(--hairline-strong);
+	box-shadow: var(--shadow-panel);
+	transition:
+		border-color var(--transition-fast),
+		box-shadow var(--transition-fast);
+}
+.active-dag-card-running {
+	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: 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;
+	align-items: start;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: 9px;
+}
+.active-dag-title {
+	min-width: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.active-dag-meta {
+	display: grid;
+	gap: 4px;
+	color: var(--body);
+	font-size: 12px;
+}
+.active-dag-link {
+	display: inline-block;
+	margin-top: 10px;
+}
+
+.feature-decision-list {
+	display: grid;
+	gap: 8px;
+}
+.feature-decision-row {
+	display: grid;
+	grid-template-columns: minmax(120px, 0.9fr) minmax(88px, 0.55fr) minmax(
+			0,
+			1.6fr
+		) auto;
+	align-items: center;
+	gap: var(--space-3);
+	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: 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;
+	font-size: 13px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.feature-decision-status {
+	color: var(--body);
+	font-size: 12px;
+}
+.feature-decision-next {
+	min-width: 0;
+	color: var(--muted);
+	font-size: 12px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.feature-decision-open {
+	color: var(--orange-active);
+	font-size: 12px;
+	font-weight: 700;
+	white-space: nowrap;
+}
+
+.meta-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 15px 24px;
+	margin: 0;
+}
+
+.meta-item {
+	min-width: 0;
+}
+.meta-item dt {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 650;
+}
+.meta-item dd {
+	min-height: 24px;
+	margin: 4px 0 0;
+	padding-top: 5px;
+	border-top: 1px solid var(--hairline);
+	color: var(--ink);
+	overflow-wrap: anywhere;
+	font-size: 12px;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+th,
+td {
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--hairline);
+	text-align: left;
+	vertical-align: top;
+}
+th {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	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);
+}
+tbody tr:last-child td {
+	border-bottom: 0;
+}
+tbody tr {
+	transition: background-color var(--transition-fast);
+}
+tbody tr:hover {
+	background: color-mix(in srgb, var(--orange) 4%, var(--surface));
+}
+tr.clickable {
+	cursor: pointer;
+}
+tr.clickable:focus-within {
+	outline: 2px solid color-mix(in srgb, var(--orange) 55%, transparent);
+	outline-offset: -2px;
+}
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	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;
+	white-space: nowrap;
+}
+
+.badge-succeeded,
+.badge-finished,
+.badge-completed,
+.badge-done,
+.liveness-active {
+	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: color-mix(in srgb, var(--red) 78%, var(--ink));
+	background: color-mix(in srgb, var(--red) 8%, var(--surface));
+}
+.badge-partial-failed {
+	color: color-mix(in srgb, var(--amber) 80%, var(--ink));
+	background: color-mix(in srgb, var(--amber) 10%, var(--surface));
+}
+.badge-running,
+.badge-started {
+	color: var(--orange-active);
+	background: var(--orange-soft);
+}
+.badge-pending,
+.badge-queued,
+.badge-blocked,
+.badge-unknown {
+	color: var(--body);
+	background: var(--surface-muted);
+}
+.badge-skipped,
+.badge-reused,
+.liveness-quiet {
+	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);
+	background: #fff8e7;
+}
+
+.dag-detail-workspace {
+	display: block;
+}
+
+.dag-inspector {
+	position: fixed;
+	z-index: 40;
+	/* Align near the unified chrome bottom edge; same inset as right/bottom. */
+	top: 24px;
+	right: 24px;
+	bottom: 24px;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	width: min(var(--dag-inspector-width, 50vw), calc(100vw - 48px));
+	min-width: 0;
+	padding: 0;
+	overflow: hidden;
+	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));
+	visibility: hidden;
+	transition:
+		transform var(--transition-base),
+		opacity var(--transition-base),
+		visibility 0s linear 240ms;
+}
+.dag-inspector.is-open {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translateX(0);
+	visibility: visible;
+	transition-delay: 0s, 0s, 0s;
+}
+.dag-inspector-resize-handle {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 18px;
+	cursor: col-resize;
+	touch-action: none;
+	outline: none;
+}
+.dag-inspector-resize-handle::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 7px;
+	width: 3px;
+	height: 52px;
+	transform: translateY(-50%);
+	border-radius: 2px;
+	background: var(--hairline-strong);
+	opacity: 0;
+	transition:
+		opacity var(--transition-base),
+		background var(--transition-base);
+}
+.dag-inspector-resize-handle:hover::before,
+.dag-inspector-resize-handle:focus-visible::before {
+	background: var(--orange);
+	opacity: 1;
+}
+.dag-inspector-resize-handle:focus-visible {
+	outline: 2px solid var(--orange);
+	outline-offset: -2px;
+}
+body.is-resizing-dag-inspector {
+	cursor: col-resize;
+	user-select: none;
+}
+body.is-resizing-dag-graph {
+	cursor: grabbing;
+	user-select: none;
+}
+.dag-inspector-header {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: var(--space-4) var(--space-5) var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+	background: color-mix(in srgb, var(--canvas-soft) 80%, var(--surface));
+}
+.dag-inspector-title {
+	display: grid;
+	gap: 6px;
+	min-width: 0;
+}
+.dag-inspector-title h3 {
+	margin: 0;
+	font-size: 14px;
+}
+.dag-inspector-node {
+	min-width: 0;
+	color: var(--body);
+	font-size: 12px;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	overflow-wrap: anywhere;
+}
+.dag-inspector-controls {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+.dag-inspector-close {
+	display: inline-grid;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--surface);
+	color: var(--body);
+	cursor: pointer;
+}
+.dag-inspector-close:hover,
+.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: 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: 30px;
+	padding: 0 12px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-pill);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-inspector-tab:hover,
+.dag-inspector-tab:focus-visible {
+	color: var(--ink);
+	outline: none;
+}
+.dag-inspector-tab[aria-selected="true"] {
+	border-color: transparent;
+	background: var(--ink);
+	color: #fff;
+}
+.dag-inspector-content {
+	min-height: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+.dag-inspector-attempt-bar {
+	position: sticky;
+	top: calc(-1 * var(--space-4));
+	z-index: 2;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	padding-bottom: var(--space-3);
+	margin-bottom: var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+	background: var(--surface);
+}
+.dag-inspector-attempt-label {
+	font-size: 12px;
+	color: var(--muted);
+}
+.dag-inspector-attempt-select {
+	/* Shared custom-select surface; keep class for integration hooks. */
+	min-width: 9.5rem;
+}
+.dag-inspector-attempt-bar .custom-select-menu {
+	z-index: 5;
+}
+.dag-inspector-attempt-preview {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: 12px;
+	color: var(--body);
+}
+.dag-inspector-attempt-artifact-note {
+	color: var(--muted);
+	font-size: 12px;
+}
+.panel-graph {
+	min-height: 0;
+}
+
+.dag-graph-wrap {
+	display: grid;
+	gap: var(--space-3);
+}
+.dag-graph-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+.dag-graph-summary,
+.dag-graph-fallback {
+	margin: 0;
+	color: var(--muted);
+	font-size: 12px;
+}
+.dag-graph-reset {
+	min-height: 32px;
+	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 {
+	min-height: 320px;
+	max-height: 560px;
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	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;
+	/* P1 ordinary edges: stronger contrast / slightly thicker for readability. */
+	stroke: color-mix(in srgb, var(--hairline-strong) 78%, var(--muted));
+	stroke-width: 1.6;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	transition:
+		opacity var(--transition-fast),
+		stroke var(--transition-fast);
+}
+#dag-arrow path {
+	fill: color-mix(in srgb, var(--hairline-strong) 62%, var(--muted));
+}
+/* Control loops stay visible but visually lighter than the main chain. */
+.dag-edge-control {
+	stroke: color-mix(in srgb, var(--orange) 58%, var(--muted));
+	stroke-width: 1.25;
+	stroke-dasharray: 5 5;
+	opacity: 0.72;
+}
+#dag-arrow-control path {
+	fill: color-mix(in srgb, var(--orange) 58%, var(--muted));
+}
+.dag-edge-control-label {
+	fill: color-mix(in srgb, var(--orange) 70%, var(--muted));
+	font-size: 10px;
+	font-weight: 500;
+	opacity: 0.85;
+	pointer-events: none;
+	user-select: none;
+}
+.dag-graph-node {
+	cursor: pointer;
+	transition: opacity var(--transition-fast);
+}
+.dag-graph-node rect {
+	fill: var(--surface);
+	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 {
+	stroke: var(--orange);
+	stroke-width: 2;
+}
+.dag-graph-node:focus {
+	outline: none;
+}
+.dag-graph-node.selected rect {
+	stroke: var(--orange);
+	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: color-mix(in srgb, var(--orange) 8%, var(--surface));
+}
+.dag-graph-node.status-failed rect,
+.dag-graph-node.status-error rect {
+	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,
+.dag-graph-node.status-finished:hover rect,
+.dag-graph-node.status-finished:focus-visible rect,
+.dag-graph-node.status-completed:hover rect,
+.dag-graph-node.status-completed:focus-visible rect,
+.dag-graph-node.status-done:hover rect,
+.dag-graph-node.status-done:focus-visible rect {
+	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: 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;
+}
+.dag-node-label {
+	fill: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+}
+.dag-node-meta {
+	fill: var(--muted);
+	font-size: 11px;
+}
+.dag-node-status {
+	fill: var(--body);
+	font-size: 11px;
+}
+.dag-node-history {
+	fill: var(--muted);
+	font-size: 10px;
+}
+.dag-dimmed {
+	opacity: 0.28;
+}
+.dag-graph-node.status-running {
+	animation: graph-node-pulse 2s ease-in-out infinite;
+}
+@keyframes graph-node-pulse {
+	50% {
+		opacity: 0.72;
+	}
+}
+
+/* ---- 双视图 segmented control（逻辑拓扑 | 执行轨迹，AC-001） ---- */
+.dag-graph-toolbar-left {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--space-3);
+}
+.dag-graph-mode-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	padding: 3px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+	box-shadow: var(--shadow-panel);
+}
+.dag-graph-mode-tab {
+	min-height: 26px;
+	padding: 0 12px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-pill);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-graph-mode-tab:hover {
+	color: var(--ink);
+}
+.dag-graph-mode-tab[aria-selected="true"] {
+	background: var(--ink);
+	color: #fff;
+}
+.dag-graph-mode-tab:focus-visible {
+	outline: 2px solid var(--orange);
+	outline-offset: 1px;
+	color: var(--ink);
+}
+.dag-graph-mode-tab[aria-selected="true"]:focus-visible {
+	outline-color: var(--orange-active);
+	color: #fff;
+}
+
+/* ---- 执行轨迹 storyboard（AC-002..AC-006） ---- */
+.dag-trajectory {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+	min-width: max-content;
+}
+.dag-trajectory-lane {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+.dag-trajectory-lane-head {
+	display: flex;
+	align-items: baseline;
+	gap: var(--space-2);
+}
+.dag-trajectory-lane-title {
+	font-size: 13px;
+	font-weight: 750;
+	color: var(--ink);
+}
+.dag-trajectory-lane-meta {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-lane-cards {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+	gap: var(--space-2);
+}
+.dag-trajectory-occurrence {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 6px;
+	min-width: 176px;
+	max-width: 240px;
+	padding: 10px 12px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+	color: var(--ink);
+	text-align: left;
+	cursor: pointer;
+	box-shadow: var(--shadow-panel);
+}
+.dag-trajectory-occurrence:hover,
+.dag-trajectory-occurrence:focus-visible {
+	border-color: var(--orange);
+	outline: none;
+}
+.dag-trajectory-occurrence-node {
+	font-size: 12px;
+	font-weight: 700;
+	word-break: break-all;
+}
+.dag-trajectory-occurrence-status {
+	align-self: flex-start;
+}
+.dag-trajectory-occurrence-meta {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-occurrence-verdict {
+	font-size: 11px;
+	color: var(--body);
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+.dag-trajectory-attempt-strip {
+	font-size: 11px;
+	color: var(--body);
+}
+/* 历史失败已恢复/已覆盖：独立中性样式（不占用当前终态失败红色，不洗白事实）。 */
+.dag-trajectory-occurrence.is-recovered {
+	border-color: color-mix(in srgb, var(--amber, #b58900) 55%, var(--hairline));
+	background: color-mix(
+		in srgb,
+		var(--amber-soft, #fff7d6) 55%,
+		var(--surface)
+	);
+}
+.dag-trajectory-recovered {
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--amber, #b58900);
+}
+.dag-trajectory-partial {
+	font-size: 11px;
+	color: var(--muted);
+	border: 1px dashed var(--hairline-strong);
+	border-radius: 6px;
+	padding: 2px 6px;
+}
+.dag-trajectory-transition {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding-left: 4px;
+}
+.dag-trajectory-transition-arrow {
+	color: var(--muted);
+	font-size: 14px;
+}
+.dag-trajectory-transition-reason {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-banner {
+	padding: 8px 12px;
+	border: 1px solid
+		color-mix(in srgb, var(--amber, #b58900) 50%, var(--hairline));
+	border-radius: var(--radius-lg);
+	background: color-mix(
+		in srgb,
+		var(--amber-soft, #fff7d6) 60%,
+		var(--surface)
+	);
+	color: var(--body);
+	font-size: 12px;
+}
+.dag-trajectory-banner.is-error {
+	border-color: color-mix(in srgb, var(--red) 50%, var(--hairline));
+	background: color-mix(in srgb, var(--red) 6%, var(--surface));
+	color: var(--red);
+}
+.dag-trajectory-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-3);
+	padding: var(--space-8) var(--space-4);
+	color: var(--muted);
+}
+.dag-trajectory-empty-text {
+	margin: 0;
+	font-size: 13px;
+}
+.dag-trajectory-back {
+	min-height: 32px;
+	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;
+}
+.dag-trajectory-back:hover,
+.dag-trajectory-back:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-trajectory-fallback {
+	margin: 0;
+	padding: var(--space-4) var(--space-5);
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+.dag-trajectory-fallback-item {
+	font-size: 12px;
+	color: var(--body);
+}
+
+.dag-section-heading {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: var(--space-4);
+}
+.dag-section-heading h3 {
+	margin: 0;
+}
+.dag-section-meta {
+	color: var(--muted);
+	font-size: 12px;
+}
+#dag-nodes .dag-section-heading {
+	padding: var(--space-5) var(--space-5) 0;
+}
+#dag-nodes .dag-node-table {
+	border-top: 1px solid var(--hairline);
+}
+.dag-node-table {
+	table-layout: fixed;
+}
+/* 9 columns sum to 100%: 4/17/6/8/14/9/8/14/20 */
+.dag-node-table th:nth-child(1),
+.dag-node-table td:nth-child(1) {
+	width: 4%;
+}
+.dag-node-table th:nth-child(2),
+.dag-node-table td:nth-child(2) {
+	width: 17%;
+}
+.dag-node-table th:nth-child(3),
+.dag-node-table td:nth-child(3) {
+	width: 6%;
+}
+.dag-node-table th:nth-child(4),
+.dag-node-table td:nth-child(4) {
+	width: 8%;
+}
+.dag-node-table th:nth-child(5),
+.dag-node-table td:nth-child(5) {
+	width: 14%;
+}
+.dag-node-table th:nth-child(6),
+.dag-node-table td:nth-child(6) {
+	width: 9%;
+}
+.dag-node-table th:nth-child(7),
+.dag-node-table td:nth-child(7) {
+	width: 8%;
+}
+.dag-node-table th:nth-child(8),
+.dag-node-table td:nth-child(8) {
+	width: 14%;
+}
+.dag-node-table th:nth-child(9),
+.dag-node-table td:nth-child(9) {
+	width: 20%;
+}
+.dag-node-table th:first-child,
+.dag-node-table td:first-child {
+	text-align: center;
+}
+.dag-node-table td:nth-child(2),
+.dag-node-table td:nth-child(5),
+.dag-node-table td:nth-child(8),
+.dag-node-table td:nth-child(9) {
+	overflow-wrap: anywhere;
+}
+.dag-node-error-summary {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	color: var(--red);
+	word-break: break-word;
+}
+.dag-active-node {
+	background: #fff8f3;
+}
+.dag-error-node {
+	background: #fff7f8;
+}
+.dag-node-selected {
+	box-shadow: inset 3px 0 0 var(--orange);
+}
+
+.process-timeline-note {
+	margin: 0 0 var(--space-2);
+	color: var(--muted);
+	font-size: 11px;
+}
+.process-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: var(--space-2) 0;
+	list-style: none;
+}
+.process-timeline-item {
+	display: grid;
+	grid-template-columns: 20px minmax(0, 1fr);
+	align-items: stretch;
+	min-height: 34px;
+}
+.process-timeline-item.has-time {
+	grid-template-columns: 20px 92px minmax(0, 1fr);
+}
+.process-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 34px;
+}
+.process-timeline-rail::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.process-timeline-item.is-first .process-timeline-rail::before {
+	top: 50%;
+}
+.process-timeline-item.is-last .process-timeline-rail::before {
+	bottom: 50%;
+}
+.process-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 8px;
+	height: 8px;
+	border: 2px solid var(--surface);
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.process-timeline-lifecycle .process-timeline-dot {
+	background: var(--lavender);
+}
+.process-timeline-tool-start .process-timeline-dot {
+	background: var(--orange);
+}
+.process-timeline-tool-end .process-timeline-dot {
+	background: var(--green);
+}
+.process-timeline-assistant .process-timeline-dot {
+	background: var(--blue);
+}
+.process-timeline-protocol .process-timeline-dot {
+	background: var(--muted-soft);
+}
+.process-timeline-time {
+	padding: 9px 0;
+	color: var(--muted);
+	font-size: 10px;
+	font-variant-numeric: tabular-nums;
+}
+.process-timeline-label {
+	min-width: 0;
+	padding: 8px 0 8px var(--space-2);
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+.process-timeline-protocol .process-timeline-label {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.process-timeline-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-bottom: var(--space-2);
+}
+.process-timeline-toggle {
+	min-height: 28px;
+	padding: 0 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--body);
+	font-size: 11px;
+	font-weight: 600;
+	cursor: pointer;
+}
+.process-timeline-toggle:hover,
+.process-timeline-toggle:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.process-timeline-toggle[aria-pressed="true"] {
+	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
+	background: #fff5ed;
+	color: var(--orange-active);
+}
+.process-timeline-body {
+	min-width: 0;
+	padding: 4px 0 8px var(--space-2);
+}
+.process-timeline-card {
+	display: grid;
+	gap: 6px;
+	min-width: 0;
+}
+.process-timeline-details {
+	min-width: 0;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+}
+.process-timeline-summary {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 8px 10px;
+	cursor: pointer;
+	list-style: none;
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 650;
+}
+.process-timeline-summary::-webkit-details-marker {
+	display: none;
+}
+.process-timeline-summary-title {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.process-timeline-summary-status {
+	flex-shrink: 0;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+}
+.process-timeline-summary-status.status-succeeded {
+	color: var(--green);
+}
+.process-timeline-summary-status.status-failed {
+	color: var(--red);
+}
+.process-timeline-summary-status.status-pending {
+	color: var(--orange);
+}
+.process-timeline-tool-card.is-error .process-timeline-details {
+	border-color: color-mix(in srgb, var(--red) 45%, var(--hairline));
+	background: color-mix(in srgb, var(--red) 6%, var(--surface));
+}
+.process-timeline-card-body {
+	display: grid;
+	gap: 6px;
+	padding: 0 10px 10px;
+}
+.process-timeline-section-label {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+}
+.process-timeline-code,
+.process-timeline-thinking-body {
+	margin: 0;
+	padding: 8px 10px;
+	overflow: auto;
+	border-radius: var(--radius-sm);
+	background: var(--canvas-soft);
+	color: var(--body);
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 11px;
+	line-height: 1.45;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+.process-timeline-more {
+	margin-top: 2px;
+}
+.process-timeline-more > summary {
+	cursor: pointer;
+	color: var(--blue);
+	font-size: 11px;
+	font-weight: 650;
+}
+.process-timeline-thinking > summary {
+	background: color-mix(in srgb, var(--lavender) 35%, var(--surface));
+}
+.process-timeline-turn-text {
+	display: grid;
+	gap: 6px;
+	padding: 8px 10px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+}
+.process-timeline-turn-text .markdown-output {
+	font-size: 12px;
+}
+.process-timeline-tool-only-note {
+	margin: 0;
+	font-size: 12px;
+}
+.process-timeline-turn-tools {
+	display: grid;
+	gap: 4px;
+	margin: 0;
+	padding: 0 0 0 1.1em;
+	color: var(--body);
+	font-size: 12px;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	overflow-wrap: anywhere;
+}
+.process-timeline-turn-tools li {
+	padding: 2px 0;
+}
+.process-timeline-agent-end-note {
+	margin: 0;
+	font-size: 11px;
+}
+.process-timeline-item.is-error .process-timeline-dot {
+	background: var(--red);
+}
+
+.markdown-output {
+	display: grid;
+	gap: var(--space-3);
+	color: var(--body);
+	font-size: 13px;
+	line-height: 1.65;
+}
+.markdown-output > :first-child {
+	margin-top: 0;
+}
+.markdown-output > :last-child {
+	margin-bottom: 0;
+}
+.markdown-output h1,
+.markdown-output h2,
+.markdown-output h3,
+.markdown-output h4 {
+	margin: var(--space-5) 0 var(--space-2);
+	color: var(--ink);
+	line-height: 1.3;
+}
+.markdown-output h1 {
+	font-size: 21px;
+}
+.markdown-output h2 {
+	font-size: 18px;
+}
+.markdown-output h3 {
+	font-size: 16px;
+}
+.markdown-output h4 {
+	font-size: 14px;
+}
+.markdown-output p,
+.markdown-output blockquote,
+.markdown-output ul,
+.markdown-output ol {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+.markdown-output p {
+	white-space: normal;
+}
+.markdown-output ul,
+.markdown-output ol {
+	padding-left: 22px;
+}
+.markdown-output blockquote {
+	padding-left: 12px;
+	border-left: 3px solid var(--peach);
+	color: var(--body);
+}
+.markdown-output pre {
+	margin: 0;
+	padding: var(--space-3);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.65;
+}
+.markdown-output code {
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: var(--surface-muted);
+	color: var(--ink);
+	font-size: 0.92em;
+}
+.markdown-output pre code {
+	padding: 0;
+	background: transparent;
+	color: inherit;
+}
+.markdown-output a {
+	color: var(--orange-active);
+	text-decoration-color: var(--orange);
+	text-underline-offset: 3px;
+}
+.markdown-output table {
+	font-size: 12px;
+}
+.markdown-output th,
+.markdown-output td {
+	padding: 8px 9px;
+}
+.markdown-output th {
+	position: static;
+}
+.markdown-error {
+	display: grid;
+	gap: var(--space-2);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--hairline);
+}
+.markdown-error-title {
+	margin: 0;
+	color: var(--red);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.spec-evidence-section {
+	padding-bottom: var(--space-4);
+	border-bottom: 1px solid var(--hairline);
+}
+.spec-evidence-section + .spec-evidence-section {
+	margin-top: var(--space-4);
+}
+.spec-evidence-section h4 {
+	margin: 0 0 var(--space-2);
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.node-input-root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+}
+.node-input-semantics {
+	margin: 0;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--muted);
+}
+.node-input-section {
+	padding-bottom: var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+}
+.node-input-section h4 {
+	margin: 0 0 var(--space-2);
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+}
+.node-input-section h5 {
+	margin: var(--space-2) 0;
+	font-size: 12px;
+	font-weight: 600;
+}
+.node-input-summary {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 4px 12px;
+	margin: 0;
+	font-size: 12px;
+}
+.node-input-summary dt {
+	margin: 0;
+	color: var(--muted);
+	font-weight: 600;
+}
+.node-input-summary dd {
+	margin: 0;
+	color: var(--ink);
+	word-break: break-word;
+}
+.node-input-inherited {
+	display: inline-block;
+	margin-left: 4px;
+	padding: 0 6px;
+	border-radius: 999px;
+	background: var(--surface-2, #f3f1ec);
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 600;
+}
+.node-input-code-list,
+.node-input-command-list {
+	margin: var(--space-2) 0 0;
+	padding-left: 1.2rem;
+}
+.node-input-command-list pre {
+	margin: 4px 0;
+	padding: 8px;
+	overflow: auto;
+	background: var(--surface-2, #f3f1ec);
+	border-radius: 6px;
+	font-size: 12px;
+}
+.node-input-truncated,
+.node-input-warning {
+	margin: var(--space-2) 0 0;
+	font-size: 12px;
+	color: var(--muted);
+}
+.node-input-error {
+	margin: 0;
+	color: var(--danger, #b42318);
+	font-size: 13px;
+}
+.spec-evidence-summary {
+	margin: var(--space-2) 0 0;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.6;
+}
+.spec-evidence-list {
+	display: grid;
+	gap: 6px;
+	margin: var(--space-2) 0 0;
+	padding: 0;
+	list-style: none;
+}
+.spec-evidence-list li {
+	display: flex;
+	align-items: flex-start;
+	gap: 6px;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+.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 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: 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: 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-md);
+	background: var(--canvas-soft);
+	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;
+}
+
+.run-layer-process {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-layer-diagnosis {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-detail-workspace {
+	display: grid;
+	grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.25fr);
+	gap: var(--space-4);
+	align-items: start;
+}
+.run-evidence {
+	display: grid;
+	gap: var(--space-4);
+	min-width: 0;
+}
+.artifact-preview-list {
+	gap: 12px;
+}
+.artifact-preview-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: baseline;
+	margin-bottom: 6px;
+}
+.artifact-preview-label {
+	font-size: 12px;
+	color: var(--muted);
+	overflow-wrap: anywhere;
+}
+.artifact-preview-body {
+	max-height: 240px;
+	overflow: auto;
+	font-size: 12px;
+}
+.artifact-preview-error {
+	color: var(--red);
+}
+.batch-task-links,
+.batch-task-evidence {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	align-items: center;
+}
+.object-link {
+	color: var(--body);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.panel-rail {
+	background: var(--canvas-soft);
+}
+.step-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.step-timeline li {
+	display: grid;
+	grid-template-columns: 18px minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 8px;
+	min-height: 38px;
+	border-bottom: 1px solid var(--hairline);
+}
+.step-timeline li:last-child {
+	border-bottom: 0;
+}
+.step-marker {
+	display: inline-grid;
+	place-items: center;
+	width: 16px;
+	height: 16px;
+	border: 1.5px solid var(--hairline-strong);
+	border-radius: 50%;
+	color: var(--muted);
+	font-size: 10px;
+	background: var(--surface);
+}
+.step-marker.succeeded {
+	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: 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;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.step-duration {
+	color: var(--muted);
+	font-size: 11px;
+	font-variant-numeric: tabular-nums;
+}
+
+.output-block {
+	max-height: 480px;
+	margin: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.7;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.artifact-list {
+	display: grid;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.artifact-list li {
+	min-width: 0;
+}
+.artifact-list a {
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.artifact-links {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.muted {
+	color: var(--muted);
+}
+
+.dag-run-timeline {
+	position: relative;
+	display: grid;
+	gap: 0;
+}
+.dag-run-timeline::before {
+	position: absolute;
+	top: 12px;
+	bottom: 12px;
+	left: 10px;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.dag-run-timeline-item {
+	position: relative;
+	display: grid;
+	grid-template-columns: 24px minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: 9px 0;
+	color: inherit;
+	text-decoration: none;
+	transition: background-color var(--transition-fast);
+}
+.dag-run-timeline-item:hover,
+.dag-run-timeline-item:focus-visible {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	background: color-mix(in srgb, var(--orange) 4%, transparent);
+	border-radius: var(--radius-md);
+	outline: none;
+}
+.dag-run-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 24px;
+}
+.dag-run-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 9px;
+	height: 9px;
+	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: color-mix(in srgb, var(--green) 75%, white);
+}
+.dag-run-timeline-dot.status-failed,
+.dag-run-timeline-dot.status-error {
+	background: color-mix(in srgb, var(--red) 75%, white);
+}
+.dag-run-timeline-dot.status-partial-failed {
+	background: color-mix(in srgb, var(--amber) 75%, white);
+}
+.dag-run-timeline-dot.status-running,
+.dag-run-timeline-dot.status-started {
+	background: var(--orange);
+}
+.dag-run-timeline-content {
+	display: grid;
+	gap: 3px;
+	min-width: 0;
+}
+.dag-run-timeline-title {
+	color: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-meta {
+	color: var(--muted);
+	font-size: 11px;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-status {
+	padding-top: 1px;
+}
+
+#failures-list .row-failed td:first-child,
+#failures-list .row-blocked td:first-child {
+	color: color-mix(in srgb, var(--red) 72%, var(--ink));
+	font-weight: 650;
+}
+
+@media (max-width: 1320px) {
+	.view-dashboard {
+		--dashboard-cols: 1fr;
+	}
+	.kpi-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+	.kpi-grid.pool-health-grid {
+		display: flex;
+		flex-wrap: nowrap;
+		grid-template-columns: none;
+	}
+	.kpi-card:nth-child(4) {
+		border-left: 0;
+	}
+	.kpi-card:nth-child(n + 4) {
+		border-top: 1px solid var(--hairline);
+	}
+	.kpi-grid.pool-health-grid .kpi-card,
+	.kpi-grid.pool-health-grid .kpi-card:nth-child(n),
+	.kpi-grid.pool-health-grid .kpi-card:nth-child(n + 4) {
+		border-top: 0;
+		border-left: 1px solid var(--hairline);
+	}
+	.kpi-grid.pool-health-grid .kpi-card:first-child {
+		border-left: 0;
+	}
+	/* Three-column: reset five-column tip edges, then rightmost column opens inward. */
+	.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(5n - 1) .kpi-tip,
+	.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(5n) .kpi-tip {
+		left: 12px;
+		right: auto;
+	}
+	.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(3n) .kpi-tip {
+		left: auto;
+		right: 12px;
+	}
+	.panel-risk {
+		position: static;
+	}
+	.run-detail-workspace {
+		grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1fr);
+	}
+	.panel-artifacts {
+		grid-column: 1 / -1;
+	}
+}
+
+@media (max-width: 1080px) {
+	#app {
+		width: min(100% - 32px, 1680px);
+	}
+	.run-detail-workspace {
+		grid-template-columns: 1fr;
+	}
+	.panel-artifacts {
+		grid-column: auto;
+	}
+	.pool-workspace {
+		grid-template-columns: 1fr;
+	}
+	.page-header,
+	.pool-page-header,
+	.dashboard-page-header {
+		grid-template-columns: 1fr;
+	}
+	.pool-toolbar {
+		justify-items: start;
+	}
+	.pool-toolbar-actions {
+		justify-content: flex-start;
+	}
+	.pool-toolbar .pool-updated-at {
+		text-align: left;
+		max-width: none;
+	}
+}
+
+@media (max-width: 720px) {
+	#app {
+		width: min(100% - 24px, 1680px);
+	}
+	.kpi-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.kpi-grid.pool-health-grid {
+		display: flex;
+		flex-wrap: nowrap;
+		grid-template-columns: none;
+	}
+	.kpi-card:nth-child(n) {
+		border-top: 1px solid var(--hairline);
+		border-left: 1px solid var(--hairline);
+	}
+	.kpi-card:nth-child(1),
+	.kpi-card:nth-child(2) {
+		border-top: 0;
+	}
+	.kpi-card:nth-child(odd) {
+		border-left: 0;
+	}
+	.kpi-grid.pool-health-grid .kpi-card,
+	.kpi-grid.pool-health-grid .kpi-card:nth-child(n),
+	.kpi-grid.pool-health-grid .kpi-card:nth-child(odd) {
+		border-top: 0;
+		border-left: 1px solid var(--hairline);
+	}
+	.kpi-grid.pool-health-grid .kpi-card:first-child {
+		border-left: 0;
+	}
+	/* Two-column: reset three-column tip edges, then right column opens inward. */
+	.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(3n) .kpi-tip {
+		left: 12px;
+		right: auto;
+	}
+	.kpi-grid:not(.pool-health-grid) > .kpi-card:nth-child(2n) .kpi-tip {
+		left: auto;
+		right: 12px;
+	}
+	.dag-inspector {
+		top: 12px;
+		right: 12px;
+		bottom: 12px;
+		width: calc(100vw - 24px);
+	}
+	.dag-inspector-resize-handle {
+		display: none;
+	}
+	.dashboard-secondary {
+		grid-template-columns: 1fr;
+	}
+	.feature-decision-row {
+		grid-template-columns: 1fr;
+		gap: 4px;
+	}
+	.feature-decision-next {
+		white-space: normal;
+	}
+	.risk-block {
+		grid-template-columns: minmax(0, 1fr) auto;
+		column-gap: var(--space-2);
+	}
+	.panel {
+		padding: var(--space-4);
+	}
+	.panel-table {
+		overflow-x: auto;
+		padding: 0;
+	}
+	table {
+		min-width: 680px;
+	}
+	.view h2 {
+		font-size: 24px;
+	}
+}
+
+/* R3: object relation bar + recommended commands (copy-only) */
+.object-relations-panel {
+	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) var(--space-3);
+	font-size: 13px;
+}
+
+.object-relation-item {
+	display: inline-flex;
+	align-items: baseline;
+	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);
+	font-weight: 650;
+	font-size: 11px;
+	letter-spacing: 0.02em;
+}
+
+.object-relation-sep {
+	color: var(--muted-soft);
+	opacity: 0.8;
+	user-select: none;
+}
+
+.object-link {
+	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(--hairline);
+	border-radius: var(--radius-lg);
+	padding: var(--space-4);
+	margin: var(--space-2) 0;
+	background: var(--surface);
+	box-shadow: var(--shadow-panel);
+}
+
+.recommended-command-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	align-items: baseline;
+	margin-bottom: var(--space-2);
+}
+
+.recommended-command-kind {
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--orange-active);
+	letter-spacing: 0.03em;
+	text-transform: uppercase;
+}
+
+.recommended-command-label {
+	font-weight: 650;
+}
+
+.recommended-command-body {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.recommended-command-text {
+	flex: 1 1 12rem;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-size: 12px;
+	word-break: break-all;
+	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(--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;
+}
+
+button.copy-command:hover,
+button.copy-command:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	background: var(--orange-soft);
+	outline: none;
+}
+
+.executed-facts {
+	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 {
+	margin: 0;
+	padding-left: 1.25rem;
+}
+
+.blocking-message {
+	font-weight: 500;
+}
+
+.blocking-meta {
+	font-size: 0.85rem;
+	color: var(--muted);
+	margin: 0.15rem 0 0.35rem;
+}
+
+/* R5: unified view states + information hierarchy */
+.view-state {
+	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(--hairline-strong);
+	background: var(--canvas-soft);
+	color: var(--muted);
+}
+.view-state-empty {
+	border: 1px solid var(--hairline);
+	background: var(--surface);
+}
+.view-state-degraded {
+	/* projection-fault styles also apply */
+}
+.view-state-error {
+	border: 1px solid var(--danger-border, #e8b4b4);
+	background: var(--danger-bg, #fdf2f2);
+	color: var(--danger-text, #8a2f2f);
+}
+.view-state-error p {
+	margin: 0;
+}
+.layer-primary {
+	/* main facts */
+}
+.layer-diagnostic {
+	opacity: 0.98;
+}
+.layer-raw {
+	font-size: 0.9rem;
+	color: var(--muted, #6b6560);
+}
+.pool-filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 0.75rem;
+	align-items: center;
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.pool-filters label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.9rem;
+}
+.pool-filters select,
+.pool-filters input[type="search"] {
+	font: inherit;
+	padding: 0.25rem 0.5rem;
+	border: 1px solid var(--border, #e2dcd4);
+	border-radius: 6px;
+	background: var(--surface, #fff);
+	min-height: 2rem;
+}
+.pool-filters select:focus-visible,
+.pool-filters input[type="search"]:focus-visible {
+	outline: 2px solid var(--focus, #3d6bf3);
+	outline-offset: 2px;
+}
+
+@media (max-width: 1024px) {
+	.pool-filters {
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* Formal DAG run history page (#/dags) */
+.section-heading-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3, 0.75rem);
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.section-heading-row .section-heading {
+	margin: 0;
+}
+.section-heading-action {
+	flex-shrink: 0;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--orange-active, #c45c26);
+	text-decoration: none;
+}
+.section-heading-action:hover,
+.section-heading-action:focus-visible {
+	text-decoration: underline;
+}
+.view-dags .dags-table-wrap,
+.dags-table-wrap.table-scroll {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.dags-history-table {
+	width: 100%;
+	min-width: 720px;
+	border-collapse: collapse;
+}
+.dags-run-id-wrap {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	max-width: 100%;
+}
+.dags-run-id {
+	font-size: 12px;
+	overflow-wrap: anywhere;
+	word-break: break-all;
+}
+.dags-copy-btn,
+.dags-copy-btn-icon {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	border: 1px solid var(--hairline, #e2dcd4);
+	border-radius: var(--radius-md, 6px);
+	background: var(--surface, #fff);
+	color: var(--ink, #1c1917);
+	cursor: pointer;
+	line-height: 1;
+}
+.dags-copy-btn:hover {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: var(--surface-muted, #f0efe9);
+}
+.dags-copy-btn:active {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: color-mix(
+		in srgb,
+		var(--surface-muted, #f0efe9) 80%,
+		var(--hairline, #e6e5e0)
+	);
+}
+/* Mouse focus must not leave residual orange chrome; orange is :focus-visible only. */
+.dags-copy-btn:focus:not(:focus-visible) {
+	outline: none;
+	border-color: var(--hairline, #e2dcd4);
+}
+.dags-copy-btn:focus-visible {
+	border-color: var(--orange-active, #c45c26);
+	outline: 2px solid color-mix(in srgb, var(--orange) 55%, transparent);
+	outline-offset: 1px;
+}
+.dags-copy-btn .dags-copy-icon {
+	display: block;
+}
+.dags-copy-btn .dags-copy-icon-check {
+	display: none;
+}
+.dags-copy-btn.is-copied {
+	color: var(--green, #1f8a65);
+	border-color: var(--hairline, #e2dcd4);
+}
+.dags-copy-btn.is-copied:hover,
+.dags-copy-btn.is-copied:active {
+	border-color: var(--hairline-strong, #cfcdc4);
+}
+.dags-copy-btn.is-copied .dags-copy-icon-rects {
+	display: none;
+}
+.dags-copy-btn.is-copied .dags-copy-icon-check {
+	display: block;
+}
+/* Copy success must never paint row / cell / run-id container chrome. */
+.dags-history-row.is-copied,
+.dags-run-id-cell.is-copied,
+.dags-run-id-wrap.is-copied {
+	background: transparent;
+	border-color: inherit;
+	box-shadow: none;
+}
+.dags-copy-toast {
+	position: fixed;
+	right: 24px;
+	bottom: 24px;
+	z-index: 50;
+	max-width: min(360px, calc(100vw - 32px));
+	padding: 10px 14px;
+	border: 1px solid var(--hairline-strong, #cfcdc4);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #fff);
+	color: var(--ink, #1c1917);
+	box-shadow: var(--shadow-soft);
+	font-size: 13px;
+	pointer-events: none;
+}
+.dags-copy-toast[hidden] {
+	display: none !important;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+.dags-pagination {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+	align-items: center;
+	column-gap: 1rem;
+	row-gap: 0.75rem;
+	width: 100%;
+	min-width: 0;
+}
+.dags-pagination-summary {
+	min-width: 0;
+	justify-self: start;
+	text-align: left;
+}
+.dags-pagination-summary .dags-meta {
+	margin: 0;
+}
+.dags-pagination-pages {
+	display: inline-flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	justify-self: center;
+	flex: 0 0 auto;
+	max-width: 100%;
+	padding: 5px;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 14px;
+	background: var(--surface, #ffffff);
+	box-shadow:
+		0 1px 2px rgb(38 37 30 / 4%),
+		0 4px 12px rgb(38 37 30 / 3%);
+}
+.dags-pagination-tools {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	justify-self: end;
+	min-width: 0;
+}
+.dags-page-num,
+.dags-page-nav {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	min-width: 36px;
+	min-height: 36px;
+	padding: 0;
+	margin: 0;
+	border: 1px solid transparent;
+	border-radius: 10px;
+	background: transparent;
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	transition:
+		background var(--transition-fast, 160ms ease),
+		color var(--transition-fast, 160ms ease),
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-base, 220ms ease),
+		opacity var(--transition-fast, 160ms ease);
+}
+.dags-page-num i,
+.dags-page-nav i,
+.dags-refresh-btn i {
+	font-size: 18px;
+	line-height: 1;
+	pointer-events: none;
+}
+.dags-page-num:hover:not(:disabled),
+.dags-page-nav:hover:not(:disabled) {
+	background: color-mix(
+		in srgb,
+		var(--orange-soft, #fff1ea) 70%,
+		var(--surface-muted, #f0efe9)
+	);
+	color: var(--ink, #26251e);
+}
+.dags-page-num:active:not(:disabled),
+.dags-page-nav:active:not(:disabled) {
+	background: color-mix(
+		in srgb,
+		var(--orange, #f54e00) 14%,
+		var(--surface-muted, #f0efe9)
+	);
+}
+.dags-page-num:focus-visible,
+.dags-page-nav:focus-visible,
+.dags-refresh-btn:focus-visible,
+.dags-page-size-label select:focus-visible,
+.dags-page-size-label .custom-select-trigger:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--orange, #f54e00) 55%, transparent);
+	outline-offset: 1px;
+}
+.dags-page-num.is-current,
+.dags-page-num.is-current:disabled,
+.dags-page-num.is-current:hover:disabled,
+.dags-page-num.is-current:active:disabled {
+	background: var(--orange, #f54e00);
+	border-color: var(--orange, #f54e00);
+	color: #fff;
+	opacity: 1;
+	box-shadow: 0 2px 8px
+		color-mix(in srgb, var(--orange, #f54e00) 35%, transparent);
+	cursor: default;
+}
+.dags-page-nav:disabled,
+.dags-page-num:disabled:not(.is-current),
+.dags-refresh-btn:disabled,
+.dags-page-size-label select:disabled,
+.dags-page-size-label .custom-select.is-disabled .custom-select-trigger,
+.dags-page-size-label .custom-select-trigger:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.dags-page-ellipsis {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	min-width: 28px;
+	height: 36px;
+	color: var(--muted, #807d72);
+	user-select: none;
+	pointer-events: none;
+}
+.dags-page-size-label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 13px;
+	color: var(--body, #5a5852);
+}
+.dags-page-size-label select {
+	box-sizing: border-box;
+	height: 36px;
+	min-width: 4.5rem;
+	padding: 0 0.5rem;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+	transition:
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		background var(--transition-fast, 160ms ease);
+}
+.dags-page-size-label .custom-select {
+	min-width: 4.5rem;
+}
+.dags-page-size-label .custom-select-trigger {
+	box-sizing: border-box;
+	height: 36px;
+	min-width: 4.5rem;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 10px;
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+}
+.dags-refresh-btn {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	min-width: 36px;
+	min-height: 36px;
+	padding: 0;
+	margin: 0;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	transition:
+		background var(--transition-fast, 160ms ease),
+		border-color var(--transition-fast, 160ms ease),
+		color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		opacity var(--transition-fast, 160ms ease);
+}
+.dags-refresh-btn:hover:not(:disabled) {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: var(--surface-muted, #f0efe9);
+}
+.dags-refresh-btn:active:not(:disabled) {
+	background: color-mix(
+		in srgb,
+		var(--surface-muted, #f0efe9) 80%,
+		var(--hairline, #e6e5e0)
+	);
+}
+.dags-pagination.is-busy {
+	opacity: 0.92;
+}
+.dags-degraded-banner:not([hidden]) {
+	border: 1px solid color-mix(in srgb, #c45c26 35%, var(--hairline, #e2dcd4));
+	background: color-mix(in srgb, #c45c26 8%, var(--surface, #fff));
+	color: var(--ink, #1c1917);
+	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+	margin-bottom: var(--space-3, 0.75rem);
+}
+.dags-history-row.clickable {
+	cursor: pointer;
+}
+@media (max-width: 720px) {
+	.dags-pagination {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.dags-pagination-summary {
+		flex: 1 1 auto;
+		justify-self: auto;
+	}
+	.dags-pagination-tools {
+		flex: 0 0 auto;
+		margin-left: auto;
+		justify-self: auto;
+	}
+	.dags-pagination-pages {
+		order: 3;
+		flex: 0 0 auto;
+		flex-wrap: nowrap;
+		width: max-content;
+		max-width: 100%;
+		margin-inline: auto;
+		justify-content: center;
+		justify-self: auto;
+		gap: 1px;
+		padding: 3px;
+	}
+	.dags-page-num,
+	.dags-page-nav {
+		width: 28px;
+		height: 28px;
+		min-width: 28px;
+		min-height: 28px;
+		border-radius: 8px;
+		font-size: 12px;
+	}
+	.dags-page-num i,
+	.dags-page-nav i {
+		font-size: 15px;
+	}
+	.dags-page-ellipsis {
+		width: 16px;
+		min-width: 16px;
+		height: 28px;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.dags-copy-btn,
+	.dags-page-num,
+	.dags-page-nav,
+	.dags-refresh-btn,
+	.dags-page-size-label select,
+	.dags-page-size-label .custom-select-trigger,
+	.dags-copy-toast,
+	.custom-select-trigger,
+	.custom-select-chevron,
+	.custom-select-menu {
+		transition: none !important;
+		transform: none !important;
+		animation: none !important;
+	}
+	.custom-select.is-open .custom-select-chevron {
+		transform: none !important;
+	}
+}
+
+/* Shared custom select (DAG history pageSize + inspector attempt). */
+.custom-select {
+	position: relative;
+	display: inline-flex;
+	vertical-align: middle;
+	min-width: 4.5rem;
+}
+.custom-select-trigger {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.35rem;
+	width: 100%;
+	height: 36px;
+	min-height: 36px;
+	padding: 0 0.55rem 0 0.65rem;
+	margin: 0;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 10px;
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	box-shadow: 0 1px 2px color-mix(in srgb, var(--ink, #26251e) 4%, transparent);
+	transition:
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		background var(--transition-fast, 160ms ease);
+}
+.custom-select-trigger:hover:not(:disabled) {
+	background: var(--surface-muted, #f0efe9);
+	border-color: var(--hairline-strong, #cfcdc4);
+}
+.custom-select-trigger:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--orange, #f54e00) 55%, transparent);
+	outline-offset: 1px;
+}
+.custom-select-trigger:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.custom-select-value {
+	flex: 1 1 auto;
+	min-width: 0;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.custom-select-chevron {
+	flex: 0 0 auto;
+	font-size: 16px;
+	line-height: 1;
+	color: var(--muted, #807d72);
+	transition: transform var(--transition-fast, 160ms ease);
+	pointer-events: none;
+}
+.custom-select.is-open .custom-select-chevron {
+	transform: rotate(180deg);
+}
+.custom-select-menu {
+	box-sizing: border-box;
+	position: absolute;
+	z-index: 40;
+	display: flex;
+	flex-direction: column;
+	min-width: 100%;
+	max-height: calc(6 * 38px + 8px);
+	padding: 4px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 12px;
+	background: color-mix(in srgb, var(--surface, #ffffff) 96%, transparent);
+	backdrop-filter: blur(8px);
+	box-shadow:
+		0 4px 16px color-mix(in srgb, var(--ink, #26251e) 10%, transparent),
+		0 1px 3px color-mix(in srgb, var(--ink, #26251e) 6%, transparent);
+}
+.custom-select-menu[hidden] {
+	display: none !important;
+}
+.custom-select-option {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	min-height: 38px;
+	height: 38px;
+	padding: 0 0.65rem;
+	border-radius: 8px;
+	color: var(--ink, #26251e);
+	font-size: 13px;
+	line-height: 1.2;
+	cursor: pointer;
+	user-select: none;
+}
+.custom-select-option:hover,
+.custom-select-option.is-active {
+	background: var(--surface-muted, #f0efe9);
+}
+.custom-select-option.is-selected {
+	background: var(--orange-soft, #fff1ea);
+	color: var(--orange-active, #d04200);
+	font-weight: 600;
+}
+.custom-select-option.is-selected.is-active,
+.custom-select-option.is-selected:hover {
+	background: color-mix(
+		in srgb,
+		var(--orange-soft, #fff1ea) 70%,
+		var(--surface-muted, #f0efe9)
+	);
+}
+.custom-select-option-label {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.custom-select-option-check {
+	flex: 0 0 auto;
+	font-size: 15px;
+	line-height: 1;
+	opacity: 0;
+	color: var(--orange-active, #d04200);
+}
+.custom-select-option.is-selected .custom-select-option-check {
+	opacity: 1;
+}