@proofhound/web-ui 0.1.6

package/dist/styles/globals.css

@@ -0,0 +1,961 @@
+@import 'tailwindcss';
+
+/*
+ * Tailwind v4 reads no `@config`, so it ignores tailwind.config.ts's `content` array and
+ * auto-detects sources from the consuming app's build root only (e.g. apps/web/src). The shared
+ * product packages live outside that root, so their classes (e.g. the sidebar's `md:flex` /
+ * `md:block` desktop variants) would be purged. Register the shared package sources explicitly.
+ * Paths are relative to this file (packages/web-ui/src/styles/globals.css):
+ *   ../              → @proofhound/web-ui src (this package)
+ *   ../../../ui/src  → @proofhound/ui src (design system: primitives incl. sidebar)
+ * The consuming app's own code (route wrappers + chrome) is auto-detected from its build root.
+ */
+@source '../**/*.{ts,tsx}';
+@source '../../../ui/src/**/*.{ts,tsx}';
+
+/* Tailwind v4: map CSS variables → utility classes */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  :root,
+  :root[data-theme='light'] {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.129 0.042 264.695);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.129 0.042 264.695);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.129 0.042 264.695);
+    --primary: oklch(0.208 0.042 265.755);
+    --primary-foreground: oklch(0.984 0.003 247.858);
+    --secondary: oklch(0.968 0.007 247.896);
+    --secondary-foreground: oklch(0.208 0.042 265.755);
+    --muted: oklch(0.968 0.007 247.896);
+    --muted-foreground: oklch(0.554 0.046 257.417);
+    --accent: oklch(0.968 0.007 247.896);
+    --accent-foreground: oklch(0.208 0.042 265.755);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.984 0.003 247.858);
+    --border: oklch(0.929 0.013 255.508);
+    --input: oklch(0.929 0.013 255.508);
+    --ring: oklch(0.704 0.04 256.788);
+    --sidebar: var(--background);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+
+    --status-running-bg: hsl(138 76% 96%);
+    --status-running-fg: hsl(142 60% 28%);
+    --status-running-bd: hsl(142 60% 80%);
+    --status-running-dot: hsl(142 71% 45%);
+    --status-canary-bg: hsl(214 100% 97%);
+    --status-canary-fg: hsl(217 70% 38%);
+    --status-canary-bd: hsl(217 80% 85%);
+    --status-canary-dot: hsl(217 91% 60%);
+    --status-pending-bg: hsl(30 100% 96%);
+    --status-pending-fg: hsl(25 80% 35%);
+    --status-pending-bd: hsl(25 90% 82%);
+    --status-pending-dot: hsl(25 95% 53%);
+    --prompt-editable-bg: hsl(214 100% 97%);
+    --prompt-editable-fg: hsl(217 70% 38%);
+    --prompt-editable-bd: hsl(217 80% 85%);
+    --prompt-editable-icon: hsl(217 91% 60%);
+    --prompt-frozen-bg: hsl(30 100% 96%);
+    --prompt-frozen-fg: hsl(25 80% 35%);
+    --prompt-frozen-bd: hsl(25 90% 82%);
+    --prompt-frozen-icon: hsl(25 95% 53%);
+    --trend-up-bg: hsl(0 86% 97%);
+    --trend-up-fg: hsl(0 72% 42%);
+    --trend-up-bd: hsl(0 78% 84%);
+    --trend-down-bg: hsl(142 76% 96%);
+    --trend-down-fg: hsl(142 60% 28%);
+    --trend-down-bd: hsl(142 60% 80%);
+    --status-archived-bg: hsl(220 14% 96%);
+    --status-archived-fg: hsl(220 9% 46%);
+    --status-archived-bd: hsl(220 13% 88%);
+    --status-archived-dot: hsl(220 9% 65%);
+    /* 平台监控四桶来源色（light） */
+    --src-prod: hsl(142 71% 45%);
+    --src-prod-soft: hsl(142 71% 92%);
+    --src-prod-fg: hsl(142 60% 28%);
+    --src-canary: hsl(217 91% 60%);
+    --src-canary-soft: hsl(217 91% 94%);
+    --src-canary-fg: hsl(217 70% 36%);
+    --src-iter: hsl(271 81% 56%);
+    --src-iter-soft: hsl(271 81% 95%);
+    --src-iter-fg: hsl(271 70% 40%);
+    --src-exp: hsl(220 9% 55%);
+    --src-exp-soft: hsl(220 14% 94%);
+    --src-exp-fg: hsl(220 9% 36%);
+    --role-project-manager-bg: hsl(222 47% 11%);
+    --role-project-manager-fg: hsl(0 0% 100%);
+    --role-project-manager-bd: hsl(222 47% 11%);
+    --role-eng-bg: hsl(217 91% 95%);
+    --role-eng-fg: hsl(217 70% 36%);
+    --role-eng-bd: hsl(217 70% 36% / 0.18);
+    --role-anno-bg: hsl(280 80% 96%);
+    --role-anno-fg: hsl(280 50% 38%);
+    --role-anno-bd: hsl(280 50% 38% / 0.18);
+    --role-vis-bg: hsl(220 14% 96%);
+    --role-vis-fg: hsl(220 9% 46%);
+    --role-vis-bd: hsl(220 9% 46% / 0.18);
+    --modality-text-bg: hsl(48 100% 96%);
+    --modality-text-fg: hsl(32 92% 31%);
+    --modality-text-bd: hsl(48 96% 76%);
+    --modality-text-dot: hsl(38 92% 50%);
+    --modality-image-bg: hsl(204 100% 97%);
+    --modality-image-fg: hsl(200 90% 28%);
+    --modality-image-bd: hsl(200 95% 86%);
+    --modality-image-dot: hsl(199 89% 48%);
+    --modality-number-bg: hsl(152 80% 95%);
+    --modality-number-fg: hsl(163 88% 20%);
+    --modality-number-bd: hsl(155 76% 80%);
+    --modality-number-dot: hsl(160 84% 39%);
+    --field-id-bg: hsl(252 100% 97%);
+    --field-id-fg: hsl(263 70% 35%);
+    --field-id-bd: hsl(252 87% 85%);
+    --field-id-dot: hsl(258 90% 66%);
+    --field-meta-bg: hsl(210 40% 98%);
+    --field-meta-fg: hsl(215 25% 35%);
+    --field-meta-bd: hsl(214 32% 91%);
+    --field-meta-dot: hsl(215 16% 47%);
+    --field-expected-yes-bg: hsl(151 81% 96%);
+    --field-expected-yes-fg: hsl(163 88% 22%);
+    --field-expected-yes-bd: hsl(149 80% 84%);
+    --field-expected-no-bg: hsl(0 100% 97%);
+    --field-expected-no-fg: hsl(0 73% 41%);
+    --field-expected-no-bd: hsl(0 95% 85%);
+    --star-on: hsl(38 92% 50%);
+  }
+
+  :root[data-theme='dark'],
+  .dark {
+    --radius: 0.625rem;
+    --background: oklch(0.129 0.042 264.695);
+    --foreground: oklch(0.984 0.003 247.858);
+    --card: oklch(0.14 0.04 259.21);
+    --card-foreground: oklch(0.984 0.003 247.858);
+    --popover: oklch(0.208 0.042 265.755);
+    --popover-foreground: oklch(0.984 0.003 247.858);
+    --primary: oklch(0.929 0.013 255.508);
+    --primary-foreground: oklch(0.208 0.042 265.755);
+    --secondary: oklch(0.279 0.041 260.031);
+    --secondary-foreground: oklch(0.984 0.003 247.858);
+    --muted: oklch(0.279 0.041 260.031);
+    --muted-foreground: oklch(0.704 0.04 256.788);
+    --accent: oklch(0.279 0.041 260.031);
+    --accent-foreground: oklch(0.984 0.003 247.858);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.984 0.003 247.858);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.551 0.027 264.364);
+    --sidebar: var(--background);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+
+    --status-running-bg: hsl(158.1 64.4% 16%);
+    --status-running-fg: hsl(152.4 76% 96.7%);
+    --status-running-bd: hsl(158.1 64.4% 28%);
+    --status-running-dot: hsl(158.1 64.4% 51.6%);
+    --status-canary-bg: hsl(217.2 32.6% 17.5%);
+    --status-canary-fg: hsl(210 40% 98%);
+    --status-canary-bd: hsl(217.2 32.6% 28%);
+    --status-canary-dot: hsl(217.2 91.2% 59.8%);
+    --status-pending-bg: hsl(20.5 90.2% 18.2%);
+    --status-pending-fg: hsl(48 100% 96.1%);
+    --status-pending-bd: hsl(20.5 90.2% 32%);
+    --status-pending-dot: hsl(35.5 91.7% 56.5%);
+    --prompt-editable-bg: hsl(217.2 32.6% 17.5%);
+    --prompt-editable-fg: hsl(210 40% 98%);
+    --prompt-editable-bd: hsl(217.2 32.6% 28%);
+    --prompt-editable-icon: hsl(217.2 91.2% 59.8%);
+    --prompt-frozen-bg: hsl(20.5 90.2% 18.2%);
+    --prompt-frozen-fg: hsl(48 100% 96.1%);
+    --prompt-frozen-bd: hsl(20.5 90.2% 32%);
+    --prompt-frozen-icon: hsl(35.5 91.7% 56.5%);
+    --trend-up-bg: hsl(0 62% 18%);
+    --trend-up-fg: hsl(0 92% 86%);
+    --trend-up-bd: hsl(0 62% 34%);
+    --trend-down-bg: hsl(158 64% 16%);
+    --trend-down-fg: hsl(152 76% 92%);
+    --trend-down-bd: hsl(158 64% 28%);
+    --status-archived-bg: hsl(217.2 32.6% 17.5%);
+    --status-archived-fg: hsl(215 20.2% 65.1%);
+    --status-archived-bd: hsl(217.2 32.6% 28%);
+    --status-archived-dot: hsl(215 20.2% 65.1%);
+    /* 平台监控四桶来源色（dark） */
+    --src-prod: hsl(142 71% 52%);
+    --src-prod-soft: hsl(158 64% 16%);
+    --src-prod-fg: hsl(152 76% 92%);
+    --src-canary: hsl(217 91% 60%);
+    --src-canary-soft: hsl(217 33% 18%);
+    --src-canary-fg: hsl(210 40% 92%);
+    --src-iter: hsl(271 81% 65%);
+    --src-iter-soft: hsl(271 45% 22%);
+    --src-iter-fg: hsl(271 80% 92%);
+    --src-exp: hsl(215 20% 65%);
+    --src-exp-soft: hsl(217 33% 22%);
+    --src-exp-fg: hsl(215 20% 90%);
+    --role-project-manager-bg: hsl(210 40% 98%);
+    --role-project-manager-fg: hsl(222.2 47.4% 11.2%);
+    --role-project-manager-bd: hsl(210 40% 98%);
+    --role-eng-bg: hsl(217.2 32.6% 17.5%);
+    --role-eng-fg: hsl(210 40% 98%);
+    --role-eng-bd: hsl(217.2 32.6% 28%);
+    --role-anno-bg: hsl(280 50% 20%);
+    --role-anno-fg: hsl(280 80% 96%);
+    --role-anno-bd: hsl(280 50% 32%);
+    --role-vis-bg: hsl(217.2 32.6% 17.5%);
+    --role-vis-fg: hsl(215 20.2% 65.1%);
+    --role-vis-bd: hsl(217.2 32.6% 28%);
+    --modality-text-bg: hsl(33 92% 14%);
+    --modality-text-fg: hsl(48 96% 76%);
+    --modality-text-bd: hsl(33 92% 22%);
+    --modality-text-dot: hsl(38 92% 50%);
+    --modality-image-bg: hsl(204 80% 12%);
+    --modality-image-fg: hsl(200 95% 86%);
+    --modality-image-bd: hsl(200 95% 22%);
+    --modality-image-dot: hsl(199 89% 48%);
+    --modality-number-bg: hsl(155 80% 10%);
+    --modality-number-fg: hsl(155 76% 80%);
+    --modality-number-bd: hsl(155 80% 22%);
+    --modality-number-dot: hsl(160 84% 39%);
+    --field-id-bg: hsl(258 50% 14%);
+    --field-id-fg: hsl(258 87% 82%);
+    --field-id-bd: hsl(258 55% 30%);
+    --field-id-dot: hsl(258 90% 66%);
+    --field-meta-bg: hsl(215 28% 17%);
+    --field-meta-fg: hsl(214 17% 75%);
+    --field-meta-bd: hsl(215 18% 28%);
+    --field-meta-dot: hsl(215 16% 55%);
+    --field-expected-yes-bg: hsl(155 80% 10%);
+    --field-expected-yes-fg: hsl(155 76% 80%);
+    --field-expected-yes-bd: hsl(155 80% 22%);
+    --field-expected-no-bg: hsl(0 70% 12%);
+    --field-expected-no-fg: hsl(0 85% 82%);
+    --field-expected-no-bd: hsl(0 65% 25%);
+    --star-on: hsl(35.5 91.7% 56.5%);
+  }
+
+  :root[data-theme='twilight'] {
+    --twilight-indigo-50: #eff0f5;
+    --twilight-indigo-100: #e0e2eb;
+    --twilight-indigo-200: #c1c5d7;
+    --twilight-indigo-300: #a2a8c3;
+    --twilight-indigo-400: #838baf;
+    --twilight-indigo-500: #636e9c;
+    --twilight-indigo-600: #50587c;
+    --twilight-indigo-700: #3c425d;
+    --twilight-indigo-800: #282c3e;
+    --twilight-indigo-900: #14161f;
+    --twilight-indigo-950: #0e0f16;
+    --powder-petal-50: #fcf1e8;
+    --powder-petal-100: #fae3d1;
+    --powder-petal-200: #f5c7a3;
+    --powder-petal-300: #f0aa75;
+    --powder-petal-400: #eb8e47;
+    --powder-petal-500: #e67219;
+    --powder-petal-600: #b85b14;
+    --powder-petal-700: #8a440f;
+    --powder-petal-800: #5c2e0a;
+    --powder-petal-900: #2e1705;
+    --powder-petal-950: #201004;
+    --powder-blue-50: #ecf1f9;
+    --powder-blue-100: #d9e2f2;
+    --powder-blue-200: #b3c5e6;
+    --powder-blue-300: #8ca8d9;
+    --powder-blue-400: #668bcc;
+    --powder-blue-500: #406fbf;
+    --powder-blue-600: #335899;
+    --powder-blue-700: #264273;
+    --powder-blue-800: #192c4d;
+    --powder-blue-900: #0d1626;
+    --powder-blue-950: #090f1b;
+    --powder-blush-50: #faedea;
+    --powder-blush-100: #f5dbd6;
+    --powder-blush-200: #ebb7ad;
+    --powder-blush-300: #e19384;
+    --powder-blush-400: #d7705b;
+    --powder-blush-500: #cd4c32;
+    --powder-blush-600: #a43d28;
+    --powder-blush-700: #7b2d1e;
+    --powder-blush-800: #521e14;
+    --powder-blush-900: #290f0a;
+    --powder-blush-950: #1d0b07;
+    --ash-brown-50: #f5f1f0;
+    --ash-brown-100: #ebe4e0;
+    --ash-brown-200: #d7c8c1;
+    --ash-brown-300: #c3ada2;
+    --ash-brown-400: #ae9284;
+    --ash-brown-500: #9a7765;
+    --ash-brown-600: #7b5f51;
+    --ash-brown-700: #5d473c;
+    --ash-brown-800: #3e2f28;
+    --ash-brown-900: #1f1814;
+    --ash-brown-950: #16110e;
+
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(230 19% 10%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(230 19% 10%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(230 19% 10%);
+    --primary: hsl(226 19% 20%);
+    --primary-foreground: hsl(14 75% 96%);
+    --secondary: hsl(18 41% 95%);
+    --secondary-foreground: hsl(226 19% 20%);
+    --muted: hsl(18 41% 95%);
+    --muted-foreground: hsl(228 22% 50%);
+    --accent: hsl(18 41% 95%);
+    --accent-foreground: hsl(226 19% 20%);
+    --destructive: hsl(12 60% 50%);
+    --destructive-foreground: hsl(14 75% 96%);
+    --border: hsl(226 26% 90%);
+    --input: hsl(226 26% 90%);
+    --ring: hsl(226 19% 20%);
+    --radius: 0.5rem;
+    --sidebar: hsl(18 41% 95%);
+    --sidebar-foreground: hsl(226 19% 20%);
+    --sidebar-primary: hsl(226 19% 20%);
+    --sidebar-primary-foreground: hsl(14 75% 96%);
+    --sidebar-accent: hsl(18 35% 89%);
+    --sidebar-accent-foreground: hsl(226 19% 20%);
+    --sidebar-border: hsl(18 24% 84%);
+    --sidebar-ring: hsl(12 60% 50%);
+    --status-running-bg: #ecf1f9;
+    --status-running-fg: #264273;
+    --status-running-bd: #d9e2f2;
+    --status-running-dot: #406fbf;
+    --status-canary-bg: #fcf1e8;
+    --status-canary-fg: #8a440f;
+    --status-canary-bd: #fae3d1;
+    --status-canary-dot: #e67219;
+    --status-pending-bg: #faedea;
+    --status-pending-fg: #7b2d1e;
+    --status-pending-bd: #f5dbd6;
+    --status-pending-dot: #cd4c32;
+    --prompt-editable-bg: #ecf1f9;
+    --prompt-editable-fg: #264273;
+    --prompt-editable-bd: #d9e2f2;
+    --prompt-editable-icon: #406fbf;
+    --prompt-frozen-bg: #fcf1e8;
+    --prompt-frozen-fg: #8a440f;
+    --prompt-frozen-bd: #fae3d1;
+    --prompt-frozen-icon: #e67219;
+    --trend-up-bg: #faedea;
+    --trend-up-fg: #7b2d1e;
+    --trend-up-bd: #f5dbd6;
+    --trend-down-bg: #e0f0e6;
+    --trend-down-fg: #2e5a3f;
+    --trend-down-bd: #c2dfce;
+    --status-archived-bg: #ebe4e0;
+    --status-archived-fg: #7b5f51;
+    --status-archived-bd: #d7c8c1;
+    --status-archived-dot: #ae9284;
+    /* 平台监控四桶来源色（twilight，棕暖色系） */
+    --src-prod: #6dba88;
+    --src-prod-soft: #e0f0e6;
+    --src-prod-fg: #2e5a3f;
+    --src-canary: #6e90c4;
+    --src-canary-soft: #e0eaf3;
+    --src-canary-fg: #2a4a73;
+    --src-iter: #a285c2;
+    --src-iter-soft: #ece4f3;
+    --src-iter-fg: #4d3a73;
+    --src-exp: #ae9284;
+    --src-exp-soft: #ebe4e0;
+    --src-exp-fg: #5d473c;
+    --role-project-manager-bg: #282c3e;
+    --role-project-manager-fg: #fcf1e8;
+    --role-project-manager-bd: #282c3e;
+    --role-eng-bg: #ecf1f9;
+    --role-eng-fg: #264273;
+    --role-eng-bd: #d9e2f2;
+    --role-anno-bg: #fcf1e8;
+    --role-anno-fg: #8a440f;
+    --role-anno-bd: #fae3d1;
+    --role-vis-bg: #ebe4e0;
+    --role-vis-fg: #5d473c;
+    --role-vis-bd: #d7c8c1;
+    --modality-text-bg: #fcf1e8;
+    --modality-text-fg: #8a440f;
+    --modality-text-bd: #fae3d1;
+    --modality-text-dot: #e67219;
+    --modality-image-bg: #ecf1f9;
+    --modality-image-fg: #264273;
+    --modality-image-bd: #d9e2f2;
+    --modality-image-dot: #406fbf;
+    --modality-number-bg: #ecf9f1;
+    --modality-number-fg: #1f5e3a;
+    --modality-number-bd: #cce8d7;
+    --modality-number-dot: #3e8c5b;
+    --field-id-bg: #f1ebfa;
+    --field-id-fg: #4d2e85;
+    --field-id-bd: #ddcff0;
+    --field-id-dot: #7a55c4;
+    --field-meta-bg: #f1edec;
+    --field-meta-fg: #5d473c;
+    --field-meta-bd: #ddd3cd;
+    --field-meta-dot: #7a685e;
+    --field-expected-yes-bg: #e8f5ee;
+    --field-expected-yes-fg: #1f5e3a;
+    --field-expected-yes-bd: #cce8d7;
+    --field-expected-no-bg: #fcecec;
+    --field-expected-no-fg: #8a2424;
+    --field-expected-no-bd: #f4cfcf;
+    --star-on: #e67219;
+  }
+
+  :root[data-theme='electric'] {
+    --dusty-denim-50: #edf2f8;
+    --dusty-denim-100: #dae5f1;
+    --dusty-denim-200: #b5cae3;
+    --dusty-denim-300: #90b0d5;
+    --dusty-denim-400: #6b96c7;
+    --dusty-denim-500: #467cb9;
+    --dusty-denim-600: #386394;
+    --dusty-denim-700: #2a4a6f;
+    --dusty-denim-800: #1c314a;
+    --dusty-denim-900: #0e1925;
+    --dusty-denim-950: #0a111a;
+    --frozen-water-50: #edf8f4;
+    --frozen-water-100: #daf1e9;
+    --frozen-water-200: #b6e2d3;
+    --frozen-water-300: #91d4bd;
+    --frozen-water-400: #6cc6a6;
+    --frozen-water-500: #47b890;
+    --frozen-water-600: #399373;
+    --frozen-water-700: #2b6e57;
+    --frozen-water-800: #1d493a;
+    --frozen-water-900: #0e251d;
+    --frozen-water-950: #0a1a14;
+    --honeydew-50: #f0ffe5;
+    --honeydew-100: #e1ffcc;
+    --honeydew-200: #c3ff99;
+    --honeydew-300: #a6ff66;
+    --honeydew-400: #88ff33;
+    --honeydew-500: #6aff00;
+    --honeydew-600: #55cc00;
+    --honeydew-700: #409900;
+    --honeydew-800: #2a6600;
+    --honeydew-900: #153300;
+    --honeydew-950: #0f2400;
+    --space-indigo-50: #ededf8;
+    --space-indigo-100: #dbdbf0;
+    --space-indigo-200: #b6b8e2;
+    --space-indigo-300: #9294d3;
+    --space-indigo-400: #6d70c5;
+    --space-indigo-500: #494cb6;
+    --space-indigo-600: #3a3d92;
+    --space-indigo-700: #2c2e6d;
+    --space-indigo-800: #1d1f49;
+    --space-indigo-900: #0f0f24;
+    --space-indigo-950: #0a0b1a;
+    --chartreuse-50: #f7ffe5;
+    --chartreuse-100: #efffcc;
+    --chartreuse-200: #dfff99;
+    --chartreuse-300: #cfff66;
+    --chartreuse-400: #beff33;
+    --chartreuse-500: #aeff00;
+    --chartreuse-600: #8bcc00;
+    --chartreuse-700: #699900;
+    --chartreuse-800: #466600;
+    --chartreuse-900: #233300;
+    --chartreuse-950: #182400;
+
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(234 35% 10%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(234 35% 10%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(234 35% 10%);
+    --primary: hsl(237 44% 20%);
+    --primary-foreground: hsl(86 100% 95%);
+    --secondary: hsl(213 41% 95%);
+    --secondary-foreground: hsl(237 44% 20%);
+    --muted: hsl(213 41% 95%);
+    --muted-foreground: hsl(213 45% 30%);
+    --accent: hsl(213 41% 95%);
+    --accent-foreground: hsl(237 44% 20%);
+    --destructive: hsl(75 100% 30%);
+    --destructive-foreground: hsl(86 100% 95%);
+    --border: hsl(213 51% 90%);
+    --input: hsl(213 51% 90%);
+    --ring: hsl(237 44% 20%);
+    --radius: 0.5rem;
+    --sidebar: hsl(213 41% 95%);
+    --sidebar-foreground: hsl(213 45% 22%);
+    --sidebar-primary: hsl(237 44% 20%);
+    --sidebar-primary-foreground: hsl(86 100% 95%);
+    --sidebar-accent: hsl(213 51% 90%);
+    --sidebar-accent-foreground: hsl(213 45% 22%);
+    --sidebar-border: hsl(213 51% 85%);
+    --sidebar-ring: hsl(75 100% 30%);
+    --status-running-bg: #edf8f4;
+    --status-running-fg: #2b6e57;
+    --status-running-bd: #daf1e9;
+    --status-running-dot: #47b890;
+    --status-canary-bg: #edf2f8;
+    --status-canary-fg: #2a4a6f;
+    --status-canary-bd: #dae5f1;
+    --status-canary-dot: #467cb9;
+    --status-pending-bg: #f7ffe5;
+    --status-pending-fg: #466600;
+    --status-pending-bd: #dfff99;
+    --status-pending-dot: #8bcc00;
+    --prompt-editable-bg: #edf2f8;
+    --prompt-editable-fg: #2a4a6f;
+    --prompt-editable-bd: #dae5f1;
+    --prompt-editable-icon: #467cb9;
+    --prompt-frozen-bg: #fff0ed;
+    --prompt-frozen-fg: #b63620;
+    --prompt-frozen-bd: #ffd9d1;
+    --prompt-frozen-icon: #e67219;
+    --trend-up-bg: #fff0ed;
+    --trend-up-fg: #b63620;
+    --trend-up-bd: #ffd5cc;
+    --trend-down-bg: #edf8f4;
+    --trend-down-fg: #2b6e57;
+    --trend-down-bd: #daf1e9;
+    --status-archived-bg: #edf2f8;
+    --status-archived-fg: #467cb9;
+    --status-archived-bd: #dae5f1;
+    --status-archived-dot: #90b0d5;
+    /* 平台监控四桶来源色（electric，青蓝色系） */
+    --src-prod: #5fc18f;
+    --src-prod-soft: #edf8f4;
+    --src-prod-fg: #2b6e57;
+    --src-canary: #75a3d9;
+    --src-canary-soft: #edf2f8;
+    --src-canary-fg: #2a4a6f;
+    --src-iter: #b386d9;
+    --src-iter-soft: #f0e6f8;
+    --src-iter-fg: #4d3a73;
+    --src-exp: #90b0d5;
+    --src-exp-soft: #edf2f8;
+    --src-exp-fg: #467cb9;
+    --role-project-manager-bg: #1d1f49;
+    --role-project-manager-fg: #f7ffe5;
+    --role-project-manager-bd: #1d1f49;
+    --role-eng-bg: #edf2f8;
+    --role-eng-fg: #2a4a6f;
+    --role-eng-bd: #dae5f1;
+    --role-anno-bg: #edf8f4;
+    --role-anno-fg: #2b6e57;
+    --role-anno-bd: #daf1e9;
+    --role-vis-bg: #edf2f8;
+    --role-vis-fg: #467cb9;
+    --role-vis-bd: #dae5f1;
+    --modality-text-bg: #fffbe5;
+    --modality-text-fg: #665600;
+    --modality-text-bd: #fff099;
+    --modality-text-dot: #ccb300;
+    --modality-image-bg: #edf2f8;
+    --modality-image-fg: #2a4a6f;
+    --modality-image-bd: #dae5f1;
+    --modality-image-dot: #467cb9;
+    --modality-number-bg: #edf8f4;
+    --modality-number-fg: #2b6e57;
+    --modality-number-bd: #daf1e9;
+    --modality-number-dot: #47b890;
+    --field-id-bg: #ededf8;
+    --field-id-fg: #2c2e6d;
+    --field-id-bd: #b6b8e2;
+    --field-id-dot: #494cb6;
+    --field-meta-bg: #f0f0f5;
+    --field-meta-fg: #45495a;
+    --field-meta-bd: #d4d6e0;
+    --field-meta-dot: #75788c;
+    --field-expected-yes-bg: #edf8f4;
+    --field-expected-yes-fg: #2b6e57;
+    --field-expected-yes-bd: #daf1e9;
+    --field-expected-no-bg: #fbeaea;
+    --field-expected-no-fg: #7a2424;
+    --field-expected-no-bd: #f0c8c8;
+    --star-on: #8bcc00;
+  }
+
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  @keyframes ph-loader-wobble {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+    25% {
+      transform: scale(1.18, 0.82);
+    }
+    50% {
+      transform: scale(0.86, 1.16);
+    }
+    75% {
+      transform: scale(1.1, 0.92);
+    }
+  }
+
+  .ph-loader-wobble {
+    animation: ph-loader-wobble 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ph-loader-wobble {
+      animation: none;
+    }
+  }
+
+  @keyframes ph-loader-reveal {
+    to {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  /*
+   * Hold a full-screen route-transition loader invisible for 300ms; a fast navigation unmounts it before it ever
+   * paints. `visibility: hidden` (not just opacity) keeps the loader's role="status" aria-live region out of the
+   * accessibility tree during the delay, so assistive tech doesn't announce a loader that never visibly appears.
+   */
+  .ph-loader-delayed-reveal {
+    opacity: 0;
+    visibility: hidden;
+    animation: ph-loader-reveal 0s linear 300ms forwards;
+  }
+
+  .status-running {
+    background: var(--status-running-bg);
+    color: var(--status-running-fg);
+    border: 1px solid var(--status-running-bd);
+  }
+
+  .status-canary {
+    background: var(--status-canary-bg);
+    color: var(--status-canary-fg);
+    border: 1px solid var(--status-canary-bd);
+  }
+
+  .status-pending {
+    background: var(--status-pending-bg);
+    color: var(--status-pending-fg);
+    border: 1px solid var(--status-pending-bd);
+  }
+
+  .status-archived {
+    background: var(--status-archived-bg);
+    color: var(--status-archived-fg);
+    border: 1px solid var(--status-archived-bd);
+  }
+
+  .dot-running {
+    background: var(--status-running-dot);
+  }
+
+  .dot-canary {
+    background: var(--status-canary-dot);
+  }
+
+  .dot-pending {
+    background: var(--status-pending-dot);
+  }
+
+  .dot-archived {
+    background: var(--status-archived-dot);
+  }
+
+  .role-project-manager {
+    background: var(--role-project-manager-bg);
+    color: var(--role-project-manager-fg);
+    border: 1px solid var(--role-project-manager-bd);
+  }
+
+  .role-eng {
+    background: var(--role-eng-bg);
+    color: var(--role-eng-fg);
+    border: 1px solid var(--role-eng-bd);
+  }
+
+  .role-anno {
+    background: var(--role-anno-bg);
+    color: var(--role-anno-fg);
+    border: 1px solid var(--role-anno-bd);
+  }
+
+  .role-vis {
+    background: var(--role-vis-bg);
+    color: var(--role-vis-fg);
+    border: 1px solid var(--role-vis-bd);
+  }
+
+  .star-on {
+    color: var(--star-on);
+  }
+
+  @keyframes overview-pending-border {
+    0%,
+    100% {
+      opacity: 0.95;
+      box-shadow:
+        0 0 0 0 transparent,
+        0 0 0 1px color-mix(in srgb, var(--status-pending-dot) 18%, transparent);
+    }
+    50% {
+      opacity: 0.55;
+      box-shadow:
+        0 0 0 3px color-mix(in srgb, var(--status-pending-dot) 18%, transparent),
+        0 0 18px 0 color-mix(in srgb, var(--status-pending-dot) 44%, transparent);
+    }
+  }
+
+  @keyframes overview-running-border-flow {
+    0% {
+      background-position: 0% 50%;
+    }
+    100% {
+      background-position: 200% 50%;
+    }
+  }
+
+  .overview-feed-row {
+    position: relative;
+    cursor: pointer;
+    transition: background 0.12s ease;
+  }
+
+  .overview-feed-row:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -3px;
+  }
+
+  .overview-feed-row:hover {
+    background: var(--accent);
+  }
+
+  .overview-row-pending {
+    background: linear-gradient(to right, var(--status-pending-bg) 0%, transparent 16%);
+  }
+
+  .overview-row-running {
+    background: linear-gradient(to right, var(--status-canary-bg) 0%, transparent 16%);
+  }
+
+  .overview-row-pending::before,
+  .overview-row-running::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+  }
+
+  .overview-row-pending::before {
+    background: var(--status-pending-dot);
+  }
+
+  .overview-row-running::before {
+    background: var(--status-canary-dot);
+  }
+
+  .overview-row-pending::after,
+  .overview-row-running::after {
+    content: '';
+    position: absolute;
+    inset: 5px 8px 5px 5px;
+    pointer-events: none;
+    border-radius: 0.5rem;
+  }
+
+  .overview-row-pending::after {
+    border: 1px solid var(--status-pending-dot);
+    animation: overview-pending-border 1.65s ease-in-out infinite;
+  }
+
+  .overview-row-running::after {
+    padding: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--status-canary-dot) 18%, transparent),
+        var(--status-canary-dot),
+        color-mix(in srgb, var(--status-running-dot) 65%, var(--status-canary-dot)),
+        color-mix(in srgb, var(--status-canary-dot) 18%, transparent),
+        transparent
+      )
+      0 50% / 200% 100%;
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    animation: overview-running-border-flow 2.6s linear infinite;
+  }
+
+  .overview-tab-pill {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.375rem;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease,
+      border-color 0.12s ease;
+  }
+
+  .overview-tab-pill:hover {
+    background: var(--accent);
+    color: var(--foreground);
+  }
+
+  .overview-tab-pill.active {
+    border-color: var(--border);
+    background: var(--card);
+    color: var(--foreground);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
+  }
+
+  .overview-tab-pill .cnt {
+    color: var(--muted-foreground);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 11px;
+  }
+
+  .overview-progress {
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--status-canary-bd);
+  }
+
+  .overview-progress > i {
+    display: block;
+    height: 100%;
+    background: var(--status-canary-dot);
+  }
+
+  .overview-res-link {
+    max-width: 100%;
+    color: var(--status-canary-fg);
+    border-bottom: 1px dotted var(--status-canary-dot);
+    padding-bottom: 1px;
+    transition:
+      border-color 0.12s ease,
+      color 0.12s ease;
+  }
+
+  .overview-res-link:hover {
+    color: var(--foreground);
+    border-bottom-color: var(--foreground);
+  }
+
+  .overview-seg {
+    display: inline-flex;
+    gap: 2px;
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    background: var(--muted);
+    padding: 2px;
+  }
+
+  .overview-seg button {
+    border-radius: calc(var(--radius) - 4px);
+    padding: 0.25rem 0.625rem;
+    color: var(--muted-foreground);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease;
+  }
+
+  .overview-seg button:hover {
+    background: color-mix(in srgb, var(--card) 72%, transparent);
+    color: var(--foreground);
+  }
+
+  .overview-seg button.active {
+    background: var(--card);
+    color: var(--foreground);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
+  }
+
+  .release-topology-canvas .react-flow__controls {
+    overflow: hidden;
+    background: var(--muted) !important;
+  }
+
+  .release-topology-canvas .react-flow__controls-button {
+    background: var(--muted) !important;
+    background-color: var(--muted) !important;
+    color: var(--foreground) !important;
+    border-color: var(--border) !important;
+  }
+
+  .release-topology-canvas .react-flow__controls-button:hover {
+    background: var(--accent) !important;
+    background-color: var(--accent) !important;
+  }
+
+  .release-topology-canvas .react-flow__controls-button svg {
+    fill: currentColor !important;
+    stroke: currentColor !important;
+  }
+}