:root {
  color-scheme: light;
  --color-primary: #047857;
  --color-primary-soft: #d1fae5;
  --color-accent: #ea580c;
  --color-accent-strong: #c2410c;
  --color-background: #f4f8f6;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f5f3;
  --color-foreground: #12372b;
  --color-muted: #5d716a;
  --color-border: #dce8e3;
  --color-border-strong: #b8cec5;
  --color-danger: #b42318;
  --color-blue: #2563eb;
  --shadow-sm: 0 1px 2px rgba(15, 40, 31, .06);
  --shadow-md: 0 10px 30px rgba(15, 40, 31, .08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --sidebar-width: 276px;
  --focus-ring: 0 0 0 3px rgba(4, 120, 87, .24);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #34d399;
  --color-primary-soft: #123c31;
  --color-accent: #fb923c;
  --color-accent-strong: #fdba74;
  --color-background: #0d1714;
  --color-surface: #14231e;
  --color-surface-muted: #1b2d27;
  --color-foreground: #edf8f4;
  --color-muted: #b4c6bf;
  --color-border: #2a4038;
  --color-border-strong: #3a5a4e;
  --color-danger: #f97066;
  --color-blue: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .26);
  --focus-ring: 0 0 0 3px rgba(52, 211, 153, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: "Nunito Sans", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button, a, select { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--color-surface); color: var(--color-foreground); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow-md); }
.skip-link:focus { top: 16px; }

.app-shell { height: 100vh; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--sidebar-width); padding: 24px 18px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0c3025; color: #ecfdf5;
  border-right: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #34d399; color: #052e24; font-family: "Rubik", system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 17px; letter-spacing: .02em; }
.brand span { margin-top: 1px; color: #9fd5c2; font-size: 12px; letter-spacing: .07em; }
.nav-list { display: grid; gap: 7px; margin-top: 24px; }
.nav-item, .docs-link { min-height: 46px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 11px; padding: 0 12px; background: transparent; color: #c7e5da; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; }
.nav-item:hover, .nav-item.is-active, .docs-link:hover, .docs-link.is-active { background: rgba(52, 211, 153, .15); color: #fff; }
.nav-item.is-active { box-shadow: inset 3px 0 0 #34d399; }
.docs-link.is-active { box-shadow: inset 3px 0 0 #34d399; }
.nav-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 700; }
.nav-count.is-warning { background: #f97316; color: #1f130a; }
.agent-tree { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.agent-tree-heading { min-height: 30px; padding: 0 9px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9fd5c2; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.agent-tree-heading small { color: #74b59f; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
#agent-tree { display: grid; gap: 5px; }
.knowledge-tree { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
#knowledge-tree-content { display: grid; gap: 7px; }
.knowledge-tree-platform { min-width: 0; }
.knowledge-tree-link { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 8px; border: 0; border-radius: 8px; color: #d9f4e9; background: transparent; text-align: left; cursor: pointer; }
.knowledge-tree-link:hover, .knowledge-tree-link:focus-visible { color: #fff; background: rgba(52,211,153,.14); }
.knowledge-tree-link > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.knowledge-tree-link svg { width: 15px; height: 15px; color: #7ee2bb; }
.knowledge-tree-link strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-link b { min-width: 19px; padding: 1px 5px; border-radius: 999px; color: #fff; background: #ea580c; font-size: 10px; text-align: center; }
.knowledge-tree-categories { display: grid; gap: 2px; margin: 1px 8px 5px 30px; }
.knowledge-tree-categories span, .knowledge-tree-muted, .knowledge-tree-empty { color: #87bca9; font-size: 10px; }
.knowledge-tree-muted, .knowledge-tree-empty { display: block; padding: 2px 8px; }
.agent-platform-group { min-width: 0; }
.agent-platform, .agent-child { width: 100%; border: 0; display: flex; align-items: center; text-align: left; color: #c7e5da; background: transparent; transition: background-color 180ms ease, color 180ms ease; }
.agent-platform { min-height: 46px; gap: 9px; padding: 4px 8px; border-radius: 11px; }
.agent-platform:hover, .agent-platform.is-active { color: #fff; background: rgba(52,211,153,.15); }
.agent-platform-icon { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #34d399; background: rgba(52,211,153,.12); }
.agent-platform-icon svg { width: 17px; height: 17px; }
.agent-platform-copy { min-width: 0; flex: 1; }
.agent-platform-copy strong, .agent-platform-copy small { display: block; }
.agent-platform-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.agent-platform-copy small { color: #86c6b0; font-size: 10px; }
.agent-chevron { width: 20px; height: 20px; display: grid; place-items: center; transition: transform 180ms ease; }
.agent-chevron svg { width: 15px; height: 15px; }
.agent-platform-group.is-open .agent-chevron { transform: rotate(90deg); }
.agent-children { position: relative; margin: 3px 0 7px 22px; padding-left: 13px; display: grid; gap: 2px; }
.agent-children[hidden] { display: none; }
.agent-children::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(159,213,194,.28); }
.agent-child { position: relative; min-height: 38px; gap: 9px; padding: 0 9px; border-radius: 9px; font-size: 12px; }
.agent-child::before { content: ""; position: absolute; left: -13px; top: 50%; width: 10px; height: 1px; background: rgba(159,213,194,.28); }
.agent-child svg { width: 16px; height: 16px; flex: 0 0 auto; }
.agent-child:hover, .agent-child.is-active { color: #fff; background: rgba(52,211,153,.14); }
.agent-child.is-active { box-shadow: inset 3px 0 0 #34d399; }
.sidebar-foot { margin-top: 20px; display: grid; gap: 12px; }
.health-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); }
.health-card strong, .health-card span { display: block; }
.health-card strong { font-size: 13px; }
.health-card span { color: #9fd5c2; font-size: 11px; }
.health-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 5px rgba(52,211,153,.13); }

.main-content {
  height: 100vh;
  margin-left: var(--sidebar-width);
  max-width: 1680px;
  padding: 28px clamp(20px, 3vw, 48px) 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.main-content.is-chat-page { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: 18px; padding-bottom: 18px; }
.main-content.is-chat-page > .topbar,
.main-content.is-chat-page > .alert-region,
.main-content.is-chat-page > .agent-workspace { flex: 0 0 auto; }
.main-content.is-chat-page > .chat-panel { min-height: 0; flex: 1 1 auto; }
.main-content.is-chat-page > [data-page="overview"]:not(#overview):not(#agent-chat) { display: none !important; }
.main-content.is-chat-page > .topbar,
.main-content.is-chat-page > .agent-workspace { display: none; }
.main-content.is-chat-page > .topbar { margin-bottom: 14px; }
.main-content.is-chat-page > .agent-workspace { min-height: 58px; height: 58px; margin-bottom: 10px; padding: 8px 16px; overflow: hidden; }
.main-content.is-chat-page > .agent-workspace.is-collapsed { position: static; padding: 8px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.main-content.is-chat-page > .agent-workspace .agent-summary-compact { min-height: 42px; }
.main-content.is-chat-page > .chat-panel { height: auto; margin-bottom: 0; padding: 0 14px 10px; display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1, h2, h3 { margin: 0; font-family: "Rubik", "PingFang SC", system-ui, sans-serif; line-height: 1.25; }
h1 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.035em; }
h2 { font-size: 18px; letter-spacing: -.015em; }
h3 { font-size: 15px; }
.topbar-note { margin: 7px 0 0; color: var(--color-muted); }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.range-control { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 13px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-muted); font-size: 12px; font-weight: 700; }
.range-control select { min-height: 34px; padding: 0 26px 0 6px; color: var(--color-foreground); background: var(--color-surface); border: 0; border-left: 1px solid var(--color-border); font-weight: 750; }
.button, .icon-button, .text-button { min-height: 44px; border-radius: 10px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.button { padding: 0 16px; }
.button-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .button-primary { color: #052e24; }
.button-primary:hover { filter: brightness(.94); box-shadow: var(--shadow-md); }
.button-secondary { background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-border); }
.button-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.button-danger { background: transparent; border-color: rgba(180,35,24,.35); color: var(--color-danger); }
.button-danger:hover { background: rgba(180,35,24,.08); }
.button-small { min-height: 38px; padding: 0 12px; font-size: 13px; }
.icon-button { width: 44px; padding: 0; background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-border); }
.icon-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
.text-button { min-height: 40px; padding: 0 6px; background: transparent; color: var(--color-primary); }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; filter: none; }

.alert-region { margin: -10px 0 20px; padding: 12px 14px; border: 1px solid rgba(180,35,24,.35); border-radius: 10px; background: rgba(180,35,24,.08); color: var(--color-danger); }
.agent-workspace { margin-bottom: 22px; padding: 22px; scroll-margin-top: 16px; transition: padding 220ms ease, margin-bottom 220ms ease, box-shadow 220ms ease; }
.agent-workspace-detail { display: block; }
.agent-summary-compact { width: 100%; min-height: 54px; padding: 0; display: flex; align-items: center; gap: 12px; border: 0; color: var(--color-foreground); background: transparent; text-align: left; cursor: pointer; }
.agent-summary-compact[hidden] { display: none; }
.agent-summary-compact .agent-avatar { width: 40px; height: 40px; border-radius: 12px; }
.agent-summary-compact .agent-avatar svg { width: 20px; height: 20px; }
.agent-summary-compact-copy { min-width: 0; flex: 1; }
.agent-summary-compact-copy .agent-breadcrumb { margin-bottom: 1px; font-size: 10px; }
.agent-summary-compact-copy strong, .agent-summary-compact-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-summary-compact-copy strong { font-size: 15px; }
.agent-summary-compact-copy small { margin-top: 1px; color: var(--color-muted); font-size: 11px; }
.agent-summary-compact-meta { min-width: 140px; display: grid; justify-items: end; gap: 2px; }
.agent-summary-compact-meta small { color: var(--color-muted); font-size: 10px; }
.agent-summary-toggle-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-primary); background: var(--color-surface); }
.agent-summary-toggle-icon svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.agent-summary-compact:hover .agent-summary-toggle-icon { border-color: var(--color-primary); background: var(--color-primary-soft); }
.agent-workspace.is-collapsed { position: sticky; top: 0; z-index: 15; padding: 10px 16px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(15, 40, 31, .1); }
.agent-workspace.is-collapsed .agent-workspace-detail { display: none; }
.agent-workspace.is-collapsed .agent-summary-compact { display: flex; }
.agent-workspace.is-collapsed + .chat-panel { margin-bottom: 14px; }
[data-theme="dark"] .agent-workspace.is-collapsed { box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.agent-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.agent-identity { min-width: 0; display: flex; align-items: flex-start; gap: 15px; }
.agent-avatar { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--color-primary-soft); color: var(--color-primary); }
.agent-avatar svg { width: 27px; height: 27px; }
.agent-breadcrumb { margin: 0 0 3px; color: var(--color-muted); font-size: 12px; }
.agent-workspace h2 { font-size: 23px; }
.agent-workspace-description { max-width: 700px; margin: 6px 0 0; color: var(--color-muted); font-size: 13px; }
.agent-workspace-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.agent-registration { min-height: 28px; padding: 4px 9px; display: inline-flex; align-items: center; border-radius: 999px; color: #475569; background: #eef2f1; font-size: 11px; font-weight: 800; white-space: nowrap; }
.agent-registration.is-building { color: #065f46; background: #d1fae5; }
[data-theme="dark"] .agent-registration { color: var(--color-muted); background: var(--color-surface-muted); }
[data-theme="dark"] .agent-registration.is-building { color: var(--color-primary); background: var(--color-primary-soft); }
.agent-info-grid { margin-top: 20px; display: grid; grid-template-columns: .85fr 1fr 1.45fr; gap: 10px; }
.agent-info-grid > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-muted); }
.agent-info-grid span, .agent-info-grid strong { display: block; }
.agent-info-grid span { margin-bottom: 3px; color: var(--color-muted); font-size: 11px; }
.agent-info-grid strong { overflow-wrap: anywhere; font-size: 13px; }
.agent-boundary { margin-top: 10px; padding: 11px 13px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); border-radius: 11px; color: var(--color-muted); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); font-size: 12px; }
.agent-boundary svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--color-accent); }
.chat-panel { margin-bottom: 22px; padding-bottom: 14px; transition: min-height 220ms ease, margin-bottom 220ms ease; }
.chat-panel.is-expanded { min-height: 0; display: flex; flex-direction: column; }
.chat-panel.is-expanded .chat-panel-head { flex: 0 0 52px; min-height: 52px; padding: 0 0 8px; }
.chat-panel.is-expanded .chat-workspace-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(280px, 300px); gap: 12px; }
.chat-panel.is-expanded .chat-main-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel.is-expanded .chat-messages { height: auto; min-height: 0; flex: 1 1 auto; padding: 14px 16px 18px; gap: 20px; overflow-y: auto; overflow-x: hidden; }
.chat-panel.is-expanded .chat-message { max-width: min(88%, 920px); }
.chat-panel.is-expanded .chat-composer { flex: 0 0 auto; }
.chat-panel.is-expanded .knowledge-context-panel { width: 100%; min-width: 280px; max-width: 320px; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; }
.main-content.is-chat-page .chat-panel.is-expanded { min-height: 0; }
.main-content.is-chat-page .chat-panel.is-expanded .chat-messages { overflow-y: auto; overscroll-behavior: contain; }
.main-content.is-chat-page .chat-panel.is-expanded .chat-context { flex: 0 0 auto; min-height: 38px; margin: 8px 0; padding: 7px 10px; align-items: center; }
.main-content.is-chat-page .chat-panel.is-expanded .chat-quick-actions { flex: 0 0 auto; gap: 6px; padding: 0 3px 8px; }
.main-content.is-chat-page .chat-panel.is-expanded .chat-quick-action { min-height: 32px; padding: 4px 9px; }
.main-content.is-chat-page .chat-panel.is-expanded.has-formal-message .chat-quick-actions { display: none; }
.main-content.is-chat-page .chat-panel.is-expanded .chat-composer {
  margin-top: 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(15, 40, 31, .08);
}
.main-content.is-chat-page .chat-panel.is-expanded .chat-composer textarea {
  min-height: 72px;
  max-height: 160px;
  height: 72px;
  padding: 2px 3px 8px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.6;
}
.main-content.is-chat-page .chat-panel.is-expanded .chat-composer textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}
.main-content.is-chat-page .chat-panel.is-expanded .chat-composer-foot {
  min-height: 40px;
  margin-top: 2px;
  padding-top: 7px;
  display: flex;
  justify-content: flex-end;
}
.main-content.is-chat-page .chat-panel.is-expanded .chat-composer-foot .chat-send-button { min-height: 44px; }
[data-theme="dark"] .main-content.is-chat-page .chat-panel.is-expanded .chat-composer { box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.chat-panel-head { padding-bottom: 11px; }
.chat-head-actions { display: flex; align-items: center; gap: 10px; }
.chat-head-actions .text-button { min-height: 36px; }
.chat-header-icon { width: 38px; min-height: 38px; border-radius: 9px; }
.chat-header-icon svg { width: 17px; height: 17px; }
.chat-knowledge-toggle { gap: 5px; }
.chat-knowledge-toggle svg { width: 15px; height: 15px; }
.chat-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .36fr); gap: 16px; align-items: stretch; }
.chat-panel.is-knowledge-collapsed .chat-workspace-grid { grid-template-columns: minmax(0, 1fr); }
.chat-panel.is-knowledge-collapsed .knowledge-context-panel { display: none; }
.chat-main-column { min-width: 0; }
.chat-context { margin: 12px 0; padding: 9px 11px; display: flex; align-items: flex-start; gap: 8px; border-radius: 9px; background: var(--color-primary-soft); color: var(--color-muted); font-size: 12px; }
.chat-context svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-primary); }
.chat-messages { height: 330px; overflow-y: auto; padding: 4px 3px 12px; display: grid; align-content: start; gap: 14px; scroll-behavior: smooth; }
.chat-message { max-width: min(82%, 720px); display: grid; gap: 4px; }
.chat-message.is-user { justify-self: end; justify-items: end; }
.chat-message.is-assistant { justify-self: start; }
.chat-message-label { color: var(--color-muted); font-size: 11px; font-weight: 800; }
.chat-bubble { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 13px 13px 13px 4px; background: var(--color-surface-muted); font-size: 13px; line-height: 1.65; }
.chat-message.is-user .chat-bubble { border-color: var(--color-primary); border-radius: 13px 13px 4px 13px; background: var(--color-primary); color: #fff; }
[data-theme="dark"] .chat-message.is-user .chat-bubble { color: #052e24; }
.chat-message time { color: var(--color-muted); font-size: 10px; }
.chat-tool { margin-top: 10px; padding: 7px 8px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 7px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-foreground); background: var(--color-surface); font-size: 11px; }
.chat-tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.chat-tool strong, .chat-tool small { display: block; }
.chat-tool small { color: var(--color-muted); font-size: 10px; line-height: 1.45; }
.chat-approval { margin-top: 10px; padding: 8px; display: flex; align-items: flex-start; gap: 7px; border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: 8px; color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); font-size: 11px; }
.chat-approval svg { width: 16px; height: 16px; flex: 0 0 auto; }
.chat-plan-card { margin-top: 12px; padding: 11px; border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.chat-plan-head, .chat-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.chat-plan-head strong { font-size: 12px; }
.chat-plan-card > p { margin: 8px 0; color: var(--color-muted); font-size: 11px; }
.chat-plan-card ol { margin: 0; padding-left: 19px; display: grid; gap: 5px; color: var(--color-foreground); font-size: 11px; }
.chat-plan-card li { padding-left: 2px; }
.chat-plan-card li small { display: block; color: var(--color-muted); font-size: 10px; }
.chat-plan-foot { margin-top: 10px; align-items: flex-end; }
.chat-plan-foot > span { max-width: 62%; color: var(--color-muted); font-size: 10px; line-height: 1.45; }
.chat-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 3px 11px; }
.chat-quick-action { min-height: 34px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-muted); background: var(--color-surface); font-size: 11px; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; }
.chat-quick-action:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.chat-composer { flex-shrink: 0; padding-top: 10px; border-top: 1px solid var(--color-border); }
.chat-composer textarea { width: 100%; min-height: 58px; padding: 11px 12px; resize: vertical; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 10px; }
.chat-composer textarea:disabled { cursor: not-allowed; opacity: .6; background: var(--color-surface-muted); }
.chat-composer-foot { margin-top: 7px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--color-muted); font-size: 11px; }
.chat-send-button { width: 44px; min-width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; display: inline-grid; place-items: center; }
.chat-send-button svg { width: 20px; height: 20px; }
.chat-send-button.is-loading { cursor: wait; }
.chat-send-spinner { width: 19px; height: 19px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: chat-send-spin 800ms linear infinite; }
@keyframes chat-send-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-send-spinner { animation-duration: 1600ms; } }
.chat-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: var(--color-muted); }
.chat-empty .empty-icon { margin-bottom: 3px; }
.chat-empty strong { color: var(--color-foreground); font-size: 14px; }
.chat-empty p { margin: 2px 0 0; font-size: 12px; }
.knowledge-context-panel { min-width: 0; min-height: 100%; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-muted); }
.knowledge-context-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.knowledge-context-head .section-kicker { margin-bottom: 3px; }
.knowledge-context-head h3 { font-size: 16px; }
.knowledge-context-status { margin-top: 11px; padding: 9px 10px; border-radius: 9px; color: var(--color-muted); background: var(--color-surface); font-size: 11px; line-height: 1.45; }
.knowledge-context-status strong, .knowledge-context-status span { display: block; }
.knowledge-context-status strong { color: var(--color-foreground); font-size: 11px; }
.knowledge-context-status span { margin-top: 3px; }
.knowledge-context-status.is-active { border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); background: var(--color-primary-soft); }
.knowledge-context-status.is-loading { color: var(--color-primary); }
.knowledge-context-list { display: grid; gap: 8px; margin-top: 10px; max-height: 404px; overflow-y: auto; padding-right: 2px; }
.main-content.is-chat-page .knowledge-context-panel .knowledge-context-list { max-height: none; overflow: visible; }
.knowledge-context-card { padding: 9px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); }
.knowledge-context-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.knowledge-context-card-head strong { min-width: 0; font-size: 11px; }
.knowledge-context-score { flex: 0 0 auto; padding: 2px 5px; border-radius: 5px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 9px; font-weight: 800; }
.knowledge-context-card p { margin: 6px 0; color: var(--color-muted); font-size: 10px; line-height: 1.5; }
.knowledge-context-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--color-muted); font-size: 9px; }
.knowledge-context-card-foot button { min-height: 24px; padding: 2px 6px; border: 1px solid var(--color-border-strong); border-radius: 6px; color: var(--color-primary); background: var(--color-surface); font-size: 9px; cursor: pointer; }
.knowledge-context-empty { padding: 18px 7px; color: var(--color-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.knowledge-context-note { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 10px; line-height: 1.5; }
.monitoring-panel { margin-bottom: 22px; }
.monitoring-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.monitoring-content { padding-top: 13px; }
.monitoring-summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-muted); }
.monitoring-summary > div { min-width: 0; flex: 1; }
.monitoring-summary strong, .monitoring-summary span { display: block; }
.monitoring-summary strong { font-size: 13px; }
.monitoring-summary div span { margin-top: 2px; color: var(--color-muted); font-size: 11px; }
.monitoring-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 5px var(--color-primary-soft); }
.monitoring-status-dot.is-danger { background: var(--color-danger); box-shadow: 0 0 0 5px rgba(180,35,24,.12); }
.monitoring-rule { padding: 4px 7px; border-radius: 7px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.monitoring-alerts { margin-top: 9px; display: grid; gap: 7px; }
.monitor-alert { display: grid; grid-template-columns: 66px minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 9px 10px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 9px; background: var(--color-surface); }
.monitor-alert > span { color: var(--color-primary); font-size: 10px; font-weight: 800; }
.monitor-alert strong, .monitor-alert p { display: block; }
.monitor-alert strong { font-size: 12px; }
.monitor-alert p { margin: 2px 0 0; color: var(--color-muted); font-size: 11px; }
.monitor-alert time { color: var(--color-muted); font-size: 10px; white-space: nowrap; }
.monitor-alert.is-high { border-left-color: var(--color-danger); }.monitor-alert.is-high > span { color: var(--color-danger); }
.monitor-alert.is-medium { border-left-color: var(--color-accent); }.monitor-alert.is-medium > span { color: var(--color-accent-strong); }
.monitoring-empty { padding: 14px 4px; color: var(--color-muted); font-size: 12px; text-align: center; }
.agent-os-panel { margin-bottom: 22px; }
.agent-os-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.os-summary { margin-top: 13px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.os-stat { padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.os-stat strong, .os-stat span, .os-stat small { display: block; }
.os-stat strong { color: var(--color-primary); font-family: "Rubik", system-ui, sans-serif; font-size: 21px; line-height: 1; }
.os-stat span { margin-top: 5px; font-size: 12px; font-weight: 800; }
.os-stat small { margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.os-tabs { margin: 15px 0 11px; display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: var(--color-surface-muted); }
.os-tab { min-height: 38px; flex: 1; padding: 0 11px; border: 0; border-radius: 8px; color: var(--color-muted); background: transparent; font-size: 12px; font-weight: 800; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.os-tab:hover { color: var(--color-foreground); }
.os-tab.is-active { color: var(--color-foreground); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.os-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.os-card { min-width: 0; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.os-card-feature { background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface)); }
.os-card-head { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.os-card-head .section-kicker { margin-bottom: 3px; }
.os-card-head h3 { font-size: 15px; }
.os-list { margin-top: 10px; display: grid; gap: 8px; }
.os-list-row { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: 9px; background: var(--color-surface-muted); }
.os-row-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.os-row-icon svg { width: 16px; height: 16px; }
.os-list-row > div { min-width: 0; }
.os-list-row strong, .os-list-row small, .os-list-row p { display: block; }
.os-list-row strong { overflow-wrap: anywhere; font-size: 12px; }
.os-list-row small { margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.os-list-row p { margin: 4px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.os-empty { padding: 22px 4px; color: var(--color-muted); font-size: 12px; text-align: center; }
.knowledge-search { margin: 9px 0; display: flex; gap: 7px; }
.knowledge-search input { flex: 1; min-width: 0; min-height: 38px; padding: 8px 10px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; }
.chat-knowledge { margin-top: 10px; padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); color: var(--color-muted); font-size: 10px; }
.chat-knowledge > div { display: flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 800; }
.chat-knowledge svg { width: 15px; height: 15px; }
.chat-knowledge-row { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.chat-knowledge-row > span { min-width: 0; overflow-wrap: anywhere; }
.chat-knowledge-row button { min-height: 24px; padding: 2px 7px; border: 1px solid var(--color-border-strong); border-radius: 6px; color: var(--color-primary); background: var(--color-surface); font-size: 10px; cursor: pointer; }
.chat-knowledge > small { display: block; margin-top: 6px; color: var(--color-muted); font-size: 9px; }
.team-launch { margin: 0 0 13px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.team-launch strong, .team-launch p { display: block; }
.team-launch strong { font-size: 12px; }
.team-launch p { margin: 3px 0 0; color: var(--color-muted); font-size: 11px; }
.team-run-card { margin: 0 0 14px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.team-run-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-run-head strong { font-size: 12px; }
.team-run-card > p { margin: 6px 0 8px; color: var(--color-muted); font-size: 11px; }
.team-assignment-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.team-assignment-list > span { min-width: 0; padding: 7px; display: grid; gap: 3px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); }
.team-assignment-list svg { width: 15px; height: 15px; color: var(--color-primary); }
.team-assignment-list b { overflow-wrap: anywhere; font-size: 10px; }
.team-assignment-list small { color: var(--color-muted); font-size: 9px; }
.trace-artifact-card { margin: 0 0 14px; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.trace-artifact-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trace-artifact-head strong { font-size: 12px; }
.trace-artifact-head > span { color: var(--color-muted); font-size: 10px; }
.trace-artifact-grid { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trace-artifact-grid > div { min-width: 0; padding: 8px; border-radius: 8px; background: var(--color-surface-muted); }
.trace-artifact-grid small { color: var(--color-muted); font-size: 10px; font-weight: 800; }
.trace-artifact-grid p { margin: 7px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.trace-artifact-grid p svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-primary); }
.trace-artifact-grid p span { min-width: 0; }
.trace-artifact-grid b, .trace-artifact-grid em { display: block; overflow-wrap: anywhere; font-size: 10px; font-style: normal; }
.trace-artifact-grid em { margin-top: 2px; color: var(--color-muted); font-size: 9px; }
.workspace-hero { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--color-surface-muted); }
.workspace-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--color-primary); background: var(--color-primary-soft); }
.workspace-icon svg { width: 18px; height: 18px; }
.workspace-hero strong, .workspace-hero p, .workspace-hero small { display: block; }
.workspace-hero strong { font-size: 13px; }
.workspace-hero p { margin: 4px 0; color: var(--color-muted); font-size: 11px; line-height: 1.5; }
.workspace-hero small { color: var(--color-primary); font-size: 10px; font-weight: 800; }
.workspace-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.workspace-chips span { padding: 4px 7px; border-radius: 6px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 10px; font-weight: 800; }
.route-list { margin-top: 10px; display: grid; gap: 7px; }
.os-card-model-config { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), var(--color-surface)); }
.model-config-note, .model-config-billing { display: block; color: var(--color-text-muted); line-height: 1.55; }
.model-config-note { margin: 10px 0; font-size: 12px; }
.model-config-billing { margin-top: 10px; font-size: 11px; }
.model-config-state { display: grid; gap: 3px; padding: 10px; border-radius: 9px; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.model-config-state strong { font-size: 13px; }
.model-config-state small { color: var(--color-text-muted); }
.model-config-actions { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.model-hub-page { margin-bottom: 22px; }
.model-hub-head { align-items: flex-start; }
.model-hub-head h2 { font-size: 24px; }
.model-hub-subtitle { margin: 6px 0 0; color: var(--color-muted); font-size: 13px; }
.model-hub-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.model-hub-banner { margin-top: 15px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); border-radius: 12px; background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
.model-hub-banner .workspace-icon { width: 34px; height: 34px; }
.model-hub-banner strong, .model-hub-banner p { display: block; }
.model-hub-banner strong { font-size: 12px; }
.model-hub-banner p { margin: 3px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.model-provider-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.model-provider-card { min-width: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.model-provider-card.is-ready { border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); }
.model-provider-card-head, .model-provider-brand, .model-provider-foot, .model-provider-actions { display: flex; align-items: center; }
.model-provider-card-head, .model-provider-foot { justify-content: space-between; gap: 12px; }
.model-provider-brand { min-width: 0; gap: 10px; }
.model-provider-brand h3 { font-size: 16px; }
.model-provider-brand .section-kicker { margin-bottom: 3px; font-size: 9px; }
.model-provider-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--color-primary); background: var(--color-primary-soft); }
.model-provider-icon svg { width: 20px; height: 20px; }
.model-provider-icon-openai-api { color: #2563eb; background: #dbeafe; }
.model-provider-icon-doubao { color: #b45309; background: #fef3c7; }
.model-provider-icon-deepseek { color: #7c3aed; background: #ede9fe; }
.model-provider-description { min-height: 36px; margin: 13px 0 11px; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.model-provider-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.model-provider-meta > div { min-width: 0; padding: 9px; border-radius: 9px; background: var(--color-surface-muted); }
.model-provider-meta dt { color: var(--color-muted); font-size: 10px; }
.model-provider-meta dd { margin: 4px 0 0; overflow: hidden; color: var(--color-foreground); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.model-provider-capabilities { margin: 11px 0 13px; display: flex; flex-wrap: wrap; gap: 5px; }
.model-provider-capabilities span { padding: 4px 7px; border-radius: 6px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 10px; font-weight: 750; }
.model-provider-foot { padding-top: 11px; border-top: 1px solid var(--color-border); }
.model-provider-foot strong, .model-provider-foot small { display: block; }
.model-provider-foot strong { color: var(--color-foreground); font-size: 11px; }
.model-provider-foot small { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.model-provider-hint { color: var(--color-muted); font-size: 11px; }
.model-provider-actions { gap: 8px; }
.model-hub-empty { grid-column: 1 / -1; padding: 34px 16px; display: grid; justify-items: center; gap: 7px; border: 1px dashed var(--color-border-strong); border-radius: 12px; color: var(--color-muted); text-align: center; }
.model-hub-empty strong { color: var(--color-foreground); font-size: 13px; }
.model-hub-empty span { font-size: 11px; }
.model-hub-next { margin-top: 14px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 12px; background: var(--color-surface-muted); }
.model-hub-next h3 { font-size: 14px; }
.model-hub-next p:not(.section-kicker) { margin: 5px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.model-hub-route { padding: 8px 10px; border-radius: 8px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }
.model-bindings-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--color-border); }
.model-bindings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.model-bindings-head h3 { font-size: 16px; }
.model-bindings-head p:not(.section-kicker) { margin: 4px 0 0; color: var(--color-muted); font-size: 11px; }
.model-binding-list { margin-top: 11px; display: grid; gap: 8px; }
.model-binding-row { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(160px, .9fr) auto; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.model-binding-row.is-disabled { opacity: .62; }
.model-binding-title, .model-binding-tags, .model-binding-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.model-binding-title strong { font-size: 12px; }
.model-binding-main p { margin: 4px 0 0; color: var(--color-muted); font-size: 10px; }
.model-binding-tags { margin-top: 7px; }
.model-binding-tags span, .model-default-badge { padding: 3px 6px; border-radius: 6px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 9px; font-weight: 750; }
.model-default-badge { color: #9a3412; background: #ffedd5; }
.model-binding-meta { min-width: 0; display: grid; gap: 4px; color: var(--color-muted); font-size: 10px; }
.model-binding-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-binding-actions { justify-content: flex-end; }
.model-binding-empty { padding: 20px 14px; border: 1px dashed var(--color-border-strong); border-radius: 10px; color: var(--color-muted); font-size: 11px; text-align: center; }
.model-binding-dialog { width: min(620px, calc(100vw - 32px)); }
.model-binding-dialog form { max-height: min(820px, calc(100vh - 40px)); overflow: auto; }
.model-binding-capabilities { margin: 14px 0 0; padding: 11px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; column-gap: 16px; row-gap: 7px; border: 1px solid var(--color-border); border-radius: 10px; }
.model-binding-capabilities legend { grid-column: 1 / -1; padding: 0 5px; color: var(--color-muted); font-size: 11px; }
.model-binding-capabilities label, .model-binding-default { width: 100%; min-height: 24px; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--color-foreground); font-size: 11px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.model-binding-capabilities input[type="checkbox"], .model-binding-default input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--color-primary); }
.model-binding-toggles { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: 16px; }
.model-binding-dialog small { color: var(--color-muted); font-weight: 400; }
.route-row { min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 8px 9px; border-bottom: 1px solid var(--color-border); }
.route-row:last-child { border-bottom: 0; }
.route-row > div { min-width: 0; }
.route-row strong, .route-row small { display: block; }
.route-row strong { overflow-wrap: anywhere; font-size: 12px; }
.route-row small { margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.route-row > span { color: var(--color-primary); font-size: 10px; font-weight: 800; text-align: right; white-space: nowrap; }
.collab-note { margin-top: 10px; padding: 9px; display: flex; gap: 7px; align-items: flex-start; border-radius: 8px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 11px; line-height: 1.45; }
.collab-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-primary); }
.supervisor-strip { margin-top: 13px; padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.supervisor-strip strong, .supervisor-strip span { display: block; }
.supervisor-strip strong { font-size: 12px; }
.supervisor-strip span { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.supervisor-form { min-width: min(440px, 48%); display: flex; gap: 7px; }
.supervisor-form input { flex: 1; min-width: 0; min-height: 38px; padding: 8px 10px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 8px; }
.supervisor-result { margin-top: 9px; padding: 11px; border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
.supervisor-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.supervisor-result-head strong, .supervisor-result-head span { display: block; }
.supervisor-result-head strong { font-size: 12px; }
.supervisor-result-head span { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.supervisor-steps { margin-top: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.supervisor-steps > span { min-width: 0; padding: 8px; display: grid; gap: 3px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.supervisor-steps b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); font-size: 10px; }
.supervisor-steps strong, .supervisor-steps small { overflow-wrap: anywhere; font-size: 10px; }
.supervisor-steps small { color: var(--color-muted); }
.supervisor-note { margin: 9px 0 0; color: var(--color-muted); font-size: 10px; }
.workflow-graph { margin: 0 0 14px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.workflow-graph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-graph-head strong { font-size: 12px; }
.workflow-graph-head span { color: var(--color-muted); font-size: 10px; }
.workflow-graph-list { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.workflow-node { min-width: 0; padding: 8px; display: flex; align-items: flex-start; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.workflow-node-index { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; font-weight: 800; }
.workflow-node > div { min-width: 0; flex: 1; }
.workflow-node strong, .workflow-node small { display: block; overflow-wrap: anywhere; font-size: 10px; }
.workflow-node small { margin-top: 3px; color: var(--color-muted); }
.workflow-node.is-success { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.workflow-node.is-running { border-color: #f59e0b; }
.workflow-node.is-waiting { border-color: #c2410c; }
.os-empty { min-height: 84px; display: grid; place-items: center; }
.intelligence-tabs { margin: 15px 0 11px; display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: var(--color-surface-muted); }
.intelligence-tab { min-height: 36px; flex: 1; padding: 0 10px; border: 0; border-radius: 8px; color: var(--color-muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.intelligence-tab.is-active { color: var(--color-foreground); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.intelligence-head-actions { display: flex; align-items: center; gap: 9px; }
.intelligence-content { min-height: 116px; }
.intelligence-empty { padding: 28px 8px; color: var(--color-muted); text-align: center; font-size: 12px; }
.anomaly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.anomaly-card { min-width: 0; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.anomaly-card > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.anomaly-card > div span { color: var(--color-primary); font-size: 10px; font-weight: 800; }
.anomaly-card > div time { color: var(--color-muted); font-size: 9px; }
.anomaly-card > strong, .anomaly-card > p, .anomaly-card > small { display: block; }
.anomaly-card > strong { margin-top: 8px; font-size: 12px; }
.anomaly-card > p { margin: 4px 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.anomaly-card > small { color: var(--color-muted); font-size: 9px; }
.anomaly-card.is-high { border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.anomaly-card.is-high > div span { color: var(--color-danger); }
.anomaly-card.is-medium { border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border)); }
.anomaly-card.is-medium > div span { color: var(--color-accent-strong); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.metric-card { min-width: 0; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.metric-card strong, .metric-card small, .metric-card p, .metric-card span { display: block; }
.metric-card strong { font-size: 13px; }
.metric-card small { margin-top: 3px; color: var(--color-primary); font-size: 9px; font-weight: 800; }
.metric-card p { margin: 7px 0 5px; color: var(--color-muted); font-size: 10px; line-height: 1.45; }
.metric-card span { color: var(--color-foreground); font-size: 10px; line-height: 1.4; }
.simulator-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.simulator-form label, .experiment-form label { display: grid; gap: 5px; color: var(--color-muted); font-size: 10px; font-weight: 800; }
.simulator-form input, .experiment-form input, .experiment-form textarea { min-width: 0; min-height: 38px; padding: 8px 10px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 8px; }
.simulator-result { margin-top: 10px; padding: 10px; border-radius: 9px; background: var(--color-surface-muted); color: var(--color-muted); font-size: 11px; }
.simulator-result strong, .simulator-result span, .simulator-result p, .simulator-result small { display: block; }
.simulator-result strong { color: var(--color-foreground); }
.simulator-result span { margin-top: 4px; color: var(--color-primary); font-weight: 800; }
.simulator-result p { margin: 5px 0; }
.simulator-result small { font-size: 9px; }
.experiment-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 12px; }
.experiment-form { display: grid; gap: 8px; padding: 11px; border-radius: 10px; background: var(--color-surface-muted); }
.experiment-form > strong { font-size: 12px; }
.experiment-form textarea { resize: vertical; }
.experiment-list { display: grid; gap: 8px; align-content: start; }
.experiment-list article { padding: 10px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface-muted); }
.experiment-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.experiment-list article strong { font-size: 12px; }
.experiment-list article p { margin: 5px 0; color: var(--color-muted); font-size: 11px; }
.experiment-list article small { color: var(--color-muted); font-size: 9px; }
.issue-list { display: grid; gap: 8px; }.issue-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 10px; background: var(--color-surface-muted); transition: background-color 180ms ease, border-color 180ms ease; }.issue-card:hover { background: var(--color-surface); border-color: var(--color-border-strong); }.issue-card.is-high { border-left-color: var(--color-danger); }.issue-card.is-low { border-left-color: var(--color-primary); }.issue-card.is-resolved { opacity: .68; }.issue-card-main { min-width: 0; }.issue-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }.issue-priority { color: var(--color-accent-strong); font-size: 10px; font-weight: 800; }.issue-card.is-high .issue-priority { color: var(--color-danger); }.issue-card-main > strong, .issue-card-main > p, .issue-card-main > small { display: block; }.issue-card-main > strong { font-size: 12px; }.issue-card-main > p { margin: 4px 0; color: var(--color-muted); font-size: 11px; line-height: 1.4; }.issue-card-main > small { color: var(--color-muted); font-size: 9px; }.issue-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 9px; border-radius: 9px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; font-weight: 800; }.issue-flow b { color: var(--color-primary); }.lifecycle-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }.lifecycle-intro strong { font-size: 13px; }.lifecycle-intro p { margin: 3px 0 0; color: var(--color-muted); font-size: 11px; }.lifecycle-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }.lifecycle-card { min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: 10px; background: var(--color-surface-muted); }.lifecycle-card.is-blue { border-top-color: var(--color-blue); }.lifecycle-card.is-orange { border-top-color: var(--color-accent); }.lifecycle-card.is-green { border-top-color: var(--color-primary); }.lifecycle-card.is-purple { border-top-color: #7c3aed; }.lifecycle-card.is-red { border-top-color: var(--color-danger); }.lifecycle-card-head { display: flex; align-items: center; gap: 6px; }.lifecycle-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }.lifecycle-card strong { min-width: 0; flex: 1; font-size: 12px; }.lifecycle-card-head b { font: 700 18px/1 "Rubik", system-ui, sans-serif; }.lifecycle-card p { min-height: 34px; margin: 9px 0 7px; color: var(--color-muted); font-size: 10px; line-height: 1.45; }.lifecycle-card small { color: var(--color-muted); font-size: 9px; }
.section { margin-bottom: 22px; }
.section-heading, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading { margin-bottom: 13px; }
.section-note, .panel-count { color: var(--color-muted); font-size: 13px; }
.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platform-card { min-height: 112px; width: 100%; padding: 16px; display: flex; align-items: center; gap: 13px; text-align: left; background: var(--color-surface); color: var(--color-foreground); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.platform-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.platform-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.platform-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--color-surface-muted); color: var(--color-primary); }
.platform-icon svg { width: 24px; height: 24px; }
.platform-card strong, .platform-card small { display: block; }
.platform-card strong { margin-bottom: 3px; font-size: 16px; }
.platform-card small { color: var(--color-muted); font-size: 12px; }
.platform-state { margin-left: auto; align-self: flex-start; padding: 3px 7px; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-muted); font-size: 11px; white-space: nowrap; }
.platform-card.is-selected .platform-state { background: var(--color-primary); color: #fff; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-card { min-height: 112px; padding: 16px; display: flex; align-items: center; gap: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.stat-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; }
.tone-green { color: #047857; background: #d1fae5; }.tone-blue { color: #1d4ed8; background: #dbeafe; }.tone-orange { color: #c2410c; background: #ffedd5; }.tone-red { color: #b42318; background: #fee4e2; }
[data-theme="dark"] .tone-green, [data-theme="dark"] .tone-blue, [data-theme="dark"] .tone-orange, [data-theme="dark"] .tone-red { background: var(--color-surface-muted); }
[data-theme="dark"] .health-score.is-good { border-color: #185b49; } [data-theme="dark"] .health-score.is-steady { border-color: #75451f; } [data-theme="dark"] .health-score.is-danger { border-color: #71322f; } [data-theme="dark"] .health-next-icon { background: var(--color-surface-muted); }
.stat-card span, .stat-card small { display: block; color: var(--color-muted); }
.stat-card span { font-size: 13px; font-weight: 700; }
.stat-card strong { display: block; margin: 1px 0 -1px; font-family: "Rubik", system-ui, sans-serif; font-size: 28px; line-height: 1.2; }
.stat-card small { font-size: 11px; }

.health-overview-panel { margin-bottom: 22px; }
.health-head-actions { display: flex; align-items: center; gap: 10px; }
.health-overview-content { padding-top: 14px; }
.health-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.55fr) minmax(220px, .8fr); gap: 18px; align-items: center; }
.health-score-wrap { display: flex; align-items: center; gap: 14px; }
.health-score { width: 92px; height: 92px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 9px solid var(--color-primary-soft); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.health-score.is-good { border-color: #a7f3d0; color: var(--color-primary); }.health-score.is-steady { border-color: #fed7aa; color: var(--color-accent-strong); }.health-score.is-danger { border-color: #fecaca; color: var(--color-danger); }
.health-score strong { font: 700 27px/1 "Rubik", system-ui, sans-serif; }.health-score span { margin-top: 2px; color: var(--color-muted); font-size: 9px; }
.health-label { font-size: 15px; }.health-score-wrap p { max-width: 190px; margin: 4px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.health-dimensions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.health-dimension > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }.health-dimension span { color: var(--color-muted); font-size: 11px; }.health-dimension strong { font: 700 15px/1 "Rubik", system-ui, sans-serif; }
.health-progress { height: 6px; margin: 7px 0 5px; overflow: hidden; border-radius: 99px; background: var(--color-surface-muted); }.health-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 300ms ease; }.health-progress-bar.is-steady { background: var(--color-accent); }.health-progress-bar.is-danger { background: var(--color-danger); }
.health-dimension small { display: block; color: var(--color-muted); font-size: 9px; line-height: 1.35; }.health-next { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; background: var(--color-surface-muted); }.health-next-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--color-accent-strong); background: #ffedd5; }.health-next-icon svg { width: 16px; height: 16px; }.health-next strong, .health-next p { display: block; }.health-next strong { font-size: 12px; }.health-next p { margin: 3px 0 0; color: var(--color-muted); font-size: 10px; line-height: 1.4; }.health-empty { padding: 22px; color: var(--color-muted); text-align: center; font-size: 12px; }

[data-module][hidden] { display: none !important; }
.nav-item[hidden], .agent-tree[hidden], .knowledge-tree[hidden] { display: none !important; }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .72fr) minmax(290px, .83fr); gap: 14px; margin-bottom: 14px; }
.insight-grid .panel { min-height: 340px; }
.trend-chart { min-height: 252px; padding-top: 15px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; color: var(--color-muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { width: 22px; height: 3px; border-radius: 99px; background: var(--color-primary); }
.legend-line.is-completed { height: 0; border-top: 3px dashed var(--color-blue); background: transparent; }
.trend-svg { width: 100%; height: 185px; overflow: visible; }
.trend-svg .grid-line { stroke: var(--color-border); stroke-width: 1; }
.trend-svg .axis-label { fill: var(--color-muted); font-size: 10px; }
.trend-svg .created-line { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-svg .completed-line { fill: none; stroke: var(--color-blue); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; }
.trend-svg .created-area { fill: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.chart-empty { min-height: 180px; display: grid; place-items: center; color: var(--color-muted); font-size: 13px; text-align: center; }
.chart-zero-note { margin: -32px 0 8px; text-align: center; color: var(--color-muted); font-size: 12px; }
.chart-data { margin-top: 3px; color: var(--color-muted); font-size: 12px; }
.chart-data summary { width: max-content; color: var(--color-primary); font-weight: 750; }
.chart-data table { width: 100%; margin-top: 8px; border-collapse: collapse; color: var(--color-foreground); }
.chart-data th, .chart-data td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: right; }
.chart-data th:first-child, .chart-data td:first-child { text-align: left; }

.distribution-content { min-height: 250px; display: grid; align-content: center; gap: 20px; padding-top: 15px; }
.distribution-ring { position: relative; width: 138px; height: 138px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--ring-gradient, var(--color-border) 0 100%)); }
.distribution-ring::after { content: ""; position: absolute; inset: 23px; border-radius: 50%; background: var(--color-surface); }
.distribution-total { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.distribution-total strong, .distribution-total span { display: block; }
.distribution-total strong { font-family: "Rubik", system-ui, sans-serif; font-size: 27px; }
.distribution-total span { color: var(--color-muted); font-size: 11px; }
.distribution-legend { display: grid; gap: 8px; }
.distribution-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.distribution-swatch { width: 9px; height: 9px; border-radius: 3px; }
.distribution-row span:nth-child(2) { color: var(--color-muted); }
.distribution-row strong { font-variant-numeric: tabular-nums; }

.tab-list { display: flex; gap: 6px; margin: 13px 0 10px; padding: 4px; border-radius: 10px; background: var(--color-surface-muted); }
.tab-button { min-height: 38px; flex: 1; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-muted); font-size: 13px; font-weight: 750; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.tab-button:hover { color: var(--color-foreground); }
.tab-button.is-active { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--shadow-sm); }
.inbox-list { display: grid; gap: 8px; }
.inbox-item { width: 100%; min-height: 58px; padding: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; text-align: left; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.inbox-item:hover { border-color: var(--color-primary); background: var(--color-surface-muted); }
.inbox-item strong, .inbox-item span { display: block; }
.inbox-item strong { overflow-wrap: anywhere; font-size: 13px; }
.inbox-item span { margin-top: 2px; color: var(--color-muted); font-size: 11px; }
.inbox-empty { min-height: 150px; display: grid; place-content: center; gap: 4px; text-align: center; color: var(--color-muted); font-size: 12px; }
.inbox-empty strong { color: var(--color-foreground); font-size: 14px; }

.template-panel { margin-bottom: 14px; }
.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 13px; }
.template-card { min-height: 146px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--color-foreground); background: var(--color-surface-muted); border: 1px solid transparent; border-radius: 12px; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.template-card:hover { border-color: var(--color-primary); background: var(--color-surface); box-shadow: var(--shadow-md); }
.template-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.template-card-head svg { color: var(--color-primary); }
.template-card p { margin: 7px 0 12px; color: var(--color-muted); font-size: 12px; }
.template-steps { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.template-steps span, .selected-template { padding: 4px 7px; border-radius: 7px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 10px; font-weight: 750; }
.selected-template { margin: -7px 0 14px; font-size: 12px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 14px; margin-bottom: 14px; scroll-margin-top: 16px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lower-panel { margin-bottom: 14px; }
.panel { min-width: 0; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-head { min-height: 45px; padding-bottom: 13px; border-bottom: 1px solid var(--color-border); }
.task-list, .approval-list { display: grid; gap: 9px; margin-top: 12px; }
.task-row { width: 100%; padding: 13px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; background: var(--color-surface); color: var(--color-foreground); border: 1px solid transparent; border-radius: 12px; transition: background-color 180ms ease, border-color 180ms ease; }
.task-row:hover, .task-row.is-selected { background: var(--color-surface-muted); border-color: var(--color-border); }
.task-row.is-selected { border-color: var(--color-primary); }
.task-row-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.task-copy { min-width: 0; }
.task-copy strong, .task-copy span { display: block; }
.task-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-copy span { margin-top: 2px; color: var(--color-muted); font-size: 12px; }
.task-progress { min-width: 92px; text-align: right; }
.progress-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--color-surface-muted); }
.progress-bar { height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 260ms ease; }

.status-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-ready, .status-running { background: #dbeafe; color: #1e40af; }
.status-success { background: #d1fae5; color: #065f46; }
.status-waiting { background: #ffedd5; color: #9a3412; }
.status-failed { background: #fee4e2; color: #912018; }
.status-paused, .status-muted, .status-pending { background: var(--color-surface-muted); color: var(--color-muted); }
[data-theme="dark"] .status-ready, [data-theme="dark"] .status-running, [data-theme="dark"] .status-success, [data-theme="dark"] .status-waiting, [data-theme="dark"] .status-failed { background: var(--color-surface-muted); color: var(--color-foreground); }

.task-detail { min-height: 326px; padding-top: 14px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--color-muted); font-size: 12px; }
.detail-meta span { padding: 4px 8px; border-radius: 7px; background: var(--color-surface-muted); }
.detail-meta .button { margin-left: auto; }
.replan-note { margin: -4px 0 14px; padding: 8px 10px; border-radius: 8px; color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); font-size: 11px; }
.step-list { display: grid; gap: 0; }
.step-item { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; padding-bottom: 15px; }
.step-item:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 27px; bottom: 0; width: 2px; background: var(--color-border); }
.step-marker { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-muted); border: 2px solid var(--color-border); }
.step-marker svg { width: 14px; height: 14px; }
.step-item.is-success .step-marker { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.step-item.is-running .step-marker { color: var(--color-blue); border-color: var(--color-blue); }
.step-item.is-waiting .step-marker { color: var(--color-accent-strong); border-color: var(--color-accent); }
.step-copy { min-width: 0; padding-top: 2px; }
.step-line { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.step-copy p { margin: 3px 0 8px; color: var(--color-muted); font-size: 12px; }
.step-actions { display: flex; flex-wrap: wrap; gap: 7px; }

.approval-card { padding: 14px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 12px; background: var(--color-surface); }
.approval-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.risk-badge { padding: 3px 8px; border-radius: 999px; background: #ffedd5; color: #9a3412; font-size: 11px; font-weight: 800; }
.approval-card p { margin: 8px 0; color: var(--color-foreground); }
.approval-card small { color: var(--color-muted); }
.approval-actions { display: flex; gap: 8px; margin-top: 11px; }

.event-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.event-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.event-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.event-item strong, .event-item span { display: block; }
.event-item strong { font-size: 13px; }
.event-item span { color: var(--color-muted); font-size: 12px; }
.event-time { color: var(--color-muted); font-size: 11px; white-space: nowrap; }
.empty-state { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--color-muted); }
.empty-state-inner { max-width: 300px; }
.empty-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 16px; background: var(--color-primary-soft); color: var(--color-primary); }
.empty-state strong { display: block; color: var(--color-foreground); }
.empty-state p { margin: 5px 0 14px; font-size: 13px; }

.dialog { width: min(520px, calc(100vw - 28px)); padding: 0; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.settings-dialog { width: min(760px, calc(100vw - 28px)); }
.dialog::backdrop { background: rgba(5, 20, 15, .58); backdrop-filter: blur(3px); }
.dialog form { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dialog-note { margin: 13px 0 18px; color: var(--color-muted); font-size: 13px; }
.dialog label { display: block; margin: 13px 0 6px; font-weight: 750; }
.dialog input, .dialog select, .dialog textarea { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 9px; }
.dialog textarea { resize: vertical; }
.dialog small { color: var(--color-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.form-errors { padding: 10px 12px; border: 1px solid rgba(180,35,24,.35); border-radius: 9px; background: rgba(180,35,24,.08); color: var(--color-danger); font-size: 13px; }
.form-errors ul { margin: 4px 0 0; padding-left: 18px; }
.settings-options { margin: 0; padding: 0; border: 0; }
.settings-options legend { margin-bottom: 8px; font-weight: 800; }
.settings-options label { min-height: 62px; margin: 0; padding: 10px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-border); }
.settings-options strong, .settings-options small { display: block; }
.settings-options small { margin-top: 2px; font-weight: 400; }
.settings-options input { width: 20px; min-height: 20px; accent-color: var(--color-primary); }
.settings-scroll { max-height: min(62vh, 620px); overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.settings-scroll > * + * { margin-top: 20px; }
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settings-section-head .section-kicker { margin-bottom: 3px; }
.settings-model-card { padding: 15px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface-muted); }
.settings-model-note { margin: 8px 0 12px; color: var(--color-muted); font-size: 12px; line-height: 1.55; }
.settings-model-card label { margin-top: 0; }
.settings-model-card select { background: var(--color-surface); }
.settings-model-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.settings-danger-link { color: var(--color-danger); }

.knowledge-library-panel { margin-bottom: 14px; }
.vault-toolbar { margin-top: 14px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface-muted); }
.vault-toolbar-copy { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vault-toolbar-copy strong { color: var(--color-primary); font: 800 11px/1 "Rubik", system-ui, sans-serif; letter-spacing: .09em; }
.vault-toolbar-copy small { color: var(--color-muted); font-size: 11px; }
.vault-mode-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.vault-toolbar-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.vault-toolbar-actions input, .vault-toolbar-actions select { min-height: 38px; padding: 0 10px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: 12px; }
.vault-toolbar-actions input { width: min(230px, 30vw); }
.vault-shell { min-width: 0; min-height: 440px; margin-top: 10px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; }
.vault-sidebar, .vault-editor-card { min-width: 0; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface); }
.vault-sidebar { padding: 12px; overflow: hidden; }
.vault-side-head, .vault-page-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vault-side-head { padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.vault-side-head strong, .vault-page-list-head span { font-size: 13px; }
.vault-side-head small, .vault-page-list-head small { color: var(--color-muted); font-size: 10px; }
.vault-side-badge { padding: 3px 6px; border-radius: 999px; color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); font-size: 10px; font-weight: 800; }
.vault-sections { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.vault-section-item { min-height: 34px; padding: 4px 7px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--color-muted); border: 0; border-radius: 8px; background: transparent; text-align: left; }
.vault-section-item:hover, .vault-section-item:focus-visible { color: var(--color-primary); background: var(--color-primary-soft); }
.vault-section-item span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.vault-section-item svg { width: 15px; height: 15px; }
.vault-section-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.vault-section-item b { color: var(--color-primary); font-size: 11px; }
.vault-page-list-head { padding: 12px 2px 7px; }
.vault-page-list { max-height: 285px; display: grid; gap: 3px; overflow: auto; }
.vault-page-item { min-width: 0; padding: 8px; display: grid; gap: 2px; border: 0; border-left: 3px solid transparent; border-radius: 7px; color: var(--color-foreground); background: transparent; text-align: left; }
.vault-page-item:hover, .vault-page-item.is-active { border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.vault-page-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.vault-page-item small { overflow: hidden; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.vault-editor-card { padding: 16px; display: flex; flex-direction: column; }
.vault-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.vault-editor-head h3 { font-size: 17px; }
.vault-editor-head small { display: block; margin-top: 4px; color: var(--color-muted); font-size: 10px; }
.vault-editor-actions { display: flex; align-items: center; gap: 7px; }
.vault-editor-meta { min-height: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 8px 0; }
.vault-editor-meta span { padding: 3px 6px; border-radius: 999px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; }
.vault-editor { width: 100%; min-height: 280px; flex: 1; padding: 13px; resize: vertical; color: var(--color-foreground); background: color-mix(in srgb, var(--color-surface-muted) 48%, var(--color-surface)); border: 1px solid var(--color-border); border-radius: 9px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.vault-preview { min-height: 280px; padding: 13px; overflow: auto; color: var(--color-foreground); background: color-mix(in srgb, var(--color-surface-muted) 48%, var(--color-surface)); border: 1px solid var(--color-border); border-radius: 9px; font-size: 13px; line-height: 1.7; }
.vault-preview h3, .vault-preview h4, .vault-preview h5 { margin: 0 0 8px; }
.vault-preview p { margin: 0 0 12px; }
.vault-wikilink { color: var(--color-primary); font-weight: 750; }
.vault-graph-summary { margin-top: 10px; padding: 9px 10px; display: flex; align-items: flex-start; gap: 9px; border-radius: 9px; color: var(--color-muted); background: var(--color-primary-soft); }
.vault-graph-summary strong, .vault-graph-summary small { display: block; }
.vault-graph-summary strong { color: var(--color-foreground); font-size: 11px; }
.vault-graph-summary small { margin-top: 2px; font-size: 10px; }
.vault-graph-icon { color: var(--color-primary); font-size: 20px; font-weight: 800; line-height: 1; }
.vault-empty { padding: 12px 4px; color: var(--color-muted); font-size: 11px; }
.knowledge-library-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.knowledge-library-note { margin: 12px 0 0; padding: 9px 11px; border-radius: 9px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 11px; }
.knowledge-library-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr 1fr; gap: 10px; margin-top: 12px; }
.knowledge-library-card { min-width: 0; padding: 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.knowledge-card-review-card { grid-column: span 2; }
.subpanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--color-border); }
.subpanel-head strong, .subpanel-head small { display: block; }
.subpanel-head strong { font-size: 13px; }
.subpanel-head small { margin-top: 3px; color: var(--color-muted); font-size: 10px; }
.knowledge-library-list, .knowledge-candidate-list, .creator-monitor-list { display: grid; gap: 8px; margin-top: 10px; }
.knowledge-card-list { display: grid; gap: 8px; max-height: 360px; margin-top: 10px; overflow: auto; }
.knowledge-card-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.knowledge-card-toolbar label { min-width: 0; }
.knowledge-card-toolbar input, .knowledge-card-toolbar select { height: 31px; min-width: 0; padding: 0 8px; color: var(--color-foreground); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 7px; font-size: 10px; }
.knowledge-card-search { flex: 1 1 150px; }
.knowledge-card-search input { width: 100%; }
.knowledge-card-candidate { padding: 9px; border: 1px solid var(--color-border); border-radius: 9px; background: color-mix(in srgb, var(--color-primary-soft) 35%, var(--color-surface-muted)); }
.knowledge-card-candidate.is-selected { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.knowledge-card-title-line { min-width: 0; display: flex; align-items: flex-start; gap: 7px; }
.knowledge-card-check { flex: 0 0 auto; display: grid; place-items: center; padding-top: 2px; }
.knowledge-card-check input { width: 15px; height: 15px; accent-color: var(--color-primary); }
.knowledge-source-badge { flex: 0 0 auto; max-width: 82px; padding: 3px 6px; overflow: hidden; border-radius: 999px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.source-to_verify { color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.source-official { color: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 11%, var(--color-surface)); }
.knowledge-card-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--color-muted); font-size: 9px; }
.knowledge-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.knowledge-card-tags span { padding: 2px 5px; border-radius: 999px; color: var(--color-muted); background: var(--color-surface); font-size: 9px; }
.knowledge-card-candidate p { max-height: 92px; margin: 7px 0 5px; overflow: auto; color: var(--color-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.knowledge-card-source { display: block; overflow: hidden; color: var(--color-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-category-row, .creator-monitor-row { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: var(--color-surface-muted); }
.knowledge-category-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--color-primary); background: var(--color-primary-soft); }
.knowledge-category-icon svg { width: 15px; height: 15px; }
.knowledge-category-row strong, .knowledge-category-row small, .creator-monitor-row strong, .creator-monitor-row small { display: block; }
.knowledge-category-row strong, .creator-monitor-row strong { font-size: 11px; }
.knowledge-category-row small, .creator-monitor-row small { margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.knowledge-category-count { color: var(--color-primary); font: 700 17px/1 "Rubik", system-ui, sans-serif; }
.knowledge-candidate { padding: 9px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface-muted); }
.knowledge-candidate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.knowledge-candidate-head strong { display: block; font-size: 12px; }
.knowledge-candidate-head small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.knowledge-candidate p { margin: 7px 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
.knowledge-candidate a, .creator-monitor-actions a { color: var(--color-primary); font-size: 10px; font-weight: 800; text-decoration: none; }
.knowledge-candidate-actions { display: flex; gap: 7px; margin-top: 9px; }
.knowledge-candidate-actions > span { flex: 1; }
.knowledge-card-dialog { width: min(720px, calc(100vw - 32px)); }
.knowledge-card-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knowledge-card-form-grid > div { min-width: 0; }
.creator-monitor-row { grid-template-columns: minmax(0, 1fr) auto; }
.creator-monitor-actions { display: flex; align-items: center; gap: 8px; }
.knowledge-library-empty { padding: 18px 6px; color: var(--color-muted); font-size: 11px; text-align: center; }
.creator-daily-stats { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.creator-daily-stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.creator-daily-stats-head strong { font-size: 11px; }
.creator-daily-stats-head small { color: var(--color-muted); font-size: 9px; }
.creator-daily-stat { display: grid; grid-template-columns: 72px 28px minmax(0, 1fr); gap: 7px; align-items: center; margin-top: 6px; color: var(--color-muted); font-size: 10px; }
.creator-daily-stat b { color: var(--color-primary); font-size: 13px; }

@media (max-width: 1100px) {
  .platform-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trend-panel { grid-column: 1 / -1; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid, .lower-grid { grid-template-columns: 1fr; }
  .os-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .os-grid { grid-template-columns: 1fr 1fr; }
  .health-layout { grid-template-columns: 1fr; align-items: stretch; }
  .health-dimensions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lifecycle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .knowledge-library-grid { grid-template-columns: 1fr 1fr; }
  .model-provider-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-card-review-card { grid-column: 1 / -1; }
  .knowledge-monitor-card { grid-column: 1 / -1; }
  .vault-toolbar { align-items: flex-start; flex-direction: column; }
  .vault-toolbar-actions { width: 100%; justify-content: flex-start; }
  .vault-toolbar-actions input { width: min(280px, 100%); }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; }
  .sidebar { position: static; width: auto; height: auto; max-height: none; padding: 14px 16px; overflow: visible; }
  .brand { padding: 0 0 12px; border: 0; }
  .nav-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
  .nav-item { min-width: 0; min-height: 48px; justify-content: center; padding: 0 8px; }
  .nav-item span:not(.nav-count) { display: none; }
  .nav-count { position: absolute; margin: -32px 0 0 26px; }
  .agent-tree { margin-top: 13px; padding-top: 12px; }
  .agent-tree-heading { padding-left: 4px; padding-right: 4px; }
  #agent-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .agent-platform-group.is-open { grid-column: 1 / -1; }
  .agent-platform { min-height: 44px; background: rgba(255,255,255,.04); }
  .agent-children { margin-left: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-foot { display: none; }
  .knowledge-tree { margin-top: 13px; padding-top: 12px; }
  .main-content { height: auto; margin-left: 0; padding: 20px 14px 36px; overflow: visible; }
  .topbar { display: block; margin-bottom: 22px; }
  .topbar-actions { justify-content: flex-start; margin-top: 15px; }
  .range-control { order: 5; }
  .section-heading { align-items: flex-end; }
  .section-note { max-width: 155px; text-align: right; }
  .agent-workspace-head { display: grid; }
  .agent-workspace-actions { justify-content: flex-start; }
  .agent-summary-compact-meta { min-width: 0; justify-items: start; }
  .agent-summary-compact-meta .agent-registration { display: none; }
  .chat-workspace-grid { grid-template-columns: 1fr; }
  .model-provider-grid { grid-template-columns: 1fr; }
  .model-hub-head, .model-hub-next { display: grid; }
  .model-hub-actions { justify-content: flex-start; }
  .model-binding-row { grid-template-columns: 1fr; }
  .model-binding-actions { justify-content: flex-start; }
  .chat-panel.is-expanded { min-height: calc(100vh - 178px); }
  .knowledge-context-list { max-height: 300px; }
  .agent-info-grid { grid-template-columns: 1fr 1fr; }
  .agent-info-grid > div:last-child { grid-column: 1 / -1; }
  .supervisor-strip { display: grid; }
  .supervisor-form { min-width: 0; width: 100%; }
  .supervisor-steps, .workflow-graph-list { grid-template-columns: 1fr 1fr; }
  .chat-message { max-width: 92%; }
  .chat-messages { height: 360px; }
  .chat-panel.is-expanded .chat-messages { min-height: 0; padding-left: 4px; padding-right: 4px; }
  .panel { padding: 15px; border-radius: 16px; }
  .os-grid { grid-template-columns: 1fr; }
  .anomaly-grid, .metric-grid { grid-template-columns: 1fr 1fr; }
  .health-dimensions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .simulator-form { grid-template-columns: 1fr 1fr; }
  .experiment-layout { grid-template-columns: 1fr; }
  .knowledge-library-actions { justify-content: flex-start; }
  .knowledge-library-grid { grid-template-columns: 1fr; }
  .knowledge-monitor-card { grid-column: auto; }
  .vault-shell { grid-template-columns: 1fr; }
  .vault-page-list { max-height: 220px; }
  .vault-editor-head { flex-direction: column; }
  .vault-editor-actions { width: 100%; justify-content: flex-end; }
  .vault-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .vault-toolbar-actions input { width: auto; grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .platform-grid { grid-template-columns: 1fr 1fr; }
  .platform-card { min-height: 96px; padding: 12px; }
  .platform-icon { width: 40px; height: 40px; }
  .platform-state { display: none; }
  .agent-identity { gap: 11px; }
  .agent-avatar { width: 46px; height: 46px; border-radius: 13px; }
  .agent-workspace h2 { font-size: 20px; }
  .agent-workspace-actions .button { flex: 1; }
  .chat-head-actions { align-items: flex-end; }
  .agent-info-grid { grid-template-columns: 1fr; }
  .agent-info-grid > div:last-child { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .os-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .os-stat { padding: 8px; }
  .os-stat strong { font-size: 18px; }
  .os-tabs { overflow-x: auto; }
  .os-tab { min-width: 110px; }
  .supervisor-result-head { display: grid; }
  .supervisor-result-head .button { width: 100%; }
  .supervisor-steps, .workflow-graph-list { grid-template-columns: 1fr; }
  .team-assignment-list { grid-template-columns: 1fr; }
  .trace-artifact-grid { grid-template-columns: 1fr; }
  .intelligence-tabs { overflow-x: auto; }
  .intelligence-tab { min-width: 92px; }
  .anomaly-grid, .metric-grid, .simulator-form { grid-template-columns: 1fr; }
  .health-head-actions { align-items: flex-end; flex-direction: column; gap: 5px; }
  .health-dimensions, .lifecycle-grid { grid-template-columns: 1fr 1fr; }
  .issue-card { grid-template-columns: 1fr; }
  .issue-card .button { width: 100%; }
  .insight-grid { grid-template-columns: 1fr; }
  .trend-panel { grid-column: auto; }
  .insight-grid .panel { min-height: auto; }
  .template-grid { grid-template-columns: 1fr; }
  .template-card { min-height: 126px; }
  .knowledge-library-actions .panel-count { width: 100%; }
  .knowledge-candidate-actions { flex-direction: column; }
  .knowledge-candidate-actions .button { width: 100%; }
  .stat-card { min-height: 96px; padding: 12px; gap: 10px; }
  .stat-icon { width: 38px; height: 38px; }
  .stat-card strong { font-size: 23px; }
  .task-row { grid-template-columns: 38px minmax(0,1fr); }
  .task-progress { grid-column: 2; min-width: 0; text-align: left; }
  .topbar-actions .button-secondary { width: 44px; padding: 0; font-size: 0; }
  .topbar-actions .button-primary { flex: 1; }
  .range-control { width: 100%; justify-content: space-between; }
  .dialog-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Knowledge workbench refresh: scoped to the knowledge page so other modules keep their layout. */
.knowledge-global-search { display: none; align-items: center; gap: 8px; width: min(300px, 25vw); min-height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-muted); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.main-content.is-knowledge-page .knowledge-global-search { display: flex; }
.knowledge-global-search > svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-primary); }
.knowledge-global-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--color-foreground); background: transparent; font-size: 12px; }
.knowledge-global-search input::placeholder { color: var(--color-muted); }
.knowledge-global-search kbd { padding: 2px 5px; border: 1px solid var(--color-border); border-radius: 5px; color: var(--color-muted); background: var(--color-surface-muted); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

#knowledge-library.knowledge-library-panel { --kb-ink: #173b30; --kb-muted: #71867e; --kb-line: #dce9e3; --kb-soft: #f2f7f4; --kb-green: #087f5b; --kb-green-soft: #d8f5e8; margin: 0; padding: 0 0 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-theme="dark"] #knowledge-library.knowledge-library-panel { --kb-ink: #edf8f4; --kb-muted: #b4c6bf; --kb-line: #2a4038; --kb-soft: #1b2d27; --kb-green: #34d399; --kb-green-soft: #123c31; }
.knowledge-hero { position: relative; min-height: 126px; display: flex; align-items: flex-end; gap: 18px; padding: 24px 26px 22px; overflow: hidden; border: 1px solid var(--kb-line); border-radius: 20px; background: color-mix(in srgb, var(--kb-green-soft) 30%, var(--color-surface)); box-shadow: var(--shadow-sm); }
.knowledge-hero::after { content: ""; position: absolute; width: 250px; height: 250px; right: -60px; top: -120px; border: 1px solid color-mix(in srgb, var(--kb-green) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 22px color-mix(in srgb, var(--kb-green) 4%, transparent), 0 0 0 44px color-mix(in srgb, var(--kb-green) 3%, transparent); pointer-events: none; }
.knowledge-hero-copy { position: relative; z-index: 1; min-width: 0; }
.knowledge-hero-copy h2 { color: var(--kb-ink); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.04em; }
.knowledge-hero-copy > p:last-child { max-width: 690px; margin: 8px 0 0; color: var(--kb-muted); font-size: 13px; }
.knowledge-hero-mark { position: relative; z-index: 1; width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; margin-left: auto; border-radius: 17px; color: var(--kb-green); background: var(--kb-green-soft); }
.knowledge-hero-mark svg { width: 28px; height: 28px; }
.knowledge-library-actions { position: relative; z-index: 2; align-self: flex-start; margin-left: auto; }
.knowledge-library-actions .panel-count { padding: 0 4px; white-space: nowrap; }
.knowledge-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.knowledge-stat-card { min-width: 0; min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--kb-line); border-radius: 15px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.knowledge-stat-icon { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; }
.knowledge-stat-icon svg { width: 19px; height: 19px; }
.knowledge-stat-icon.tone-purple { color: #7c3aed; background: #ede9fe; }
[data-theme="dark"] .knowledge-stat-icon.tone-purple { color: #c4b5fd; background: var(--color-surface-muted); }
.knowledge-stat-card div { min-width: 0; }
.knowledge-stat-card small, .knowledge-stat-card strong, .knowledge-stat-card span { display: block; }
.knowledge-stat-card small { overflow: hidden; color: var(--kb-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-stat-card strong { margin: 2px 0 1px; color: var(--kb-ink); font: 750 25px/1.1 "Rubik", system-ui, sans-serif; }
.knowledge-stat-card span:last-child { color: var(--kb-muted); font-size: 10px; }
.knowledge-library-note { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 14px; margin: 12px 0 0; padding: 10px 13px; border: 1px solid var(--kb-line); border-radius: 11px; color: var(--kb-muted); background: var(--kb-soft); font-size: 11px; }
.knowledge-library-note strong { color: var(--kb-ink); }
.knowledge-library-note span + span { position: relative; padding-left: 14px; }
.knowledge-library-note span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--kb-green); transform: translateY(-50%); }
.new-media-panel { --kb-ink: #173b30; --kb-muted: #71867e; --kb-line: #dce9e3; --kb-soft: #f2f7f4; --kb-green: #087f5b; --kb-green-soft: #d8f5e8; margin-bottom: 14px; padding: 0 0 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-theme="dark"] .new-media-panel { --kb-ink: #edf8f4; --kb-muted: #b4c6bf; --kb-line: #2a4038; --kb-soft: #1b2d27; --kb-green: #34d399; --kb-green-soft: #123c31; }
.new-media-panel .short-video-replication-panel { margin-top: 0; }
.short-video-replication-panel { margin-top: 14px; padding: 15px; border: 1px solid var(--kb-line); border-radius: 15px; background: color-mix(in srgb, var(--kb-green-soft) 22%, var(--color-surface)); box-shadow: var(--shadow-sm); }
.short-video-replication-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.short-video-replication-copy { min-width: 0; }
.short-video-replication-copy h3 { color: var(--kb-ink); font-size: 18px; letter-spacing: -.02em; }
.short-video-replication-copy > p:last-child { max-width: 840px; margin: 5px 0 0; color: var(--kb-muted); font-size: 11px; line-height: 1.55; }
.short-video-replication-head-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.short-video-replication-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--kb-line); }
.short-video-stage { grid-column: 1 / -1; min-width: 0; padding: 11px 12px 12px; border: 1px solid var(--kb-line); border-radius: 11px; background: color-mix(in srgb, var(--color-surface) 72%, var(--kb-green-soft)); }
.short-video-stage-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.short-video-stage-head > div:nth-child(2) { min-width: 0; flex: 1; }
.short-video-stage-head strong, .short-video-stage-head small { display: block; }
.short-video-stage-head strong { color: var(--kb-ink); font-size: 12px; }
.short-video-stage-head small { margin-top: 2px; color: var(--kb-muted); font-size: 10px; }
.short-video-step { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--kb-green); font: 800 11px/1 "Rubik", system-ui, sans-serif; }
.short-video-source-grid, .short-video-product-grid, .short-video-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; margin-top: 10px; }
.short-video-output-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.short-video-field--full { grid-column: 1 / -1; }
.short-video-reference-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.short-video-reference-actions .button svg { width: 14px; height: 14px; }
.short-video-reference-actions > small { color: var(--kb-muted); font-size: 10px; }
.short-video-transcript-field { margin-top: 10px; }
.short-video-field { min-width: 0; display: grid; align-content: start; gap: 5px; }
.short-video-field--wide { grid-column: span 2; }
.short-video-field > span { color: var(--kb-ink); font-size: 11px; font-weight: 800; }
.short-video-field > span b { color: var(--color-danger); }
.short-video-field input, .short-video-field select, .short-video-field textarea { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--kb-line); border-radius: 8px; outline: 0; color: var(--kb-ink); background: var(--color-surface); font: inherit; font-size: 11px; }
.short-video-field input, .short-video-field select { min-height: 35px; }
.short-video-field textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.short-video-field input:focus, .short-video-field select:focus, .short-video-field textarea:focus { border-color: var(--kb-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-green) 14%, transparent); }
.short-video-field input:disabled, .short-video-field select:disabled, .short-video-field textarea:disabled { cursor: not-allowed; opacity: .56; background: color-mix(in srgb, var(--kb-soft) 76%, var(--color-surface)); }
.short-video-field small { color: var(--kb-muted); font-size: 10px; line-height: 1.4; }
.short-video-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.short-video-form-actions > span { color: var(--kb-muted); font-size: 10px; }
.short-video-form-actions .button { flex: 0 0 auto; }
.short-video-result { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--kb-line); }
.short-video-result-head, .short-video-history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.short-video-result-head > div { min-width: 0; }
.short-video-result-head strong, .short-video-result-head small { display: block; }
.short-video-result-head strong { margin-top: 2px; color: var(--kb-ink); font-size: 13px; }
.short-video-result-head small, .short-video-history-head small { margin-top: 3px; color: var(--kb-muted); font-size: 10px; }
.short-video-result pre { max-height: 720px; margin: 10px 0 0; padding: 13px; overflow: auto; white-space: pre-wrap; color: var(--kb-ink); background: color-mix(in srgb, var(--kb-soft) 66%, var(--color-surface)); border: 1px solid var(--kb-line); border-radius: 10px; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.short-video-result-note { margin: 8px 0 0; color: var(--kb-muted); font-size: 10px; }
.short-video-error { margin: 10px 0 0; padding: 10px; color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); border-radius: 8px; font-size: 11px; }
.short-video-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--kb-line); }
.short-video-history-head { grid-column: 1 / -1; }
.short-video-history-item { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--kb-line); border-radius: 9px; color: var(--kb-ink); background: var(--color-surface); text-align: left; cursor: pointer; }
.short-video-history-item:hover, .short-video-history-item:focus-visible, .short-video-history-item.is-active { border-color: var(--kb-green); background: var(--kb-green-soft); }
.short-video-history-item > span:first-child { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: var(--kb-green); background: var(--kb-green-soft); }
.short-video-history-item > span:first-child svg { width: 14px; height: 14px; }
.short-video-history-item > span:nth-child(2) { min-width: 0; flex: 1; }
.short-video-history-item strong, .short-video-history-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.short-video-history-item strong { font-size: 10px; }
.short-video-history-item small { margin-top: 2px; color: var(--kb-muted); font-size: 9px; }
.short-video-history-item .status-badge { flex: 0 0 auto; }
.knowledge-tree-platform-tool .knowledge-tree-link { color: #b9f7dc; background: rgba(52,211,153,.07); }
.knowledge-tree-platform-tool .knowledge-tree-link svg { color: #a7f3d0; }
.knowledge-tree-platform-tool .knowledge-tree-muted { color: #9ce5c4; }
.vault-toolbar { min-height: 64px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--kb-line); border-radius: 15px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.vault-toolbar-copy { gap: 5px 9px; }
.vault-toolbar-title { display: flex; align-items: center; gap: 8px; }
.vault-toolbar-copy strong { color: var(--kb-ink); font-size: 11px; letter-spacing: .1em; }
.vault-toolbar-copy small { flex-basis: 100%; margin-left: 17px; color: var(--kb-muted); font-size: 11px; }
.vault-connection-status { padding: 3px 7px; border-radius: 999px; color: var(--kb-green); background: var(--kb-green-soft); font-size: 10px; font-weight: 800; }
.vault-connection-status.is-offline { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); }
.vault-toolbar-actions { gap: 8px; }
.vault-shell { min-height: 0; height: clamp(520px, calc(100vh - 545px), 760px); margin-top: 12px; grid-template-columns: minmax(270px, 300px) minmax(0, 1fr); gap: 12px; }
.vault-sidebar, .vault-editor-card { border-color: var(--kb-line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.vault-sidebar { min-height: 0; display: flex; flex-direction: column; padding: 14px; background: color-mix(in srgb, var(--kb-soft) 68%, var(--color-surface)); }
.vault-side-head { flex: 0 0 auto; padding-bottom: 12px; border-color: var(--kb-line); }
.vault-side-head strong, .vault-page-list-head span { color: var(--kb-ink); font-size: 14px; }
.vault-side-head small, .vault-page-list-head small { color: var(--kb-muted); font-size: 10px; }
.vault-side-tools { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 7px; padding: 11px 0 9px; border-bottom: 1px solid var(--kb-line); }
.vault-search-field { min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--kb-line); border-radius: 9px; background: var(--color-surface); }
.vault-search-field svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--kb-green); }
.vault-search-field input, .vault-side-tools select { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--kb-ink); background: transparent; font-size: 11px; }
.vault-side-tools select { min-height: 36px; padding: 0 7px; border: 1px solid var(--kb-line); border-radius: 9px; background: var(--color-surface); }
.vault-sections { flex: 0 0 auto; max-height: 168px; overflow: auto; padding: 9px 0; border-color: var(--kb-line); }
.vault-section-item { min-height: 35px; color: var(--kb-muted); }
.vault-section-item:hover, .vault-section-item:focus-visible, .vault-page-item:hover, .vault-page-item.is-active { color: var(--kb-green); background: var(--kb-green-soft); }
.vault-page-list-head { flex: 0 0 auto; padding: 12px 2px 7px; }
.vault-page-list { min-height: 0; max-height: none; flex: 1; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; }
.vault-page-item { padding: 9px 9px 9px 10px; border-left-width: 2px; border-radius: 9px; }
.vault-page-item-title { color: var(--kb-ink); font-size: 12px; }
.vault-page-item small { color: var(--kb-muted); }
.vault-editor-card { position: relative; min-height: 0; padding: 17px 18px 15px; background: var(--color-surface); }
.vault-editor-card.is-fullscreen { position: fixed; inset: 18px; z-index: 80; height: auto; box-shadow: 0 24px 70px rgba(15, 40, 31, .22); }
.vault-editor-head { flex: 0 0 auto; align-items: center; padding-bottom: 12px; border-color: var(--kb-line); }
.vault-editor-heading { min-width: 0; }
.vault-editor-heading .section-kicker { margin-bottom: 3px; }
.vault-editor-title-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vault-editor-head h3 { overflow: hidden; color: var(--kb-ink); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.vault-save-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--kb-muted); background: var(--kb-soft); font-size: 10px; }
.vault-save-status.is-dirty { color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 11%, var(--color-surface)); }
.vault-path-row { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 5px; }
.vault-editor-head small { min-width: 0; overflow: hidden; margin-top: 0; color: var(--kb-muted); text-overflow: ellipsis; white-space: nowrap; }
.vault-path-row .text-button { min-height: 26px; padding: 0 4px; font-size: 10px; white-space: nowrap; }
.vault-editor-actions { flex: 0 0 auto; }
.vault-editor-meta { flex: 0 0 auto; min-height: 32px; padding: 8px 0; }
.vault-editor-meta span { color: var(--kb-muted); background: var(--kb-soft); }
.vault-markdown-toolbar { flex: 0 0 auto; min-height: 36px; display: flex; align-items: center; gap: 4px; padding: 4px 0 7px; color: var(--kb-muted); }
.vault-markdown-toolbar button { min-height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; color: var(--kb-muted); background: transparent; font-size: 10px; }
.vault-markdown-toolbar button:hover, .vault-markdown-toolbar button:focus-visible { color: var(--kb-green); border-color: var(--kb-line); background: var(--kb-soft); }
.vault-markdown-toolbar span { flex: 1; }
.vault-markdown-toolbar small { font-size: 10px; }
.vault-editor { min-height: 0; flex: 1; resize: none; padding: 18px; color: var(--kb-ink); background: color-mix(in srgb, var(--kb-soft) 52%, var(--color-surface)); border-color: var(--kb-line); border-radius: 11px; font-size: 13px; line-height: 1.8; }
.vault-preview { min-height: 0; flex: 1; padding: 18px; overflow: auto; border-color: var(--kb-line); background: color-mix(in srgb, var(--kb-soft) 52%, var(--color-surface)); }
.vault-graph-summary { flex: 0 0 auto; margin-top: 10px; padding: 9px 10px; color: var(--kb-muted); background: var(--kb-green-soft); }
.knowledge-library-grid { margin-top: 14px; gap: 12px; }
.knowledge-library-card { border-color: var(--kb-line); border-radius: 15px; box-shadow: var(--shadow-sm); }
.vault-sections { flex: 1; min-height: 0; max-height: none; display: grid; align-content: start; gap: 3px; padding: 10px 0 0; overflow-y: auto; border: 0; }
.vault-platform-group { min-width: 0; }
.vault-platform-row { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 4px 7px; border: 0; border-radius: 8px; color: var(--kb-ink); background: transparent; text-align: left; }
.vault-platform-row:hover, .vault-platform-row:focus-visible { color: var(--kb-green); background: var(--kb-green-soft); }
.vault-platform-row > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.vault-platform-row svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--kb-muted); }
.vault-platform-row svg:first-child { transition: transform 160ms ease; }
.vault-platform-group.is-open .vault-platform-row svg:first-child { transform: rotate(90deg); }
.vault-platform-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.vault-platform-row b { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: var(--kb-muted); background: var(--color-surface); font-size: 10px; text-align: center; }
.vault-platform-pages { display: grid; gap: 2px; margin: 1px 0 5px 13px; padding-left: 12px; border-left: 1px solid var(--kb-line); }
.vault-platform-pages[hidden], .vault-category-pages[hidden] { display: none !important; }
.vault-category-group { min-width: 0; }
.vault-category-row { width: 100%; min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 3px 7px; border: 0; border-radius: 7px; color: var(--kb-muted); background: transparent; text-align: left; }
.vault-category-row:hover, .vault-category-row:focus-visible { color: var(--kb-green); background: var(--kb-green-soft); }
.vault-category-row > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.vault-category-row svg { width: 14px; height: 14px; flex: 0 0 auto; }
.vault-category-row svg:first-child { transition: transform 160ms ease; }
.vault-category-group.is-open .vault-category-row svg:first-child { transform: rotate(90deg); }
.vault-category-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vault-category-row b { min-width: 18px; color: var(--kb-muted); font-size: 10px; text-align: center; }
.vault-category-pages { display: grid; gap: 2px; margin: 0 0 4px 15px; padding-left: 10px; border-left: 1px dashed var(--kb-line); }
.vault-drop-hint { min-height: 30px; display: grid; place-items: center; color: var(--kb-muted); font-size: 10px; border-radius: 7px; background: var(--kb-soft); }
.vault-category-pages.is-drop-target, .vault-platform-pages.is-drop-target { outline: 2px dashed var(--kb-green); outline-offset: 2px; background: color-mix(in srgb, var(--kb-green-soft) 45%, transparent); }
.vault-page-item.is-dragging { opacity: .45; }
.vault-platform-pages .vault-page-item { width: 100%; min-height: 32px; padding: 7px 8px; border-left: 2px solid transparent; border-radius: 7px; }
.vault-platform-pages .vault-page-item.is-active { border-left-color: var(--kb-green); }
.vault-page-list-head[hidden], .vault-page-list[hidden] { display: none !important; }
.vault-context-menu { position: fixed; z-index: 120; min-width: 150px; padding: 5px; border: 1px solid var(--kb-line); border-radius: 9px; background: var(--color-surface); box-shadow: 0 12px 30px rgba(15, 40, 31, .18); }
.vault-context-menu button { width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--kb-ink); background: transparent; text-align: left; font-size: 11px; }
.vault-context-menu button:hover, .vault-context-menu button:focus-visible { color: var(--kb-green); background: var(--kb-green-soft); }

@media (max-width: 1100px) {
  .knowledge-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-global-search { width: min(280px, 22vw); }
  .short-video-replication-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .short-video-field--wide { grid-column: span 2; }
  .short-video-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .main-content.is-knowledge-page .knowledge-global-search { width: 100%; order: -1; }
  .knowledge-hero { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
  .knowledge-hero-mark { display: none; }
  .knowledge-library-actions { width: 100%; align-self: auto; margin-left: 0; justify-content: flex-start; }
  .new-media-mark { display: none; }
  .short-video-replication-head { flex-direction: column; }
  .short-video-replication-head-actions { width: 100%; justify-content: flex-start; }
  .vault-shell { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .vault-sidebar { min-height: 350px; }
  .vault-page-list { max-height: 240px; }
  .vault-editor-card { min-height: 560px; }
  .vault-editor-card.is-fullscreen { inset: 8px; }
}
@media (max-width: 520px) {
  .knowledge-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .knowledge-stat-card { min-height: 82px; padding: 11px; gap: 8px; }
  .knowledge-stat-icon { width: 32px; height: 32px; border-radius: 9px; }
  .knowledge-stat-card strong { font-size: 20px; }
  .knowledge-library-note { align-items: flex-start; flex-direction: column; gap: 4px; }
  .knowledge-library-note span + span { padding-left: 0; }
  .knowledge-library-note span + span::before { display: none; }
  .short-video-replication-form { grid-template-columns: 1fr; }
  .short-video-field--wide { grid-column: auto; }
  .short-video-source-grid, .short-video-product-grid, .short-video-output-grid { grid-template-columns: 1fr; }
  .short-video-field--full { grid-column: auto; }
  .short-video-form-actions { align-items: stretch; flex-direction: column; }
  .short-video-form-actions .button { width: 100%; }
  .short-video-history { grid-template-columns: 1fr; }
  .short-video-history-head { grid-column: auto; }
  .knowledge-card-review-card { grid-column: auto; }
  .vault-side-tools { grid-template-columns: 1fr; }
  .vault-editor-head { align-items: flex-start; flex-direction: column; }
  .vault-editor-actions { width: 100%; justify-content: flex-end; }
  .vault-markdown-toolbar small { display: none; }
  .knowledge-card-form-grid { grid-template-columns: 1fr; }
  .knowledge-card-toolbar { align-items: stretch; }
  .knowledge-card-toolbar > label, .knowledge-card-toolbar > label select, .knowledge-card-toolbar > label input { width: 100%; }
  .knowledge-card-toolbar .knowledge-card-search { flex-basis: 100%; }
}

.guardrail-panel { margin-bottom: 14px; }.guardrail-head-actions { display: flex; align-items: center; gap: 9px; }.guardrail-tabs { display: flex; gap: 6px; margin: 15px 0 11px; padding: 4px; overflow-x: auto; border-radius: 10px; background: var(--color-surface-muted); }.guardrail-tab { min-height: 36px; flex: 1 0 130px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--color-muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }.guardrail-tab.is-active { color: var(--color-foreground); background: var(--color-surface); box-shadow: var(--shadow-sm); }.guardrail-content { min-height: 150px; }.guardrail-empty { padding: 28px 8px; color: var(--color-muted); text-align: center; font-size: 12px; }
.inventory-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 10px; background: var(--color-surface-muted); }.inventory-summary strong, .inventory-summary span { display: block; }.inventory-summary strong { font-size: 13px; }.inventory-summary span { margin-top: 3px; color: var(--color-muted); font-size: 10px; }.inventory-counters { display: flex; gap: 16px; }.inventory-counters span { color: var(--color-muted); font-size: 10px; text-align: center; }.inventory-counters b { display: block; color: var(--color-foreground); font: 700 19px/1 "Rubik", system-ui, sans-serif; }.inventory-table-wrap { overflow-x: auto; margin-top: 10px; }.inventory-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 11px; }.inventory-table th, .inventory-table td { padding: 9px 8px; border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }.inventory-table th { color: var(--color-muted); font-size: 10px; font-weight: 800; }.inventory-table td:first-child { min-width: 170px; }.inventory-table td strong, .inventory-table td small { display: block; }.inventory-table td small { margin-top: 2px; color: var(--color-muted); font-size: 9px; }.inventory-table td:nth-child(4) strong { color: var(--color-accent-strong); }
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.2fr); gap: 12px; }.service-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.service-category { padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }.service-category span, .service-category small, .service-category p { display: block; }.service-category span { color: var(--color-muted); font-size: 10px; font-weight: 800; }.service-category strong { display: block; margin-top: 7px; font: 700 23px/1 "Rubik", system-ui, sans-serif; }.service-category small { margin-top: 4px; color: var(--color-primary); font-size: 10px; font-weight: 800; }.service-category p { margin: 8px 0 0; color: var(--color-muted); font-size: 10px; line-height: 1.4; }.reply-draft-list { display: grid; gap: 8px; }.guardrail-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.guardrail-subhead strong { font-size: 12px; }.guardrail-subhead span { color: var(--color-muted); font-size: 9px; }.reply-draft { padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }.reply-draft > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.reply-draft strong { font-size: 11px; }.reply-draft p { margin: 6px 0 8px; color: var(--color-muted); font-size: 10px; line-height: 1.45; }
.audit-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; margin-bottom: 9px; border-radius: 9px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; line-height: 1.45; }.audit-note svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-primary); }.change-list { display: grid; gap: 8px; }.change-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }.change-card.is-rolled-back { opacity: .68; }.change-card-main { min-width: 0; }.change-card-main > div:first-child { display: flex; align-items: center; gap: 7px; }.change-card-main strong { font-size: 12px; }.change-card-main > small { display: block; margin-top: 4px; color: var(--color-muted); font-size: 9px; }.change-diff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 8px; }.change-diff span:not(.change-arrow) { min-width: 0; padding: 6px 8px; overflow: hidden; border-radius: 7px; background: var(--color-surface); color: var(--color-muted); font-size: 9px; text-overflow: ellipsis; }.change-diff b { display: block; margin-bottom: 2px; color: var(--color-foreground); font-size: 9px; }.change-arrow { align-self: center; color: var(--color-primary); font-weight: 800; }
@media (max-width: 820px) { .service-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .inventory-summary { align-items: flex-start; flex-direction: column; }.inventory-counters { width: 100%; justify-content: space-between; }.service-category-grid { grid-template-columns: 1fr 1fr; }.change-card { grid-template-columns: 1fr; }.change-card .button { width: 100%; }.change-diff { grid-template-columns: 1fr; }.change-arrow { display: none; } }

.decision-panel { margin-bottom: 14px; }.decision-head-actions { display: flex; align-items: center; gap: 9px; }.decision-tabs { display: flex; gap: 6px; margin: 15px 0 11px; padding: 4px; overflow-x: auto; border-radius: 10px; background: var(--color-surface-muted); }.decision-tab { min-height: 36px; flex: 1 0 130px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--color-muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }.decision-tab.is-active { color: var(--color-foreground); background: var(--color-surface); box-shadow: var(--shadow-sm); }.decision-content { min-height: 150px; }.decision-empty { padding: 28px 8px; color: var(--color-muted); text-align: center; font-size: 12px; }
.profit-layout { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(0, 1.35fr); gap: 12px; }.profit-hero { padding: 13px; border-radius: 11px; color: #ecfdf5; background: linear-gradient(135deg, #0c3025, #12634c); }.profit-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.profit-hero-top span, .profit-hero-top small { display: block; color: #b6e3d1; font-size: 10px; }.profit-hero-top strong { display: block; margin: 5px 0 2px; color: #fff; font: 700 30px/1 "Rubik", system-ui, sans-serif; }.profit-state { display: inline-flex !important; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 7px; color: #064e3b !important; background: #a7f3d0; font-weight: 800; white-space: nowrap; }.profit-state svg { width: 14px; height: 14px; }.profit-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.16); }.profit-bars span, .profit-bars b { display: block; }.profit-bars span { color: #b6e3d1; font-size: 9px; line-height: 1.35; }.profit-bars b { margin-top: 4px; color: #fff; font-size: 13px; }.profit-guardrails { padding: 11px; border-radius: 11px; background: var(--color-surface-muted); }.decision-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.decision-subhead strong { font-size: 12px; }.decision-subhead span { color: var(--color-muted); font-size: 9px; }.profit-guardrail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }.profit-guardrail-grid div { padding: 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }.profit-guardrail-grid span, .profit-guardrail-grid small { display: block; color: var(--color-muted); font-size: 9px; }.profit-guardrail-grid strong { display: block; margin: 5px 0 3px; font: 700 18px/1 "Rubik", system-ui, sans-serif; }.profit-recommendation { display: flex; gap: 7px; margin: 10px 0 0; padding: 8px; border-radius: 8px; color: var(--color-muted); background: var(--color-surface); font-size: 10px; line-height: 1.45; }.profit-recommendation svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-primary); }
.calendar-list { display: grid; gap: 8px; }.calendar-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }.calendar-date { padding-right: 10px; border-right: 1px solid var(--color-border); text-align: center; }.calendar-date strong, .calendar-date span { display: block; }.calendar-date strong { font: 700 17px/1 "Rubik", system-ui, sans-serif; }.calendar-date span { margin-top: 4px; color: var(--color-primary); font-size: 9px; font-weight: 800; }.calendar-copy { min-width: 0; }.calendar-copy strong, .calendar-copy p, .calendar-copy small { display: block; }.calendar-copy strong { font-size: 12px; }.calendar-copy p { margin: 3px 0; color: var(--color-muted); font-size: 10px; }.calendar-copy small { color: var(--color-muted); font-size: 9px; }.calendar-note { margin-top: 10px; padding: 8px 10px; border-radius: 8px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; }
.connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }.connection-card { min-width: 0; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }.connection-head { display: flex; align-items: center; gap: 7px; }.connection-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--color-primary); background: var(--color-primary-soft); }.connection-icon svg { width: 16px; height: 16px; }.connection-head > div:nth-child(2) { min-width: 0; flex: 1; }.connection-head strong, .connection-head small { display: block; }.connection-head strong { font-size: 12px; }.connection-head small { color: var(--color-muted); font-size: 9px; }.connection-card p { margin: 9px 0 8px; color: var(--color-muted); font-size: 10px; }.connection-meta { display: grid; gap: 3px; color: var(--color-muted); font-size: 9px; }
@media (max-width: 1100px) { .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .profit-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .profit-guardrail-grid { grid-template-columns: 1fr 1fr; }.calendar-item { grid-template-columns: 60px minmax(0, 1fr); }.calendar-item > .status-badge { grid-column: 2; justify-self: start; }.connection-grid { grid-template-columns: 1fr 1fr; }.connection-head > .status-badge { display: none; } }

/* ========== AI 做图工作台 ========== */
.main-content.is-ai-image-page { height: 100dvh; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.main-content.is-ai-image-page > .topbar { display: none; }
.main-content.is-ai-image-page > .topbar > div:first-child { display: flex; align-items: flex-end; gap: 16px; }
.main-content.is-ai-image-page > .topbar .topbar-note { margin: 0 0 5px; }
.main-content.is-ai-image-page > .topbar .eyebrow,
.main-content.is-ai-image-page > .topbar .topbar-actions { display: none; }
.main-content.is-ai-image-page > .ai-image-page { min-height: 0; flex: 1 1 auto; display: block; }
.ai-image-page { min-width: 0; min-height: 0; }
.ai-image-layout { position: relative; display: grid; grid-template-columns: 260px minmax(560px, 1fr) 344px; height: 100%; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ai-image-conversations, .ai-image-chat, .ai-image-rules { min-width: 0; min-height: 0; overflow: hidden; }
.ai-image-conversations { display: flex; flex-direction: column; padding: 16px 12px; border-right: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface)); }
.ai-image-sidebar-head, .ai-image-rules-head, .ai-image-chat-head, .ai-image-card-title, .ai-image-select-row, .ai-image-composer-foot, .ai-image-size-fields, .ai-image-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-image-sidebar-head h2, .ai-image-rules-head h2, .ai-image-chat-head h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.ai-image-sidebar-head .button svg, .ai-image-head-actions svg, .ai-image-composer-tools svg, .ai-image-send-tools svg { width: 14px; height: 14px; }
.ai-image-search { display: flex; align-items: center; gap: 7px; min-height: 34px; margin: 16px 0 10px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-muted); background: var(--color-surface); }
.ai-image-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ai-image-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--color-foreground); background: transparent; font: inherit; font-size: 12px; }
.ai-image-conversation-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; padding-right: 2px; }
.ai-image-conversation { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; color: var(--color-foreground); background: transparent; text-align: left; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.ai-image-conversation:hover, .ai-image-conversation:focus-visible { border-color: var(--color-border); background: var(--color-surface); }
.ai-image-conversation.is-active { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: var(--color-primary-soft); }
.ai-image-conversation-copy { min-width: 0; flex: 1; }.ai-image-conversation-copy strong, .ai-image-conversation-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ai-image-conversation-copy strong { font-size: 12px; }.ai-image-conversation-copy small { margin-top: 4px; color: var(--color-muted); font-size: 10px; }.ai-image-conversation-menu { color: var(--color-muted); font-size: 17px; line-height: 1; }
.ai-image-chat { position: relative; display: flex; flex-direction: column; background: var(--color-surface); }
.ai-image-chat-head { flex: 0 0 auto; min-height: 68px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.ai-image-subtitle { max-width: 610px; margin: 5px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.45; }.ai-image-subtitle.is-error { color: var(--color-danger); }
.ai-image-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ai-image-messages { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 22px min(7vw, 72px) 18px; }
.ai-image-message { max-width: 820px; margin: 0 auto 20px; }.ai-image-message-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--color-muted); font-size: 11px; font-weight: 800; }.ai-image-message-label time { font-size: 10px; font-weight: 400; }.ai-image-message-body { padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-muted); }.ai-image-message.is-user .ai-image-message-body { background: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }.ai-image-message-body p { margin: 0; color: var(--color-foreground); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }.ai-image-message-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }.ai-image-message-assets img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border-radius: 9px; background: var(--color-surface); }.ai-image-snapshot-note { display: block; margin-top: 9px; color: var(--color-muted); font-size: 10px; line-height: 1.4; }
.ai-image-upload-preview { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 10px; }.ai-image-asset-chip { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-muted); background: var(--color-surface-muted); font-size: 10px; }.ai-image-asset-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; }.ai-image-asset-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: var(--color-muted); background: transparent; cursor: pointer; }.ai-image-asset-chip button:hover { color: var(--color-danger); background: var(--color-surface); }
.ai-image-message-assets figure { min-width: 0; margin: 0; }.ai-image-message-assets a { display: inline-block; margin-top: 4px; color: var(--color-primary); font-size: 10px; font-weight: 800; }.ai-image-rule-snapshot { margin-top: 9px; padding: 8px 9px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); }.ai-image-rule-snapshot summary { color: var(--color-primary); cursor: pointer; font-size: 10px; font-weight: 800; }.ai-image-rule-snapshot dl { display: grid; gap: 7px; margin: 9px 0 0; }.ai-image-rule-snapshot dl > div { min-width: 0; }.ai-image-rule-snapshot dt { color: var(--color-muted); font-size: 9px; font-weight: 800; }.ai-image-rule-snapshot dd { margin: 2px 0 0; color: var(--color-foreground); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-image-composer { flex: 0 0 auto; margin: 0 18px 16px; padding: 10px 12px 8px; border: 1px solid var(--color-border-strong); border-radius: 13px; background: var(--color-surface); box-shadow: 0 8px 22px rgba(15, 40, 31, .08); }.ai-image-composer textarea { width: 100%; min-height: 60px; max-height: 160px; padding: 4px 2px 9px; resize: vertical; border: 0; outline: 0; color: var(--color-foreground); background: transparent; font: inherit; font-size: 13px; line-height: 1.55; }.ai-image-model-chain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; margin: 7px 0 10px; padding: 8px 9px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface-muted); }.ai-image-model-chain label { display: grid; gap: 4px; min-width: 0; }.ai-image-model-chain label > span { color: var(--color-muted); font-size: 9px; font-weight: 800; letter-spacing: .02em; }.ai-image-model-chain select { width: 100%; min-width: 0; min-height: 32px; padding: 0 24px 0 9px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-foreground); background: var(--color-surface); font: inherit; font-size: 11px; }.ai-image-model-arrow { padding-bottom: 7px; color: var(--color-primary); font-size: 16px; font-weight: 900; }.ai-image-composer-foot { align-items: flex-end; }.ai-image-composer-tools, .ai-image-send-tools { display: flex; align-items: center; gap: 8px; }.ai-image-original-note { max-width: 300px; color: var(--color-muted); font-size: 10px; line-height: 1.35; }.ai-image-send-tools select { max-width: 215px; min-height: 34px; padding: 0 26px 0 9px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-foreground); background: var(--color-surface-muted); font: inherit; font-size: 11px; }
.ai-image-rules { padding: 15px 13px 18px; overflow-y: auto; border-left: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface-muted) 42%, var(--color-surface)); }.ai-image-rules-head { position: sticky; top: -15px; z-index: 2; margin: -15px -13px 12px; padding: 15px 13px 11px; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface-muted) 92%, var(--color-surface)); }.ai-image-dirty { padding: 3px 7px; border-radius: 999px; color: var(--color-accent-strong); background: var(--color-accent-soft); font-size: 10px; font-weight: 800; }.ai-image-policy-card, .ai-image-rule-card { margin-bottom: 11px; padding: 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }.ai-image-card-title { min-height: 24px; }.ai-image-card-title strong, .ai-image-card-title label { font-size: 13px; font-weight: 800; }.ai-image-card-title .text-button { padding: 2px 0; font-size: 10px; }.ai-image-policy-card p, .ai-image-helper { margin: 7px 0 0; color: var(--color-muted); font-size: 10px; line-height: 1.45; }.ai-image-policy-list { display: grid; gap: 5px; margin-top: 10px; color: var(--color-primary); font-size: 10px; }.ai-image-policy-list span::before { content: "✓"; margin-right: 5px; font-weight: 900; }.ai-image-select-row { margin-top: 8px; }.ai-image-select-row select { min-width: 0; flex: 1; height: 32px; padding: 0 26px 0 8px; border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-foreground); background: var(--color-surface-muted); font: inherit; font-size: 11px; }.ai-image-select-row .text-button { flex: 0 0 auto; padding: 2px 0; font-size: 10px; }.ai-image-size-fields { align-items: flex-end; justify-content: flex-start; margin-top: 10px; }.ai-image-size-fields label, .ai-image-preset-size-fields label { display: grid; gap: 4px; color: var(--color-muted); font-size: 10px; }.ai-image-size-fields input { width: 94px; height: 30px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-foreground); background: var(--color-surface); font: inherit; font-size: 12px; }.ai-image-size-fields span { margin-bottom: 7px; color: var(--color-muted); font-size: 10px; }.ai-image-rule-card textarea { width: 100%; margin-top: 9px; padding: 8px; resize: vertical; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-foreground); background: var(--color-surface-muted); font: inherit; font-size: 11px; line-height: 1.55; }.ai-image-card-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 10px; }.ai-image-card-actions .button { min-height: 30px; font-size: 10px; }
.ai-image-empty { display: grid; justify-items: center; gap: 6px; padding: 22px 12px; color: var(--color-muted); text-align: center; }.ai-image-empty strong { color: var(--color-foreground); font-size: 12px; }.ai-image-empty span, .ai-image-empty p { margin: 0; font-size: 10px; line-height: 1.45; }.ai-image-chat-empty { min-height: 220px; place-content: center; }.ai-image-empty-mark { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 14px; color: var(--color-primary); background: var(--color-primary-soft); }.ai-image-empty-mark svg { width: 23px; height: 23px; }
.ai-image-preset-dialog { width: min(520px, calc(100vw - 32px)); }.ai-image-preset-dialog form { display: grid; gap: 8px; }.ai-image-preset-dialog label { color: var(--color-muted); font-size: 12px; font-weight: 700; }.ai-image-preset-dialog input, .ai-image-preset-dialog textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-foreground); background: var(--color-surface); font: inherit; font-size: 13px; }.ai-image-preset-size-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 1220px) { .ai-image-layout { grid-template-columns: 240px minmax(0, 1fr) 320px; }.ai-image-messages { padding-left: 34px; padding-right: 34px; } }
@media (max-width: 1040px) { .ai-image-layout { grid-template-columns: 240px minmax(0, 1fr); }.ai-image-rules { display: none; position: absolute; inset: 0 0 0 auto; z-index: 20; width: min(344px, 92%); box-shadow: -14px 0 32px rgba(15, 40, 31, .18); }.ai-image-rules.is-open { display: block; } }
@media (max-width: 820px) { .main-content.is-ai-image-page { height: auto; min-height: 100dvh; overflow: visible; }.main-content.is-ai-image-page > .ai-image-page { min-height: 850px; }.ai-image-layout { grid-template-columns: 1fr; height: auto; min-height: 850px; overflow: visible; }.ai-image-conversations { min-height: 190px; max-height: 230px; border-right: 0; border-bottom: 1px solid var(--color-border); }.ai-image-chat { min-height: 620px; }.ai-image-messages { padding: 22px 18px; }.ai-image-rules { position: fixed; top: 0; right: 0; bottom: 0; width: min(344px, 92vw); }.ai-image-composer { margin-left: 12px; margin-right: 12px; }.ai-image-composer-foot { align-items: stretch; flex-direction: column; }.ai-image-send-tools { justify-content: space-between; }.ai-image-send-tools select { max-width: none; flex: 1; } }
@media (max-width: 520px) { .main-content.is-ai-image-page > .topbar > div:first-child { align-items: flex-start; flex-direction: column; gap: 2px; }.main-content.is-ai-image-page > .topbar .topbar-note { margin: 0; }.ai-image-chat-head { align-items: flex-start; flex-direction: column; gap: 9px; }.ai-image-head-actions { width: 100%; justify-content: space-between; }.ai-image-messages { padding-left: 12px; padding-right: 12px; }.ai-image-model-chain { grid-template-columns: 1fr; }.ai-image-model-arrow { display: none; }.ai-image-original-note { max-width: 185px; }.ai-image-composer-tools { align-items: flex-start; }.ai-image-card-actions .button { flex: 1 1 auto; }.ai-image-size-fields input { width: 78px; } }

/* ========== 扩展面板 ========== */
.extensions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ext-block h3 { margin: 0 0 4px; font-size: 15px; }
.ext-block h4 { margin: 16px 0 6px; font-size: 13px; color: var(--text-secondary); }
.ext-hint { font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5; }
.ext-form, .ext-search-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ext-search-row { flex-direction: row; }
.ext-search-row input { flex: 1; }
.ext-form input, .ext-form textarea, .ext-search-row input {
  padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; font-family: inherit;
}
.ext-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ext-list li { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 12.5px; }
.ext-list li strong { display: block; margin-bottom: 2px; }
.ext-list li small { color: var(--text-secondary); }
.ext-list li p { margin: 4px 0; }
.ext-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,0.05); font-size: 11px; margin-right: 6px; }
.ext-empty { color: var(--text-secondary); text-align: center; padding: 14px !important; }
.ext-actions { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.usage-total { font-size: 13px; padding: 8px 10px; background: rgba(0,0,0,0.03); border-radius: 8px; }
.usage-summary ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }