nexus-agentd 0.2.5 → 0.3.0

package/dist/webui/styles.js

@@ -1,617 +1,792 @@
-export const styles = String.raw `
-/* 全局设计约定：间距用 --sp-*、字号用 --fs-*，扩展时不要引入散落的像素值。 */
-
-:root {
-  color-scheme: light;
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --success: 142 76% 36%;
-  --warning: 32 95% 44%;
-  --info: 217 91% 60%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 63.9%;
-
-  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
-  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
-
-  /* 字号阶梯，全站只用这六级：
-     2xs 大写微标签（表头 / badge）· xs 辅助说明 · sm 正文与表格
-     md 面板与 drawer 标题 · lg 页面标题 · stat 统计数字 */
-  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px;
-  --fs-md: 14px; --fs-lg: 16px; --fs-stat: 28px;
-
-  --radius: 6px;
-  --sidebar-width: 232px;
-  --gutter: clamp(var(--sp-6), 4vw, 48px);
-}
-
-html[data-theme="dark"] {
-  color-scheme: dark;
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --success: 142 71% 45%;
-  --warning: 38 92% 50%;
-  --info: 217 91% 65%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-}
-
-/* ── Base ─────────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; }
-html, body { height: 100%; }
-html { scrollbar-gutter: stable; }
-body {
-  margin: 0;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font: var(--fs-sm)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
-        "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-h1, h2, h3, p { margin: 0; }
-button, input, select, textarea { font: inherit; color: inherit; }
-button { background: none; border: 0; cursor: pointer; padding: 0; }
-code, .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
-.hidden { display: none !important; }
-.muted { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
-
-:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 1px;
-  border-radius: 2px;
-}
-
-::selection { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
-
-/* Thin scrollbars */
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
-::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / .55); }
-::-webkit-scrollbar-track { background: transparent; }
-
-/* ── Brand ────────────────────────────────────────────────────────── */
-.brand-mark {
-  width: 28px; height: 28px;
-  display: grid; place-items: center;
-  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
-  border-radius: var(--radius);
-  font-weight: 700; font-size: var(--fs-sm); letter-spacing: -.02em;
-  flex-shrink: 0;
-}
-
-/* ── Auth screens ─────────────────────────────────────────────────── */
-.auth-screen {
-  min-height: 100vh;
-  display: grid; place-items: center;
-  padding: var(--sp-6);
-  background: hsl(var(--muted) / .4);
-}
-.auth-card {
-  width: min(400px, 100%);
-  padding: var(--sp-6);
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -8px rgb(0 0 0 / .1);
-}
-.auth-card header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
-.auth-card h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
-.auth-card > p { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
-.auth-submit { width: 100%; height: 36px; }
-.avatar {
-  width: 26px; height: 26px; flex-shrink: 0;
-  display: grid; place-items: center;
-  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
-  border-radius: 50%;
-  font-size: var(--fs-2xs); font-weight: 700;
-}
-
-/* ── Forms ────────────────────────────────────────────────────────── */
-.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: var(--fs-sm); font-weight: 500; }
-.field > small, .field-help { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; }
-.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
-
-input, select, textarea {
-  width: 100%; height: 32px;
-  padding: 0 var(--sp-3);
-  background: transparent;
-  border: 1px solid hsl(var(--input));
-  border-radius: var(--radius);
-  font-size: var(--fs-sm);
-  transition: border-color .12s ease, box-shadow .12s ease;
-}
-textarea { height: auto; min-height: 72px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.5; }
-input:hover, select:hover, textarea:hover { border-color: hsl(var(--muted-foreground) / .6); }
-input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / .2); }
-input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
-input[type="checkbox"] { width: 14px; height: 14px; padding: 0; accent-color: hsl(var(--primary)); }
-
-.checkbox { display: flex; align-items: center; gap: var(--sp-2); height: 32px; font-weight: 500; cursor: pointer; }
-.checkbox input { flex-shrink: 0; }
-
-.form-error { min-height: 18px; margin-top: var(--sp-2); color: hsl(var(--destructive)); font-size: var(--fs-xs); font-weight: 500; }
-.confirm-text { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); line-height: 1.6; }
-
-/* ── Buttons ──────────────────────────────────────────────────────── */
-.button {
-  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
-  height: 32px; padding: 0 var(--sp-3);
-  border: 1px solid hsl(var(--input));
-  border-radius: var(--radius);
-  background: hsl(var(--card));
-  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
-  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
-  transition: background-color .12s ease, border-color .12s ease;
-}
-.button:hover:not(:disabled) { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
-.button:disabled { opacity: .5; cursor: not-allowed; }
-.button.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
-.button.primary:hover:not(:disabled) { background: hsl(var(--primary) / .88); color: hsl(var(--primary-foreground)); }
-.button.danger { border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)); }
-.button.danger:hover:not(:disabled) { background: hsl(var(--destructive) / .08); }
-.button.solid-danger { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
-.button.solid-danger:hover:not(:disabled) { background: hsl(var(--destructive) / .9); color: hsl(var(--destructive-foreground)); }
-.button.small { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
-.button svg, .menu-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
-
-.icon-button {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 32px; height: 32px; flex-shrink: 0;
-  border-radius: var(--radius);
-  color: hsl(var(--muted-foreground));
-  transition: background-color .12s ease, color .12s ease;
-}
-.icon-button:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
-.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-
-/* ── App shell ────────────────────────────────────────────────────── */
-.app-shell { min-height: 100vh; display: flex; }
-
-.sidebar {
-  position: fixed; inset: 0 auto 0 0;
-  width: var(--sidebar-width);
-  padding: var(--sp-3) var(--sp-2);
-  display: flex; flex-direction: column; gap: var(--sp-2);
-  background: hsl(var(--card));
-  border-right: 1px solid hsl(var(--border));
-  z-index: 10;
-}
-.brand {
-  display: flex; align-items: center; gap: var(--sp-2);
-  height: 40px; padding: 0 var(--sp-2);
-  font-weight: 600; font-size: var(--fs-sm); letter-spacing: -.01em;
-}
-nav { display: flex; flex-direction: column; gap: 2px; }
-.nav-item {
-  width: 100%; height: 32px;
-  display: flex; align-items: center; gap: var(--sp-2);
-  padding: 0 var(--sp-2);
-  border-radius: var(--radius);
-  color: hsl(var(--muted-foreground));
-  font-size: var(--fs-sm); font-weight: 500; text-align: left;
-  transition: background-color .12s ease, color .12s ease;
-}
-.nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
-.nav-item.active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 600; }
-.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-
-.admin-menu-wrap { position: relative; margin-top: auto; }
-.admin-button {
-  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
-  padding: var(--sp-2);
-  border-radius: var(--radius);
-  text-align: left;
-  transition: background-color .12s ease;
-}
-.admin-button:hover { background: hsl(var(--accent)); }
-.admin-button > svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-.admin-meta { display: grid; min-width: 0; }
-.admin-button strong { font-size: var(--fs-sm); font-weight: 600; }
-.admin-popover {
-  position: absolute; inset: auto 0 calc(100% + var(--sp-2));
-  padding: var(--sp-2);
-  background: hsl(var(--popover));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .12), 0 2px 8px -2px rgb(0 0 0 / .08);
-  z-index: 20;
-}
-.admin-popover .field { margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
-.menu-button {
-  width: 100%; height: 30px;
-  display: flex; align-items: center;
-  padding: 0 var(--sp-2);
-  border-radius: var(--radius);
-  font-size: var(--fs-sm); font-weight: 500; text-align: left;
-  transition: background-color .12s ease;
-}
-.menu-button:hover { background: hsl(var(--accent)); }
-.danger-text { color: hsl(var(--destructive)); }
-
-/* ── Main / page chrome ───────────────────────────────────────────── */
-.main {
-  flex: 1; min-width: 0;
-  margin-left: var(--sidebar-width);
-  min-height: 100vh;
-  display: flex; flex-direction: column;
-}
-.topbar {
-  position: sticky; top: 0; z-index: 5;
-  height: 56px;
-  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
-  padding: 0 var(--gutter);
-  background: hsl(var(--background));
-  border-bottom: 1px solid hsl(var(--border));
-}
-.topbar h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
-.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
-
-.page-content {
-  flex: 1; width: 100%;
-  padding: var(--sp-5) var(--gutter) var(--sp-6);
-  display: flex; flex-direction: column; gap: var(--sp-4);
-}
-
-/* ── Cards / panels ───────────────────────────────────────────────── */
-.panel {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-}
-.panel-header {
-  min-height: 44px;
-  padding: 0 var(--sp-4);
-  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
-  border-bottom: 1px solid hsl(var(--border));
-}
-.panel-header h2 { font-size: var(--fs-md); font-weight: 600; }
-.panel-body { padding: var(--sp-4); }
-.empty { padding: var(--sp-8) var(--sp-4); color: hsl(var(--muted-foreground)); text-align: center; font-size: var(--fs-sm); }
-.empty-state { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-8) var(--sp-4); text-align: center; }
-.empty-state > svg { width: 28px; height: 28px; margin-bottom: var(--sp-2); color: hsl(var(--muted-foreground)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.empty-state strong { font-size: var(--fs-md); font-weight: 600; color: hsl(var(--foreground)); }
-.empty-state span { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }
-.empty-state .button { margin-top: var(--sp-3); }
-
-/* Stats */
-.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
-.stat {
-  padding: var(--sp-4) var(--sp-5);
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  display: grid; gap: var(--sp-1);
-}
-.stat span { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-weight: 500; }
-.stat strong { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
-
-/* ── Toolbar ──────────────────────────────────────────────────────── */
-.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
-.toolbar select { width: auto; min-width: 128px; }
-.search-box { position: relative; flex: 1; min-width: 160px; max-width: 280px; }
-.search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-foreground)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
-.search-box input { width: 100%; padding-left: 30px; }
-
-/* ── Tables ───────────────────────────────────────────────────────── */
-.table-wrap {
-  overflow-x: auto;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-}
-table { width: 100%; border-collapse: collapse; min-width: 720px; }
-th, td { padding: 0 var(--sp-4); height: 40px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: middle; }
-th { height: 36px; color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
-tbody tr:last-child td { border-bottom: 0; }
-tbody tr:hover { background: hsl(var(--muted) / .5); }
-tr[data-run-detail] { cursor: pointer; }
-
-.agent-name { display: grid; gap: 2px; min-width: 0; }
-.agent-name strong { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
-.agent-name small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-.error-detail { color: hsl(var(--destructive)); font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: 1.4; }
-.row-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
-
-/* ── Badges & status ──────────────────────────────────────────────── */
-.badge {
-  display: inline-flex; align-items: center;
-  height: 20px; padding: 0 var(--sp-2);
-  border: 1px solid hsl(var(--border));
-  border-radius: 4px;
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
-}
-.status {
-  display: inline-flex; align-items: center; gap: var(--sp-2);
-  height: 22px; padding: 0 var(--sp-2);
-  border-radius: 9999px;
-  background: hsl(var(--secondary));
-  color: hsl(var(--muted-foreground));
-  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
-}
-.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground) / .5); flex-shrink: 0; }
-.status.ready, .status.completed { color: hsl(var(--success)); background: hsl(var(--success) / .1); }
-.status.ready::before, .status.completed::before { background: hsl(var(--success)); }
-.status.failed { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .1); }
-.status.failed::before { background: hsl(var(--destructive)); }
-.status.running { color: hsl(var(--info)); background: hsl(var(--info) / .1); }
-.status.running::before { background: hsl(var(--info)); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
-.status.waiting { color: hsl(var(--warning)); background: hsl(var(--warning) / .12); }
-.status.waiting::before { background: hsl(var(--warning)); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
-.status.checking::before { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
-
-/* ── Runs page ────────────────────────────────────────────────────── */
-.run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
-.run-section { display: flex; flex-direction: column; gap: var(--sp-3); }
-.run-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
-.run-section-title h2 { font-size: var(--fs-md); font-weight: 600; }
-.run-section-title span { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
-
-.run-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
-.run-card {
-  position: relative;
-  display: flex; flex-direction: column; gap: var(--sp-2);
-  padding: var(--sp-3) var(--sp-4);
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--info));
-  border-radius: calc(var(--radius) + 2px);
-  cursor: pointer;
-  transition: border-color .12s ease, box-shadow .12s ease;
-}
-.run-card:hover { border-color: hsl(var(--muted-foreground) / .4); box-shadow: 0 2px 8px -2px rgb(0 0 0 / .08); }
-.run-card.waiting { border-left-color: hsl(var(--warning)); }
-.run-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
-.run-card-agent { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
-.run-card-agent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
-.run-task {
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-  overflow: hidden;
-  color: hsl(var(--foreground));
-  font-size: var(--fs-sm); line-height: 1.5;
-  white-space: pre-wrap;
-}
-.run-progress { display: grid; gap: 2px; }
-.run-progress strong { font-size: var(--fs-xs); font-weight: 600; }
-.run-progress small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.run-meta {
-  display: flex; align-items: center; justify-content: space-between;
-  color: hsl(var(--muted-foreground));
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: var(--fs-2xs); line-height: 1.4;
-  font-variant-numeric: tabular-nums;
-}
-.run-table { min-width: 880px; }
-.run-table .run-task-cell { max-width: 360px; }
-.run-table th.num, .run-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.run-task-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--fs-sm); }
-.run-task-cell small { display: block; margin-top: 2px; color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* Run detail (drawer) */
-.run-detail-grid {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
-  margin-bottom: var(--sp-4);
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  overflow: hidden;
-  background: hsl(var(--border));
-}
-.run-detail-item { padding: var(--sp-3); background: hsl(var(--card)); display: grid; gap: var(--sp-1); align-content: start; }
-.run-detail-item span { color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
-.run-detail-item strong { font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
-.run-detail-block { margin-bottom: var(--sp-4); }
-.run-detail-block h3 { margin: 0 0 var(--sp-2); color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
-.run-detail-code {
-  margin: 0; padding: var(--sp-3);
-  max-height: 320px; overflow: auto;
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
-  background: hsl(var(--muted) / .4);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: var(--fs-xs); line-height: 1.6;
-  overflow-wrap: anywhere; white-space: pre-wrap;
-}
-.run-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-
-/* ── Lists (workspaces, overview, artifacts) ──────────────────────── */
-.workspace-list, .overview-list { display: grid; gap: var(--sp-2); }
-.list-row {
-  min-height: 48px;
-  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
-  padding: var(--sp-3) var(--sp-4);
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  transition: border-color .12s ease;
-}
-.list-row:hover { border-color: hsl(var(--muted-foreground) / .4); }
-.list-row-main { display: grid; gap: 2px; min-width: 0; }
-.list-row-main strong, .path { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
-.list-row-main small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
-.panel-body > .workspace-list, .panel-body > .overview-list { gap: var(--sp-2); }
-.panel-body .list-row { border-radius: var(--radius); }
-
-/* ── API keys ─────────────────────────────────────────────────────── */
-.key-table { min-width: 0; width: 100%; table-layout: fixed; }
-.key-table th:nth-child(1) { width: 21%; }
-.key-table th:nth-child(2) { width: 15%; }
-.key-table th:nth-child(3) { width: 20%; }
-.key-table th:nth-child(4) { width: 15%; }
-.key-table th:nth-child(5) { width: 15%; }
-.key-table th:nth-child(6) { width: 14%; }
-.key-table th, .key-table td { padding-left: 10px; padding-right: 10px; }
-.key-table-wrap { overflow-x: hidden; }
-.key-table th:last-child, .key-table td:last-child { text-align: right; }
-.key-secret-cell { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
-.key-secret-cell code { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); letter-spacing: .02em; }
-.key-copy-button, .key-icon-button {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 28px; height: 28px;
-  border-radius: var(--radius);
-  color: hsl(var(--muted-foreground));
-  cursor: pointer;
-  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
-}
-.key-copy-button:hover, .key-icon-button:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
-.key-icon-button[aria-expanded="true"] {
-  background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
-  box-shadow: 0 0 0 2px hsl(var(--ring) / .35);
-}
-.key-copy-button svg, .key-icon-button svg, .key-action-menu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-.key-icon-button.danger-action { color: hsl(var(--destructive)); }
-.key-icon-button.danger-action:hover { background: hsl(var(--destructive) / .08); }
-.key-scope, .key-last-used { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
-.key-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
-
-.key-action-menu {
-  position: fixed; z-index: 50;
-  width: 188px; padding: var(--sp-1);
-  background: hsl(var(--popover));
-  border: 1px solid hsl(var(--border));
-  border-radius: calc(var(--radius) + 2px);
-  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .12), 0 2px 8px -2px rgb(0 0 0 / .08);
-}
-.key-action-menu button {
-  width: 100%; height: 30px;
-  display: flex; align-items: center; gap: var(--sp-2);
-  padding: 0 var(--sp-2);
-  border-radius: var(--radius);
-  font-size: var(--fs-sm); font-weight: 500; text-align: left;
-  transition: background-color .12s ease;
-}
-.key-action-menu button:hover { background: hsl(var(--accent)); }
-.key-action-menu button.danger-text { margin-top: var(--sp-1); border-top: 1px solid hsl(var(--border)); border-radius: 0 0 var(--radius) var(--radius); height: 34px; }
-.key-action-menu button.danger-text:hover { background: hsl(var(--destructive) / .08); }
-
-.agent-scope {
-  max-height: 168px; overflow: auto;
-  display: grid; gap: 2px;
-  padding: var(--sp-2);
-  margin-bottom: var(--sp-4);
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
-  background: hsl(var(--muted) / .4);
-}
-.agent-scope .checkbox { height: 28px; padding: 0 var(--sp-2); border-radius: var(--radius); }
-.agent-scope .checkbox:hover { background: hsl(var(--accent)); }
-.secret-box { display: grid; gap: var(--sp-3); }
-.secret-value {
-  display: block; padding: var(--sp-3);
-  background: hsl(var(--muted) / .5);
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
-  overflow-wrap: anywhere;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: var(--fs-xs);
-}
-
-/* ── Drawer ───────────────────────────────────────────────────────── */
-.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 40; animation: fadeIn .18s ease-out; }
-.drawer {
-  position: fixed; inset: 0 0 0 auto;
-  width: min(480px, 100vw);
-  display: flex; flex-direction: column;
-  background: hsl(var(--card));
-  border-left: 1px solid hsl(var(--border));
-  box-shadow: -8px 0 32px -8px rgb(0 0 0 / .15);
-  z-index: 41;
-  animation: slideInRight .22s cubic-bezier(.32, .72, 0, 1);
-  overflow: hidden;
-}
-.drawer-header {
-  height: 52px; flex-shrink: 0;
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 0 var(--sp-4);
-  border-bottom: 1px solid hsl(var(--border));
-}
-.drawer-header h2 { font-size: var(--fs-md); font-weight: 600; }
-.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4); }
-.drawer-footer {
-  flex: 0 0 auto;
-  display: flex; justify-content: flex-end; gap: var(--sp-2);
-  padding: var(--sp-3) var(--sp-4) var(--sp-4);
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-}
-@keyframes fadeIn { from { opacity: 0; } }
-@keyframes slideInRight { from { transform: translateX(16px); opacity: 0; } }
-
-/* ── Settings ─────────────────────────────────────────────────────── */
-.settings-layout { width: 100%; max-width: 680px; }
-.settings-form .panel-header { min-height: 0; padding: var(--sp-4); }
-.settings-fields { display: grid; padding: var(--sp-4); }
-.settings-fields .field:last-child { margin-bottom: 0; }
-.settings-fields .field input { max-width: 240px; }
-.settings-actions { display: flex; justify-content: flex-end; padding: var(--sp-4); }
-
-/* ── Toast ────────────────────────────────────────────────────────── */
-.toast-region {
-  position: fixed; right: var(--sp-6); bottom: var(--sp-6);
-  z-index: 60;
-  display: grid; gap: var(--sp-2);
-  max-width: 360px;
-}
-.toast {
-  padding: var(--sp-3) var(--sp-4);
-  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
-  border-radius: var(--radius);
-  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .18);
-  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
-  animation: slideInUp .2s ease;
-}
-.toast.error { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
-@keyframes slideInUp { from { opacity: 0; transform: translateY(8px); } }
-
-/* ── Responsive ───────────────────────────────────────────────────── */
-@media (max-width: 860px) {
-  :root { --sidebar-width: 56px; --gutter: var(--sp-4); }
-  .brand span:last-child, .nav-item span, .admin-meta { display: none; }
-  .brand, .nav-item, .admin-button { justify-content: center; }
-  .admin-popover { left: 0; right: auto; width: 200px; }
-}
-@media (max-width: 640px) {
-  .page-content { padding: var(--sp-4) var(--gutter) var(--sp-4); }
-  .search-box { max-width: none; }
-  .stats { grid-template-columns: 1fr; }
-  .run-summary { grid-template-columns: repeat(2, 1fr); }
-  .run-live-grid { grid-template-columns: 1fr; }
-  .toolbar input[type="search"], .toolbar select { max-width: none; width: 100%; }
-  .field-row { grid-template-columns: 1fr; }
-  .drawer { width: 100vw; }
-  .run-detail-grid { grid-template-columns: 1fr; }
-  .toast-region { right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4); max-width: none; }
-}
+// This file is generated by scripts/generate-webui-sources.mjs — do not edit by hand.
+// Edit src/webui/styles.css instead.
+export const styles = String.raw `
+/* 全局设计约定：间距用 --sp-*、字号用 --fs-*、投影用 --shadow-*、层级用 --z-*、
+   动效用 --duration-* / --ease-*，扩展时不要引入散落的像素值或字面量。 */
+
+:root {
+  color-scheme: light;
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  /* 状态色既作文字也作自己的 10% 染色底，取值按两种情况都过 AA 4.5:1 反解。
+     下面是浏览器实测值（元素真实计算色 + alpha 合成后的背景），不是手算：
+     status failed 4.58 · ready 4.79 · waiting 4.63 · running 4.62 · solid-danger 白字 5.21
+     · form-error / danger-text / error-detail / button.danger 5.43。
+     --border 是装饰性分隔（WCAG 1.4.11 豁免，不动）；--input 是识别输入框与按钮的唯一
+     线索，需 ≥3:1，实测 3.15；--ring 焦点环需 ≥3:1，实测 3.15。调亮前先重测。 */
+  --destructive: 0 84.2% 45%;
+  --destructive-text: 0 84.2% 45%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 142 76% 27%;
+  --warning: 32 95% 32%;
+  --info: 217 91% 48.5%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 57%;
+  --ring: 0 0% 56%;
+
+  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
+  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
+
+  /* 字号阶梯，全站只用这六级：
+     2xs 大写微标签（表头 / badge）· xs 辅助说明 · sm 正文与表格
+     md 面板与 drawer 标题 · lg 页面标题 · stat 统计数字 */
+  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px;
+  --fs-md: 14px; --fs-lg: 16px; --fs-stat: 28px;
+
+  --radius: 6px;
+  --radius-lg: calc(var(--radius) + 2px);
+  --sidebar-width: 232px;
+  --gutter: clamp(var(--sp-6), 4vw, 48px);
+
+  /* 投影。--shadow-ring-* 是焦点环（用 ring 色描边），不是投影，不要与 elevation 混用。 */
+  --shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
+  --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / .08);
+  --shadow-md: 0 8px 24px -4px rgb(0 0 0 / .12), 0 2px 8px -2px rgb(0 0 0 / .08);
+  --shadow-card: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -8px rgb(0 0 0 / .1);
+  --shadow-drawer: -8px 0 32px -8px rgb(0 0 0 / .15);
+  --shadow-toast: 0 8px 24px -4px rgb(0 0 0 / .18);
+  --shadow-ring-focus: 0 0 0 2px hsl(var(--ring) / .2);
+  --shadow-ring-selected: 0 0 0 2px hsl(var(--ring) / .35);
+
+  /* 层级。drawer 必须压在 backdrop 之上，menu 与 toast 再往上。 */
+  --z-topbar: 5;
+  --z-sidebar: 10;
+  --z-backdrop: 40;
+  --z-drawer: 41;
+  --z-menu: 50;
+  --z-toast: 60;
+
+  --duration-fast: .12s;
+  --duration-fade: .18s;
+  --duration-toast: .2s;
+  --duration-slide: .22s;
+  --duration-pulse: 2s;
+  --ease-standard: ease;
+  --ease-out: ease-out;
+  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
+  --ease-pulse: cubic-bezier(.4, 0, .6, 1);
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  /* destructive 是唯一「作按钮底要暗、作文字要亮」的颜色，所以暗色必须拆两个令牌：
+     基色 30.6% 配白字 9.59，文字色 58% 在自己的染色底上 4.52；把基色提到 58% 会让
+     实心危险按钮掉到 3.88。其余状态色在暗色染色底上已有 7.60 / 7.86 / 5.85，无需拆分。 */
+  --destructive: 0 62.8% 30.6%;
+  --destructive-text: 0 62.8% 58%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 142 71% 45%;
+  --warning: 38 92% 50%;
+  --info: 217 91% 65%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 40%;
+  --ring: 0 0% 83.1%;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { height: 100%; }
+html { scrollbar-gutter: stable; }
+body {
+  margin: 0;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font: var(--fs-sm)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+        "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+h1, h2, h3, p { margin: 0; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button { background: none; border: 0; cursor: pointer; padding: 0; }
+code, .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }
+.hidden, [hidden] { display: none !important; }
+.muted { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
+
+:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+}
+
+::selection { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+
+/* Thin scrollbars */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
+::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / .55); }
+::-webkit-scrollbar-track { background: transparent; }
+
+/* ── Brand ────────────────────────────────────────────────────────── */
+.brand-mark {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  border-radius: var(--radius);
+  font-weight: 700; font-size: var(--fs-sm); letter-spacing: -.02em;
+  flex-shrink: 0;
+}
+
+/* ── Auth screens ─────────────────────────────────────────────────── */
+.auth-screen {
+  min-height: 100vh;
+  display: grid; place-items: center;
+  padding: var(--sp-6);
+  background: hsl(var(--muted) / .4);
+}
+.auth-card {
+  width: min(400px, 100%);
+  padding: var(--sp-6);
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+}
+.auth-card header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
+.auth-card h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
+.auth-card > p { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
+.auth-submit { width: 100%; height: 36px; }
+
+/* ── Forms ────────────────────────────────────────────────────────── */
+.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: var(--fs-sm); font-weight: 500; }
+.field > small, .field-help { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; }
+.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4); }
+.field-row > .field { margin-bottom: 0; }
+
+input, select, textarea {
+  width: 100%; height: 32px;
+  padding: 0 var(--sp-3);
+  background: transparent;
+  border: 1px solid hsl(var(--input));
+  border-radius: var(--radius);
+  font-size: var(--fs-sm);
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+textarea { height: auto; min-height: 72px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.5; }
+input:hover, select:hover, textarea:hover { border-color: hsl(var(--muted-foreground) / .6); }
+input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: var(--shadow-ring-focus); }
+input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
+input[type="checkbox"] { width: 14px; height: 14px; padding: 0; accent-color: hsl(var(--primary)); }
+
+.checkbox { display: flex; align-items: center; gap: var(--sp-2); height: 32px; font-weight: 500; cursor: pointer; }
+.checkbox input { flex-shrink: 0; }
+
+.form-error { min-height: 18px; margin-top: var(--sp-2); color: hsl(var(--destructive-text)); font-size: var(--fs-xs); font-weight: 500; }
+.confirm-text { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); line-height: 1.6; }
+
+/* ── Buttons ──────────────────────────────────────────────────────── */
+.button {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
+  height: 32px; padding: 0 var(--sp-3);
+  border: 1px solid hsl(var(--input));
+  border-radius: var(--radius);
+  background: hsl(var(--card));
+  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
+  box-shadow: var(--shadow-xs);
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+}
+.button:hover:not(:disabled) { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+.button:disabled { opacity: .5; cursor: not-allowed; }
+.button.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+.button.primary:hover:not(:disabled) { background: hsl(var(--primary) / .88); color: hsl(var(--primary-foreground)); }
+.button.danger { color: hsl(var(--destructive-text)); }
+.button.danger:hover:not(:disabled) { background: hsl(var(--destructive) / .08); }
+.button.solid-danger { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
+.button.solid-danger:hover:not(:disabled) { background: hsl(var(--destructive) / .9); color: hsl(var(--destructive-foreground)); }
+.button.small { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
+.button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
+
+.icon-button {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex-shrink: 0;
+  border-radius: var(--radius);
+  color: hsl(var(--muted-foreground));
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.icon-button:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ── App shell ────────────────────────────────────────────────────── */
+.app-shell { min-height: 100vh; display: flex; }
+
+.sidebar {
+  position: fixed; inset: 0 auto 0 0;
+  width: var(--sidebar-width);
+  padding: var(--sp-3) var(--sp-2);
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  background: hsl(var(--card));
+  border-right: 1px solid hsl(var(--border));
+  z-index: var(--z-sidebar);
+}
+.brand {
+  display: flex; align-items: center; gap: var(--sp-2);
+  height: 40px; padding: 0 var(--sp-2);
+  font-weight: 600; font-size: var(--fs-sm); letter-spacing: -.01em;
+}
+nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
+.nav-group { display: flex; flex-direction: column; gap: 2px; }
+.nav-group-label {
+  padding: 0 var(--sp-2);
+  color: hsl(var(--muted-foreground));
+  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
+}
+.nav-group-footer { margin-top: auto; }
+.nav-item {
+  width: 100%; height: 32px;
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 0 var(--sp-2);
+  border-radius: var(--radius);
+  color: hsl(var(--muted-foreground));
+  font-size: var(--fs-sm); font-weight: 500; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+.nav-item.active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 600; }
+.nav-item-danger { color: hsl(var(--destructive-text)); }
+.nav-item-danger:hover { background: hsl(var(--destructive) / .08); color: hsl(var(--destructive-text)); }
+.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+.danger-text { color: hsl(var(--destructive-text)); }
+
+/* ── Main / page chrome ───────────────────────────────────────────── */
+.main {
+  flex: 1; min-width: 0;
+  margin-left: var(--sidebar-width);
+  min-height: 100vh;
+  display: flex; flex-direction: column;
+}
+.topbar {
+  position: sticky; top: 0; z-index: var(--z-topbar);
+  height: 56px;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
+  padding: 0 var(--gutter);
+  background: hsl(var(--background));
+  border-bottom: 1px solid hsl(var(--border));
+}
+.topbar h1 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
+.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+
+#page-results { display: flex; flex-direction: column; gap: var(--sp-4); }
+.page-content > :empty { display: none; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+
+button[aria-busy="true"] { cursor: progress; }
+button[aria-busy="true"]::after { content: '…'; margin-left: var(--sp-1); }
+
+.page-content {
+  flex: 1; width: 100%;
+  padding: var(--sp-5) var(--gutter) var(--sp-6);
+  display: flex; flex-direction: column; gap: var(--sp-4);
+}
+
+/* ── Cards / panels ───────────────────────────────────────────────── */
+.panel {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+}
+.panel-header {
+  min-height: 44px;
+  padding: 0 var(--sp-4);
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
+  border-bottom: 1px solid hsl(var(--border));
+}
+.panel-header h2 { font-size: var(--fs-md); font-weight: 600; }
+.panel-body { padding: var(--sp-4); }
+.panel-note { padding: var(--sp-4); color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
+.empty { padding: var(--sp-8) var(--sp-4); color: hsl(var(--muted-foreground)); text-align: center; font-size: var(--fs-sm); }
+.empty-state { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-8) var(--sp-4); text-align: center; }
+.empty-state > svg { width: 28px; height: 28px; margin-bottom: var(--sp-2); color: hsl(var(--muted-foreground)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.empty-state strong { font-size: var(--fs-md); font-weight: 600; color: hsl(var(--foreground)); }
+.empty-state span { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }
+.empty-state .button { margin-top: var(--sp-3); }
+
+/* Stats */
+.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
+.stat {
+  padding: var(--sp-4) var(--sp-5);
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  display: grid; gap: var(--sp-1);
+}
+.stat span { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-weight: 500; }
+.stat strong { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
+
+/* ── Toolbar ──────────────────────────────────────────────────────── */
+.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.toolbar select { width: auto; min-width: 128px; }
+.search-box { position: relative; flex: 1; min-width: 160px; max-width: 280px; }
+.search-box svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-foreground)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+.search-box input { width: 100%; padding-left: 30px; }
+
+/* ── Tables ───────────────────────────────────────────────────────── */
+.table-wrap {
+  overflow-x: auto;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+}
+table { width: 100%; border-collapse: collapse; min-width: 720px; }
+th, td { padding: 0 var(--sp-4); height: 40px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: middle; }
+th { height: 36px; color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
+tbody tr:last-child td { border-bottom: 0; }
+tbody tr:hover { background: hsl(var(--muted) / .5); }
+tr[data-run-detail] { cursor: pointer; }
+
+.agent-name { display: grid; gap: 2px; min-width: 0; }
+.agent-name strong { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-name small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.error-detail { color: hsl(var(--destructive-text)); font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: 1.4; }
+.row-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
+.agent-table { min-width: 1050px; table-layout: fixed; }
+.connection-status { padding: var(--sp-3) var(--sp-4); border: 1px solid currentColor; border-radius: var(--radius-lg); color: hsl(var(--destructive-text)); margin-bottom: var(--sp-4); overflow-wrap: anywhere; }
+.run-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
+.agent-table th:nth-child(1) { width: 22%; }
+.agent-table th:nth-child(2) { width: 8%; }
+.agent-table th:nth-child(3), .agent-table th:nth-child(4), .agent-table th:nth-child(6) { width: 10%; }
+.agent-table th:nth-child(5) { width: 26%; }
+.agent-table th:nth-child(7) { width: 14%; }
+.agent-table td, .agent-table .agent-name small { overflow-wrap: anywhere; }
+
+/* ── Badges & status ──────────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center;
+  height: 20px; padding: 0 var(--sp-2);
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+}
+.status {
+  display: inline-flex; align-items: center; gap: var(--sp-2);
+  height: 22px; padding: 0 var(--sp-2);
+  border-radius: 9999px;
+  background: hsl(var(--secondary));
+  color: hsl(var(--muted-foreground));
+  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
+}
+.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground) / .5); flex-shrink: 0; }
+.status.ready, .status.completed { color: hsl(var(--success)); background: hsl(var(--success) / .1); }
+.status.ready::before, .status.completed::before { background: hsl(var(--success)); }
+.status.failed { color: hsl(var(--destructive-text)); background: hsl(var(--destructive) / .1); }
+.status.failed::before { background: hsl(var(--destructive)); }
+.status.running { color: hsl(var(--info)); background: hsl(var(--info) / .1); }
+.status.running::before { background: hsl(var(--info)); animation: pulse var(--duration-pulse) var(--ease-pulse) infinite; }
+.status.waiting { color: hsl(var(--warning)); background: hsl(var(--warning) / .12); }
+.status.waiting::before { background: hsl(var(--warning)); animation: pulse var(--duration-pulse) var(--ease-pulse) infinite; }
+.status.checking::before { animation: pulse var(--duration-pulse) var(--ease-pulse) infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
+
+/* ── Runs page ────────────────────────────────────────────────────── */
+.run-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
+.run-section { display: flex; flex-direction: column; gap: var(--sp-3); }
+.run-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
+.run-section-title h2 { font-size: var(--fs-md); font-weight: 600; }
+.run-section-title span { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
+
+.run-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
+.run-card {
+  position: relative;
+  min-width: 0;
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4);
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-left: 3px solid hsl(var(--info));
+  border-radius: var(--radius-lg);
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+.run-card:hover { border-color: hsl(var(--muted-foreground) / .4); box-shadow: var(--shadow-sm); }
+.run-card.waiting { border-left-color: hsl(var(--warning)); }
+.run-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+.run-card-agent { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+.run-card-head > .status, .run-card-agent > .badge { flex-shrink: 0; }
+.run-card-agent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
+.run-task {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: hsl(var(--foreground));
+  font-size: var(--fs-sm); line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.run-progress { display: grid; gap: 2px; }
+.run-progress strong { font-size: var(--fs-xs); font-weight: 600; }
+.run-progress small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.run-meta {
+  display: flex; align-items: center; justify-content: space-between;
+  color: hsl(var(--muted-foreground));
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--fs-2xs); line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+}
+.run-table { min-width: 1040px; table-layout: fixed; }
+.run-table th:nth-child(1), .run-table th:nth-child(5) { width: 160px; }
+.run-table th:nth-child(4) { width: 100px; }
+.run-table th:nth-child(6) { width: 90px; }
+.run-table th:nth-child(7) { width: 110px; }
+.run-table .run-task-cell { max-width: 360px; }
+.run-table th.num, .run-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.run-task-cell strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--fs-sm); }
+.run-task-cell small { display: block; margin-top: 2px; color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Run detail (drawer) */
+.run-detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
+.run-output-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
+.run-output-heading h3 { margin: 0; }
+.run-pending { padding: var(--sp-3); margin-bottom: var(--sp-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
+.run-pending-prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
+.run-pending h3 { font-size: var(--fs-md); }
+.run-pending .row-actions { flex-wrap: wrap; }
+.run-detail-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
+  margin-bottom: var(--sp-4);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: hsl(var(--border));
+}
+.run-detail-item { padding: var(--sp-3); background: hsl(var(--card)); display: grid; gap: var(--sp-1); align-content: start; }
+.run-detail-item span { color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
+.run-detail-item strong { font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
+.run-detail-block { margin-bottom: var(--sp-4); }
+.run-detail-block h3 { margin: 0 0 var(--sp-2); color: hsl(var(--muted-foreground)); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
+.run-detail-code {
+  margin: 0; padding: var(--sp-3);
+  max-height: 320px; overflow: auto;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--muted) / .4);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--fs-xs); line-height: 1.6;
+  overflow-wrap: anywhere; white-space: pre-wrap;
+}
+.run-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+/* ── Lists (workspaces, overview, artifacts) ──────────────────────── */
+.workspace-list, .overview-list { display: grid; gap: var(--sp-2); }
+.list-row {
+  min-width: 0; min-height: 48px;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
+  padding: var(--sp-3) var(--sp-4);
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.list-row:hover { border-color: hsl(var(--muted-foreground) / .4); }
+.list-row-main { display: grid; gap: 2px; min-width: 0; }
+.list-row-main > * { min-width: 0; }
+.list-row-main strong, .path { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
+.list-row-main small { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); overflow-wrap: anywhere; }
+.panel-body > .workspace-list, .panel-body > .overview-list { gap: var(--sp-2); }
+.panel-body .list-row { border-radius: var(--radius); }
+
+/* ── API keys ─────────────────────────────────────────────────────── */
+.key-table { min-width: 760px; width: 100%; table-layout: fixed; }
+.key-table th:nth-child(1) { width: 21%; }
+.key-table th:nth-child(2) { width: 15%; }
+.key-table th:nth-child(3) { width: 20%; }
+.key-table th:nth-child(4) { width: 15%; }
+.key-table th:nth-child(5) { width: 15%; }
+.key-table th:nth-child(6) { width: 14%; }
+.key-table th, .key-table td { padding-left: 10px; padding-right: 10px; }
+.key-table-wrap { overflow-x: auto; }
+.key-table th:last-child, .key-table td:last-child { text-align: right; }
+.key-secret-cell { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
+.key-secret-cell code { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); letter-spacing: .02em; }
+.key-copy-button, .key-icon-button {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: var(--radius);
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+.key-copy-button:hover, .key-icon-button:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
+.key-icon-button[aria-expanded="true"] {
+  background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
+  box-shadow: var(--shadow-ring-selected);
+}
+.key-copy-button svg, .key-icon-button svg, .key-action-menu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.key-icon-button.danger-action { color: hsl(var(--destructive-text)); }
+.key-icon-button.danger-action:hover { background: hsl(var(--destructive) / .08); }
+.key-scope, .key-last-used { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
+.key-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
+
+.key-action-menu {
+  position: fixed; z-index: var(--z-menu);
+  width: 188px; padding: var(--sp-1);
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+.key-action-menu button {
+  width: 100%; height: 30px;
+  display: flex; align-items: center; gap: var(--sp-2);
+  padding: 0 var(--sp-2);
+  border-radius: var(--radius);
+  font-size: var(--fs-sm); font-weight: 500; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.key-action-menu button:hover { background: hsl(var(--accent)); }
+.key-action-menu button.danger-text { margin-top: var(--sp-1); border-top: 1px solid hsl(var(--border)); border-radius: 0 0 var(--radius) var(--radius); height: 34px; }
+.key-action-menu button.danger-text:hover { background: hsl(var(--destructive) / .08); }
+
+.agent-scope {
+  max-height: 168px; overflow: auto;
+  display: grid; gap: 2px;
+  padding: var(--sp-2);
+  margin-bottom: var(--sp-4);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--muted) / .4);
+}
+.agent-scope .checkbox {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
+  align-items: start; height: auto; min-height: 32px;
+  padding: 6px var(--sp-2); border-radius: var(--radius);
+}
+.agent-scope .checkbox input { margin-top: 3px; }
+.scope-name { overflow-wrap: anywhere; }
+.agent-scope .checkbox:hover { background: hsl(var(--accent)); }
+.secret-box { display: grid; gap: var(--sp-3); }
+.secret-value {
+  display: block; padding: var(--sp-3);
+  background: hsl(var(--muted) / .5);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  overflow-wrap: anywhere;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--fs-xs);
+}
+
+/* ── Drawer ───────────────────────────────────────────────────────── */
+.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: var(--z-backdrop); animation: fadeIn var(--duration-fade) var(--ease-out); }
+.drawer {
+  position: fixed; inset: 0 0 0 auto;
+  width: min(480px, 100%);
+  display: flex; flex-direction: column;
+  background: hsl(var(--card));
+  border-left: 1px solid hsl(var(--border));
+  box-shadow: var(--shadow-drawer);
+  z-index: var(--z-drawer);
+  animation: slideInRight var(--duration-slide) var(--ease-drawer);
+  overflow: hidden;
+}
+.drawer-header {
+  height: 52px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
+  padding: 0 var(--sp-4);
+  border-bottom: 1px solid hsl(var(--border));
+}
+.drawer-header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 600; }
+.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4); }
+.drawer-footer {
+  flex: 0 0 auto;
+  display: flex; justify-content: flex-end; gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-4) var(--sp-4);
+  border-top: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+}
+@keyframes fadeIn { from { opacity: 0; } }
+@keyframes slideInRight { from { transform: translateX(16px); opacity: 0; } }
+
+/* ── Settings ─────────────────────────────────────────────────────── */
+.main.settings-page .topbar { padding-inline: 0; justify-content: flex-start; gap: 0; }
+.main.settings-page .topbar h1 {
+  width: min(calc(100% - 2 * var(--gutter)), 820px);
+  margin-inline: auto;
+  padding-right: 100px;
+}
+.main.settings-page .page-actions { position: absolute; right: max(var(--gutter), calc((100% - 820px) / 2)); }
+.main.settings-page .page-content { padding-top: var(--sp-8); }
+.settings-layout { width: min(100%, 820px); margin-inline: auto; }
+.settings-section { width: 100%; }
+.settings-section + .settings-section {
+  margin-top: 48px;
+  padding-top: 48px;
+  border-top: 1px solid hsl(var(--border));
+}
+.settings-section-heading { display: grid; gap: var(--sp-2); margin-bottom: 28px; }
+.settings-section-heading h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
+/* 节说明写的是生效范围——这是界面自身无法表达的信息，不要当复述删掉 */
+.settings-note { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
+.settings-fields { display: grid; gap: 24px; width: min(100%, 520px); }
+.settings-fields .field { margin-bottom: 0; }
+.settings-fields .field input, .settings-fields .field select { max-width: none; }
+.settings-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 28px; }
+.settings-form-error { width: min(100%, 520px); margin-top: 32px; }
+.settings-account-row {
+  display: grid;
+  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
+  align-items: start;
+  gap: 32px;
+}
+.settings-account-copy { display: grid; gap: var(--sp-1); }
+.settings-account-copy strong { font-size: var(--fs-sm); font-weight: 600; }
+.settings-account-copy p { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
+.settings-account-fields { display: grid; gap: 24px; width: min(100%, 520px); }
+
+/* ── Toast ────────────────────────────────────────────────────────── */
+.toast-region {
+  position: fixed; right: var(--sp-6); bottom: var(--sp-6);
+  z-index: var(--z-toast);
+  display: grid; gap: var(--sp-2);
+  max-width: 360px;
+}
+.toast {
+  padding: var(--sp-3) var(--sp-4);
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-toast);
+  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
+  animation: slideInUp var(--duration-toast) var(--ease-standard);
+}
+.toast-region > div { display: grid; gap: var(--sp-2); }
+.toast-region > :empty { display: none; }
+.drawer .toast-region { position: static; flex: 0 0 auto; max-width: none; max-height: min(30vh, 180px); overflow-y: auto; margin: 0 var(--sp-4); }
+.drawer .toast { margin-bottom: var(--sp-3); }
+.run-card .run-detail-button { align-self: flex-end; }
+.agent-name > .badge { width: fit-content; }
+.toast.error { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
+@keyframes slideInUp { from { opacity: 0; transform: translateY(8px); } }
+
+/* ── Responsive ───────────────────────────────────────────────────── */
+@media (max-width: 1100px) {
+  /* Keep every key action visible when six columns no longer fit. The real
+     table headings stay in the accessibility tree while rows stack. */
+  .key-table { min-width: 0; }
+  .key-table thead {
+    position: absolute; width: 1px; height: 1px;
+    margin: -1px; padding: 0; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .key-table tbody { display: grid; }
+  .key-table tbody tr {
+    display: grid; grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--sp-2) var(--sp-3); padding: var(--sp-4);
+    border-bottom: 1px solid hsl(var(--border));
+  }
+  .key-table tbody tr:last-child { border-bottom: 0; }
+  .key-table td { min-width: 0; height: auto; padding: 0; border: 0; }
+  .key-table td:nth-child(1) { grid-area: 1 / 1; }
+  .key-table td:nth-child(2) { grid-area: 2 / 1; }
+  .key-table td:nth-child(6) { grid-area: 1 / 2 / 3 / 3; }
+  .key-table td[data-label] { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-3); }
+  .key-table td[data-label]::before {
+    content: attr(data-label); flex: 0 0 60px;
+    color: hsl(var(--muted-foreground)); font-size: var(--fs-xs);
+  }
+  .key-table .agent-name strong {
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    overflow-wrap: anywhere; white-space: normal;
+  }
+  .key-secret-cell { align-items: center; }
+  .key-scope, .key-last-used { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+}
+@media (max-width: 860px) {
+  :root { --sidebar-width: 56px; --gutter: var(--sp-4); }
+  /* 视觉隐藏而不是 display:none：图标栏里按钮的可访问名来自 span，
+     display:none 会让 6 个导航按钮在无障碍树上变成无名按钮。 */
+  .brand span:last-child, .nav-item span, .nav-group-label {
+    position: absolute; width: 1px; height: 1px;
+    margin: -1px; padding: 0; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .brand, .nav-item { justify-content: center; }
+  .nav-group + .nav-group { padding-top: var(--sp-2); border-top: 1px solid hsl(var(--border)); }
+}
+@media (max-width: 640px) {
+  .page-content { padding: var(--sp-4) var(--gutter) var(--sp-4); }
+  .main.settings-page .page-content { padding-top: var(--sp-6); }
+  .settings-section + .settings-section { margin-top: 40px; padding-top: 40px; }
+  .settings-section-heading { margin-bottom: 24px; }
+  .settings-account-row { grid-template-columns: 1fr; gap: var(--sp-4); }
+  .search-box { max-width: none; }
+  .stats { grid-template-columns: 1fr; }
+  .run-summary { grid-template-columns: repeat(2, 1fr); }
+  .run-live-grid { grid-template-columns: minmax(0, 1fr); }
+  .toolbar input[type="search"], .toolbar select { max-width: none; width: 100%; }
+  .field-row { grid-template-columns: 1fr; }
+  .field-spacer { display: none; }
+  .drawer { width: 100%; }
+  .run-detail-grid { grid-template-columns: 1fr; }
+  .toast-region { right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4); max-width: none; }
+}
+
+/* Keep row actions and task context in the viewport on laptops and phones. */
+@media (max-width: 1400px) {
+  .agent-table, .run-table { min-width: 0; }
+  .agent-table thead, .run-table thead {
+    position: absolute; width: 1px; height: 1px; padding: 0;
+    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+  }
+  .agent-table tbody, .run-table tbody { display: grid; }
+  .agent-table tbody tr, .run-table tbody tr {
+    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--sp-3) var(--sp-6); padding: var(--sp-4); border-bottom: 1px solid hsl(var(--border));
+  }
+  .agent-table td, .run-table td {
+    min-width: 0; max-width: none !important; padding: 0; height: auto;
+    border: 0; white-space: normal !important; overflow-wrap: anywhere; text-align: left !important;
+  }
+  .agent-table td::before, .run-table td::before { display: block; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); margin-bottom: var(--sp-1); }
+  .agent-table td:nth-child(2)::before { content: '协议'; }
+  .agent-table td:nth-child(3)::before { content: '驱动'; }
+  .agent-table td:nth-child(4)::before { content: '探测状态'; }
+  .agent-table td:nth-child(5)::before { content: '默认工作区'; }
+  .agent-table td:nth-child(6)::before { content: '权限策略'; }
+  .run-table td:nth-child(2)::before { content: '任务'; }
+  .run-table td:nth-child(3)::before { content: '结果'; }
+  .run-table td:nth-child(4)::before { content: '状态'; }
+  .run-table td:nth-child(5)::before { content: '开始时间'; }
+  .run-table td:nth-child(6)::before { content: '耗时'; }
+  .agent-table td:last-child, .run-table td:last-child, td[colspan] { grid-column: 1 / -1; }
+  .agent-table .row-actions { justify-content: flex-start; }
+  .agent-table .button.small, .run-table .button.small { min-height: 36px; }
+}
+@media (max-width: 560px) {
+  .agent-table tbody tr, .run-table tbody tr { grid-template-columns: minmax(0, 1fr); }
+  .run-pagination { align-items: flex-start; }
+}
+
+/* ── Reduced motion ───────────────────────────────────────────────── */
+/* 统一压制而不是逐个列举消费者，这样以后新增的 transition 不会漏掉。
+   running/waiting 的 pulse 停下后，色点和文字标签仍然表达状态。 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+}
 `;