@durablex/react-ui 0.1.0-beta.3

package/src/styles.css

@@ -0,0 +1,2204 @@
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@theme {
+    --spacing: 0.2rem;
+    --shadow-2xs: 0 0 #0000;
+    --shadow-xs: 0 0 #0000;
+    --shadow-sm: 0 0 #0000;
+    --shadow-md: 0 0 #0000;
+    --shadow-lg: 0 0 #0000;
+    --shadow-xl: 0 0 #0000;
+    --shadow-2xl: 0 0 #0000;
+}
+
+:root {
+    --radius: 0rem;
+    --background: oklch(0.985 0.001 250);
+    --foreground: oklch(0.205 0.005 260);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.205 0.005 260);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.205 0.005 260);
+    --primary: oklch(0.52 0.2 277);
+    --primary-foreground: oklch(0.985 0.005 277);
+    --secondary: oklch(0.962 0.002 260);
+    --secondary-foreground: oklch(0.255 0.005 260);
+    --muted: oklch(0.967 0.002 260);
+    --muted-foreground: oklch(0.52 0.007 260);
+    --accent: oklch(0.958 0.003 260);
+    --accent-foreground: oklch(0.255 0.005 260);
+    --destructive: oklch(0.553 0.21 26);
+    --destructive-foreground: oklch(0.985 0.004 26);
+    --border: oklch(0.917 0.003 260);
+    --input: oklch(0.917 0.003 260);
+    --ring: oklch(0.52 0.2 277);
+    --chart-1: oklch(0.52 0.2 277);
+    --chart-2: oklch(0.64 0.12 195);
+    --chart-3: oklch(0.61 0.145 145);
+    --chart-4: oklch(0.705 0.13 75);
+    --chart-5: oklch(0.59 0.17 15);
+    --sidebar: oklch(0.974 0.002 260);
+    --sidebar-foreground: oklch(0.3 0.005 260);
+    --sidebar-primary: oklch(0.52 0.2 277);
+    --sidebar-primary-foreground: oklch(0.985 0.002 260);
+    --sidebar-accent: oklch(0.94 0.003 260);
+    --sidebar-accent-foreground: oklch(0.205 0.005 260);
+    --sidebar-border: oklch(0.917 0.003 260);
+    --sidebar-ring: oklch(0.52 0.2 277);
+    --dx-fault: oklch(0.553 0.21 26);
+
+    /* run/step status palette (bg + fg). "waiting" mirrors "running". */
+    --st-queued-bg: oklch(0.95 0.009 260);
+    --st-queued-fg: oklch(0.47 0.018 260);
+    --st-running-bg: oklch(0.94 0.043 245);
+    --st-running-fg: oklch(0.5 0.155 252);
+    --st-waiting-bg: oklch(0.94 0.043 245);
+    --st-waiting-fg: oklch(0.5 0.155 252);
+    --st-succeeded-bg: oklch(0.945 0.048 158);
+    --st-succeeded-fg: oklch(0.48 0.125 159);
+    --st-failed-bg: oklch(0.952 0.033 26);
+    --st-failed-fg: oklch(0.53 0.205 27);
+    --st-cancelled-bg: oklch(0.952 0.003 260);
+    --st-cancelled-fg: oklch(0.54 0.009 260);
+    --st-skipped-bg: oklch(0.964 0.0025 260);
+    --st-skipped-fg: oklch(0.6 0.007 260);
+    --st-paused-bg: oklch(0.952 0.044 85);
+    --st-paused-fg: oklch(0.52 0.12 75);
+    --st-scheduled-bg: oklch(0.95 0.032 292);
+    --st-scheduled-fg: oklch(0.52 0.16 292);
+}
+
+.dark {
+    --background: oklch(0.165 0.004 255);
+    --foreground: oklch(0.962 0.003 255);
+    --card: oklch(0.196 0.005 255);
+    --card-foreground: oklch(0.962 0.003 255);
+    --popover: oklch(0.196 0.005 255);
+    --popover-foreground: oklch(0.962 0.003 255);
+    --primary: oklch(0.66 0.17 277);
+    --primary-foreground: oklch(0.18 0.03 277);
+    --secondary: oklch(0.25 0.006 255);
+    --secondary-foreground: oklch(0.962 0.003 255);
+    --muted: oklch(0.235 0.006 255);
+    --muted-foreground: oklch(0.68 0.009 255);
+    --accent: oklch(0.258 0.007 255);
+    --accent-foreground: oklch(0.962 0.003 255);
+    --destructive: oklch(0.62 0.19 26);
+    --destructive-foreground: oklch(0.985 0.004 26);
+    --border: oklch(0.275 0.007 255);
+    --input: oklch(0.3 0.008 255);
+    --ring: oklch(0.66 0.17 277);
+    --chart-1: oklch(0.66 0.17 277);
+    --chart-2: oklch(0.7 0.12 195);
+    --chart-3: oklch(0.68 0.145 145);
+    --chart-4: oklch(0.76 0.13 75);
+    --chart-5: oklch(0.66 0.17 15);
+    --sidebar: oklch(0.185 0.005 255);
+    --sidebar-foreground: oklch(0.78 0.007 255);
+    --sidebar-primary: oklch(0.66 0.17 277);
+    --sidebar-primary-foreground: oklch(0.985 0.002 255);
+    --sidebar-accent: oklch(0.248 0.007 255);
+    --sidebar-accent-foreground: oklch(0.962 0.003 255);
+    --sidebar-border: oklch(0.258 0.007 255);
+    --sidebar-ring: oklch(0.66 0.17 277);
+    --dx-fault: oklch(0.7 0.175 27);
+
+    --st-queued-bg: oklch(0.272 0.018 255);
+    --st-queued-fg: oklch(0.76 0.042 255);
+    --st-running-bg: oklch(0.285 0.056 250);
+    --st-running-fg: oklch(0.8 0.128 245);
+    --st-waiting-bg: oklch(0.285 0.056 250);
+    --st-waiting-fg: oklch(0.8 0.128 245);
+    --st-succeeded-bg: oklch(0.28 0.056 159);
+    --st-succeeded-fg: oklch(0.81 0.14 160);
+    --st-failed-bg: oklch(0.29 0.072 26);
+    --st-failed-fg: oklch(0.79 0.155 28);
+    --st-cancelled-bg: oklch(0.262 0.005 255);
+    --st-cancelled-fg: oklch(0.66 0.01 255);
+    --st-skipped-bg: oklch(0.232 0.005 255);
+    --st-skipped-fg: oklch(0.58 0.008 255);
+    --st-paused-bg: oklch(0.29 0.05 85);
+    --st-paused-fg: oklch(0.8 0.12 85);
+    --st-scheduled-bg: oklch(0.285 0.05 292);
+    --st-scheduled-fg: oklch(0.8 0.13 292);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+  /* Tailwind v4 Preflight drops the default pointer cursor on buttons; restore it. */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+    }
+}
+
+/* Pin the shell to the viewport so scrolling stays inside the sidebar, run list,
+   and detail sheet, never the whole page. (!important beats SidebarProvider's
+   inline --sidebar-width.) */
+[data-slot="sidebar-wrapper"] {
+  --sidebar-width: 12rem !important;
+  height: 100svh;
+  overflow: hidden;
+}
+
+/* sharp everywhere: un-layered so it wins over Tailwind's rounded-* utility layer */
+*,
+::before,
+::after {
+  border-radius: 0;
+}
+
+/* slim resize divider: drop the grab knob and the handle's own line so the only
+   divider is the detail panel's hairline left border; the handle stays an
+   invisible drag strip. */
+[data-slot="resizable-handle"] {
+  background-color: transparent;
+}
+[data-slot="resizable-handle"] > div {
+  display: none;
+}
+
+/* brand mark: loops a crash -> resume cycle (the Resume-D telling its own story) */
+.dx-mark .dx-bars,
+.dx-mark .dx-fault,
+.dx-mark .dx-resume {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.dx-mark .dx-resume {
+  transform-origin: 13px 12px;
+}
+.dx-mark .dx-fault {
+  opacity: 0;
+}
+.dx-mark .dx-bars {
+  animation: dx-bars-glitch 4s linear infinite;
+}
+.dx-mark .dx-fault {
+  animation: dx-fault-flash 4s linear infinite;
+}
+.dx-mark .dx-resume {
+  animation: dx-resume-cycle 4s linear infinite;
+}
+@keyframes dx-bars-glitch {
+  0%, 54% { transform: translateX(0); }
+  56% { transform: translateX(0.7px); }
+  58% { transform: translateX(-0.5px); }
+  60% { transform: translateX(0.3px); }
+  62%, 100% { transform: translateX(0); }
+}
+@keyframes dx-fault-flash {
+  0%, 54% { opacity: 0; transform: translateX(0); }
+  56% { opacity: 0.92; transform: translateX(0.9px); }
+  59% { opacity: 0.5; transform: translateX(-0.6px); }
+  62%, 100% { opacity: 0; }
+}
+@keyframes dx-resume-cycle {
+  0%, 40% { opacity: 1; transform: scaleX(1); }
+  44% { opacity: 1; transform: scaleX(1.04); }
+  48%, 62% { opacity: 0; transform: scaleX(0.55) translateX(-1px); }
+  70% { opacity: 1; transform: scaleX(0.55); }
+  82% { transform: scaleX(1.05); }
+  88%, 100% { opacity: 1; transform: scaleX(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dx-mark .dx-bars,
+  .dx-mark .dx-fault,
+  .dx-mark .dx-resume {
+    animation: none;
+  }
+  .dx-mark .dx-fault {
+    opacity: 0;
+  }
+  .dx-mark .dx-resume {
+    opacity: 1;
+  }
+}
+
+/* in-app resume mark: status heartbeat (run) + crash->resume loader (load).
+   Smaller/faster than the brand logo; tinted per status via --dxm-accent. */
+.dxmark {
+  display: inline-grid;
+  place-items: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.dxmark svg {
+  display: block;
+}
+.dxmark .dxm-fault {
+  opacity: 0;
+}
+.dxm-run .dxm-tri {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: dxmPulse 1.5s ease-in-out infinite;
+}
+@keyframes dxmPulse {
+  0%, 100% { opacity: 0.5; transform: scale(0.84); }
+  50% { opacity: 1; transform: scale(1); }
+}
+.dxm-load .dxm-bars {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: dxmLoadBars 1.3s linear infinite;
+}
+.dxm-load .dxm-fault {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: dxmLoadFault 1.3s linear infinite;
+}
+.dxm-load .dxm-tri {
+  transform-box: fill-box;
+  transform-origin: 13px 12px;
+  animation: dxmLoadTri 1.3s linear infinite;
+}
+@keyframes dxmLoadBars {
+  0%, 52% { transform: translateX(0); }
+  58% { transform: translateX(0.8px); }
+  63% { transform: translateX(-0.5px); }
+  68%, 100% { transform: translateX(0); }
+}
+@keyframes dxmLoadFault {
+  0%, 52% { opacity: 0; }
+  58% { opacity: 0.92; }
+  65% { opacity: 0; }
+  100% { opacity: 0; }
+}
+@keyframes dxmLoadTri {
+  0%, 40% { opacity: 1; transform: scaleX(1); }
+  48%, 60% { opacity: 0; transform: scaleX(0.5) translateX(-1px); }
+  70% { opacity: 1; transform: scaleX(0.5); }
+  84%, 100% { opacity: 1; transform: scaleX(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dxmark .dxm-bars,
+  .dxmark .dxm-tri,
+  .dxmark .dxm-fault {
+    animation: none !important;
+  }
+  .dxmark .dxm-fault {
+    opacity: 0;
+  }
+}
+
+/* status badge: tint the live mark to the running/waiting status colour
+   (running and waiting share the same --st token values) */
+.badge-mark {
+  color: var(--st-running-fg);
+  --dxm-accent: var(--st-running-fg);
+}
+
+/* stat tiles: the Active tile's live mark carries the running colour */
+.stat-mark {
+  color: var(--st-running-fg);
+  --dxm-accent: var(--st-running-fg);
+}
+
+/* ── Runs filter bar (search field + time/status/app/run-type dropdowns) ─── */
+.focusable:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -1px;
+  position: relative;
+  z-index: 2;
+}
+.filterbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.fb-spacer {
+  flex: 1;
+}
+.fb-meta {
+  font-size: 11.5px;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.fb-btn {
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.fb-btn:hover {
+  background: var(--accent);
+}
+.fb-btn svg {
+  width: 13px;
+  height: 13px;
+  opacity: 0.75;
+}
+.fb-search-field {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  width: 212px;
+  flex: 0 0 auto;
+}
+.fb-search-field svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+}
+.fb-search-field input {
+  border: 0;
+  background: transparent;
+  outline: none;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 12.5px;
+  width: 100%;
+}
+.fb-search-field input::placeholder {
+  color: var(--muted-foreground);
+}
+.fb-search-field .x {
+  cursor: pointer;
+  opacity: 0.6;
+  display: inline-grid;
+  place-items: center;
+}
+.fb-search-field .x:hover {
+  opacity: 1;
+}
+.fb-search-field:focus-within {
+  border-color: var(--ring);
+}
+.dd {
+  position: relative;
+  display: inline-flex;
+}
+.dd-btn {
+  height: 26px;
+  padding: 0 7px 0 9px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.dd-btn:hover {
+  background: var(--accent);
+}
+.dd-btn[data-open='1'] {
+  border-color: var(--ring);
+  background: var(--accent);
+}
+.dd-btn .dd-key {
+  color: var(--muted-foreground);
+}
+.dd-btn .dd-val {
+  font-weight: 500;
+}
+.dd-btn .dd-val .vdot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.dd-btn .dd-chev {
+  width: 12px;
+  height: 12px;
+  opacity: 0.6;
+  margin-left: 1px;
+}
+.dd-menu {
+  position: absolute;
+  top: calc(100% + 3px);
+  left: 0;
+  z-index: 40;
+  min-width: 184px;
+  max-height: 320px;
+  overflow: auto;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+}
+.dd-menu.right {
+  left: auto;
+  right: 0;
+}
+.dd-search {
+  padding: 7px;
+  border-bottom: 1px solid var(--border);
+}
+.dd-search input {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--foreground);
+  font: inherit;
+  font-size: 12px;
+  padding: 0 8px;
+  outline: none;
+}
+.dd-search input:focus {
+  border-color: var(--ring);
+}
+.dd-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: var(--popover-foreground);
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+}
+.dd-item:hover {
+  background: var(--accent);
+}
+.dd-item .dd-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dd-item .dd-lbl {
+  flex: 1;
+}
+.dd-item .dd-rt {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+.dd-item .dd-check {
+  width: 13px;
+  height: 13px;
+  color: var(--primary);
+  flex-shrink: 0;
+}
+.dd-item[data-on='1'] {
+  font-weight: 500;
+}
+.dd-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 0;
+}
+/* ── Stat tiles ────────────────────────────────────────────────────────── */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.stat {
+  padding: 9px 13px 10px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--card);
+}
+.stat:last-child {
+  border-right: 0;
+}
+.stat-btn {
+  font: inherit;
+  text-align: left;
+  width: 100%;
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 0;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.stat-btn:hover {
+  background: var(--muted);
+}
+.stat-btn[data-active='1'] {
+  background: var(--muted);
+}
+.stat-top {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.stat-dot {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+}
+.stat-label {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--muted-foreground);
+}
+.stat-val {
+  font-family: var(--font-mono);
+  font-size: 23px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--foreground);
+}
+.stat-sub {
+  font-size: 11px;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.stat-sub .up {
+  color: var(--st-succeeded-fg);
+}
+.stat-sub .down {
+  color: var(--st-failed-fg);
+}
+
+/* ── Runs table ────────────────────────────────────────────────────────── */
+.tablewrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+table.runs {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+table.runs thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  text-align: left;
+  padding: 5px 11px;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border);
+  user-select: none;
+}
+table.runs thead th.sortable {
+  cursor: pointer;
+}
+table.runs thead th.sortable:hover {
+  color: var(--foreground);
+}
+table.runs thead th .arrow {
+  color: var(--primary);
+  margin-left: 3px;
+}
+table.runs thead th.num,
+table.runs td.num {
+  text-align: right;
+}
+table.runs tbody td {
+  padding: 0 11px;
+  height: 27px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+table.runs tbody tr {
+  cursor: pointer;
+}
+table.runs tbody tr:hover td {
+  background: var(--accent);
+}
+table.runs tbody tr[data-selected='1'] td {
+  background: color-mix(in oklch, var(--primary) 13%, var(--card));
+}
+table.runs tbody tr[data-selected='1'] td:first-child {
+  box-shadow: inset 2px 0 0 var(--primary);
+}
+table.runs td.row-actions {
+  width: 1%;
+  text-align: right;
+  padding-right: 8px;
+}
+.row-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  font-size: 11px;
+  color: var(--muted-foreground);
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  opacity: 0;
+}
+table.runs tbody tr:hover .row-action,
+table.runs tbody tr:focus-within .row-action {
+  opacity: 1;
+}
+.row-action:hover {
+  color: var(--foreground);
+  border-color: var(--border);
+  background: var(--card);
+}
+.wf-cell {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.wf-name {
+  font-weight: 500;
+  color: var(--foreground);
+}
+.cell-mut {
+  color: var(--muted-foreground);
+}
+.step-cell {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted-foreground);
+}
+.step-cell .ix {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+.run-err {
+  color: var(--st-failed-fg);
+  font-size: 11.5px;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dur,
+.ts {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+
+/* runs table branded loader */
+.runloader {
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 60px 0;
+}
+.loadmark {
+  color: var(--foreground);
+  --dxm-accent: var(--primary);
+}
+.runloader-cap {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.02em;
+  color: var(--muted-foreground);
+}
+
+/* runs table empty / error placeholder */
+.placeholder {
+  display: grid;
+  place-items: center;
+  padding: 40px;
+}
+.ph-inner {
+  text-align: center;
+  max-width: 280px;
+  color: var(--muted-foreground);
+}
+.ph-inner .ico {
+  width: 30px;
+  height: 30px;
+  margin: 0 auto 12px;
+  color: var(--muted-foreground);
+  opacity: 0.7;
+}
+.ph-inner h3 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 0 0 5px;
+}
+.ph-inner p {
+  font-size: 12px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Pagination ────────────────────────────────────────────────────────── */
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--background);
+}
+.pager-range {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+.pager-range .pg-mut {
+  color: var(--muted-foreground);
+}
+.pager-nav {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.pg-btn {
+  min-width: 25px;
+  height: 25px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  display: inline-grid;
+  place-items: center;
+}
+.pg-btn:hover:not(:disabled) {
+  background: var(--accent);
+}
+.pg-btn[data-on='1'] {
+  background: var(--accent);
+  border-color: var(--border);
+  font-weight: 600;
+}
+.pg-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.pg-btn svg {
+  width: 13px;
+  height: 13px;
+}
+.pg-ellipsis {
+  color: var(--muted-foreground);
+  padding: 0 3px;
+  font-size: 12px;
+}
+
+/* ── Run detail panel ──────────────────────────────────────────────────── */
+.tnum {
+  font-variant-numeric: tabular-nums;
+}
+.btn {
+  height: 28px;
+  padding: 0 11px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn:hover {
+  background: var(--accent);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn svg {
+  width: 14px;
+  height: 14px;
+}
+.iconbtn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--muted-foreground);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.iconbtn:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+.iconbtn svg {
+  width: 15px;
+  height: 15px;
+}
+
+.run-panel {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--card);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+.panel-head {
+  border-bottom: 1px solid var(--border);
+  padding: 7px 12px 8px;
+  flex-shrink: 0;
+}
+.panel-head .ph-top {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.panel-head h2 {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: -0.01em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.panel-head h2 .h2-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.panel-head .ph-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+}
+.ph-status {
+  margin-top: 9px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+.ph-status .runid {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--muted-foreground);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+.ph-status .runid .runid-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ph-status .runid .copy {
+  cursor: pointer;
+  opacity: 0.7;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.ph-status .runid .copy:hover {
+  opacity: 1;
+  color: var(--foreground);
+}
+.panel-body {
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.metagrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--border);
+}
+.meta {
+  padding: 3px 11px 4px;
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.metagrid .meta:nth-child(2n) {
+  border-right: 0;
+}
+.metagrid .meta:nth-last-child(-n + 2) {
+  border-bottom: 0;
+}
+.meta-k {
+  font-size: 10.5px;
+  color: var(--muted-foreground);
+  letter-spacing: 0.02em;
+}
+.meta-v {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.meta-v.err {
+  color: var(--st-failed-fg);
+}
+
+.flowctl {
+  border-bottom: 1px solid var(--border);
+}
+.fc-rows {
+  display: flex;
+  flex-direction: column;
+}
+.fc-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 11px 5px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+}
+.fc-row:last-child {
+  border-bottom: 0;
+}
+.fc-label {
+  flex: 0 0 92px;
+  color: var(--muted-foreground);
+  font-size: 10.5px;
+  letter-spacing: 0.02em;
+}
+.fc-value {
+  font-family: var(--font-mono);
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+.fc-key {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+.fc-live {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--st-running-fg);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.flowsum {
+  border-top: 1px solid var(--border);
+}
+
+.section {
+  border-bottom: 1px solid var(--border);
+}
+.io-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  padding: 0 13px;
+}
+.io-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  padding: 6px 0;
+  margin-right: 16px;
+  cursor: pointer;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: 0;
+  border-bottom: 1.5px solid transparent;
+  margin-bottom: -1px;
+}
+.io-tab[data-on='1'] {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+  font-weight: 500;
+}
+.io-tab[data-kind='error'] {
+  color: var(--st-failed-fg);
+}
+.io-tab[data-kind='error'][data-on='1'] {
+  border-bottom-color: var(--destructive);
+}
+.io-null {
+  margin-left: 5px;
+  opacity: 0.6;
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.jsonwrap {
+  background: color-mix(in oklch, var(--foreground) 5%, var(--card));
+  position: relative;
+}
+.json {
+  margin: 0;
+  padding: 12px 14px 13px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.7;
+  color: var(--foreground);
+  overflow-x: auto;
+  white-space: pre;
+  font-variant-numeric: tabular-nums;
+  tab-size: 2;
+}
+.json .nul {
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+/* steps section header + list/flow toggle */
+.steps-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 13px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--card);
+  z-index: 1;
+}
+.steps-head .sec-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted-foreground);
+}
+.steps-prog {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+  border: 1px solid var(--border);
+  padding: 0 6px;
+  line-height: 17px;
+}
+.steps-prog .sp-sep {
+  color: var(--muted-foreground);
+  margin: 0 1px;
+}
+.steps-seg {
+  margin-left: auto;
+  display: flex;
+  border: 1px solid var(--border);
+}
+.seg-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 4px 9px;
+  cursor: pointer;
+  background: var(--card);
+  color: var(--muted-foreground);
+  border: 0;
+  border-right: 1px solid var(--border);
+}
+.seg-btn:last-child {
+  border-right: 0;
+}
+.seg-btn:hover {
+  color: var(--foreground);
+}
+.seg-btn[aria-selected='true'] {
+  background: var(--accent);
+  color: var(--foreground);
+}
+.seg-ico {
+  width: 12px;
+  height: 12px;
+}
+.steplist {
+  padding: 0;
+}
+.steps-empty,
+.steps-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+/* per-step status palette (shared by list rows + flow nodes) */
+.step[data-status='succeeded'],
+.flow-node[data-status='succeeded'] {
+  --step-c: var(--st-succeeded-fg);
+  --step-bg: var(--st-succeeded-bg);
+}
+.step[data-status='failed'],
+.flow-node[data-status='failed'] {
+  --step-c: var(--st-failed-fg);
+  --step-bg: var(--st-failed-bg);
+}
+.step[data-status='running'],
+.flow-node[data-status='running'] {
+  --step-c: var(--st-running-fg);
+  --step-bg: var(--st-running-bg);
+}
+.step[data-status='waiting'],
+.flow-node[data-status='waiting'] {
+  --step-c: var(--st-waiting-fg);
+  --step-bg: var(--st-waiting-bg);
+}
+.step[data-status='queued'],
+.flow-node[data-status='queued'] {
+  --step-c: var(--st-queued-fg);
+  --step-bg: var(--st-queued-bg);
+}
+.step[data-status='cancelled'],
+.flow-node[data-status='cancelled'] {
+  --step-c: var(--st-cancelled-fg);
+  --step-bg: var(--st-cancelled-bg);
+}
+.step[data-status='skipped'],
+.flow-node[data-status='skipped'] {
+  --step-c: var(--st-skipped-fg);
+  --step-bg: var(--st-skipped-bg);
+}
+.step[data-status='paused'],
+.flow-node[data-status='paused'] {
+  --step-c: var(--st-paused-fg);
+  --step-bg: var(--st-paused-bg);
+}
+
+.step {
+  position: relative;
+  border-bottom: 1px solid color-mix(in oklch, var(--foreground) 11%, var(--card));
+}
+.step:last-child {
+  border-bottom: 0;
+}
+.step::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--step-c);
+  opacity: 0.4;
+  transition:
+    opacity 0.12s,
+    width 0.12s;
+}
+.step[data-status='skipped']::before,
+.step[data-status='queued']::before {
+  opacity: 0.22;
+}
+.step.open::before,
+.step[data-status='failed']::before {
+  opacity: 1;
+}
+.step.open::before {
+  width: 3px;
+  left: 0;
+}
+.step-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 13px;
+  cursor: pointer;
+  width: 100%;
+  background: transparent;
+  border: 0;
+  color: var(--foreground);
+  text-align: left;
+}
+.step-row.static {
+  cursor: default;
+}
+.step-row:not(.static):hover {
+  background: var(--accent);
+}
+.step-node {
+  width: 19px;
+  height: 19px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  background: var(--step-bg);
+  color: var(--step-c);
+  border: 1px solid color-mix(in oklch, var(--step-c) 28%, transparent);
+}
+.step[data-status='skipped'] .step-node {
+  border-style: dashed;
+}
+.step-gly {
+  width: 12px;
+  height: 12px;
+}
+.step-ix {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--muted-foreground);
+  width: 13px;
+  flex-shrink: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+.step-name {
+  font-size: 12.5px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.step.open .step-name {
+  font-weight: 600;
+}
+.step[data-status='skipped'] .step-name,
+.step[data-status='queued'] .step-name {
+  color: var(--muted-foreground);
+}
+.step[data-current='1']:not(.open) .step-row {
+  background: color-mix(in oklch, var(--step-bg) 38%, transparent);
+}
+.step-meta {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.step-status {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--step-c);
+}
+.step-att {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
+  padding: 0 4px;
+  line-height: 15px;
+}
+.step-dur {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  min-width: 44px;
+  text-align: right;
+}
+.step-chev {
+  width: 12px;
+  height: 12px;
+  color: var(--muted-foreground);
+  transition: transform 0.14s;
+}
+.step.open .step-chev {
+  transform: rotate(90deg);
+  color: var(--foreground);
+}
+.step-chev-sp {
+  width: 12px;
+  flex-shrink: 0;
+}
+.step.open {
+  background: color-mix(in oklch, var(--step-bg) 24%, var(--card));
+}
+.step.open .step-row:hover {
+  background: transparent;
+}
+.step-body {
+  border-top: 1px solid color-mix(in oklch, var(--step-c) 22%, var(--border));
+  background: var(--card);
+}
+.step-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 13px;
+}
+.step-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--border);
+  background: var(--muted);
+}
+.step-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 6px 0;
+  margin-right: 16px;
+  cursor: pointer;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: 0;
+  border-bottom: 1.5px solid transparent;
+  margin-bottom: -1px;
+}
+.step-tab:hover {
+  color: var(--foreground);
+}
+.step-tab[aria-selected='true'] {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
+.step-tab[data-kind='error'] {
+  color: var(--st-failed-fg);
+}
+.step-tab[data-kind='error'][aria-selected='true'] {
+  border-bottom-color: var(--destructive);
+}
+.step-tab-ico {
+  width: 12px;
+  height: 12px;
+}
+.errbox {
+  margin: 0;
+  padding: 11px 14px 12px;
+  border-left: 2px solid var(--destructive);
+  background: color-mix(in oklch, var(--destructive) 6%, var(--card));
+  color: color-mix(in oklch, var(--st-failed-fg) 88%, var(--foreground));
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  tab-size: 2;
+}
+
+/* ── Step flow view (vertical node graph) ──────────────────────────────── */
+.stepflow {
+  display: flex;
+  flex-direction: column;
+}
+.flow-canvas {
+  padding: 10px 12px 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--muted);
+  background-image: radial-gradient(
+    color-mix(in oklch, var(--foreground) 11%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: 13px 13px;
+  border-bottom: 1px solid var(--border);
+}
+.flow-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  font-weight: 600;
+  background: var(--card);
+  border: 1px dashed var(--border);
+  padding: 3px 9px;
+  width: 100%;
+  max-width: 280px;
+}
+.flow-trigger-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted-foreground);
+  flex-shrink: 0;
+}
+.flow-trigger-wf {
+  margin-left: auto;
+  text-transform: none;
+  letter-spacing: 0;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--foreground);
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flow-edge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 13px;
+  --edge-c: var(--muted-foreground);
+}
+.flow-edge[data-status='succeeded'] {
+  --edge-c: var(--st-succeeded-fg);
+}
+.flow-edge[data-status='failed'] {
+  --edge-c: var(--st-failed-fg);
+}
+.flow-edge[data-status='cancelled'] {
+  --edge-c: var(--st-cancelled-fg);
+}
+.flow-edge[data-status='trigger'] {
+  --edge-c: color-mix(in oklch, var(--foreground) 40%, transparent);
+}
+.flow-edge[data-status='skipped'],
+.flow-edge[data-status='queued'],
+.flow-edge[data-status='waiting'],
+.flow-edge[data-status='running'] {
+  --edge-c: color-mix(in oklch, var(--foreground) 26%, transparent);
+}
+.fe-line {
+  flex: 1;
+  width: 1px;
+  background: var(--edge-c);
+}
+.flow-edge[data-status='skipped'] .fe-line,
+.flow-edge[data-status='queued'] .fe-line {
+  width: 0;
+  border-left: 1px dashed var(--edge-c);
+}
+.fe-arrow {
+  width: 10px;
+  height: 10px;
+  color: var(--edge-c);
+  transform: rotate(90deg);
+  margin-top: -3px;
+}
+.flow-node {
+  position: relative;
+  width: 100%;
+  max-width: 280px;
+  text-align: left;
+  cursor: pointer;
+  background: var(--card);
+  border: 1px solid var(--border);
+  padding: 4px 9px 4px 11px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--foreground);
+  font: inherit;
+}
+.flow-node:hover {
+  border-color: color-mix(in oklch, var(--step-c) 55%, var(--border));
+}
+.flow-node.sel {
+  border-color: var(--step-c);
+  background: color-mix(in oklch, var(--step-bg) 26%, var(--card));
+}
+.fn-rail {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--step-c);
+  opacity: 0.45;
+}
+.flow-node[data-status='failed'] .fn-rail,
+.flow-node.sel .fn-rail {
+  opacity: 1;
+}
+.flow-node[data-status='skipped'] .fn-rail,
+.flow-node[data-status='queued'] .fn-rail {
+  opacity: 0.25;
+}
+.flow-node.sel .fn-rail {
+  width: 3px;
+}
+.fn-node {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  background: var(--step-bg);
+  color: var(--step-c);
+  border: 1px solid color-mix(in oklch, var(--step-c) 28%, transparent);
+}
+.flow-node[data-status='skipped'] .fn-node {
+  border-style: dashed;
+}
+.fn-gly {
+  width: 9px;
+  height: 9px;
+}
+.fn-name {
+  font-weight: 500;
+  font-size: 11.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.flow-node.sel .fn-name {
+  font-weight: 600;
+}
+.flow-node[data-status='skipped'] .fn-name,
+.flow-node[data-status='queued'] .fn-name {
+  color: var(--muted-foreground);
+}
+.fn-att {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
+  padding: 0 3px;
+  line-height: 13px;
+  flex-shrink: 0;
+}
+.fn-status {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--step-c);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.fn-dur {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+.fn-errflag {
+  width: 12px;
+  height: 12px;
+  color: var(--st-failed-fg);
+  flex-shrink: 0;
+}
+.flow-inspect {
+  background: var(--card);
+}
+.fi-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 13px;
+  border-bottom: 1px solid var(--border);
+}
+.fi-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--muted-foreground);
+}
+.fi-dot[data-status='succeeded'] {
+  background: var(--st-succeeded-fg);
+}
+.fi-dot[data-status='failed'] {
+  background: var(--st-failed-fg);
+}
+.fi-dot[data-status='running'] {
+  background: var(--st-running-fg);
+}
+.fi-dot[data-status='waiting'] {
+  background: var(--st-waiting-fg);
+}
+.fi-dot[data-status='cancelled'] {
+  background: var(--st-cancelled-fg);
+}
+.fi-dot[data-status='paused'] {
+  background: var(--st-paused-fg);
+}
+.fi-name {
+  font-weight: 600;
+  font-size: 12.5px;
+}
+.fi-meta {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.fi-retry {
+  flex-shrink: 0;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11px;
+  gap: 4px;
+}
+.fi-retry svg {
+  width: 12px;
+  height: 12px;
+}
+.fi-empty {
+  padding: 14px 13px;
+  font-size: 11.5px;
+  color: var(--muted-foreground);
+}
+
+/* ── Step timeline (Gantt) view ────────────────────────────────────────── */
+.steptl {
+  display: flex;
+  flex-direction: column;
+  --tl-label-w: 132px;
+  --tl-dur-w: 56px;
+  --tl-gap: 10px;
+}
+.tl-canvas {
+  padding: 9px 12px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.tl-axis {
+  display: grid;
+  grid-template-columns: var(--tl-label-w) 1fr var(--tl-dur-w);
+  gap: var(--tl-gap);
+  padding-bottom: 5px;
+}
+.tl-axis-scale {
+  grid-column: 2;
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  color: var(--muted-foreground);
+}
+.tl-row {
+  display: grid;
+  grid-template-columns: var(--tl-label-w) 1fr var(--tl-dur-w);
+  gap: var(--tl-gap);
+  align-items: center;
+  width: 100%;
+  padding: 5px 0;
+  background: none;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+}
+.tl-row:last-child {
+  border-bottom: 0;
+}
+.tl-row:hover {
+  background: var(--muted);
+}
+.tl-row.sel {
+  background: var(--accent);
+}
+.tl-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tl-track {
+  position: relative;
+  height: 16px;
+  overflow: hidden;
+  background-color: color-mix(in oklch, var(--foreground) 5%, transparent);
+  /* Quarter gridlines, so durations read against the axis ticks across all rows. */
+  background-image: repeating-linear-gradient(
+    to right,
+    color-mix(in oklch, var(--foreground) 11%, transparent) 0 1px,
+    transparent 1px 25%
+  );
+}
+.tl-bar {
+  position: absolute;
+  top: 3px;
+  height: 10px;
+  min-width: 2px;
+  border-radius: 2px;
+  background: var(--muted-foreground);
+}
+.tl-bar[data-status='succeeded'] {
+  background: var(--st-succeeded-fg);
+}
+.tl-bar[data-status='failed'] {
+  background: var(--st-failed-fg);
+}
+.tl-bar[data-status='running'] {
+  background: var(--st-running-fg);
+}
+.tl-bar[data-status='cancelled'] {
+  background: var(--st-cancelled-fg);
+}
+.tl-bar[data-status='skipped'] {
+  background: var(--st-skipped-fg);
+}
+.tl-bar[data-status='paused'] {
+  background: var(--st-paused-fg);
+}
+/* A waiting step (sleep / waitForEvent) is time spent parked, not working - render
+   it hatched so it reads as a gap-with-duration rather than active execution. */
+.tl-bar[data-status='waiting'] {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--st-running-fg),
+    var(--st-running-fg) 3px,
+    transparent 3px,
+    transparent 6px
+  );
+}
+.tl-skip {
+  font-size: 10px;
+  color: var(--muted-foreground);
+  padding-left: 4px;
+}
+.tl-dur {
+  font-size: 10.5px;
+  color: var(--muted-foreground);
+  text-align: right;
+}
+
+/* ── Content views (apps / workflows) ──────────────────────────────────── */
+.content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.tbar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 13px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.tbar-spacer {
+  flex: 1;
+}
+.tbar .meta {
+  font-size: 11.5px;
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.chip {
+  height: 25px;
+  padding: 0 9px;
+  border: 1px solid var(--input);
+  background: var(--card);
+  color: var(--muted-foreground);
+  font-size: 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.chip:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+.chip[data-on='1'] {
+  background: var(--accent);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+.chip svg {
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
+}
+
+/* loading / empty / error row inside table.runs */
+.table-status td {
+  height: auto;
+  padding: 18px 11px;
+  text-align: center;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+.table-status:hover td {
+  background: transparent;
+}
+
+/* ── Apps table ────────────────────────────────────────────────────────── */
+.apps-table tbody td {
+  height: 38px;
+}
+.app-row[aria-expanded='true'] td {
+  background: var(--accent);
+}
+.app-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.app-cell .app-chev {
+  width: 12px;
+  height: 12px;
+  color: var(--muted-foreground);
+  transition: transform 0.12s;
+  flex-shrink: 0;
+}
+.app-row[aria-expanded='true'] .app-chev {
+  transform: rotate(90deg);
+  color: var(--foreground);
+}
+.app-cell .sq {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  border: 1px solid color-mix(in oklch, var(--foreground) 18%, transparent);
+}
+.app-id {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.app-id .nm {
+  font-weight: 500;
+  color: var(--foreground);
+  line-height: 1.25;
+}
+.app-detailrow {
+  cursor: default;
+}
+.app-detailrow td {
+  padding: 0 !important;
+  height: auto !important;
+  background: var(--muted);
+}
+.app-detailrow:hover td {
+  background: var(--muted);
+}
+.app-detail-list {
+  padding: 13px 16px 15px;
+  border-bottom: 1px solid var(--border);
+}
+.app-sub {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted-foreground);
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.app-wf {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+.app-wf:last-child {
+  border-bottom: 0;
+}
+.app-wf-name {
+  font-size: 12px;
+  color: var(--foreground);
+  flex: 1;
+  font-weight: 500;
+}
+.runner-row-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.runner-block {
+  border-bottom: 1px solid var(--border);
+}
+.runner-block:last-child {
+  border-bottom: 0;
+}
+.runner-block .app-wf {
+  border-bottom: 0;
+}
+.runner-meta {
+  border: 1px solid var(--border);
+  margin: 0 0 8px;
+}
+
+/* ── Webhooks: sub-nav, split deliveries, detail, endpoints, receivers ─────── */
+.wh-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.wh-body { display: flex; flex: 1; min-height: 0; }
+
+.wh-subnav {
+  display: flex; align-items: stretch; gap: 4px;
+  padding: 0 13px; border-bottom: 1px solid var(--border);
+  flex-shrink: 0; background: var(--card);
+}
+.wh-tab {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 4px 8px; margin-right: 14px;
+  background: transparent; border: 0; cursor: pointer;
+  color: var(--muted-foreground); font-size: 13px; font-weight: 500;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+}
+.wh-tab:hover { color: var(--foreground); }
+.wh-tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }
+.wh-tab-ico { width: 15px; height: 15px; }
+.wh-tab[aria-selected="true"] .wh-tab-ico { color: var(--primary); }
+.wh-count {
+  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
+  padding: 2px 5px; border: 1px solid var(--border); color: var(--muted-foreground);
+  background: var(--muted);
+}
+.wh-tab[aria-selected="true"] .wh-count { color: var(--foreground); border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }
+
+.bdot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
+.sq { display: inline-block; }
+
+/* http code pill */
+.wh-code {
+  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
+  padding: 1px 6px; display: inline-block; letter-spacing: 0.01em;
+}
+.wh-code.ok   { background: var(--st-succeeded-bg); color: var(--st-succeeded-fg); }
+.wh-code.warn { background: var(--st-waiting-bg);   color: var(--st-waiting-fg); }
+.wh-code.err  { background: var(--st-failed-bg);    color: var(--st-failed-fg); }
+.wh-code.none { color: var(--muted-foreground); background: transparent; padding-left: 0; }
+
+/* event chips */
+.wh-evchips { display: flex; align-items: center; gap: 5px; min-width: 0; }
+.wh-evchips.wrap { flex-wrap: wrap; margin-top: 9px; }
+.wh-evchip {
+  font-family: var(--font-mono); font-size: 11px; color: var(--foreground);
+  padding: 2px 7px; border: 1px solid var(--border); background: var(--muted);
+  white-space: nowrap;
+}
+.wh-evmore { font-size: 11px; color: var(--muted-foreground); font-family: var(--font-mono); }
+
+/* secret / verification */
+.wh-secret { display: inline-flex; align-items: center; gap: 8px; }
+.wh-mask {
+  font-family: var(--font-sans); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--muted-foreground); border: 1px solid var(--border); padding: 1px 4px;
+}
+.wh-verify { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; }
+.wh-verify svg { width: 13px; height: 13px; }
+.wh-verify.ok { color: var(--st-succeeded-fg); }
+.wh-verify.off { color: var(--st-waiting-fg); }
+
+/* attempt timeline */
+.wh-attempts { padding: 3px 13px 5px; }
+.wh-attempt { display: flex; gap: 10px; padding: 5px 0; position: relative; }
+.wh-attempt:not(:last-child)::before {
+  content: ""; position: absolute; left: 9px; top: 22px; bottom: -1px;
+  width: 1.5px; background: var(--border);
+}
+.wh-att-node {
+  width: 19px; height: 19px; flex-shrink: 0; display: grid; place-items: center;
+  border: 1.5px solid var(--border); background: var(--card); color: var(--muted-foreground);
+  z-index: 1; margin-top: 1px;
+}
+.wh-att-gly { width: 11px; height: 11px; }
+.wh-attempt[data-status="succeeded"] .wh-att-node { border-color: var(--st-succeeded-fg); color: var(--st-succeeded-fg); }
+.wh-attempt[data-status="failed"] .wh-att-node { border-color: var(--st-failed-fg); color: var(--st-failed-fg); }
+.wh-attempt[data-status="retrying"] .wh-att-node { border-color: var(--st-running-fg); color: var(--st-running-fg); }
+.wh-att-main { min-width: 0; flex: 1; }
+.wh-att-top { display: flex; align-items: center; gap: 8px; }
+.wh-att-n { font-size: 11.5px; font-weight: 600; color: var(--foreground); }
+.wh-att-at { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }
+.wh-att-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); margin-top: 1px; }
+
+/* response snippet block */
+.wh-resp { padding: 12px 13px 14px; }
+.wh-resp-line { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
+.wh-resp-text { font-size: 12.5px; font-weight: 600; color: var(--foreground); }
+.wh-resp-dur { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); }
+.wh-resp-sub {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
+  color: var(--muted-foreground); margin: 0 0 7px;
+}
+.wh-resp-body {
+  margin: 0; padding: 10px 12px; background: var(--muted); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 11.5px; color: var(--foreground);
+  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
+}
+.wh-foot-actions {
+  display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 13px 18px;
+  border-top: 1px solid var(--border);
+}
+
+/* endpoint target link */
+.wh-target {
+  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
+  font-family: var(--font-mono); font-size: 11.5px; color: var(--primary); text-decoration: none;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
+  background: none; border: 0; padding: 0; cursor: pointer;
+}
+.wh-target svg { width: 12px; height: 12px; flex-shrink: 0; }
+.wh-target:hover { text-decoration: underline; }
+.wh-metagrid { grid-template-columns: repeat(3, 1fr); }
+
+/* endpoint/receiver expanded detail */
+.wh-od {
+  display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px;
+  padding: 15px 17px 17px; border-bottom: 1px solid var(--border);
+}
+.wh-od-main { min-width: 0; display: flex; flex-direction: column; gap: 17px; }
+.wh-od-sec { min-width: 0; }
+.wh-od-side { min-width: 0; display: flex; flex-direction: column; }
+.wh-od-h {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
+  color: var(--muted-foreground); margin: 0 0 9px; padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+.wh-od .app-actions { margin-top: 0; }
+.wh-reclist { border: 1px solid var(--border); max-height: 216px; overflow: auto; }
+.wh-rec {
+  display: flex; align-items: center; gap: 10px; min-width: 0;
+  padding: 6px 11px; border-bottom: 1px solid var(--border);
+}
+.wh-rec:last-child { border-bottom: 0; }
+.wh-rec-ev {
+  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--foreground);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.wh-rec-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.wh-rec-at { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-foreground); width: 56px; text-align: right; }
+.wh-rec-empty {
+  border: 1px solid var(--border); padding: 14px 11px; font-size: 12px; color: var(--muted-foreground);
+}
+
+/* Stripe-style split deliveries (two-column master-detail) */
+.whs { display: flex; flex: 1; min-height: 0; }
+.whs-list {
+  width: 384px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
+  border-right: 1px solid var(--border); background: var(--card);
+}
+.whs-toolbar {
+  padding: 9px 11px 10px; border-bottom: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
+}
+.whs-search2 { width: 100%; }
+.whs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.whs-count {
+  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-foreground); padding-top: 1px;
+}
+.whs-scroll { overflow: auto; flex: 1; min-height: 0; }
+.whs-item {
+  display: flex; width: 100%; text-align: left; background: transparent;
+  border: 0; border-bottom: 1px solid var(--border); padding: 0; cursor: pointer; position: relative;
+}
+.whs-item:hover { background: var(--accent); }
+.whs-item[data-selected="1"] { background: color-mix(in oklch, var(--primary) 12%, var(--card)); }
+.whs-accent { width: 2px; flex-shrink: 0; background: transparent; }
+.whs-item[data-selected="1"] .whs-accent { background: var(--primary); }
+.whs-item-main { flex: 1; min-width: 0; padding: 6px 12px 7px; display: flex; flex-direction: column; gap: 3px; }
+.whs-item-top { display: flex; align-items: center; gap: 8px; }
+.whs-ev {
+  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--foreground);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.whs-time { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-foreground); flex-shrink: 0; }
+.whs-item-bot { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.whs-ep {
+  display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
+  font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.whs-ep .sq { width: 7px; height: 7px; flex-shrink: 0; }
+.whs-att-tag {
+  font-family: var(--font-mono); font-size: 10.5px; flex-shrink: 0;
+  color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 3px;
+}
+.whs-att-tag.warn { color: var(--st-waiting-fg); }
+.whs-att-tag.err { color: var(--st-failed-fg); }
+.whs-att-tag svg { width: 11px; height: 11px; }
+.whs-empty {
+  display: flex; flex-direction: column; align-items: center; gap: 9px;
+  padding: 40px 16px; text-align: center; color: var(--muted-foreground); font-size: 12px;
+}
+.whs-empty .ico { width: 24px; height: 24px; opacity: 0.6; }
+.whs-detail { flex: 1; min-width: 0; display: flex; min-height: 0; }
+.whs-detail .panel, .whs-detail .wh-panel, .whs-detail .run-panel { width: auto; flex: 1; min-width: 0; animation: none; }
+
+.panel-empty {
+  flex: 1; display: grid; place-items: center; padding: 32px 20px; text-align: center;
+  color: var(--muted-foreground); font-size: 12px;
+}