/* Base tokens — the default look (incl. the "数字员工工作台" redesign from
   PR #123) is layered later in this file. Skins override these per [data-skin]. */
:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --bg-soft: #eef2f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f8fafc;
  --fg: #18202a;
  --muted: #627084;
  --faint: #7b8798;
  --border: #cbd4df;
  --border-soft: #dde4ec;
  --brand-accent: #646cea;
  --brand-accent-strong: #4d54d9;
  --brand-accent-bright: #8b91ff;
  --brand-accent-cyan: #62e6ff;
  --brand-accent-pink: #f080f0;
  --accent: #565ee4;
  --accent-strong: var(--brand-accent-strong);
  --accent-soft: rgba(100, 108, 234, 0.12);
  --success: #15803d;
  --success-soft: #e7f7ec;
  --warning: #b7791f;
  --warning-soft: #fff7df;
  --danger: #dc2626;
  --danger-soft: #feecec;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  --modal-backdrop: rgba(10, 14, 18, 0.48);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  --radius-xs: 12px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --radius: var(--radius-md);
  --button-height: 34px;
  --button-compact-height: 34px;
  --button-padding-x: 15px;
  --dropdown-trigger-width: 118px;
  --dropdown-popover-min-width: 156px;
  --page-title-row-height: 48px;
  --page-title-divider-gap: 14px;
  --section-title-row-height: 36px;
  --section-title-text-height: 24px;
  --section-title-content-gap: 8px;
  --section-title-dot-size: 7px;
  --section-title-font-size: 15px;
  --sidebar-width: 236px;
  --topbar-height: 60px;
  --topbar-control-size: 38px;
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--muted) 22%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 42%, transparent);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1018;
  --bg-soft: #0e141d;
  --surface: #111821;
  --surface-raised: #17202c;
  --surface-muted: #0d141d;
  --fg: #cbd4df;
  --muted: #8793a4;
  --faint: #737f90;
  --border: #293443;
  --border-soft: #202a37;
  --accent: var(--brand-accent-bright);
  --accent-strong: #b5b9ff;
  --accent-soft: rgba(139, 145, 255, 0.17);
  --success: #58ca8d;
  --success-soft: rgba(88, 202, 141, 0.16);
  --warning: #dba84a;
  --warning-soft: rgba(219, 168, 74, 0.16);
  --danger: #d9788a;
  --danger-soft: rgba(217, 120, 138, 0.16);
  --on-accent: #111418;
  --on-danger: #111418;
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
  --modal-backdrop: rgba(0, 0, 0, 0.62);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

/* Named skins bring their own backdrop — hide PR #123's dark aurora overlay so
   it doesn't tint them (it stays for the default skin's dark mode). */
:root:not([data-skin="default"]):not([data-skin=""]) .aurora { display: none; }

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html.floating-scrollbars-on #app-root,
html.floating-scrollbars-on #app-root * {
  scrollbar-width: none;
}

html.floating-scrollbars-on #app-root::-webkit-scrollbar,
html.floating-scrollbars-on #app-root *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.floating-scrollbar-layer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  contain: layout style size;
}

dialog .floating-scrollbar-layer {
  z-index: 2147483647;
}

.floating-scrollbar {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.floating-scrollbar:not([hidden]).is-visible {
  opacity: 0.54;
}

.floating-scrollbar:not([hidden]).is-active {
  opacity: 0.78;
}

.floating-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--scrollbar-thumb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}

.floating-scrollbar.is-active .floating-scrollbar-thumb,
.floating-scrollbar:hover .floating-scrollbar-thumb {
  background: var(--scrollbar-thumb-hover);
}

html,
body,
#app-root {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .chrome-body,
  .sidebar,
  .sidebar-nav a,
  .sidebar-nav a span {
    transition: none !important;
  }
}

.connection-status {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: var(--topbar-control-size);
  min-height: var(--topbar-control-size);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: default;
  user-select: none;
}

.connection-status::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--brand-accent-cyan), var(--brand-accent), var(--brand-accent-pink));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.segmented button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.segmented button.active {
  background: var(--fg);
  color: var(--surface);
}

/* Theme dropdown — custom listbox so each option can show a real Lucide line
   icon (a native <select> can't render SVG). Sits with the other topbar chips. */
.theme-menu { position: relative; }

.theme-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease;
}
.theme-menu-btn:hover { border-color: var(--muted); }

.tm-svg { display: block; width: 15px; height: 15px; }
.theme-menu-btn .tm-chev .tm-svg { width: 14px; height: 14px; opacity: 0.6; }
.tm-ic { display: inline-flex; }

.theme-menu-pop {
  position: fixed;
  left: var(--theme-menu-pop-left, 50%);
  top: var(--theme-menu-pop-top, calc(var(--topbar-height) + 8px));
  z-index: 90;
  width: min(216px, calc(100vw - 24px));
  min-width: min(216px, calc(100vw - 24px));
  max-height: min(70vh, var(--theme-menu-pop-max-height, 460px));
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 110ms ease,
    transform 110ms ease;
}
.theme-menu-pop[hidden] { display: none; }

.theme-menu.open .theme-menu-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: dashboard-popover-enter 0.35s ease both;
}

.tm-group {
  padding: 7px 8px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.tm-group:not(:first-child) {
  margin-top: 3px;
}

.tm-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* override the base button{justify-content:center} */
  gap: 9px;
  width: 100%;
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.tm-item .tm-svg {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
  stroke-width: 1.75;
}
.tm-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.tm-item.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.tm-item.active:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.tm-item.active .tm-svg { color: var(--accent-strong); }

main {
  width: calc(100% + var(--chrome-x));
  /* 不设上限：收起侧栏腾出的宽度交还内容区（看板/表格都按容器弹性布局）。 */
  max-width: none;
  flex: 1;
  min-height: 0;
  margin-right: calc(-1 * var(--chrome-x));
  padding: 12px var(--chrome-x) 24px 0;
  overflow-x: hidden;
  overflow-y: auto;
}
main.overview-root {
  padding-bottom: 0;
}

main:has(.sessions-page) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.sessions-page) .sessions-page {
  height: 100%;
  min-height: 0;
  /* rows: 标题 / 运行时统计 / 筛选栏 / 批量操作栏 / 视图舞台(占满剩余) */
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.sessions-page) .sessions-page:not(:has(#bulk-bar:not([hidden]))) {
  /* 批量操作栏隐藏(display:none 退出 grid)时少一行 */
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

main:has(.sessions-page) .sessions-view-stage {
  min-height: 0;
  overflow: hidden;
}

main:has(.sessions-page) .sessions-view-stage[data-view="table"] {
  overflow: auto;
}

main:has(.sessions-page) .sessions-kanban {
  padding: 0;
}

main:has(.groups-page) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.groups-page) .groups-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.groups-page) .groups-page:has(> .hint-warn) {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

main:has(.groups-page) .groups-matrix-section > #g-loading {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

@media (min-width: 721px) {
  main:has(.team-home-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.team-home-page) .team-home-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.team-home-page) .team-roster-section {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.team-home-page) .team-roster-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-sizing: border-box;
  }

  main:has(.team-home-page) #tf-teams {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
  }

  main:has(.roles-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.roles-page) .roles-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.roles-page) .roles-layout {
    height: 100%;
    min-height: 0;
  }

  main:has(.roles-page) .roles-tree-panel,
  main:has(.roles-page) .roles-editor-panel {
    height: 100%;
    min-height: 0;
  }

  main:has(.schedules-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-page {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-list-section,
  main:has(.schedules-page) .schedules-list-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  main:has(.schedules-page) .schedules-list {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@keyframes dashboard-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dashboard-popover-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.page {
  display: grid;
  gap: 18px;
  animation: dashboard-page-enter 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .page,
  .topbar-status-pop {
    animation: none !important;
  }
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  padding-top: 1px;
  overflow: visible;
}

.page-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.page-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.page-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 720px;
}

.eyebrow {
  display: none !important;
}

.panel,
.metric-card,
.bd-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Team pages: reserve a stable 2-line height for the heading lede so switching
   between 我的团队 / 团队管理 (whose descriptions wrap to a different number of
   lines) doesn't shift the sub-nav below it — no more flash on tab switch. */
.tf-lede {
  min-height: 41px;
}

.panel {
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.panel-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Keep the "View all →" action on one line; let the title block shrink instead
   (narrow cards like schedules were wrapping the button onto two lines). */
.panel-header > div { min-width: 0; }
.panel-header .btn-link { white-space: nowrap; flex: 0 0 auto; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.metric-card {
  padding: 14px 15px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 12px;
}

/* Botmux total-RSS breakdown lines (self / external CLI) — tighter + quieter
   than the primary CPU small, and the parenthetical daemon·worker detail stays
   inline/normal-weight (overriding the bold block `.metric-card span` rule). */
.metric-card small.metric-breakdown {
  margin-top: 3px;
  font-size: 11px;
}

.metric-card .metric-breakdown-detail {
  display: inline;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.metric-label-with-help {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.metric-card .metric-label-with-help > span {
  display: inline;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.resource-strip {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) repeat(4, max-content);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.resource-strip:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface-raised);
}

.resource-strip-title,
.resource-strip-metric {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.resource-strip-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-strip-title em {
  color: var(--fg);
  font-style: normal;
  text-transform: none;
}

.resource-strip-metric {
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}

.resource-strip-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-strip-metric strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-health-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.resource-health-dot.ok {
  background: var(--success);
}

.resource-health-dot.warn {
  background: var(--warning);
}

.resource-health-dot.danger {
  background: var(--danger);
}

.resource-strip-metric.ok strong {
  color: var(--success);
}

.resource-strip-metric.warn strong {
  color: var(--warning);
}

.resource-strip-metric.danger strong {
  color: var(--danger);
}

.resource-page {
  isolation: isolate;
  display: grid;
  gap: 16px;
}

.resource-page > .panel,
.resource-page .resource-block {
  position: relative;
  z-index: 10;
}

.resource-page .resource-pressure-block,
.resource-page .resource-pressure {
  z-index: 30;
  overflow: visible;
}

.resource-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  border-radius: var(--radius-full);
}

.resource-page :where(.metric-card, .resource-unavailable-card) {
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.resource-page :where(.metric-card, .resource-unavailable-card):hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

.resource-metrics {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.runtime-health-grid,
.runtime-session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
}

.runtime-pressure-grid {
  padding: 14px;
}

.runtime-health-card,
.runtime-session-card {
  min-width: 0;
}

.runtime-health-card strong {
  font-size: 24px;
}

.runtime-session-card strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-health-card small,
.runtime-session-card small {
  line-height: 1.4;
}

.runtime-status-pill {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.runtime-status-pill.fresh {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: var(--success-soft);
  color: var(--success) !important;
}

.runtime-status-pill.stale {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: var(--warning-soft);
  color: var(--warning) !important;
}

.runtime-status-pill.unsupported {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--faint) !important;
}

.runtime-status-pill.unknown {
  border-color: var(--border-soft);
  background: transparent;
  color: var(--muted) !important;
}

.resource-unavailable {
  padding: 14px;
}

.resource-unavailable-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.resource-unavailable-status {
  width: 10px;
  height: 10px;
  border: 3px solid var(--warning-soft);
  border-radius: 50%;
  background: var(--warning);
}

.resource-unavailable-copy {
  min-width: 0;
}

.resource-unavailable-copy span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.resource-unavailable-copy h2 {
  margin: 0 0 4px;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.2;
}

.resource-unavailable-copy p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
}

.resource-unavailable-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.resource-unavailable-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-weight: 750;
}

.resource-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.resource-trend-cell {
  position: relative;
  min-width: 0;
  padding: 12px 12px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border-soft) 52%, transparent);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.resource-trend-cell:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-1px);
}

.resource-trend-cell b {
  display: block;
  min-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  font-size: 12px;
  font-weight: 780;
  line-height: 18px;
}

.resource-chart {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
  min-height: 104px;
}

.resource-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 22px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.resource-chart-plot {
  min-width: 0;
}

.resource-spark-wrap {
  position: relative;
}

.resource-spark {
  display: block;
  width: 100%;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 74%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 64%, transparent), transparent);
  overflow: visible;
}

.resource-grid-line {
  stroke: color-mix(in srgb, var(--border-soft) 70%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.resource-spark-area {
  fill: color-mix(in srgb, var(--accent) 15%, transparent);
}

.resource-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.resource-spark-dot {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.resource-chart-x {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.resource-chart-x span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-page [data-resource-expandable] {
  cursor: pointer;
}

.resource-page [data-resource-expandable]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.resource-detail-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.resource-detail-modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.resource-detail-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.resource-detail-modal-head {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 12px 18px 8px;
}

.resource-detail-modal-head h3 {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-detail-modal-head h3::before {
  content: none;
}

.resource-detail-modal-close {
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
}

.resource-detail-modal-close::before,
.resource-detail-modal-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
}

.resource-detail-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.resource-detail-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.resource-detail-modal-close:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.resource-detail-modal-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 4px 18px 18px;
  overflow-y: auto;
}

.resource-detail-summary {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.resource-detail-summary strong {
  color: var(--fg);
  font-size: 28px;
  line-height: 1.1;
}

.resource-detail-summary p,
.resource-detail-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.resource-detail-empty {
  min-height: 128px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.resource-detail-chart {
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 320px;
  margin-top: 0;
}

.resource-detail-chart .resource-chart-y {
  padding-bottom: 28px;
  font-size: 11px;
}

.resource-detail-chart .resource-spark {
  height: min(42vh, 320px);
}

.resource-detail-chart .resource-chart-x {
  padding-top: 7px;
  font-size: 10.5px;
}

@media (max-width: 720px) {
  .resource-detail-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .resource-detail-modal-card {
    max-height: calc(100dvh - 24px);
  }

  .resource-detail-modal-head,
  .resource-detail-modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .resource-detail-chart {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 250px;
  }

  .resource-detail-chart .resource-spark {
    height: min(38vh, 260px);
  }
}

.resource-list-shell {
  min-width: 0;
}

.resource-runtime-list {
  max-height: calc(56px * 8 + 20px);
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--border)) transparent;
  scrollbar-width: thin;
}

.resource-session-list {
  max-height: calc(58px * 10 + 20px);
}

.resource-runtime-list::-webkit-scrollbar {
  width: 6px;
}

.resource-runtime-list::-webkit-scrollbar-track {
  background: transparent;
}

.resource-runtime-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.resource-list-item {
  min-height: 52px;
  align-items: center;
  overflow: visible;
}

.resource-list-item.is-tracked {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.resource-list-item.is-tracked .overview-list-main strong::after {
  content: "trend";
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
}

.resource-list-item .overview-list-tail {
  max-width: min(650px, 66%);
  justify-content: flex-end;
  flex: 1 1 auto;
}

.resource-pill-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.resource-pill > span {
  flex: none;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.resource-pill > b,
.resource-pill .resource-reasons {
  min-width: 0;
  overflow: hidden;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-pill.accent {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.resource-pill.accent > b,
.resource-pill.accent .resource-reasons {
  color: var(--accent);
}

.resource-pill.ok {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, transparent);
}

.resource-pill.ok > b {
  color: var(--success);
}

.resource-pill.warn {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.resource-pill.warn > b {
  color: var(--warning);
}

.resource-pill.off {
  color: var(--faint);
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
}

.resource-rank-pill {
  max-width: 280px;
}

.resource-rank-pill .resource-reasons {
  max-width: 200px;
}

.resource-sortbar {
  display: flex;
  align-items: center;
  padding: 0;
}

.resource-sortbar.dashboard-toolbar {
  display: inline-flex;
  min-height: auto;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.resource-sortbar-inline {
  flex: none;
}

.resource-sortbar .resource-sort-switch {
  flex-wrap: wrap;
  max-width: 100%;
}

.resource-reasons {
  color: var(--accent-strong) !important;
}

@media (max-width: 900px) {
  .resource-strip,
  .resource-metrics,
  .runtime-health-grid,
  .runtime-session-grid,
  .resource-unavailable-card {
    grid-template-columns: 1fr;
  }

  .resource-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .resource-list-item .overview-list-main,
  .resource-list-item .overview-list-tail,
  .resource-pill-group {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  .resource-unavailable-tags {
    justify-content: flex-start;
  }
}

.overview-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.overview-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, transparent);
  box-sizing: border-box;
  overflow: hidden;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}
.overview-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  transform: translateY(-1px);
}
.overview-list-main { min-width: 0; flex: 1; }
.overview-list-main :is(b, strong) {
  display: block;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overview-list-main span,
.overview-list-meta {
  color: var(--faint);
  font-size: 11px;
}
.overview-list-main span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overview-list-meta,
.overview-list-status {
  flex: none;
  white-space: nowrap;
}
.overview-list-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
}
.overview-list-action {
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--warning) 62%, transparent);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
.overview-list-action:hover {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.filters {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

button,
.btn-link {
  font: inherit;
}

/* ── Unified form controls ──────────────────────────────────────────────────
   One consistent look for every text input, <select> and <textarea>: themed
   surface, 1px border, var(--radius) corners, a custom dropdown chevron and a
   soft accent focus ring. Native appearance is reset so WebKit search fields and
   selects stop rendering their own mismatched pill/rounded shapes. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
select,
textarea {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-raised);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23808a99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

/* Multi-selects show a list, not a single value — no chevron, full padding. */
select[multiple] {
  background-image: none;
  padding-right: 8px;
}

input:not([type=checkbox]):not([type=radio]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--muted);
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button:focus-visible,
.btn-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filters input[type=search],
.filters input[type=text],
.filters select,
.form-row input[type=text],
.bd-body .bd-row input[type=text],
.oncall-row-body input[type=text] {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  background: var(--surface-raised);
}

.filters input[type=search] { min-width: min(260px, 100%); }
.filters select[multiple] { min-height: 72px; padding: 6px 8px; }

.sessions-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(132px, max-content) minmax(132px, max-content) max-content;
  align-items: center;
  gap: 10px 12px;
}

.sessions-filters input[type=search] {
  width: 100%;
  min-width: 0;
}

.sessions-filters select {
  width: 150px;
}

.sessions-view-toggle {
  flex: 0 0 auto;
}

.monitor-room-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.monitor-room-open:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 4px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.filter-toggle input {
  margin: 0;
}

.filter-check-group {
  display: grid;
  grid-template-columns: auto repeat(8, max-content);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  grid-column: 1 / -1;
}

.filter-check-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-right: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.filter-check:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.filter-check input {
  margin: 0;
}

label {
  color: var(--muted);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 11px 13px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  vertical-align: middle;
}

th {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

tbody tr:last-child td { border-bottom: 0; }

.schedules-table .schedule-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── 首尾列固定的横向滚动矩阵（群组与 Bot）─────────────────────────────
   bot 一多中间的成员列就溢出视口，操作按钮被顶出屏幕。把圆角/阴影挪到
   滚动容器上，表格本体放开宽度横向滚，首列（群）和尾列（操作）sticky 钉住。 */
.table-scroll { overflow-x: auto; }
.matrix-scroll {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.matrix-scroll table {
  width: max-content;
  min-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible; /* 基础样式的 overflow:hidden 会把 sticky 列钉死在表格自身 */
}
.matrix-scroll th:first-child,
.matrix-scroll td:first-child { position: sticky; left: 0; z-index: 2; }
.matrix-scroll th:last-child,
.matrix-scroll td:last-child { position: sticky; right: 0; z-index: 2; }
.matrix-scroll th:first-child,
.matrix-scroll th:last-child { z-index: 3; }
/* sticky 单元格必须有不透明底色，否则中间列会从底下透出来 */
.matrix-scroll td:first-child,
.matrix-scroll td:last-child { background: var(--surface); }
/* 暗色主题下表格本体有一层 3% 白的提亮，sticky 格子补同款混色保持一致 */
:root[data-theme="dark"] .matrix-scroll td:first-child,
:root[data-theme="dark"] .matrix-scroll td:last-child {
  background: color-mix(in srgb, #ffffff 3%, var(--surface));
}
/* 暗色主题 th 也是半透明提亮（4% 白）——sticky 表头必须不透明，否则横滚时
   中间列标题会从「群聊」「操作」底下透出来。7% ≈ 表格 3% + th 4% 的叠加效果 */
:root[data-theme="dark"] .matrix-scroll th:first-child,
:root[data-theme="dark"] .matrix-scroll th:last-child {
  background: color-mix(in srgb, #ffffff 7%, var(--surface));
}
.matrix-scroll tr[data-chat]:hover td:first-child,
.matrix-scroll tr[data-chat]:hover td:last-child { background: var(--surface-muted); }
/* 滚动边界提示线 */
.matrix-scroll th:first-child,
.matrix-scroll td:first-child { box-shadow: 1px 0 0 var(--border-soft); }
.matrix-scroll th:last-child,
.matrix-scroll td:last-child { box-shadow: -1px 0 0 var(--border-soft); }

/* ── 慢接口在途的页面级 loading 占位：在内容区水平垂直居中 ── */
.page-loading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 220px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  animation: page-loading-in 0.25s ease-out;
}
.page-loading-compact {
  min-height: 96px;
  padding: 24px 12px;
  gap: 10px;
}
.page-loading-spin {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--border-soft);
  border-top-color: var(--accent);
  animation: page-loading-rotate 0.8s linear infinite;
}
@keyframes page-loading-rotate { to { transform: rotate(360deg); } }
@keyframes page-loading-in { from { opacity: 0; } }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover,
th.sorted { color: var(--fg); background: var(--bg-soft); }
tr[data-id]:hover,
tr[data-chat]:hover { background: var(--surface-muted); cursor: pointer; }
.token-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.session-location-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sessions-table {
  max-width: 100%;
}

#sessions-table .sessions-table-text-cell,
#sessions-table .sessions-table-path-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

button,
.btn-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--fg);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:hover,
.btn-link:hover {
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.help-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--help-icon-size, 20px);
  width: var(--help-icon-size, 20px);
  height: var(--help-icon-size, 20px);
  min-width: var(--help-icon-size, 20px);
  min-height: var(--help-icon-size, 20px);
  max-width: var(--help-icon-size, 20px);
  max-height: var(--help-icon-size, 20px);
  padding: 0;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: var(--help-icon-font-size, 11px);
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

button.contrast {
  background: var(--danger);
  color: var(--on-danger);
  border-color: var(--danger);
}

.btn-link.primary,
button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

.badge,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
}

.badge {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border-soft);
}

.session-lock-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-muted));
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.cli-claude-code { background: #e8f0ff; color: #234fb4; border-color: #c8d9ff; }
.cli-codex       { background: #fff0df; color: #a14c11; border-color: #ffd8ad; }
.cli-codex-app   { background: #e9f7ff; color: #11638f; border-color: #bde4fa; }
.cli-cursor      { background: #ece9ff; color: #5b4ac7; border-color: #d9d2ff; }
.cli-gemini      { background: #fde7f1; color: #a13268; border-color: #fac8df; }
.cli-opencode    { background: #e7f7ec; color: #176b36; border-color: #bfe8ce; }
.cli-mtr         { background: #e5f5ff; color: #0f6388; border-color: #b8e2f7; }
.cli-hermes      { background: #f0f4e4; color: #546b14; border-color: #d9e9a8; }
.cli-mira        { background: #e8f6f6; color: #12686d; border-color: #b9e4e5; }
.cli-pi          { background: #f1e9ff; color: #6b2bbf; border-color: #dcc9ff; }
.cli-aiden       { background: #fff7d1; color: #8b6508; border-color: #f7df87; }
.cli-coco        { background: #e4f7f2; color: #0c695b; border-color: #b7e4d9; }
.cli-unknown     { background: var(--surface-muted); color: var(--muted); }

:root[data-theme="dark"] .cli-claude-code,
:root[data-theme="dark"] .cli-codex,
:root[data-theme="dark"] .cli-codex-app,
:root[data-theme="dark"] .cli-cursor,
:root[data-theme="dark"] .cli-gemini,
:root[data-theme="dark"] .cli-opencode,
:root[data-theme="dark"] .cli-mtr,
:root[data-theme="dark"] .cli-hermes,
:root[data-theme="dark"] .cli-mira,
:root[data-theme="dark"] .cli-pi,
:root[data-theme="dark"] .cli-aiden,
:root[data-theme="dark"] .cli-coco {
  background: var(--surface-muted);
  color: var(--fg);
  border-color: var(--border);
}

.status-working,
.status-active { background: var(--accent-soft); color: var(--accent-strong); }
.status-idle { background: var(--surface-muted); color: var(--muted); }
.status-dormant {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}
.status-attention {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--warning);
}
.status-closed { background: var(--danger-soft); color: var(--danger); }
.status-analyzing { background: var(--warning-soft); color: var(--warning); }
.status-starting { background: var(--success-soft); color: var(--success); }
.status-limited { background: var(--danger-soft); color: var(--danger); }

/* ── Sessions board — "control-room signal wall" ─────────────────────────────
   Each column is a signal channel: a LED dot + uppercase channel label in the
   header, and every card inherits the channel color through `--col-signal`.
   The needs-you channel pulses; everything else stays calm. Terminal-native
   typography (mono labels, tabular numerals) over generic SaaS chrome. */
.sessions-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  background-image: none;
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}

.sessions-board[hidden] {
  display: none;
}

.session-board-column {
  --col-signal: var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.session-board-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-muted);
  box-sizing: border-box;
}

.session-board-column > header > div {
  display: grid;
  align-content: center;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
}

.session-board-column h2 {
  flex: none;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* channel LED */
.session-board-column h2::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent);
  flex: none;
}

.session-board-column p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-board-count {
  width: auto;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--col-signal) 10%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--col-signal) 35%, var(--border));
  color: color-mix(in srgb, var(--col-signal) 75%, var(--fg));
  font-family: var(--mono);
  font-weight: 700;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}

.session-board-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  padding: 10px;
  overflow-y: auto;
}

.session-board-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--faint);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.session-board-needs-you {
  --col-signal: var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

/* the one channel that's allowed to breathe */
.session-board-needs-you h2::before {
  animation: board-led-pulse 1.6s ease-in-out infinite;
}

.session-board-starting {
  --col-signal: var(--warning);
}

.session-board-working {
  --col-signal: var(--success);
}

.session-board-idle {
  --col-signal: var(--faint);
}

@keyframes board-led-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-signal) 18%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--col-signal) 30%, transparent); }
}

.session-card {
  --session-board-card-min-height: 132px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-sizing: border-box;
  min-height: var(--session-board-card-min-height);
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Entry animation ONLY on the board's first paint (.board-enter set by JS).
 * SSE-driven re-renders rebuild the DOM — replaying the staggered reveal on
 * every status update made the whole page flash. */
.board-enter .session-board-list .session-card {
  animation: board-card-in 280ms ease backwards;
}

/* stagger the first paint — one orchestrated reveal, then calm */
.board-enter .session-board-list .session-card:nth-child(1) { animation-delay: 30ms; }
.board-enter .session-board-list .session-card:nth-child(2) { animation-delay: 75ms; }
.board-enter .session-board-list .session-card:nth-child(3) { animation-delay: 120ms; }
.board-enter .session-board-list .session-card:nth-child(4) { animation-delay: 165ms; }
.board-enter .session-board-list .session-card:nth-child(n+5) { animation-delay: 210ms; }

@keyframes board-card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.session-card:hover {
  border-color: color-mix(in srgb, var(--col-signal) 55%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--col-signal) 12%, rgba(15, 23, 42, 0.10));
}

/* whole-card selection (no checkbox) — accent ring + soft tint */
.session-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
}

.session-card.locked {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  .session-card { animation: none; transition: none; }
  .session-board-needs-you h2::before { animation: none; }
  .session-card:hover { transform: none; }
}

.session-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
}

.session-card-title {
  min-width: 0;
}

.session-card-title strong,
.session-card-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-title strong {
  color: var(--fg);
  font-size: 13px;
}

.session-card-title span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.session-card-meta,
.session-card-time,
.session-card-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.session-card-meta {
  color: var(--muted);
  font-size: 12px;
  flex-wrap: nowrap;
}

.session-card-meta > span:not(.badge):not(.session-signal) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-time {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.session-card-status-group,
.drawer-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.session-card-status-group .session-lock-badge,
.drawer-status-line .session-lock-badge {
  margin-left: 0;
}

.session-signal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  color: var(--danger);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: left;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.session-card-meta .session-signal,
.kanban-card-meta-row .session-signal {
  flex: none;
  justify-content: center;
  max-width: 52%;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: inherit;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-card-actions {
  padding-top: 2px;
  justify-content: flex-end;
}

.session-card-actions button,
.session-card-actions .btn-link {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.session-card-actions .card-act {
  border-radius: var(--radius-full);
}

.session-card-actions .term-pill {
  border-radius: var(--radius-full);
}

/* ── 看板视图（multica Issues 风格）：横排状态列 + 简洁卡片 ─────────────────── */
.sessions-kanban {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
}

.sessions-kanban[hidden] {
  display: none;
}

.kanban-column {
  /* 弹性等分而非固定 280px：5 列在任何视口宽度下收缩到容器内，
     不再把页面撑出横向滚动条（极窄屏由媒体查询改纵向堆叠兜底）。 */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.kanban-column > header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 8px;
}

.kanban-col-icon {
  display: inline-flex;
  flex: none;
}

.kanban-col-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.kanban-column h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.kanban-col-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* 视图控件排布：团队筛选 + 分组维度切换 + 视图切换并排（窄屏自动换行） */
.sessions-view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

/* .segmented 自带 display:inline-flex 会盖掉 [hidden] 的 UA 样式——显式补回 */
.sessions-view-controls [hidden] {
  display: none !important;
}

.sessions-view-stage {
  min-width: 0;
}

.sessions-view-stage-enter {
  animation: dashboard-page-enter 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .sessions-view-stage-enter {
    animation: none !important;
  }
}

/* 团队下拉使用平台 DropdownMenu，和其他短选项下拉保持同一 trigger / popover 规范。 */
.kanban-team-menu {
  --dropdown-trigger-width: 176px;
  width: var(--dropdown-trigger-width);
}

.kanban-team-menu > summary {
  background: var(--surface);
}

.kanban-team-menu .sect-sort-value {
  max-width: calc(var(--dropdown-trigger-width) - 44px);
}

.kanban-team-menu > .sect-sort-pop {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.kanban-team-menu[open] {
  z-index: 1302;
}

/* 团队筛选范围统计：让"筛掉了什么"可见 */
.kanban-team-stats {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* 团队清单加载中的整板占位（替代裸文本） */
.kanban-loading-state {
  flex: 1;
  min-height: 220px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* 对方部署的会话卡：来源徽章 + 虚线边框区分快照身份 */
.kanban-remote-badge {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted));
  color: var(--accent-strong);
  white-space: nowrap;
  flex: none;
}

.kanban-card-remote {
  border-style: dashed;
}

/* 机器人视角：bot 多时列不再无限压缩——固定列宽 + 容器横向滚动 */
.sessions-kanban.kanban-mode-bot .kanban-column {
  flex: 0 0 264px;
}

/* 整簇拖拽 */
.kanban-cluster > header {
  cursor: grab;
}

.kanban-cluster.dragging {
  opacity: 0.45;
}

/* 同群聚簇容器：虚线框 + 群名头，一眼看出卡片同属一个群 */
.kanban-cluster {
  --kanban-card-min-height: 130px;
  --kanban-cluster-min-height: calc(var(--kanban-card-min-height) + 44px);
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  align-self: start;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--kanban-cluster-min-height);
  max-width: 100%;
  max-height: none;
  padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  overflow: visible;
}

.kanban-cluster.collapsed {
  min-height: 0;
  padding-block: 8px;
}

.kanban-cluster > header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.kanban-cluster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-cluster-count {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kanban-cluster > header .kanban-cluster-toggle {
  flex: none;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  margin-left: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--muted);
  cursor: pointer;
}

.kanban-cluster-avatar,
.kanban-cluster-avatar .orb-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.kanban-cluster-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

.kanban-cluster.expanded .kanban-cluster-toggle svg {
  transform: rotate(180deg);
}

/* 团队模式列头：bot 头像替代状态图标 */
.kanban-col-avatar {
  display: inline-flex;
  flex: none;
}

.kanban-backlog .kanban-col-icon { color: var(--faint); }
.kanban-todo .kanban-col-icon { color: var(--muted); }
.kanban-in_progress .kanban-col-icon { color: var(--warning); }
.kanban-in_review .kanban-col-icon { color: var(--success); }
.kanban-done .kanban-col-icon { color: var(--accent); }

/* 拖拽视觉：目标列描边、插入位置在目标卡上沿画一条插入线、拖拽源半透明 */
.kanban-column.drag-over {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.kanban-card.dragging {
  opacity: 0.45;
}

.kanban-card.drop-before {
  box-shadow: 0 -2px 0 0 var(--accent);
}

.kanban-col-list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-items: start;
  gap: 8px;
  align-content: start;
  padding: 2px 8px 10px;
  overflow-y: auto;
}

.kanban-col-empty {
  padding: 32px 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

.kanban-col-more {
  padding: 6px 0 2px;
  color: var(--faint);
  font-size: 11px;
  text-align: center;
}

.kanban-card {
  --kanban-card-min-height: 130px;
  position: relative;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--kanban-card-min-height);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}

.kanban-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
}

.kanban-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.kanban-card.locked {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.kanban-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.kanban-card-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 24px;
  min-width: 0;
  overflow: hidden;
  padding-right: 0;
}

.kanban-card > * {
  min-width: 0;
  max-width: 100%;
}

/* CLI 徽章别折行（claude-code 之类带连字符的会被 280px 卡片拆成两行） */
.kanban-card-top .badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: none;
}

.kanban-card-actions-rail {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  z-index: 2;
}

.kanban-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.kanban-card-dot[data-status="working"],
.kanban-card-dot[data-status="analyzing"],
.kanban-card-dot[data-status="active"] {
  background: var(--success);
}

.kanban-card-dot[data-status="starting"] {
  background: var(--warning);
}

.kanban-card-dot[data-status="limited"] {
  background: var(--danger);
}

.kanban-card-dot[data-status="idle"] {
  background: var(--success);
}

.kanban-card-dot[data-status="dormant"] {
  background: var(--muted);
}

.kanban-card-dot[data-status="closed"] {
  background: var(--border);
}

/* 操作按钮作为绝对定位浮层出现，不参与卡片排版，避免 hover 时重新挤压标题导致抖动。 */
.kanban-card .kanban-card-act {
  order: 1;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.kanban-card .kanban-card-act svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.55;
}

.kanban-card:hover .kanban-card-act,
.kanban-card:focus-within .kanban-card-act {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@media (hover: none), (max-width: 720px) {
  .kanban-card .kanban-card-act {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}

/* 标题就地编辑输入框：占标题原位，不撑破卡片 */
.kanban-rename-input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.kanban-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kanban-card-desc-empty {
  visibility: hidden;
}

.kanban-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
}

.kanban-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fg);
  font-size: 12px;
}

.kanban-card-owner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-updated {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 11px;
}

.kanban-card-updated .kanban-card-dot {
  margin-left: 1px;
}

/* ── 页面内终端弹窗（看板卡片点击落点）───────────────────────────────────── */
.term-modal {
  width: min(1320px, calc(100vw - 32px));
  height: min(86vh, 960px);
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.term-modal[open] {
  display: flex;
  flex-direction: column;
}

.term-modal-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.term-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.term-modal-title-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.term-modal-title-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.term-modal-title strong {
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-modal-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.2;
}

.term-modal-subtitle span {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-modal-subtitle span + span::before {
  content: "·";
  margin-right: 6px;
  color: var(--faint);
}

/* 终端弹窗标题旁的铅笔：常显小尺寸，与 card-act 一致 */
.term-modal-title .card-act {
  width: 26px;
  height: 26px;
  min-height: 26px;
  flex: none;
  border-radius: var(--radius-full);
}

/* 标题就地编辑输入框：宽度由 JS 按内容实测设定（fitInput），这里只给兜底上限 */
.term-modal-name-input {
  max-width: 60vw;
  margin: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

.term-modal-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.term-modal-actions .card-act {
  border-radius: var(--radius-full);
}

.term-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
}

.term-modal-frame-shell {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #000;
}

.term-modal-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.term-modal-loading {
  margin: auto;
  color: var(--faint);
  font-size: 13px;
}

.team-bind-loading {
  min-height: 0;
  padding: 0;
}

/* ── 会话历史弹窗：飞书式左右气泡 ─────────────────────────────────────────── */
.history-modal {
  width: min(860px, 94vw);
  height: min(82vh, 900px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}

.history-modal[open] {
  display: flex;
  flex-direction: column;
}

.history-scope-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}

.history-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg-soft);
}

.history-list {
  display: grid;
  gap: 4px;
}

.history-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 82%;
}

.history-msg.group-start:not(:first-child) {
  margin-top: 8px;
}

.history-msg-main {
  min-width: 0;
}

.history-msg-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 11px;
}

.history-bubble {
  padding: 8px 11px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.history-avatar-user {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
}

/* 真人头像（contact API 拿到的）——与首字圆同尺寸 */
.history-avatar-img {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.history-avatar-bot,
.history-avatar-bot .orb-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.history-avatar-spacer {
  flex: none;
  width: 24px;
  height: 1px;
}

.history-error {
  margin: auto;
  color: var(--faint);
  font-size: 13px;
}

/* 图标方按钮：会话卡片操作行一排，也被详情抽屉 .actions 复用（chat-scope 的
   「打开群聊」走同一个 .card-act）。图标宽度与语言无关，en/zh 都稳定一行，修掉了
   EN 文案更宽把「关闭」挤下行的崩布局。基础按钮外观放在通用 .card-act 选择器上，
   这样抽屉里的裸 <a class="card-act"> 也有按钮态；.session-card-actions 只管布局。
   SVG 走 stroke:currentColor。 */
.card-act svg,
.term-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-act {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .07s ease;
}
.card-act:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}
.card-act.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised));
}
.card-act.locked {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-raised));
}
.card-act:active { transform: scale(0.9); }

/* 单一终端入口：私有 dashboard 默认打开可写终端；显式开启公共只读时，
   同一个图标降级为只读链接，避免并排「终端 + 钥匙」造成两个主操作。 */
.term-pill {
  display: inline-flex;
  align-items: center;
}
.term-pill .term-btn {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, filter .15s ease, transform .07s ease;
}
.term-pill .term-open {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}
.term-pill .term-open:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.term-pill .term-write {
  color: var(--on-accent);
  background: var(--accent);
}
.term-pill .term-write:hover { filter: brightness(1.1); }
.term-pill .term-btn:active { transform: scale(0.88); }

dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

dialog article {
  display: grid;
  gap: 12px;
  padding: 18px;
}
dialog header {
  display: grid;
  gap: 5px;
  margin: 0;
}
dialog h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 720;
  line-height: 1.25;
}
dialog header p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

#drawer {
  width: min(760px, calc(100vw - 32px));
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

#drawer article {
  gap: 14px;
  padding: 16px;
}

#drawer header {
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

#drawer .drawer-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

#drawer header h3 {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#drawer .drawer-close-btn {
  flex: none;
  border-radius: var(--radius-full);
}

#drawer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

#drawer p b {
  color: var(--fg);
  font-weight: 760;
}

#drawer .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

#drawer .actions > button,
#drawer .actions > .btn-link,
#drawer .actions .term-pill {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

#drawer .actions > button:not(.card-act) {
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
}

#drawer .actions > button:not(.card-act):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#drawer .actions > button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

#drawer .actions > button.contrast {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

#drawer .actions .card-act {
  border-radius: var(--radius-full);
}

#drawer #insight-area {
  display: grid;
  gap: 10px;
}

dialog code,
td code,
.form-row code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--fg);
  font: 12px/1.3 var(--mono);
}

.actions,
.actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.actions { margin: 14px 0; }

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button:not(.card-act):not(.term-btn):not(.modal-close):not(.feishu-login-close), .btn-link:not(.card-act):not(.term-btn)) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.primary, .btn-link.primary) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.primary, .btn-link.primary):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.contrast, button.danger) {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel)
  :where(button.contrast, button.danger):hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

:where(dialog, .feishu-login-modal, .team-role-dialog, .wb-delete-dialog, .auth-expired-dialog, .insights-page .modal-panel) .actions {
  justify-content: flex-end;
  margin: 0;
}

.auth-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.auth-expired-dialog {
  display: grid;
  gap: 12px;
  width: min(460px, 90vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
  text-align: center;
}

.auth-expired-dialog h2 {
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.25;
}

.auth-expired-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.auth-expired-dialog button {
  justify-self: center;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 0;
  color: var(--fg);
}

/* Keep the checkbox and its title on one line (don't let flex shrink the title
   into a vertical sliver), and drop the help text onto its own line, indented
   under the title for readability. */
.checkbox-row input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.checkbox-row strong { flex: 0 0 auto; }

.checkbox-row small {
  flex: 1 1 100%;
  margin-left: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#g-drawer form,
#g-drawer fieldset {
  display: grid;
  gap: 12px;
}

#g-drawer .g-create-dialog {
  --g-create-gap: 12px;
  --g-create-inner-gap: 8px;
  gap: 12px;
}

#g-drawer :where(.g-add-bots-dialog, .g-save-profile-dialog, .g-manage-dialog) > header {
  justify-items: center;
  text-align: center;
}

#g-drawer :where(.g-add-bots-dialog, .g-save-profile-dialog, .g-manage-dialog) > header h3 {
  max-width: min(560px, 100%);
  text-align: center;
}

#g-drawer :where(button, .btn-link) {
  box-shadow: none !important;
}

#g-drawer .g-create-dialog > header {
  text-align: center;
}

#g-drawer .g-create-dialog > p,
#g-drawer .g-create-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

#g-drawer.groups-create-modal {
  width: min(720px, calc(100vw - 32px));
  overflow: hidden;
  border-color: var(--border-soft);
}

#g-drawer.groups-create-modal .g-create-dialog {
  max-height: calc(100vh - 32px);
  overflow: auto;
}

#g-drawer.groups-create-modal .g-create-head {
  justify-items: center;
  gap: 6px;
  min-height: var(--section-title-row-height);
}

#g-drawer.groups-create-modal .g-create-head h3 {
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

#g-drawer.groups-create-modal .g-create-form {
  display: grid;
  gap: var(--g-create-gap);
}

#g-drawer.groups-create-modal .g-create-bots {
  gap: var(--g-create-inner-gap);
}

#g-drawer.groups-create-modal .g-bot-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-create-inner-gap);
}

#g-drawer.groups-create-modal .g-create-fields {
  display: grid;
  gap: var(--g-create-gap);
}

#g-drawer.groups-create-modal .g-profile-menu {
  width: 100%;
}

#g-drawer.groups-create-modal .g-profile-menu > summary {
  background: var(--surface);
  font-size: 12px;
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-value {
  max-width: calc(100% - 44px);
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-pop {
  left: 0;
  right: 0;
  min-width: 100%;
  transform: none;
}

#g-drawer.groups-create-modal .g-profile-menu .sect-sort-pop button {
  justify-content: flex-start;
}

#g-drawer.groups-create-modal .g-create-status:empty {
  display: none;
}

#g-drawer.groups-create-modal .g-create-actions {
  gap: var(--g-create-inner-gap);
  justify-content: flex-end;
  margin: 0;
}

#g-drawer.groups-create-modal .g-create-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#g-drawer.groups-create-modal .g-create-actions button.primary {
  box-shadow: none;
}

#g-drawer.groups-create-modal .button-spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 34%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: page-loading-rotate 0.8s linear infinite;
}

#g-drawer .form-row {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

#g-drawer .form-row > span {
  margin: 0;
}

#g-drawer .form-row :where(input, select),
#g-drawer .g-modal-field :where(input, select) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-color: var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
}

#g-drawer .g-modal-field :where(input, select):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}

#g-drawer .g-modal-field :where(input, select):focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

#g-drawer fieldset {
  margin: 0;
  padding: 12px;
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

#g-drawer .g-modal-field legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#g-drawer .g-modal-field small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#g-drawer :where(button.primary, .btn-link.primary),
.onboarding-dialog button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

#g-drawer :where(button.primary, .btn-link.primary):hover:not(:disabled),
.onboarding-dialog button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#g-drawer .checkbox-row {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

#g-drawer .checkbox-row::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

#g-drawer .checkbox-row:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

#g-drawer .checkbox-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

#g-drawer .checkbox-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: none;
}

#g-drawer .checkbox-row:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#g-drawer .checkbox-row input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

#g-drawer .checkbox-row-main,
#g-drawer .checkbox-row > strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#g-drawer .checkbox-row-main strong,
#g-drawer .checkbox-row > strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#g-drawer .checkbox-row-main small,
#g-drawer .checkbox-row > small {
  flex: none;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}

.empty {
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

.plugin-management-page {
  align-content: start;
  width: 100%;
}

.plugin-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plugin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

.plugin-summary-card {
  max-width: none;
  margin-bottom: 0;
  padding: 14px 16px;
}

.plugin-management-page .plugin-summary-card,
.plugin-management-page .plugin-card {
  max-width: none;
}

.plugin-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
}

.plugin-card-list {
  display: grid;
  gap: 14px;
  width: 100%;
}

.plugin-card {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

.plugin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-card-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.plugin-title-block {
  min-width: 0;
}

.plugin-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.plugin-card-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.plugin-card-head code {
  font-family: var(--mono);
  color: var(--fg);
}

.plugin-expand-button {
  flex: none;
  min-width: 76px;
  justify-content: center;
}

.plugin-global-setting {
  min-height: 64px;
  margin: 0;
  padding: 12px 18px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.plugin-global-setting-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.plugin-global-setting-copy strong {
  font-size: 13px;
  line-height: 1.35;
}

.plugin-global-setting-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.plugin-global-setting input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-card-summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 38%, transparent);
}

.plugin-capability-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.plugin-capability-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.plugin-capability-chip strong {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.plugin-scope-summary {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plugin-card-expanded {
  min-width: 0;
}

.plugin-settings-pending {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 12px;
}

.plugin-enable-panel {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 34%, transparent);
}

.plugin-enable-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.plugin-enable-panel-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.plugin-enable-panel-head strong {
  font-size: 13px;
  line-height: 1.3;
}

.plugin-enable-panel-head small,
.plugin-enable-panel-head > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.plugin-enable-panel-head > span {
  flex: none;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.plugin-enable-list {
  max-height: 272px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
}

.plugin-enable-list .plugin-enable-row {
  min-height: 56px;
  margin: 0;
  padding: 11px 24px;
  align-items: center;
  gap: 12px;
}

.plugin-enable-row + .plugin-enable-row {
  border-top: 1px solid var(--border-soft);
}

.plugin-enable-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.plugin-enable-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.plugin-enable-copy strong {
  font-size: 12.5px;
  line-height: 1.35;
}

.plugin-enable-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.plugin-enable-row .switch {
  margin-top: 0;
}

.plugin-enable-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-enable-empty {
  padding: 13px 24px;
  color: var(--muted);
  font-size: 12px;
}

.plugin-action-area {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 62%, transparent);
}

.plugin-action-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.plugin-action-title span {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}

.plugin-action-title small {
  color: var(--muted);
  font-size: 11px;
}

.plugin-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.plugin-action-group {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.plugin-action-group + .plugin-action-group {
  padding-left: 18px;
  border-left: 1px solid var(--border-soft);
}

.plugin-action-head {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-action-head > span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plugin-action-head strong {
  font-size: 13px;
  line-height: 1.25;
}

.plugin-action-meta,
.plugin-action-links {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.plugin-action-meta > span {
  font-family: var(--mono);
}

.plugin-card-body {
  padding: 18px;
}

.plugin-tabs {
  display: grid;
  gap: 14px;
}

.plugin-tab-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  overflow-x: auto;
}

.plugin-tab-button {
  min-width: 0;
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.plugin-tab-button:hover {
  background: var(--surface);
  color: var(--fg);
}

.plugin-tab-button.is-active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.plugin-tab-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plugin-tab-button strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.plugin-tab-button span {
  display: block;
  margin-top: 6px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}

.plugin-tab-button small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.plugin-tab-panels {
  min-width: 0;
}

.plugin-tab-panel {
  display: none;
}

.plugin-tab-panel.is-active {
  display: block;
}

.plugin-tab-panel-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.plugin-tab-panel-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.plugin-tab-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.plugin-card-controls {
  display: flex;
  justify-content: flex-end;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 32%, transparent);
}

.plugin-card-controls .toggle-row {
  width: min(300px, 100%);
  padding: 3px 0;
}

.plugin-pin-toggle {
  color: var(--muted);
}

.plugin-chip,
.plugin-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.plugin-chip {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-soft);
}

.plugin-info-table {
  border-top: 1px solid var(--border-soft);
}

.plugin-info-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-info-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-info-row > div,
.plugin-service-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.plugin-info-stack {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.plugin-info-stack > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-info-stack > div > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.plugin-inline-code {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
}

.plugin-empty-state {
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
}

.plugin-service-url {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}

.plugin-service-actions {
  align-self: start;
  justify-content: flex-start;
  min-width: 0;
}

.plugin-service-actions .btn-link {
  padding: 6px 12px;
}

.plugin-status-ok { background: var(--success-soft); color: var(--success); }
.plugin-status-idle { background: var(--surface); color: var(--muted); }
.plugin-status-bad { background: var(--danger-soft); color: var(--danger); }
.plugin-status-muted { background: var(--surface); color: var(--muted); }

.plugin-muted {
  color: var(--muted);
  font-size: 12px;
}

.plugin-warning {
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
}

.plugin-link {
  color: var(--accent);
  text-decoration: none;
}

.plugin-link:hover {
  text-decoration: underline;
}

.plugin-dashboard-shell {
  display: grid;
  gap: 16px;
}

.plugin-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.plugin-dashboard-back {
  width: fit-content;
}

.plugin-dashboard-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.plugin-dashboard-kicker {
  margin: 0 0 6px !important;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.plugin-dashboard-heading code {
  font-family: var(--mono);
  color: var(--fg);
}

.plugin-dashboard-heading p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plugin-dashboard-content {
  min-width: 0;
}

.plugin-feedback-dialog {
  width: min(440px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

.plugin-feedback-dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.plugin-feedback-dialog article {
  display: grid;
  gap: 0;
  margin: 0;
  background: var(--surface);
}

.plugin-feedback-dialog header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 12px;
}

.plugin-feedback-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 16px;
  font-weight: 800;
}

.plugin-feedback-dialog header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.plugin-feedback-dialog header p,
.plugin-feedback-dialog header h2,
.plugin-feedback-message {
  margin: 0;
}

.plugin-feedback-dialog header p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.plugin-feedback-dialog header h2 {
  font-size: 17px;
  line-height: 1.35;
}

.plugin-feedback-message {
  padding: 0 18px 18px 60px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.plugin-feedback-dialog footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

@media (max-width: 1180px) {
  .plugin-action-grid {
    grid-template-columns: 1fr;
  }

  .plugin-action-group + .plugin-action-group {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .plugin-tab-list {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media (max-width: 900px) {
  .plugin-summary-grid,
  .plugin-tab-list {
    grid-template-columns: 1fr;
  }

  .plugin-card-head,
  .plugin-action-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .plugin-card-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .plugin-card-summary {
    display: grid;
  }

  .plugin-scope-summary {
    justify-self: start;
  }

  .plugin-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .plugin-enable-panel-head {
    display: grid;
    gap: 5px;
  }

  .plugin-enable-panel-head > span {
    padding-top: 0;
  }

  .plugin-info-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .plugin-feedback-message {
    padding-left: 18px;
  }

}

.form-row {
  display: block;
  margin: 12px 0;
}

.form-row span,
.bd-body .bd-row :where(label, .bd-field) > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.form-row input[type=text],
.bd-body .bd-row input[type=text] {
  width: 100%;
}

fieldset {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

fieldset legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hint-ok,
.hint-warn {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  margin: 10px 0;
  font-size: 13px;
}

.hint-ok {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success);
}

.hint-warn {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  color: var(--warning);
}

.hint-warn-inline { color: var(--warning); }

.bulk-bar {
  --bulk-bar-bg: color-mix(in srgb, var(--warning) 10%, var(--bg));
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bulk-bar-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bulk-bar[hidden] { display: none; }
/* Mobile table rules are author-level and can override the UA hidden style;
   keep hidden tables invisible across view toggles such as sessions board/table. */
table[hidden] { display: none !important; }
.bulk-bar #bulk-count { font-weight: 800; margin-right: 4px; }

/* ── Session monitor room ───────────────────────────────────────────────── */
.monitor-room-page {
  min-height: calc(100vh - 120px);
  align-content: start;
}

.monitor-room-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.monitor-room-heading-main {
  min-width: 0;
}

.monitor-room-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.monitor-room-title-row h1 {
  flex: none;
}

.monitor-room-back {
  flex: none;
}

.monitor-room-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.monitor-room-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.monitor-room-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}

.monitor-room-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-room-summary:empty {
  display: none;
}

.monitor-room-grid {
  display: grid;
  gap: 14px;
  align-items: start;
  justify-content: center;
}

.monitor-room-grid[data-count="0"] {
  display: block;
}

.monitor-room-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.monitor-room-card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.monitor-room-card-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.monitor-room-card-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.monitor-room-card-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.monitor-room-card-meta small {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.monitor-room-card-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.monitor-room-card-actions .card-act,
.monitor-room-popover-head .card-act {
  border-radius: var(--radius-full);
}

.monitor-room-frame-wrap {
  position: relative;
  flex: none;
  min-height: 0;
  aspect-ratio: var(--monitor-room-viewport-ratio, 16 / 10);
  overflow: hidden;
  background: #000;
}

.monitor-room-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #000;
  transform-origin: 0 0;
}

.monitor-room-placeholder,
.monitor-room-empty {
  flex: 1;
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 26px;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-raised) 82%, #000);
}

.monitor-room-placeholder b,
.monitor-room-empty h2 {
  margin: 0;
  color: var(--fg);
  font-size: 16px;
}

.monitor-room-placeholder span,
.monitor-room-empty p {
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}

.monitor-room-card-empty .monitor-room-frame-wrap {
  background: var(--surface-muted);
}

.monitor-room-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.monitor-room-popover {
  width: min(1480px, 94vw);
  height: min(980px, 88vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.26);
  outline: none;
}

.monitor-room-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 10px 9px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.monitor-room-popover-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #000;
}

@media (max-width: 760px) {
  .monitor-room-card {
    min-height: 0;
  }
  .monitor-room-frame-wrap {
    min-height: 0;
  }
  .monitor-room-popover-backdrop {
    padding: 10px;
  }
  .monitor-room-popover {
    width: 100%;
    height: 92vh;
  }
}
.idle-cleanup-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0 0 0 auto;
}
.idle-cleanup-bar.is-open {
  z-index: 1301;
}
.idle-cleanup-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}
.idle-cleanup-bar.is-empty .idle-cleanup-dot {
  background: var(--muted);
  box-shadow: none;
}
.idle-cleanup-count,
.idle-cleanup-status,
.idle-cleanup-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.idle-cleanup-count {
  gap: 7px;
  min-height: var(--button-compact-height);
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.idle-cleanup-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.idle-cleanup-run {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-weight: 800;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.idle-cleanup-run .idle-cleanup-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.idle-cleanup-run:hover:not(:disabled) {
  transform: translateY(-1px);
}
.idle-cleanup-run:active:not(:disabled) {
  transform: scale(.98);
}
.idle-cleanup-status {
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
  font-size: 11.5px;
  font-weight: 800;
}
.idle-cleanup-status:empty {
  display: none;
}
.idle-cleanup-pop {
  --idle-cleanup-segment-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --idle-cleanup-segment-active-fg: var(--accent);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1302;
  display: grid;
  gap: 10px;
  width: min(292px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  transform: none;
}
.idle-cleanup-pop-head,
.idle-cleanup-pop-field,
.idle-cleanup-pop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.idle-cleanup-pop-head {
  justify-content: space-between;
}
.idle-cleanup-pop-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}
.idle-cleanup-pop-field {
  justify-content: space-between;
}
.idle-cleanup-threshold-options {
  display: grid;
  box-sizing: border-box;
  align-items: center;
  gap: 2px;
  grid-template-columns: repeat(3, 54px);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}
.idle-cleanup-threshold-options button {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}
.idle-cleanup-threshold-options button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.idle-cleanup-threshold-options button.active,
.idle-cleanup-threshold-options button[aria-pressed="true"] {
  background: var(--idle-cleanup-segment-active-bg);
  color: var(--idle-cleanup-segment-active-fg);
}
.idle-cleanup-threshold-options button.active:hover:not(:disabled),
.idle-cleanup-threshold-options button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--idle-cleanup-segment-active-bg);
  color: var(--idle-cleanup-segment-active-fg);
}
.idle-cleanup-pop-actions {
  justify-content: flex-end;
}
.idle-cleanup-pop-actions button {
  min-height: var(--button-height);
  min-width: 72px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.idle-cleanup-pop-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.idle-cleanup-pop-actions .idle-cleanup-confirm {
  border-color: color-mix(in srgb, var(--danger) 68%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}
.idle-cleanup-pop-actions .idle-cleanup-confirm:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
:root[data-theme="dark"] .idle-cleanup-count {
  background: var(--surface);
}
:root[data-theme="dark"] .idle-cleanup-status {
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
@media (max-width: 720px) {
  .idle-cleanup-bar {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
  }
  .idle-cleanup-run {
    flex: 1 1 118px;
  }
  .idle-cleanup-pop {
    left: 0;
    right: auto;
    transform: none;
  }
}
input.row-select,
#select-all { cursor: pointer; }

.onboarding-dialog {
  width: min(520px, calc(100vw - 32px));
}

.onboarding-card {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.onboarding-header {
  text-align: center;
}

.onboarding-status {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.onboarding-status.status-completed { color: var(--success); }
.onboarding-status.status-failed { color: var(--danger); }

.qr-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.qr-image {
  width: min(260px, 74vw);
  height: auto;
  border: 10px solid var(--qr-surface);
  border-radius: var(--radius-lg);
  background: var(--qr-surface);
}

.onboarding-link {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: none;
}

.onboarding-link:hover {
  text-decoration: underline;
}

.onboarding-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.onboarding-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.onboarding-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.onboarding-fieldset select,
.onboarding-fieldset input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
}

.onboarding-fieldset select {
  padding-right: 36px;
  background-position: right 14px center;
}

.onboarding-fieldset :where(select, input):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}

.onboarding-fieldset :where(select, input):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.onboarding-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}

.onboarding-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.onboarding-steps a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
}

.onboarding-steps a:hover {
  text-decoration: underline;
}

/* ─── 添加机器人 modal ─────────────────────────────────────────────────── */
dialog.onboarding-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
  color: var(--fg);
}

dialog.onboarding-dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.onboarding-card {
  --ob-gap: 12px;
  display: grid;
  gap: var(--ob-gap);
  max-height: calc(100vh - 32px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.onboarding-header {
  display: grid;
  gap: 6px;
  text-align: center;
}

.onboarding-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.onboarding-header h3::before {
  display: none;
}

.onboarding-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.onboarding-form {
  display: grid;
  gap: var(--ob-gap);
  margin: 0;
}

.onboarding-field {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.onboarding-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.onboarding-field input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

.onboarding-field input[type="text"]:hover:not(:disabled),
.onboarding-field input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.onboarding-menu {
  width: 100%;
  min-width: 0;
}

.onboarding-menu > summary {
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
}

.onboarding-menu .sect-sort-value {
  max-width: 100%;
}

.onboarding-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  transform: none;
  z-index: 1300;
}

.onboarding-menu[open] {
  position: relative;
  z-index: 1300;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--button-height);
  margin: 0;
  padding: 0;
}

.onboarding-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.onboarding-actions .onboarding-submit {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.onboarding-actions .onboarding-submit:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.onboarding-status {
  min-height: var(--button-height);
  margin: 0;
  padding: 0 var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.onboarding-meta {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.onboarding-fieldset {
  display: contents;
}

.oncall-row {
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

.oncall-row:first-of-type { border-top: none; }

.oncall-row-body {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding-left: 24px;
  flex-wrap: wrap;
}

.oncall-row-body input[type=text] {
  flex: 1;
  min-width: 220px;
  font-family: var(--mono);
  font-size: 12px;
}

.oncall-row-body input[type=text]:disabled,
.bd-body .bd-row input[type=text]:disabled {
  background: var(--surface-muted);
  color: var(--faint);
}

.oncall-status {
  font-size: 12px;
  color: var(--muted);
}

#g-drawer .oncall-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#g-drawer .oncall-row:first-of-type {
  border-top: 1px solid var(--border-soft);
}

#g-drawer .oncall-row-body {
  margin-top: 0;
  padding-left: 0;
}

#g-drawer .oncall-row-body input[type=text] {
  height: var(--button-height);
  min-height: var(--button-height);
  border-color: var(--border-soft);
  border-radius: var(--radius-full);
}

#g-drawer .g-manage-dialog {
  gap: 10px;
}

#g-drawer .g-manage-dialog > header {
  margin-bottom: 0;
}

#g-drawer .g-manage-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin: -2px 0 2px;
  overflow: hidden;
}

#g-drawer .g-manage-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 50%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

#g-drawer .g-manage-meta b {
  flex: none;
  color: var(--muted);
  font-weight: 700;
}

#g-drawer .g-manage-meta code {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#g-drawer .g-leave-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#g-drawer .g-leave-picker .checkbox-row {
  flex: 0 1 auto;
}

#g-drawer .g-manage-danger-hint {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  box-sizing: border-box;
  width: fit-content;
  max-width: min(460px, 100%);
  min-height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 720px) {
  #g-drawer .g-manage-meta {
    flex-wrap: wrap;
  }

  #g-drawer .g-manage-meta > span {
    max-width: 100%;
  }
}

.bd-card {
  max-width: 860px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.bd-card header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.bd-card header strong { font-size: 16px; }
.bd-card header small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.bd-body .bd-row { margin: 12px 0 8px; }
.bd-body .bd-row :where(label, .bd-field) { display: block; }
.bd-body .bd-row input[type=text] { font-family: var(--mono); font-size: 12px; }
.bd-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin: 8px 0; }
.oncall-status.hint-ok { background: transparent; border: none; padding: 0; margin: 0; color: var(--success); }

/* Each bd-card groups several independent defaults (oncall, signature, …);
   bd-section gives every group its own labelled, divided block. */
.bd-section { padding-top: 14px; }
.bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
.bd-section-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-section-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* Read-isolation capability line under the file-sandbox toggle: green when this
   bot's sandbox also read-isolates (claude/codex on macOS/Linux), muted grey when
   it's write-protection only. Theme-safe via color-mix on the semantic tokens. */
.bd-section-note[data-read-iso-capability] { margin-top: 8px; padding: 7px 10px; border-radius: 9px; line-height: 1.55; }
.bd-section-note[data-read-iso-capability="yes"] {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
}
.bd-section-note[data-read-iso-capability="no"] {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  border: 1px solid var(--border-soft);
}

/* ── Version & update card ── */
.update-version { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.update-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.update-badge-new { color: var(--accent-strong); background: var(--accent-soft); }
.update-badge-ok { color: var(--success); background: var(--success-soft); }
.update-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.update-install-list { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.update-install-list code { font-size: 11px; }
.update-install-list small { color: var(--muted); }
.cli-runtime-updates { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cli-runtime-updates > strong { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.cli-runtime-updates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cli-runtime-updates li { min-width: 0; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-muted); }
.cli-runtime-updates li.is-behind { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); }
.cli-runtime-update-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.cli-runtime-updates li > code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.cli-runtime-updates li > small { display: block; margin-top: 5px; color: var(--muted); }
.cli-runtime-updates .settings-help { margin: 8px 0 0; }
.update-changelog { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.update-release { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 8px 12px; background: var(--surface-muted); }
.update-release > summary { cursor: pointer; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.update-release > summary small { color: var(--muted); font-size: 11px; }
.update-release-body { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; color: var(--fg); }

/* A lighter sub-group inside a bd-section (e.g. 主动开工 lives under 新群 Oncall).
   Separated by a soft top rule + indent so it reads as "part of this block". */
.bd-subsection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
}
.bd-subsection-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
}
/* 入群首轮 prompt textarea — themed to match the text inputs (dark surface,
   bordered) rather than the unstyled browser default. */
.bd-subsection textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    margin-top: 12px;
    padding-bottom: 2px;
  }
  .sidebar-nav a {
    flex: 0 0 auto;
  }
  .sidebar-nav a.sidebar-plugin-item {
    margin-left: 0;
  }
  .sidebar-foot {
    display: none;
  }
  .topbar {
    position: static;
    align-items: flex-start;
  }
  .metric-grid,
  .overview-grid {
    grid-template-columns: 1fr;
  }
  main {
    width: 100%;
    margin-right: 0;
    padding: 16px;
    overflow-x: hidden;
  }
}

@media (max-width: 860px) {
  .filter-check-group {
    grid-template-columns: auto repeat(4, max-content);
  }
}

@media (max-width: 720px) {
  .topbar {
    flex-direction: column;
    padding: 14px 16px;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .theme-switch {
    max-width: 100%;
    overflow-x: auto;
  }
  .page-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .page-heading-actions {
    justify-content: flex-start;
  }
  .filters {
    align-items: stretch;
  }
  .sessions-filters {
    grid-template-columns: 1fr;
  }
  .filters input[type=search],
  .filters select,
  .filters button,
  .filter-check-group {
    width: 100%;
  }
  .sessions-filters select {
    width: 100%;
  }
  .sessions-view-toggle {
    display: flex;
    width: 100%;
    max-width: calc(100vw - 32px);
    min-width: 0;
  }
  .sessions-view-toggle button {
    flex: 1 1 0;
    min-width: 0;
  }
  .sessions-board {
    grid-template-columns: 1fr;
  }
  /* 窄屏看板：列改纵向堆叠，高度交还内容 */
  .sessions-kanban {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .kanban-column {
    flex: none;
    height: auto;
    min-height: 280px;
    max-height: none;
  }
  .kanban-col-list {
    overflow-y: auto;
  }
  .term-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 24px);
  }
  .term-modal-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .term-modal-title,
  .term-modal-actions {
    width: 100%;
  }
  .term-modal-actions {
    justify-content: flex-end;
  }
  .term-modal-subtitle {
    flex-wrap: wrap;
  }
  .term-modal-subtitle span {
    max-width: min(220px, 72vw);
  }
  .term-modal-body {
    padding: 8px;
  }
  .filter-check-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-check-label {
    grid-column: 1 / -1;
  }

  .filter-check {
    justify-content: flex-start;
  }
  table {
    display: block;
    overflow-x: auto;
  }
  #sessions-table:not([hidden]) {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #sessions-table thead {
    display: none;
  }
  #sessions-table tbody {
    display: grid;
    gap: 10px;
    min-width: 0;
  }
  #sessions-table tr {
    display: grid;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  #sessions-table td {
    display: grid;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    white-space: normal;
  }
  #sessions-table tbody tr:last-child td {
    border-bottom: 1px solid var(--border-soft);
  }
  #sessions-table td:last-child {
    border-bottom: 0;
  }
  #sessions-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }
  #sessions-table td.empty {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 24px 12px;
    border-bottom: 0;
  }
  #sessions-table td.empty::before {
    content: none;
  }
  #sessions-table .token-cell {
    text-align: left;
  }
  #sessions-table .sessions-table-text-cell,
  #sessions-table .sessions-table-path-cell {
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    word-break: break-word;
  }
  #sessions-table .sessions-table-action-cell button {
    justify-self: start;
  }
  .schedules-table {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .schedules-table thead {
    display: none;
  }
  .schedules-table tbody {
    display: grid;
    gap: 10px;
  }
  .schedules-table tr {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .schedules-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.36fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .schedules-table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .schedules-table td.actions-cell {
    grid-template-columns: 1fr;
  }
  .schedules-table .schedule-actions {
    gap: 8px;
  }
  .schedules-table .schedule-actions button {
    flex: 1 1 120px;
  }
  .schedules-table tr.schedule-empty-row {
    padding: 0;
  }
  .schedules-table tr.schedule-empty-row td {
    display: block;
    padding: 18px;
    text-align: center;
  }
}

/* ─── Roles Page ─── */
.roles-heading {
  align-items: flex-start;
  gap: 16px;
}
.roles-tabs {
  flex: 0 0 auto;
}
.roles-page .roles-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 160px);
  min-height: 400px;
}
.roles-page .roles-layout[hidden] { display: none !important; }

/* ─── Tree Panel (left) ─── */
.roles-tree-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roles-tree-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.roles-tree-header input { flex: 1; }
.roles-profile-create {
  align-items: stretch;
}
.roles-profile-create input {
  min-width: 0;
}
.roles-tree {
  flex: 1;
  overflow-y: auto;
}

/* ─── Group rows ─── */
.roles-group-section {
  border-bottom: 1px solid var(--border-soft);
}
.roles-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.roles-group-row:hover { background: var(--bg-soft); }
.roles-group-row.selected { background: var(--accent-soft); }
.roles-group-arrow {
  font-size: 11px;
  color: var(--muted);
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.roles-group-icon {
  font-size: var(--section-title-font-size);
  flex-shrink: 0;
}
.roles-group-info {
  flex: 1;
  min-width: 0;
}
.roles-group-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-group-meta {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 1px;
}
.roles-group-chevron { display: none; }

/* ─── Bot rows (nested) ─── */
.roles-bot-list {
  /* visible when parent is expanded */
}
.roles-bot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 20px;
  cursor: pointer;
  border-top: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.roles-bot-row:hover { background: var(--bg-soft); }
.roles-bot-row.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}
.roles-bot-indent { width: 14px; flex-shrink: 0; }
.roles-bot-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}
.roles-bot-info {
  flex: 1;
  min-width: 0;
}
.roles-bot-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-bot-id {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Badges ─── */
.roles-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}
.roles-badge.has-role {
  background: var(--success-soft);
  color: var(--success);
}
.roles-badge.no-role {
  background: var(--bg-soft);
  color: var(--faint);
}
.roles-profile-match {
  display: inline-flex;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.roles-profile-match.full {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}
.roles-profile-match.partial {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
}
.roles-profile-match.muted {
  font-weight: 600;
  color: var(--muted);
}
.roles-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s;
}
.roles-profile-row:hover { background: var(--bg-soft); }
.roles-profile-row.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.roles-profile-row-main {
  min-width: 0;
  flex: 1;
}
.roles-profile-name {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Editor Panel (right) ─── */
.roles-editor-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roles-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px;
  text-align: center;
}
.roles-editor-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 14px;
  overflow-y: auto;
}

/* ─── Editor breadcrumb ─── */
.roles-editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--section-title-font-size);
  font-weight: 600;
}
.roles-breadcrumb-sep {
  color: var(--faint);
  font-weight: 400;
}
#roles-editor-group-name { color: var(--fg); }
#roles-editor-bot-name { color: var(--accent-strong); }
.roles-editor-meta-line {
  font-size: 11px;
  color: var(--faint);
  font-family: var(--mono);
}
.roles-editor-inject {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 -2px;
}
.roles-editor-inject > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
/* Inherit the global themed <select> look (surface bg, border, chevron); only
   nudge it more compact for this inline control. */
.roles-editor-inject > select {
  min-height: 28px;
  padding: 3px 26px 3px 9px;
  font-size: 12px;
}
.roles-editor-inject-hint {
  font-size: 11px;
  color: var(--faint);
  flex: 1 1 240px;
  min-width: 160px;
}
.roles-profile-detail {
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}
.roles-profile-title {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.roles-profile-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
.roles-profile-bots,
.roles-profile-editor,
.roles-profile-apply {
  min-width: 0;
}
.roles-profile-bots {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.roles-profile-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.roles-profile-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.roles-profile-bot-list {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: auto;
}
.roles-profile-bot-row {
  padding-left: 12px;
}
.roles-profile-bot-row.selected {
  padding-left: 9px;
}
.roles-profile-inline-empty {
  flex: 1 1 auto;
  min-height: 220px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ─── Editor textarea ─── */
#roles-editor-textarea,
#roles-profile-textarea {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 220px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.55;
  background: var(--surface-muted);
  color: var(--fg);
  tab-size: 2;
}
#roles-profile-textarea {
  flex: 1 1 260px;
  min-height: 180px;
  max-height: min(44vh, 420px);
}
#roles-editor-textarea:focus,
#roles-profile-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ─── Editor footer ─── */
.roles-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roles-bytecount {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.roles-bytecount.warn { color: var(--warning); }
.roles-bytecount.over { color: var(--danger); font-weight: 700; }
.roles-editor-actions { display: flex; gap: 8px; }
.roles-profile-editor .roles-editor-actions,
.roles-profile-apply .roles-editor-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.roles-profile-apply {
  flex: 0 0 auto;
  max-height: 34%;
  overflow: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.roles-profile-apply-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.roles-profile-apply-controls select {
  min-width: 0;
}
.roles-profile-force {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.roles-profile-apply-bot {
  margin-bottom: 6px;
}
.roles-profile-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  min-height: 18px;
}

/* ─── Saved flash ─── */
.roles-saved-flash {
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
  animation: roles-fade-out 2s ease forwards;
}
.roles-save-error {
  color: var(--danger);
  animation-duration: 3s;
}
@keyframes roles-fade-out {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Preview panel ─── */
.roles-preview {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px;
  font-size: 13px;
  max-height: 140px;
  overflow-y: auto;
}
.roles-profile-editor .roles-preview {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
}
.roles-preview pre {
  margin: 8px 0 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

.roles-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .roles-page .roles-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .roles-heading {
    flex-direction: column;
  }
  .roles-tabs {
    width: 100%;
  }
  .roles-tabs button {
    flex: 1;
  }
  .roles-profile-grid {
    grid-template-columns: 1fr;
  }
  .roles-profile-apply-controls {
    grid-template-columns: 1fr;
  }
}

.v3-terminal-frame { display: block; width: 100%; height: 460px; border: 0; border-top: 1px solid var(--border); background: #0d1117; }
/* v3 per-node terminal panel (live iframe / replay) */
.v3-terminal-panel { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #0d1117; }
.v3-terminal-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 12px; }
.v3-terminal-head .muted { margin-left: 0; }
.v3-terminal-head .btn-link { margin-left: auto; }
.v3-terminal-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.v3-terminal-dot.live { background: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.25); }
.v3-terminal-dot.replay { background: #f9ab00; }
.v3-terminal-dot.closed { background: #188038; }
.v3-terminal-empty { padding: 1.5rem 0.75rem; text-align: center; border: 1px dashed var(--border); border-radius: 6px; }

@media (max-width: 720px) {
  .v3-terminal-frame { height: 360px; }
}
/* ════════════════════════════════════════════════════════════════════════════
   数字员工工作台 — 统一视觉层（未来 / 科技 / 数字人）
   设计语言：深色实底、清晰边界、克制面板与标签。
   每个 bot 一颗专属色相的"数字生命球"。强视觉只在品牌区（团队卡），
   工作面（board / 表格 / 表单页）保持密度与可扫描性。
   状态光语义：青=执行中 · 绿=就绪 · 琥珀=需要你 · 红=异常 · 蓝=启动中
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --info: #3f8cff;
  --info-soft: rgba(63, 140, 255, 0.12);
  --brand-accent: #646cea;
  --brand-accent-strong: #4d54d9;
  --brand-accent-bright: #8b91ff;
  --brand-accent-cyan: #62e6ff;
  --brand-accent-pink: #f080f0;
  --accent: #565ee4;
  --accent-strong: var(--brand-accent-strong);
  --accent-soft: rgba(100, 108, 234, 0.12);
  --radius-xs: 12px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --radius: var(--radius-md);
  --sidebar-width: 190px;
  --topbar-height: 60px;
  --topbar-control-size: 38px;
  --chrome-x: 32px;
}

:root[data-theme="dark"] {
  --bg: #0b1018;
  --bg-soft: #0e141d;
  --surface: #111821;
  --surface-raised: #17202c;
  --surface-muted: #0d141d;
  --fg: #cbd4df;
  --muted: #8793a4;
  --faint: #737f90;
  --border: #293443;
  --border-soft: #202a37;
  --accent: var(--brand-accent-bright);
  --accent-strong: #b5b9ff;
  --accent-soft: rgba(139, 145, 255, 0.17);
  --success: #58ca8d;
  --success-soft: rgba(88, 202, 141, 0.13);
  --warning: #dba84a;
  --warning-soft: rgba(219, 168, 74, 0.13);
  --danger: #d9788a;
  --danger-soft: rgba(217, 120, 138, 0.13);
  --info: #6f9cff;
  --info-soft: rgba(79, 139, 255, 0.14);
  --on-accent: #051018;
  --on-danger: #1c0508;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
}

/* 默认工作台使用纯色底；特殊皮肤自行提供背景氛围。 */
.aurora { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.30; }
.aurora .a1 { width: 520px; height: 420px; left: -20px; top: -200px; background: #1b4dff; opacity: 0.18; }
.aurora .a2 { width: 520px; height: 440px; right: -90px; top: -80px; background: #00c2d8; opacity: 0.17; }
.aurora .a3 { width: 620px; height: 420px; left: 38%; bottom: -280px; background: #6b3df0; opacity: 0.13; }
:root[data-theme="light"] .aurora { display: none; }

.app-shell {
  position: relative;
  z-index: 1;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chrome-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--chrome-x);
  padding: 16px var(--chrome-x) 24px;
  overflow: hidden;
  transition: grid-template-columns 220ms cubic-bezier(.2, .8, .2, 1);
}

.workspace {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* ── 浮动导航 rail：顶栏贯穿全宽，tab 独立成左侧纵向模块 ───────────────── */
.sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  height: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 18px 46px rgba(10, 20, 38, 0.08);
  overflow: hidden;
  transition:
    padding 180ms ease,
    border-radius 180ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
:root[data-theme="dark"] .sidebar {
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  backdrop-filter: none;
  border-color: var(--border);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
}

.sidebar-create-actions {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
button.sidebar-create-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: none;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
@media (min-width: 981px) {
  button.sidebar-create-btn {
    padding-right: 12px;
    padding-left: 16px;
  }
}
button.sidebar-create-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.sidebar-create-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
button.sidebar-create-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ≤980px 侧边栏折叠为顶部横向 rail 后，只保留页面导航。
   创建会话 / 创建机器人已分别位于对应页面标题区，避免移动端出现两层横向操作轨道。 */
@media (max-width: 980px) {
  .sidebar-create-actions {
    display: none;
  }
}

.sidebar-nav {
  gap: 2px;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 36px;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  outline: none;
  isolation: isolate;
  transition:
    background-color 180ms ease,
    color 160ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
@media (min-width: 981px) {
  .sidebar-nav a {
    padding-right: 12px;
    padding-left: 16px;
  }
}
.sidebar-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-muted);
  opacity: 0;
  transform: scaleX(0.96);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}
.sidebar-nav a .sidebar-nav-label {
  position: relative;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 160ms ease;
}
.sidebar-nav a svg {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    color 160ms ease,
    transform 180ms ease,
    stroke-width 180ms ease;
}
.sidebar-nav a:hover {
  color: var(--fg);
}
.sidebar-nav a:hover::before {
  opacity: 1;
  transform: scaleX(1);
}
.sidebar-nav a.active {
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong);
}
.sidebar-nav a.active::before {
  background: var(--accent-soft);
  opacity: 1;
  transform: scaleX(1);
}
.sidebar-nav a.active svg {
  transform: translateX(1px);
}
.sidebar-nav a:focus,
.sidebar-nav a:focus-visible {
  outline: none;
  box-shadow: none;
}
.sidebar-nav a .nav-update-tip {
  align-self: center;
  margin-left: -9px;
  transform: translateY(-7px);
}
.sidebar-nav a .nav-update-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}

.sidebar-nav a.sidebar-plugin-item {
  margin-left: 12px;
  color: var(--faint);
}

.sidebar-nav a.sidebar-plugin-item svg {
  width: 14px;
  height: 14px;
}

/* ── 顶栏：横向贯穿，左侧品牌固定，右侧操作保持原入口 ───────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) max-content;
  align-items: center;
  column-gap: 16px;
  min-height: var(--topbar-height);
  padding: 0 var(--chrome-x);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 0;
  justify-content: space-between;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}
.topbar::after {
  content: "";
  position: absolute;
  left: var(--chrome-x);
  right: var(--chrome-x);
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--border) 58%, transparent) 16%,
    color-mix(in srgb, var(--border) 92%, transparent) 50%,
    color-mix(in srgb, var(--border) 58%, transparent) 84%,
    transparent 100%
  );
}
.topbar-left {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
}
.topbar .brand {
  display: flex;
  min-width: 0;
  padding: 0;
  gap: 9px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.topbar .brand > span:not(.brand-mark) {
  min-width: 0;
}
.topbar .brand strong,
.topbar .brand-product {
  white-space: nowrap;
}
.topbar .brand-wordmark {
  color: var(--fg);
  background-image:
    linear-gradient(102deg, transparent 44%, color-mix(in srgb, var(--brand-accent-bright) 78%, #fff) 50%, transparent 56%),
    linear-gradient(135deg, var(--brand-accent-cyan) 0%, var(--brand-accent) 52%, var(--brand-accent-pink) 100%);
  font-family: "Geist Mono", var(--mono);
  font-size: 16px;
  font-style: italic;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: 0;
  -webkit-text-fill-color: transparent;
}
.topbar .brand-product {
  color: color-mix(in srgb, var(--muted) 86%, var(--fg));
  background-image:
    linear-gradient(102deg, transparent 44%, color-mix(in srgb, var(--brand-accent-bright) 72%, #fff) 50%, transparent 56%),
    linear-gradient(90deg, color-mix(in srgb, var(--muted) 86%, var(--fg)), color-mix(in srgb, var(--muted) 86%, var(--fg)));
  font-family: "Geist Mono", var(--mono);
  font-size: 16px;
  font-style: italic;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: 0;
}
.topbar .brand-wordmark,
.topbar .brand-product {
  background-repeat: no-repeat;
  background-size: 250% 100%, 100% 100%;
  background-position: 145% 50%, 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: topbar-brand-sheen 8s linear infinite;
}
@keyframes topbar-brand-sheen {
  from { background-position: 145% 50%, 0 50%; }
  to { background-position: -45% 50%, 0 50%; }
}
.topbar .brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--surface);
}
.topbar .brand-logo-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  transform: translateY(-1px);
}
.topbar-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
  justify-self: end;
}
.topbar-status-menu {
  position: relative;
  flex: none;
}
body.theme-menu-open .topbar-status-menu {
  pointer-events: none;
}
body.theme-menu-open .topbar-status-menu .connection-status::after {
  transform: translateY(-62%) rotate(45deg);
}
body.theme-menu-open .topbar-status-pop {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
}
.topbar-status-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 69;
  width: calc(100% + 18px);
  height: 8px;
  transform: translateX(-50%);
}
.topbar-status-menu .connection-status {
  padding-right: 28px;
}
.topbar-status-menu .connection-status::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0.65;
  transition: transform 140ms ease;
}
body:not(.theme-menu-open) .topbar-status-menu.topbar-status-auto-open .connection-status::after,
body:not(.theme-menu-open) .topbar-status-menu.is-open .connection-status::after {
  transform: translateY(-35%) rotate(225deg);
}
.topbar-status-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 70;
  width: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}
body:not(.theme-menu-open) .topbar-status-menu.topbar-status-auto-open .topbar-status-pop,
body:not(.theme-menu-open) .topbar-status-menu.is-open .topbar-status-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  animation: dashboard-popover-enter 0.35s ease both;
}
@media (hover: hover) {
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):hover .connection-status::after,
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):has(.topbar-status-pop:hover) .connection-status::after {
    transform: translateY(-35%) rotate(225deg);
  }

  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):hover .topbar-status-pop,
  body:not(.theme-menu-open) .topbar-status-menu:not(.suppress-hover):has(.topbar-status-pop:hover) .topbar-status-pop {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    animation: dashboard-popover-enter 0.35s ease both;
  }
}
.topbar-attention-notice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  text-decoration: none;
}
.topbar-attention-notice:hover {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.topbar-attention-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--warning);
}
.topbar-attention-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.topbar-attention-copy b,
.topbar-attention-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-attention-copy b {
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.topbar-attention-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.topbar-attention-action {
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.topbar-status-list {
  min-width: 0;
}
.topbar-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.topbar-status-row b {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
}
.topbar-status-row b.status-count-on { color: var(--accent); }
.topbar-status-row-hot {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.topbar-status-row-hot b.status-count-on { color: var(--warning); }
.topbar-status-donut-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  justify-self: end;
}
.topbar-status-donut {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}
.topbar-status-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
.topbar-status-donut-center b {
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.topbar-status-donut-center span {
  max-width: 44px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
}
.topbar-tool-group {
  --topbar-tool-icon-size: 16px;
  --topbar-tool-stroke: 1.75;
  --topbar-theme-icon-stroke: calc(var(--topbar-tool-stroke) * 1.5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-tool-group .theme-menu {
  display: inline-flex;
}
.topbar-locale-toggle,
.topbar-tool-group .theme-menu-btn,
.topbar-tool-group .topbar-docs-link {
  flex: none;
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
  min-height: var(--topbar-control-size);
  display: inline-grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--fg);
  box-shadow: none;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.topbar-tool-group .theme-menu-btn .tm-current,
.topbar-tool-group .theme-menu-btn .tm-chev,
.topbar-tool-group .topbar-docs-link span {
  display: none;
}
.topbar-locale-toggle {
  font-family: "Geist Mono", var(--mono);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}
.topbar-locale-toggle svg,
.topbar-tool-group .theme-menu-btn .tm-svg,
.topbar-tool-group .topbar-docs-link svg {
  display: block;
  width: var(--topbar-tool-icon-size);
  height: var(--topbar-tool-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--topbar-tool-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-tool-group .theme-menu-btn .tm-svg {
  stroke-width: var(--topbar-theme-icon-stroke);
}
.topbar-locale-toggle:hover:not(:disabled),
.topbar-tool-group .theme-menu-btn:hover,
.topbar-tool-group .topbar-docs-link:hover {
  border-color: color-mix(in srgb, var(--muted) 58%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.topbar-owner {
  flex: none;
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: none;
  overflow: hidden;
}
.topbar-owner-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}
.topbar-owner-placeholder svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-owner-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* ── 圆角层级：按钮 / 标签 / 分段控件 ────────────────────────────────────── */
button,
.btn-link {
  border-radius: var(--radius-md);
  padding: 0 var(--button-padding-x);
}
button.primary,
.btn-link.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
button.contrast {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}
button.contrast:hover { background: var(--danger-soft); border-color: var(--danger); }
.segmented { border-radius: var(--radius-md); }
.segmented button { border-radius: var(--radius-sm); }
.segmented button.active {
  background: var(--accent);
  color: var(--on-accent);
}
.badge,
.status {
  border-radius: var(--radius-full);
  text-transform: none;
  font-weight: 700;
}

/* 状态光语义重排：青=执行中 · 蓝=启动 · 绿=就绪 · 琥珀/红=要人管 */
.status-working,
.status-active { background: var(--accent-soft); color: var(--accent); }
.status-analyzing { background: var(--accent-soft); color: var(--accent); }
.status-starting { background: var(--info-soft); color: var(--info); }
.status-idle { background: var(--success-soft); color: var(--success); }
.status-dormant {
  box-sizing: border-box;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}
.status-attention {
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--warning);
}
.status-limited { background: var(--danger-soft); color: var(--danger); }

/* ── 玻璃面板（dark 下生效；light 保持实底）─────────────────────────────── */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .bd-card,
:root[data-theme="dark"] .filters {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
  background-image: none;
}

/* ── 数字生命球（bot avatar，全站统一）──────────────────────────────────── */
.orb-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 32% 28%, #d8fbff, var(--c1, #5be3ff) 38%, var(--c2, #4f8bff) 72%, #060d1c 105%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c1, #5be3ff) 32%, transparent), inset 0 0 9px rgba(255, 255, 255, 0.28);
}
.orb-avatar-sm {
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.28);
}
/* 有真实头像时，把渐变球底色换成中性占位，避免"先亮球后头像"的闪烁；
   渐变球只在头像加载失败（onerror 移除 .orb-has-img）时作为兜底重新露出。 */
.orb-avatar.orb-has-img {
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* 真实头像盖在数字生命球上；onerror 时移除自身，露出下面的渐变球兜底。
   不加淡入动画——innerHTML 每次重绘都会重建 <img>，动画会跟着重放，看起来就是
   头像在"刷新"。图本身有 HTTP 缓存 + URL 走 localStorage，重建即同步出图。 */
.orb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* 飞书群头像：圆角方形，和圆形的 bot 头像一眼区分开。 */
.orb-avatar.orb-square,
.orb-avatar.orb-square .orb-img { border-radius: var(--radius-md); }
.orb-avatar.orb-square.orb-avatar-sm,
.orb-avatar.orb-square.orb-avatar-sm .orb-img { border-radius: var(--radius-sm); }
/* 群列表名称单元格：群头像 + 群名/ID 横向排列。 */
.g-chat-cell { display: flex; align-items: center; gap: 8px; }
.g-chat-meta { min-width: 0; }
.g-profile-status {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.g-profile-status.full {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}
.g-profile-status.partial {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
}
.g-profile-status.muted { font-weight: 600; }
.g-save-profile-dialog {
  display: grid;
  gap: 12px;
}
.g-save-profile-dialog [hidden] {
  display: none !important;
}
#g-drawer .g-save-profile-dialog .form-row {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#g-drawer .g-save-profile-dialog .form-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.g-save-profile-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
.g-save-profile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.g-save-profile-section-head > span {
  color: var(--fg);
  font-weight: 700;
}
.g-save-profile-section-head > small {
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.g-save-profile-stats span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-stats strong {
  color: var(--fg);
}
.g-save-profile-stats .warn {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-entry-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
}
.g-save-profile-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.g-save-profile-entry > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.g-save-profile-entry strong,
.g-save-profile-entry code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-save-profile-entry code {
  color: var(--muted);
  background: transparent;
  padding: 0;
}
.g-save-profile-entry.error {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-soft));
}
.g-save-profile-entry-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.g-save-profile-entry-status.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.g-save-profile-entry-status.error {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-empty {
  color: var(--muted);
  font-size: 13px;
}
.g-save-profile-switch {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  overflow-x: auto;
}
.g-save-profile-switch button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  min-width: 0;
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  white-space: nowrap;
}
.g-save-profile-switch button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.g-save-profile-switch button.active {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
  box-shadow: none;
}
.g-save-profile-switch button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
#g-drawer .g-save-profile-dialog input[name="profileId"] {
  box-sizing: border-box;
  width: min(420px, 100%);
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
#g-drawer .g-save-profile-dialog input[name="profileId"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
#g-drawer .g-save-profile-dialog input[name="profileId"]:focus,
#g-drawer .g-save-profile-dialog input[name="profileId"]:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--fg);
  outline: none;
  box-shadow: none;
}
.g-save-profile-picker {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}
.g-save-profile-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  min-height: 38px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  box-shadow: none;
  text-align: left;
}
.g-save-profile-pick.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.g-save-profile-pick span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-save-profile-pick small,
.g-save-profile-summary,
.g-save-profile-status,
.form-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.g-save-profile-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.g-save-profile-target > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.g-save-profile-target code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-save-profile-target small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}
.g-save-profile-summary {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.g-save-profile-summary.warn,
.g-save-profile-status.error {
  color: var(--danger);
  background: var(--danger-soft);
}
.g-save-profile-status {
  min-height: 0;
}
.g-save-profile-status:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.g-save-profile-status.ok:not(:empty) {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}
.g-save-profile-status.error:not(:empty) {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
}
.orb-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.orb-dot-ok { background: var(--success); }
.orb-dot-busy { background: var(--accent); }
.orb-dot-warn { background: var(--warning); }
.orb-dot-off { background: var(--faint); }

/* ── 工作台首页 ─────────────────────────────────────────────────────────── */
.sect-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; min-height: var(--section-title-row-height); margin-top: 0; }
.sect-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--section-title-text-height);
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}
.sect-head h2::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.hero-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  border-radius: var(--radius-full);
}
.sect-head span { color: var(--faint); font-size: 12px; }
.sect-head .sect-head-hint {
  align-self: flex-end;
  margin-bottom: 4px;
  line-height: 1.35;
}
.sect-head .sect-head-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: var(--section-title-text-height);
  min-height: var(--section-title-text-height);
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sect-head-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sect-head-controls .sect-head-action {
  margin-left: 0;
}
.sect-sort-menu {
  position: relative;
  flex: none;
  width: var(--dropdown-trigger-width);
}
.sect-sort-menu > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: var(--button-height);
  min-width: 0;
  padding: 0 28px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.sect-sort-menu > summary::-webkit-details-marker {
  display: none;
}
.sect-sort-menu > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 0;
  background: currentColor;
  transform: translateY(-50%);
  transform-origin: center;
  opacity: 0.72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.sect-sort-menu[open] > summary,
.sect-sort-menu > summary:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.sect-sort-menu.is-disabled > summary,
.sect-sort-menu.is-disabled > summary:hover {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  color: var(--faint);
  cursor: not-allowed;
  opacity: 0.62;
}
.sect-sort-menu[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.sect-head .sect-sort-menu span {
  color: inherit;
  font-size: inherit;
}
.sect-sort-title {
  color: var(--faint);
}
.sect-sort-value {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sect-sort-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 40;
  display: grid;
  gap: 4px;
  min-width: var(--dropdown-popover-min-width);
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  transform: translateX(-50%);
}
.sect-sort-pop button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}
/* 长列表下拉的过滤框：滚动时钉在弹层顶部（负 margin 盖住弹层 padding）。 */
.sect-sort-pop input.sect-sort-search[type="search"] {
  position: sticky;
  top: -6px;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% + 12px);
  margin: -6px -6px 0;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: var(--surface) !important;
  background-clip: padding-box;
  color: var(--text);
  font-size: 12px;
  outline: none;
  box-shadow: none;
}
.sect-sort-pop input.sect-sort-search[type="search"]:focus {
  border-bottom-color: var(--accent) !important;
}
.sect-sort-pop .sect-sort-empty {
  margin: 0;
  padding: 8px var(--button-padding-x);
  color: var(--muted);
  font-size: 12px;
}
.sect-sort-pop button[aria-current="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.sect-sort-pop button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.sect-sort-pop button[aria-current="true"]:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.overview-active-sort-menu {
  width: 156px;
}
.overview-active-sort-menu .sect-sort-value {
  max-width: 116px;
}
.overview-active-sort-menu > .sect-sort-pop {
  width: 100%;
  min-width: 100%;
}
.sect-head-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 64%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.sect-head-action:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.team-grid {
  --team-card-min-width: 170px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--team-card-min-width), calc((100% - 52px) / 5)), 1fr));
  gap: 13px;
}

.team-section .sect-head {
  column-gap: 10px;
}

.team-section .sect-head-controls {
  align-self: flex-end;
  height: var(--button-height);
  margin-bottom: 1px;
}

.team-section .sect-head-action {
  height: var(--button-height);
  min-height: var(--button-height);
}

/* AI 团队折叠/展开开关：贴着卡片栅格下沿居中，弱化成次级控件 */
.team-toggle {
  justify-self: center;
  margin-top: 6px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  box-shadow: none;
}
.team-toggle[hidden] { display: none !important; }
.team-toggle:hover { color: var(--fg); border-color: var(--accent); }
.mate {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 15px 13px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .mate {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.09);
  background-image: none;
}
.mate-attn {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
}
.mate-off { opacity: 0.55; }
.mate-top { display: flex; align-items: center; gap: 11px; }
.mate-id { min-width: 0; }
.mate-id b { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mate-role {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  padding: 1px 9px;
  border-radius: var(--radius-sm);
}
:root[data-theme="dark"] .mate-role { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); }
.mate-task {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mate-task b { color: var(--fg); font-weight: 600; }
.mate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--faint);
}
.tag {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-run { color: var(--accent); background: var(--accent-soft); }
.tag-ok { color: var(--success); background: var(--success-soft); }
.tag-warn { color: var(--warning); background: var(--warning-soft); }
.tag-off { color: var(--faint); background: var(--surface-muted); }
:root[data-theme="dark"] .tag-off { background: rgba(255, 255, 255, 0.06); }

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
}
.overview-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.overview-block { display: grid; gap: var(--section-title-content-gap); min-width: 0; }
.overview-panel-head {
  align-items: center;
  margin-top: 0;
}

.overview-panel-head .sect-head-count,
.overview-panel-head .sect-head-hint,
.overview-panel-head .sect-head-controls,
.overview-panel-head > .sect-head-action {
  align-self: center;
  margin-bottom: 0;
}
.overview-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.active-sessions-panel,
.schedules-panel {
  display: flex;
  min-height: var(--active-sessions-min-height, 260px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.schedules-panel {
  min-height: var(--schedules-panel-min-height, 260px);
}
.active-sessions-panel > .overview-list,
.schedules-panel > .overview-list {
  flex: 1;
  min-height: 0;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
}

.overview-list-item-schedule .overview-list-main {
  flex: 1 1 140px;
}

.overview-list-item-schedule .overview-list-meta {
  flex: 0 1 min(46%, 170px);
  width: min(46%, 170px);
  min-width: 0;
  max-width: min(46%, 170px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-list-item-schedule .overview-list-meta .ui-overflow-text {
  width: 100%;
}

/* ── 会话看板：工作面收敛（弱玻璃 + 高密度 + 新状态光）───────────────────── */
.sessions-board {
  background-image: none;
  padding: 0;
}
.session-board-column { border-radius: var(--radius-xl); }
:root[data-theme="dark"] .session-board-column {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--bg));
  border-color: var(--border-soft);
}
:root[data-theme="dark"] .session-board-column > header {
  background: transparent;
  border-color: var(--border-soft);
}
.session-board-column h2 {
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
}
.session-board-count { border-radius: var(--radius-full); font-family: inherit; }
.session-board-needs-you { --col-signal: var(--warning); }
.session-board-needs-you { background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
.session-board-starting { --col-signal: var(--info); }
.session-board-working { --col-signal: var(--accent); }
.session-board-idle { --col-signal: var(--success); }
:root[data-theme="dark"] .session-board-needs-you {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-muted));
}
.session-card { border-radius: var(--radius-lg); }
:root[data-theme="dark"] .session-card {
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  border-color: var(--border-soft);
}
.session-card-top {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
}
.session-signal {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  font-family: inherit;
  border-radius: var(--radius-sm);
}

/* 表格 hover 行 */
:root[data-theme="dark"] table { background: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] th { background: rgba(255, 255, 255, 0.04); }

/* ── 会话筛选条：一行轻量胶囊，不再是一面板 checkbox 墙 ─────────────────── */
.sessions-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sessions-filters input[type=search] {
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.sessions-filters .sect-sort-menu {
  width: var(--dropdown-trigger-width);
}
.sessions-filters .sect-sort-menu > summary {
  width: 100%;
  min-width: 0;
}
.sessions-filters .sect-sort-pop {
  min-width: var(--dropdown-trigger-width);
}
:root[data-theme="dark"] .sessions-filters input[type=search] {
  background-color: var(--surface);
  border-color: var(--border-soft);
}
.sessions-filters input[type=search]:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 「仅活跃」toggle chip：checkbox 隐藏，整块控件就是开关 */
.sessions-filters .filter-toggle {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
:root[data-theme="dark"] .sessions-filters .filter-toggle {
  background: var(--surface);
  border-color: var(--border-soft);
}
.sessions-filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sessions-filters .filter-toggle span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--faint);
  vertical-align: 1px;
}
.sessions-filters .filter-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.sessions-filters .filter-toggle:has(input:checked) span::before {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* CLI 下拉 chip + 弹层 */
.filter-cli {
  position: relative;
  width: var(--dropdown-trigger-width);
  flex: none;
}
.filter-cli summary {
  position: relative;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 28px 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.filter-cli summary::-webkit-details-marker { display: none; }
.filter-cli summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-58%) rotate(45deg);
  opacity: 0.72;
}
.filter-cli summary b { font-weight: 700; color: var(--fg); }
.filter-cli summary b.cli-filter-active { color: var(--accent); }
.filter-cli summary:hover,
.filter-cli[open] summary {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.filter-cli[open] summary::after {
  transform: translateY(-34%) rotate(225deg);
}
.filter-cli-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  min-width: var(--dropdown-trigger-width);
  max-width: calc(100vw - 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}
.filter-cli-pop .filter-check {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.filter-cli-pop .filter-check input { position: absolute; opacity: 0; pointer-events: none; }
.filter-cli-pop .filter-check:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}
.filter-cli-pop .filter-check:has(input:checked) {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

@media (max-width: 720px) {
  .sessions-filters input[type=search] { flex: 1 1 100%; }
  .filter-cli-pop { left: auto; right: 0; }
}

/* ── Bot 配置 → 数字员工档案（master-detail）────────────────────────────── */
.bd-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 左：员工名册 */
.bd-roster {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 8px;
  display: grid;
  gap: 3px;
  position: sticky;
  top: 84px;
}
:root[data-theme="dark"] .bd-roster {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.09);
}
.bd-roster-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.bd-roster-item:hover { background: var(--surface-muted); }
:root[data-theme="dark"] .bd-roster-item:hover { background: rgba(255, 255, 255, 0.06); }
.bd-roster-item.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bd-roster-tx { min-width: 0; flex: 1; }
.bd-roster-tx b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-roster-tx span { display: block; color: var(--faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-roster-flag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}

/* 右：档案 */
.bd-profile { max-width: none; padding: 0; background: transparent; border: 0; box-shadow: none; }
:root[data-theme="dark"] .bd-profile { background: transparent; backdrop-filter: none; background-image: none; }
.bd-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .bd-profile-head {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.09);
  background-image: none;
}
.bd-profile-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}
.bd-profile-head .orb-avatar {
  width: 48px;
  height: 48px;
}
/* 档案头头像可点击上传（BotAvatarControl）。 */
.bd-avatar-editable { position: relative; }
.bd-avatar-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.bd-avatar-btn:disabled { cursor: progress; }
.bd-avatar-edit-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: var(--radius-full);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.bd-avatar-editable:hover .bd-avatar-edit-badge,
.bd-avatar-btn:focus-visible .bd-avatar-edit-badge,
.bd-avatar-btn:disabled .bd-avatar-edit-badge { opacity: 1; }
/* 状态气泡挂在头像下方，避免撑坏 58px 头像栏的网格布局。 */
.bd-avatar-status {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  min-width: 240px;
  max-width: 340px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  line-height: 1.5;
}
.bd-avatar-status .bd-feishu-login { margin-left: 6px; }
.bd-profile-main {
  min-width: 0;
  display: grid;
  align-content: center;
}
.bd-profile-id {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.bd-profile-id strong { display: block; font-size: 18px; }
.bd-profile-title-row {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 30px;
  padding-right: 96px;
}
.bd-profile-title-row[hidden] { display: none; }
.bd-profile-title-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.bd-profile-title-content > strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(420px, 100%);
  min-height: 26px;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-profile-id .mate-role {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.bd-profile-id code {
  display: block;
  margin-top: 0;
  padding: 0;
  background: transparent;
  color: var(--faint);
  font-size: 10.5px;
}
/* 机器人改名（档案头 ✎ → 行内编辑器） */
.bd-name-edit {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 86px;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: none;
  opacity: 1;
  transform: translateY(-50%);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bd-name-edit:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.bd-name-editor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-name-editor[hidden] { display: none; }
.bd-name-input {
  box-sizing: border-box;
  width: min(320px, 100%);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}
.bd-name-input:hover:not(:disabled),
.bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}
.bd-name-editor button { font-size: 12px; }
.bd-name-status { display: block; margin-top: 4px; font-size: 11.5px; }
.bd-name-status:empty { display: none; }
/* 「扫码登录飞书」——改名因缺登录态降级时才亮出 */
.bd-feishu-login {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  cursor: pointer;
}
.bd-feishu-login:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bd-feishu-login[hidden] { display: none; }

/* 飞书扫码登录 modal */
.feishu-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}
.feishu-login-modal {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(360px, 92vw);
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  text-align: center;
}
.feishu-login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--faint);
  font-size: 15px;
  cursor: pointer;
}
.feishu-login-close:hover { background: color-mix(in srgb, var(--faint) 18%, transparent); color: inherit; }
.feishu-login-title { margin: 0; font-size: 17px; line-height: 1.25; }
.feishu-login-hint { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.feishu-login-qr { min-height: 40px; display: flex; justify-content: center; }
.feishu-login-actions { margin: 0; }
.bd-profile-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  text-align: left;
  min-width: 0;
}
.bd-profile-meta small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.bd-profile-meta .bd-meta-ok {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
}

/* 配置 tile 两栏 */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.bd-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
.bd-tile {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px 18px 16px;
}
:root[data-theme="dark"] .bd-tile {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.08);
}
.bd-tile .bd-section { padding-top: 14px; }
.bd-tile .bd-section + .bd-section { margin-top: 14px; border-top: 1px solid var(--border-soft); }
.bd-tile .bd-section-title {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-tile .bd-section-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  flex: none;
}
.bd-summary-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skills-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1600px;
}

.skills-page-stack {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1600px;
}

.skills-config-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(560px, 1.45fr);
  gap: 18px;
  align-items: stretch;
}

.skills-config-row > .skills-config-block:nth-child(3) {
  grid-column: 1 / -1;
}

.skills-side-rail {
  position: sticky;
  top: 18px;
  z-index: 10;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.skills-side-rail > .bd-card,
.skills-main-panel > .bd-card,
.skills-config-row > .bd-card,
.skills-config-block > .bd-card,
.skills-bot-card {
  max-width: none;
  margin-bottom: 0;
}

.skills-config-block,
.skills-installed-block {
  display: grid;
  gap: var(--section-title-content-gap);
  min-width: 0;
  width: 100%;
}

.skills-config-block {
  grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
  align-self: stretch;
}

.skills-config-row .sect-head {
  height: var(--section-title-row-height);
  min-height: var(--section-title-row-height);
  flex-wrap: nowrap;
  overflow: visible;
}

.skills-config-row .sect-head h2 .ui-field-title,
.skills-config-row .sect-head h2 .ui-field-title-text {
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.skills-config-row .sect-head h2 .ui-field-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.skills-defaults-panel,
.skills-install-panel {
  padding: 14px;
}

.skills-config-card,
.skills-installed-panel {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.skills-config-card,
.skills-install-panel {
  height: 100%;
}

.skills-install-panel {
  position: relative;
}

.skills-install-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.skills-install-title .bd-section-title {
  margin: 0;
}

.skills-card-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--section-title-row-height);
  margin: 0 0 var(--section-title-content-gap);
}

.skills-card-head .bd-section-title {
  margin: 0;
}

.skills-card-head .sect-head-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: var(--section-title-text-height);
  min-height: var(--section-title-text-height);
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.skills-card-head .sect-head-hint {
  align-self: flex-end;
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}

.skills-card-head .skills-installed-toolbar {
  margin-left: auto;
}

.skills-help-tip {
  position: relative;
  display: inline-flex;
}

.skills-help-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--muted);
}

.skills-help-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(520px, calc(100vw - 48px));
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.skills-help-tip:hover .skills-help-popover,
.skills-help-tip:focus-within .skills-help-popover {
  opacity: 1;
  transform: translate(0, 0);
}

.skills-install-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skills-install-grid label:first-child,
.skills-install-grid .skills-source-label,
.skills-install-field-wide {
  grid-column: 1 / -1;
}

.skills-install-grid label,
.skills-install-grid .skills-source-label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.skills-install-field-wide {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-install-grid .skills-source-label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.skills-install-field-wide > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.skills-source-help {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.skills-source-help > span {
  display: block;
}

.skills-source-help strong {
  color: var(--fg);
  font-weight: 750;
}

.skills-install-grid input,
.skills-attach-row select {
  width: 100%;
  min-width: 0;
}

.skills-source-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.skills-candidate-list,
.skills-install-bottom-row,
.skills-local-discovery-panel {
  grid-column: 1 / -1;
}

.skills-install-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.skills-advanced-options {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
}

.skills-advanced-options summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-right: 92px;
  cursor: pointer;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-advanced-marker {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor;
  flex: 0 0 auto;
  transform-origin: 45% 50%;
  transition: transform 140ms ease;
}

.skills-advanced-options[open] .skills-advanced-marker {
  transform: rotate(90deg);
}

.skills-install-actions,
.skills-local-discovery-panel,
.skills-candidate-list-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.skills-install-actions {
  position: static;
  align-self: end;
  justify-content: flex-end;
  min-height: 36px;
  flex-wrap: nowrap;
}

.skills-install-actions button,
.skills-local-discovery-panel button,
.skills-candidate-list-head button {
  min-height: 36px;
  padding: 0 var(--button-padding-x);
  white-space: nowrap;
}

.skills-candidate-list {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 65%, transparent);
}

.skills-candidate-list-head {
  justify-content: space-between;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-candidate-row {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px !important;
  align-items: start;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg) !important;
  cursor: pointer;
}

.skills-candidate-row::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.skills-candidate-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.skills-candidate-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.skills-candidate-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.skills-candidate-row span {
  display: grid;
  min-width: 0;
}

.skills-candidate-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-install-selection-dialog {
  width: min(720px, calc(100vw - 44px));
}

.skills-install-selection-body {
  max-height: 460px;
}

.skills-local-discovery-panel {
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-local-discovery-panel div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-local-discovery-panel strong {
  color: var(--fg);
  font-size: 12px;
}

.skills-local-discovery-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.skills-main-panel,
.skills-bot-grid {
  display: grid;
  gap: 10px;
}

.skills-main-panel {
  gap: 18px;
  min-width: 0;
}

.skills-heading-actions {
  min-width: 0;
}

.skills-heading-actions #skills-refresh {
  flex: none;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.skills-metric-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skills-metric-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 106px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-metric-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-metric-strip strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--mono);
}

.skills-installed-panel {
  padding: 18px;
  min-width: 0;
}

.skills-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: var(--section-title-content-gap);
}

.skills-section-head-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.skills-section-head > div:first-child {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
}

.skills-section-head h2 {
  margin: 0;
  font-size: 16px;
}

.skills-section-head p {
  margin: 0 0 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.skills-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.skills-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 162px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.skills-row:first-child { border-top: 1px solid var(--border-soft); }
.skills-row-body {
  min-width: 0;
  padding: 14px 14px 12px;
}
.skills-row strong {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.skills-row p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.skills-row small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.skills-source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.skills-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-card-actions button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.skills-card-actions button + button {
  border-left: 1px solid var(--border-soft);
}

.skills-card-actions button:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.skills-card-actions [data-action="remove-skill"]:hover {
  color: var(--danger);
}

.skills-installed-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.skills-pager {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-pager span {
  min-width: 42px;
  text-align: center;
}

.skills-pager-button {
  width: 26px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.skills-pager-button:hover:not(:disabled) {
  background: var(--surface);
  color: var(--accent-strong);
}

.skills-bots-panel {
  min-width: 0;
  position: relative;
}

.skills-bots-panel h2 {
  margin: 0;
  font-size: 16px;
}

.skills-bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 320px));
  justify-content: start;
  gap: 12px;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.skills-bot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 10px;
  padding: 14px;
  min-width: 0;
  overflow: visible;
}

.skills-config-row .skills-bot-card {
  min-width: 0;
}

.skills-policy-panel {
  display: grid;
  grid-template-rows: auto auto;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.skills-bot-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}

.skills-bot-head > .orb-avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.skills-bot-title-line {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skills-bot-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.skills-priority-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  gap: 8px;
}

.skills-priority-title {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.skills-priority-title::before {
  display: none;
}

.skills-multi-picker {
  position: relative;
  min-width: 0;
}

.skills-multi-picker-trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, transparent);
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.skills-multi-picker-trigger:hover:not(:disabled),
.skills-multi-picker.open .skills-multi-picker-trigger {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  transform: none;
}

.skills-multi-picker-trigger-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-multi-picker-trigger-copy b,
.skills-multi-picker-trigger-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-multi-picker-trigger-copy b { font-size: 12px; }
.skills-multi-picker-trigger-copy small { color: var(--muted); font-size: 10.5px; font-weight: 600; }

.skills-multi-picker-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.skills-multi-picker.open .skills-multi-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.skills-multi-picker-popover {
  position: fixed;
  z-index: 2147483000;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.skills-multi-picker-head {
  display: grid;
  gap: 7px;
  padding-bottom: 8px;
}

.skills-multi-picker-search {
  position: relative;
  display: block;
}

.skills-multi-picker-search > input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px 0 42px !important;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 12px;
  font-weight: 650;
  outline: none;
}

.skills-multi-picker-search > input[type="search"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.skills-multi-picker-search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-60%);
  pointer-events: none;
}

.skills-multi-picker-search-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.skills-multi-picker-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}

.skills-multi-picker-clear {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 10.5px;
  box-shadow: none;
}

.skills-multi-picker-clear:hover { color: var(--danger); transform: none; }

.skills-multi-picker-options {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--border)) transparent;
  scrollbar-width: thin;
}

.skills-multi-picker-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.skills-multi-picker-option:hover,
.skills-multi-picker-option.selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.skills-multi-picker-check {
  position: relative;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.skills-multi-picker-option.selected .skills-multi-picker-check {
  border-color: var(--accent);
  background: var(--accent);
}

.skills-multi-picker-option.selected .skills-multi-picker-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(45deg);
}

.skills-multi-picker-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.skills-multi-picker-option-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.skills-multi-picker-option-copy b,
.skills-multi-picker-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-multi-picker-option-copy b { font-size: 12px; }
.skills-multi-picker-option-copy small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.skills-multi-picker-option-copy em {
  flex: none;
  color: var(--danger);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.skills-multi-picker-option.dangling .skills-multi-picker-option-copy b { color: var(--danger); }

.skills-multi-picker-empty {
  margin: 0;
  padding: 28px 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.skills-multi-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--border-soft);
}

.skills-multi-picker-actions button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.skills-policy-summary {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.skills-policy-summary strong {
  color: var(--fg);
  font-size: 11px;
}

.skills-policy-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-attach-row,
.skills-policy-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.skills-bot-card .skills-attach-row {
  position: relative;
  z-index: 4;
  margin-top: auto;
}

.skills-bot-card .skills-attach-row .sect-sort-menu[open] {
  z-index: 1000;
}

.skills-bot-card .skills-attach-row .sect-sort-pop {
  z-index: 1001;
}

.skills-policy-controls {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.skills-control-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-defaults-panel .skills-control-block + .skills-control-block {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.skills-control-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.skills-choice-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skills-choice-group-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skills-choice-group-compact .skills-choice {
  gap: 7px;
  min-height: 84px;
  padding: 11px 12px;
  align-content: start;
}

.skills-choice-group-compact .skills-choice strong {
  font-size: 13px;
}

.skills-choice-group-compact .skills-choice small {
  white-space: pre-line;
  line-height: 1.42;
}

.skills-project-group .skills-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.skills-project-group .skills-choice strong,
.skills-project-group .skills-choice small {
  width: 100%;
  text-align: left;
}

.skills-defaults-panel .skills-choice-group:not(.skills-choice-group-compact) {
  grid-template-columns: 1fr;
}

.skills-choice {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  justify-items: start;
  align-content: center;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.skills-choice:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.skills-choice:active {
  transform: translateY(1px);
}

.skills-choice strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.3;
}

.skills-choice small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.skills-choice.selected {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.skills-delivery-group .skills-choice {
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  column-gap: 14px;
  min-height: 62px;
  padding: 11px 14px;
  align-content: start;
}

.skills-delivery-group .skills-choice strong,
.skills-delivery-group .skills-choice small {
  align-self: start;
}

.skills-discovery-dialog {
  width: min(920px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 64px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.skills-discovery-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  backdrop-filter: blur(6px) saturate(1.05);
}

.skills-discovery-dialog article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: inherit;
  padding: 0;
}

.skills-discovery-dialog header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 60px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}

.skills-discovery-dialog h3,
.skills-discovery-dialog p {
  margin: 0;
}

.skills-discovery-dialog h3 {
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.25;
}

.skills-discovery-dialog p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.skills-discovery-close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}

.skills-discovery-close::before,
.skills-discovery-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.7px;
  border-radius: var(--radius-full);
  background: currentColor;
  transform-origin: center;
}

.skills-discovery-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.skills-discovery-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.skills-discovery-close:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-discovery-body {
  display: grid;
  min-height: 0;
  max-height: 520px;
  overflow: hidden;
  padding: 14px;
}

.skills-discovery-layout {
  display: grid;
  grid-template-columns: minmax(178px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}

.skills-discovery-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
  scrollbar-width: thin;
}

.skills-discovery-tabs button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 10px 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  text-transform: none;
  box-shadow: none;
}

.skills-discovery-tabs button.selected {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  box-shadow: none;
}

.skills-discovery-tabs strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-discovery-tabs small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.skills-discovery-tabs button.selected small {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.skills-discovery-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.skills-discovery-path {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-discovery-path code {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-discovery-group {
  display: grid;
  min-height: 0;
}

.skills-discovery-group[hidden] {
  display: none;
}

.skills-discovery-group header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
}

.skills-discovery-group strong {
  text-transform: uppercase;
  color: var(--fg);
  font-size: 12px;
}

.skills-discovery-group code {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-discovery-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.skills-discovery-list::-webkit-scrollbar {
  width: 6px;
}

.skills-discovery-list::-webkit-scrollbar-track {
  background: transparent;
}

.skills-discovery-list::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.skills-discovery-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.skills-discovery-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.skills-discovery-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.skills-discovery-row::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.skills-discovery-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.skills-discovery-row:has(input:checked)::before {
  background: var(--accent);
  box-shadow: none;
}

.skills-discovery-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-discovery-row strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.skills-discovery-row small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.skills-discovery-row em {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.skills-discovery-row.installed {
  background: color-mix(in srgb, var(--surface-muted) 56%, transparent);
  cursor: default;
}

.skills-discovery-dialog footer {
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-soft);
}

.skills-discovery-dialog footer button,
.skills-discovery-dialog footer button.primary {
  min-height: var(--button-height);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.skills-discovery-dialog footer button:hover:not(:disabled),
.skills-discovery-dialog footer button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

@media (max-width: 720px) {
  .skills-discovery-layout {
    grid-template-columns: 1fr;
  }

  .skills-discovery-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .skills-discovery-tabs button {
    flex: 0 0 auto;
    width: auto;
    min-width: 144px;
  }
}

.skills-policy-controls [data-bot-status] {
  grid-column: 1 / -1;
}

@media (min-width: 1600px) {
  .skills-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) {
  .skills-config-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .skills-config-row > .skills-config-block:nth-child(3),
  .skills-config-row .skills-bots-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .skills-page-grid {
    grid-template-columns: 1fr;
  }
  .skills-config-row {
    grid-template-columns: 1fr;
  }
  .skills-defaults-panel {
    grid-template-columns: 1fr;
  }
  .skills-page .skills-defaults-panel .skills-control-block + .skills-control-block {
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 0;
  }
  .skills-page .skills-install-panel .skills-install-grid {
    grid-template-columns: 1fr;
  }
  .skills-page .skills-install-panel .skills-source-label,
  .skills-page .skills-install-panel .skills-install-path-field,
  .skills-page .skills-install-panel .skills-install-ref-field,
  .skills-page .skills-install-panel .skills-install-actions,
  .skills-page .skills-install-panel .skills-install-bottom-row,
  .skills-page .skills-install-panel .skills-local-discovery-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .skills-page .skills-install-panel .skills-install-actions {
    justify-content: flex-start;
  }
  .skills-config-row .skills-bots-panel {
    grid-column: auto;
  }
  .skills-side-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skills-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .skills-page-grid,
  .skills-page-stack,
  .skills-config-row,
  .skills-side-rail,
  .skills-main-panel,
  .skills-defaults-panel,
  .skills-install-panel,
  .skills-installed-panel {
    width: 100%;
    max-width: 100%;
  }
  .skills-side-rail,
  .skills-config-row,
  .skills-install-grid,
  .skills-source-control,
  .skills-install-actions,
  .skills-install-bottom-row,
  .skills-local-discovery-panel,
  .skills-candidate-list-head,
  .skills-section-head-row,
  .skills-metric-strip,
  .skills-row,
  .skills-attach-row,
  .skills-policy-controls,
  .skills-choice-group,
  .skills-choice-group-compact {
    grid-template-columns: 1fr;
  }
  .skills-bot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .skills-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .skills-heading-actions #skills-refresh {
    width: 100%;
  }
  .skills-metric-strip {
    flex-wrap: wrap;
  }
  .skills-metric-strip span {
    flex: 1 1 min(100%, 140px);
  }
  .skills-help-popover {
    left: 16px;
    right: 16px;
    top: 54px;
    width: auto;
  }
  .skills-install-title,
  .skills-help-tip {
    position: static;
  }
  .skills-list {
    grid-template-columns: 1fr;
  }
  .skills-bot-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .skills-multi-picker-popover {
    width: 100%;
  }
  .skills-install-actions,
  .skills-local-discovery-panel,
  .skills-candidate-list-head {
    display: grid;
    justify-items: stretch;
  }
}

@media (max-width: 460px) {
  .skills-install-actions {
    position: static;
    justify-content: flex-start;
    justify-items: start;
  }
}

/* toggle 开关行：checkbox 隐藏，switch 是视觉开关 */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  color: var(--fg);
}
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row .switch {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--border);
  position: relative;
  flex: none;
  margin-top: 1px;
  transition: background 140ms ease;
}
.toggle-row .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: left 140ms ease, background 140ms ease;
}
.toggle-row input:checked + .switch {
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.toggle-row input:checked + .switch::after { left: 18px; background: #fff; }
.toggle-row input:disabled + .switch { opacity: 0.4; }
.toggle-tx { min-width: 0; }
.toggle-tx strong { display: block; font-size: 12.5px; font-weight: 600; }
.toggle-tx small {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
.toggle-tx small:hover { color: var(--muted); }
.toggle-tx small.open { -webkit-line-clamp: unset; color: var(--muted); }
/* toggle 行之外的长帮助文字（签名/额度说明）同样默认一行，点开展开 */
.bd-tile small.bd-help {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
.bd-tile small.bd-help:hover { color: var(--muted); }
.bd-tile small.bd-help.open { -webkit-line-clamp: unset; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .toggle-row .switch, .toggle-row .switch::after { transition: none; }
}

.bd-profile-roles {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.bd-profile-roles .bd-subsection-title {
  margin: 0 0 4px;
}
.bd-profile-role-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.bd-profile-role-entry {
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.bd-profile-role-entry > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  box-sizing: border-box;
  padding: 0 12px;
  list-style: none;
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
}
.bd-profile-role-entry > summary::-webkit-details-marker {
  display: none;
}
.bd-profile-role-entry > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  color: var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease, color 140ms ease;
}
.bd-profile-role-entry[open] > summary::after {
  color: var(--accent);
  transform: rotate(225deg) translateY(-1px);
}
.bd-profile-role-entry > summary:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent-strong);
}
.bd-profile-role-id {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-profile-role-content {
  padding: 10px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.bd-profile-role-content .empty,
.bd-profile-role-content .hint-warn-inline {
  margin: 0;
}
.bd-profile-role-content pre {
  margin: 0;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  color: var(--fg);
  font: 12px/1.5 var(--mono);
}

.bd-tile textarea,
.bd-tile input[type=text],
.bd-tile input[type=number] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg);
  font: 12px/1.5 var(--mono);
}
:root[data-theme="dark"] .bd-tile textarea,
:root[data-theme="dark"] .bd-tile input[type=text],
:root[data-theme="dark"] .bd-tile input[type=number] {
  background: rgba(13, 17, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 980px) {
  .bd-layout { grid-template-columns: 1fr; }
  .bd-roster { position: static; display: flex; overflow-x: auto; }
  .bd-roster-item { flex: 0 0 auto; }
  .bd-grid { grid-template-columns: 1fr; }
  .bd-profile-head { grid-template-columns: auto minmax(0, 1fr); }
  .bd-profile-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* ── 全站收尾：长尾页面对齐设计语言 ──────────────────────────────────────── */

/* 兜底表单控件基线（零特异性 :where，不会压过上面的胶囊规则）：
   接入点 / 团队 / 弹窗里的裸 input、select、textarea 统一圆角与底色 */
.page :where(input:not([type=checkbox], [type=radio]), select, textarea),
dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg);
  padding: 8px 12px;
  font: inherit;
}
:root[data-theme="dark"] .page :where(input:not([type=checkbox], [type=radio]), select, textarea),
:root[data-theme="dark"] dialog :where(input:not([type=checkbox], [type=radio]), select, textarea) {
  background: rgba(13, 17, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 筛选条统一（群组 / 定时 / 工作流共用 .filters）：去面板底，控件按 token 圆角化 */
.filters {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.filters input[type=search],
.filters input[type=text],
.filters select {
  min-height: 36px;
  border-radius: var(--radius-md);
  padding: 0 var(--button-padding-x);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.filters select {
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a3b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
:root[data-theme="dark"] .filters input[type=search],
:root[data-theme="dark"] .filters input[type=text],
:root[data-theme="dark"] .filters select {
  background-color: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.filters .filter-toggle {
  min-height: 36px;
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
:root[data-theme="dark"] .filters .filter-toggle {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.filters .filter-toggle:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.filters .filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
/* 文本没包 span 的旧式 toggle（群组/定时页）：状态点画在 label 上 */
.filters .filter-toggle:not(:has(> span))::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--faint);
}
.filters .filter-toggle:not(:has(> span)):has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* 通用 .card（接入点等页面在用）→ 玻璃面板 */
.card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
:root[data-theme="dark"] .card {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
}

/* 角色管理：树面板对齐名册风格 */
:root[data-theme="dark"] .roles-tree-panel,
:root[data-theme="dark"] .roles-editor-panel {
  background: var(--surface);
  backdrop-filter: none;
  border-color: var(--border-soft);
}
.roles-tree-panel,
.roles-editor-panel { border-radius: var(--radius-xl); }
.roles-group-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.roles-group-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roles-bot-row.selected {
  background: var(--accent-soft);
  border-left: 0;
  padding-left: 20px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.roles-group-row.selected { background: var(--accent-soft); }
.roles-badge { border-radius: var(--radius-sm); }

/* ── 看板列顺序自定义：列头可拖拽 + hover 出现 ‹/› 按钮 ──────────────────── */
.session-board-column > header[draggable] { cursor: grab; }
.session-board-column > header[draggable]:active { cursor: grabbing; }
.session-board-head-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.session-board-move { display: inline-flex; gap: 3px; opacity: 0; transition: opacity 120ms ease; }
.session-board-column > header:hover .session-board-move,
.session-board-move:focus-within { opacity: 1; }
@media (hover: none) {
  .session-board-move { opacity: 1; }
}
.session-board-move button {
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: var(--radius-full);
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
}
.session-board-move button:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.session-board-move button:disabled { opacity: 0.3; }
.session-board-column.dragging { opacity: 0.55; }
.session-board-column.drag-over {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .session-board-move { transition: none; }
}

@media (max-width: 980px) {
  .chrome-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
  }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content;
    align-items: center;
    position: sticky;
    top: 0;
    min-height: var(--topbar-height);
    column-gap: 12px;
    padding: 0 16px;
  }
  .topbar::after {
    left: 16px;
    right: 16px;
  }
  .topbar-left {
    grid-column: 1;
    width: auto;
  }
  .topbar-actions {
    grid-column: 3;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .topbar-tool-group {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .sidebar {
    flex: none;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
  }
  .sidebar-nav {
    display: flex;
    gap: 8px;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .sidebar-nav a {
    flex: 0 0 auto;
  }
  .workspace {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .overview-layout { grid-template-columns: 1fr; }
  .active-sessions-panel { min-height: auto; }
  .schedules-panel { min-height: auto; }
}

@media (max-width: 520px) {
  :root {
    --topbar-control-size: 34px;
  }
  .topbar {
    column-gap: 8px;
    padding: 0 12px;
  }
  .topbar-left {
    gap: 10px;
  }
  .overview-list-item-schedule {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .overview-list-item-schedule .overview-list-main,
  .overview-list-item-schedule .overview-list-meta {
    width: 100%;
    max-width: 100%;
  }
  .overview-list-item-schedule .overview-list-main {
    flex: 0 1 auto;
  }
  .topbar .brand {
    gap: 7px;
  }
  .topbar .brand-product {
    display: none;
  }
  .topbar .brand-wordmark {
    font-size: 15px;
  }
  .topbar .brand-mark,
  .topbar .brand-logo-img {
    width: 26px;
    height: 26px;
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-tool-group {
    width: auto;
    gap: 6px;
  }
  .connection-status {
    padding: 0 24px 0 10px;
    font-size: 10.5px;
  }
  .topbar-status-menu .connection-status {
    padding-right: 24px;
  }
  .topbar-status-menu .connection-status::after {
    right: 10px;
  }
}

/* ── Dashboard UI baseline rollout ───────────────────────────────────────── */
.page {
  gap: 16px;
}

.page.hero-page {
  /* SectionHeader 标题在 36px 行内居中；10px 让标题文字顶部距 page divider 为 16px，和其它页面 toolbar 对齐。 */
  gap: 10px;
}

.page-heading {
  position: relative;
  align-items: center;
  min-height: var(--page-title-row-height);
  padding-bottom: var(--page-title-divider-gap);
}

.page-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 82%, transparent) 14%,
    color-mix(in srgb, var(--border) 82%, transparent) 86%,
    transparent
  );
}

.page-heading h1 {
  font-size: 24px;
  line-height: 1.12;
  font-weight: 760;
}

.page-heading > :first-child {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

.page-heading > :first-child > h1 {
  flex: none;
}

.page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.55;
}

.page-heading .tf-lede {
  min-height: 0;
}

.page-heading-actions,
.insight-head-acts {
  align-items: center;
  gap: 10px;
}

.page-heading-actions > button,
.page-heading-actions > .btn-link,
.insight-head-acts > button,
.page-primary-action {
  min-height: 36px;
  border-radius: var(--radius-lg);
}

.page-primary-action {
  padding-inline: var(--button-padding-x);
}

.page > .filters,
.insights-page .insights-filters,
.sessions-page .sessions-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

:root[data-theme="dark"] .page > .filters,
:root[data-theme="dark"] .insights-page .insights-filters,
:root[data-theme="dark"] .sessions-page .sessions-filters {
  background: var(--surface);
  border-color: var(--border-soft);
}

.page > .filters input[type=search],
.page > .filters input[type=text],
.page > .filters select,
.insights-page .insights-filters input[type=search],
.insights-page .insights-filters select,
.sessions-page .sessions-filters input[type=search],
.sessions-page .sessions-filters select {
  min-height: 34px;
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
}

.page > .filters select:not([multiple]),
.insights-page .insights-filters select:not([multiple]) {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.sessions-page .sessions-filters input[type=search] {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  background-color: var(--surface);
}

.sessions-page .sessions-filters {
  min-height: var(--button-height);
  padding: 0;
  border: 0;
  background: transparent;
  gap: 8px;
}

.session-runtime-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.session-runtime-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
}

.session-runtime-stats b {
  color: var(--fg);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.sessions-page .sessions-filters:has(.idle-cleanup-bar.is-open) {
  position: relative;
  z-index: 1400;
}

:root[data-theme="dark"] .sessions-page .sessions-filters,
.sessions-page .sessions-filters {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sessions-page .sessions-filters :where(
  input[type=search],
  .sect-sort-menu > summary,
  .filter-cli summary,
  .filter-toggle,
  .idle-cleanup-run
) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
}

.sessions-page .sessions-filters :where(
  input[type=search],
  .sect-sort-menu > summary,
  .filter-cli summary,
  .filter-toggle
) {
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.sessions-page .sessions-filters input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  line-height: normal;
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 0 1 280px;
  min-width: 200px;
  max-width: 280px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
  appearance: none;
  -webkit-appearance: none;
}

@media (max-width: 720px) {
  .sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-decoration,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-cancel-button,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-results-button,
.sessions-page form.sessions-filters > input[type="search"][name="q"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.sessions-page form.sessions-filters > input[type="search"][name="q"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

.sessions-page form.sessions-filters :where(
  .sect-sort-menu > summary,
  .filter-cli summary
) {
  padding-left: var(--button-padding-x);
  padding-right: calc(var(--button-padding-x) + 14px);
}

.sessions-page form.sessions-filters :where(
  .filter-toggle,
  .idle-cleanup-run
) {
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
}

.sessions-page form.sessions-filters :where(.idle-cleanup-run) {
  min-width: 0;
  width: auto;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
  white-space: nowrap;
}

.sessions-page .sessions-filters .idle-cleanup-run {
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
}

.sessions-page .sessions-filters .idle-cleanup-run:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.sessions-page .sessions-filters .filter-toggle {
  gap: 10px;
  padding: 0 var(--button-padding-x);
  color: var(--muted);
}

.sessions-page .sessions-filters .filter-toggle span::before {
  content: none;
  display: none;
}

.sessions-page .sessions-filters .filter-toggle-label {
  line-height: 1;
}

.sessions-page .sessions-filters .filter-toggle-switch {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
}

.sessions-page .sessions-filters .filter-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.sessions-page .sessions-filters .filter-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  color: var(--accent-strong);
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) .filter-toggle-switch {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.sessions-page .sessions-filters .filter-toggle:has(input:checked) .filter-toggle-switch::after {
  background: var(--accent);
  transform: translate(13px, -50%);
}

.groups-page .filters label,
.schedules-page .filters label,
.team-page .card label,
.insights-page .ins-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.groups-page .filters label:has(input:checked),
.schedules-page .filters label:has(input:checked),
.team-page .card label:has(input:checked),
.insights-page .ins-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

.page :where(.card, .bd-card, .panel, .metric-card, .roles-tree-panel, .roles-editor-panel, .v3r-graph-card, .v3r-panel) {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

:root[data-theme="dark"] .page :where(.card, .bd-card, .panel, .metric-card, .roles-tree-panel, .roles-editor-panel, .v3r-graph-card, .v3r-panel),
:root[data-theme="dark"] .bd-roster,
:root[data-theme="dark"] .bd-profile-head,
:root[data-theme="dark"] .bd-tile {
  background: var(--surface);
  border-color: var(--border-soft);
  backdrop-filter: none;
  background-image: none;
}

.page :where(.card, .bd-card, .settings-card, .skills-installed-panel, .skills-defaults-panel, .skills-install-panel) > h2:first-child,
.page :where(.bd-section-title, .skills-section-head h2, .roles-profile-section-title) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--section-title-text-height);
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
  letter-spacing: 0;
  text-transform: none;
}

.page :where(.card, .bd-card, .settings-card, .skills-installed-panel, .skills-defaults-panel, .skills-install-panel) > h2:first-child::before,
.page :where(.bd-section-title, .skills-section-head h2, .roles-profile-section-title)::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
}

.bd-tile .bd-section-title::before {
  box-shadow: none;
}

.bot-defaults-page .bd-tile .bd-section-title::before,
.bot-defaults-page .bd-section > .bd-section-title::before,
.bot-defaults-page .bd-subsection > .bd-subsection-title::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
  box-shadow: none;
}

.page :where(.bd-section, .bd-tile, .settings-card, .skills-defaults-panel, .skills-installed-panel) > .bd-section-title {
  margin: 0 0 var(--section-title-content-gap);
}

.skills-install-title .bd-section-title {
  margin: 0;
}

.page :where(.bd-section-title, .bd-subsection-title):has(+ .bd-section-note) {
  display: inline-flex;
  margin-bottom: var(--section-title-content-gap);
  vertical-align: bottom;
}

.page :where(.bd-section-title, .bd-subsection-title) + .bd-section-note {
  display: inline-block;
  max-width: min(760px, 62vw);
  margin: 0 0 var(--section-title-content-gap) 10px;
  vertical-align: bottom;
}

.page :where(.skills-row, .skills-discovery-row, .skills-candidate-row, .roles-group-row, .roles-bot-row, .roles-profile-row, .overview-list-item, .connector-item-card) {
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.page :where(.skills-row, .skills-discovery-row, .roles-group-row, .roles-bot-row, .roles-profile-row, .connector-item-card):hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

table,
.matrix-scroll {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

tbody tr[data-id]:hover,
tbody tr[data-chat]:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.schedules-page .actions-cell {
  white-space: normal;
}

.schedule-actions button {
  margin: 2px;
}

.schedules-list-section {
  min-width: 0;
}

.schedules-list-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.schedules-list {
  align-content: start;
}

.schedule-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: flex-start;
  min-height: 84px;
  padding: 11px 12px;
}

.schedule-list-row .overview-list-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.schedule-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  min-width: 0;
}

.schedule-row-head b {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  color: var(--faint);
  font-size: 11px;
}

.schedule-row-meta code {
  max-width: min(720px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  color: var(--faint);
  padding: 0;
}

.schedule-chip-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.schedule-chip-strip span,
.schedule-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.schedule-row-head .schedule-state {
  align-self: center;
  min-width: 42px;
  padding: 0 10px;
}

.schedule-state.enabled {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.schedule-state.paused {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
}

.schedule-list-row .overview-list-tail {
  align-self: end;
  justify-self: end;
  justify-content: flex-end;
  max-width: 460px;
}

.schedule-list-row .schedule-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.schedule-list-row .schedule-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  margin: 0;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.schedule-list-row .schedule-actions .schedule-action-button {
  gap: 7px;
  min-width: 82px;
  transform: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.schedule-list-row .schedule-actions .schedule-action-button::before {
  content: "";
  display: none;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.schedule-list-row .schedule-actions .schedule-action-button.is-pending::before {
  display: block;
  animation: page-loading-rotate 0.8s linear infinite;
}

.schedule-list-row .schedule-actions .schedule-action-button.is-success {
  border-color: color-mix(in srgb, var(--success) 54%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  color: var(--success);
}

.schedule-list-row .schedule-actions .schedule-action-button.is-error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch {
  gap: 9px;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  padding: 0 var(--button-padding-x);
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  transform: none;
}

.schedule-enabled-switch-label {
  min-width: 32px;
  text-align: left;
}

.schedule-enabled-switch-track {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.schedule-enabled-switch-track > span {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.schedule-list-row .schedule-actions .schedule-enabled-switch.is-on {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.schedule-enabled-switch.is-on .schedule-enabled-switch-track {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.schedule-enabled-switch.is-on .schedule-enabled-switch-track > span {
  background: var(--accent);
  transform: translate(12px, -50%);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch.is-error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border-soft));
  color: var(--danger);
}

.schedule-list-row .schedule-actions .schedule-enabled-switch:disabled {
  opacity: 1;
}

.schedule-list-row .schedule-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: none;
}

@media (max-width: 760px) {
  .schedule-list-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .schedule-list-row .overview-list-tail {
    justify-self: end;
    width: 100%;
    max-width: 100%;
  }

  .schedule-list-row .schedule-actions {
    width: 100%;
  }
}

.schedules-list-empty {
  margin: 10px;
  padding: 18px 14px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.schedules-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.schedules-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.groups-matrix-section {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.groups-list-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: none;
  overflow: hidden;
}

.groups-list {
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.groups-list-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 12px;
  align-self: start;
  min-height: 94px;
  padding: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

.groups-list-row > .orb-avatar {
  grid-column: 1;
  align-self: start;
  margin-top: 0;
}

.groups-list-row .overview-list-main {
  grid-column: 2;
  display: grid;
  align-self: start;
  gap: 6px;
  min-width: 0;
}

.groups-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 24px;
  overflow: hidden;
}

.groups-row-head b {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-row-count {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.groups-list-row .groups-row-meta {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
}

.groups-list-row .groups-row-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  overflow: hidden;
  white-space: nowrap;
}

.groups-list-row .groups-row-tag:first-child {
  flex: 0 1 auto;
  max-width: none;
}

.groups-list-row .groups-row-owner-tag {
  flex: 0 1 auto;
  max-width: none;
}

.groups-list-row .groups-row-tag > span,
.groups-list-row .groups-row-tag > code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-list-row .groups-row-tag > code {
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  padding: 0;
}

.groups-bot-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.groups-bot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 172px;
  box-sizing: border-box;
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.groups-bot-pill i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.78;
}

.groups-bot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-bot-state {
  flex: none;
  color: var(--faint);
  font-size: 10px;
  line-height: 1;
}

.groups-bot-in {
  border-color: color-mix(in srgb, var(--success) 26%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.groups-bot-out {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  color: var(--muted);
}

.groups-bot-error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
}

.groups-bot-unknown {
  border-style: dashed;
  color: var(--faint);
}

.groups-row-lower {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.groups-list-row .overview-list-tail {
  align-self: end;
  justify-self: end;
  justify-content: flex-end;
  flex: none;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 332px;
}

.groups-list-empty {
  margin: 10px;
  padding: 18px 14px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.groups-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
}

.groups-pagination-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.groups-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.groups-pagination-actions button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.groups-pagination-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

.groups-pagination-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .groups-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .groups-pagination-actions {
    align-self: stretch;
  }
  .groups-pagination-actions button {
    flex: 1 1 0;
  }
}

.groups-page .groups-list-row .overview-list-tail button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .groups-row-lower {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }
  .groups-list-row .overview-list-tail {
    justify-self: end;
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap;
  }
}

.groups-page .groups-list-row .add-bots {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.groups-page .groups-list-row .add-bots:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.groups-page :where(.groups-list-row .save-profile, .groups-list-row .manage-chat) {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.groups-page :where(.groups-list-row .save-profile, .groups-list-row .manage-chat):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent-strong);
}

.groups-page .g-chat-cell {
  gap: 10px;
}

.groups-page .g-chat-meta strong {
  color: var(--fg);
  font-size: 12.5px;
}

.groups-page .g-chat-meta small {
  color: var(--faint);
}

.connector-list-card {
  margin-bottom: 0;
}

.connectors-page .cn-form {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 11px 16px;
  align-items: center;
  max-width: 780px;
}

.connectors-page .cn-form > label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.connector-inline-link {
  display: inline-block;
  margin-top: 5px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.connector-inline-link:hover {
  text-decoration: underline;
}

.connector-form-hint {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.65;
}

.connector-created-card,
.connector-item-card {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.team-page .card {
  margin-bottom: 0 !important;
}

.team-page .card + .card {
  margin-top: 0;
}

.team-page .card p:has(input, select, button),
.team-page .card > div[style*="display: flex"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.team-page .card h2 {
  margin: 0 0 var(--section-title-content-gap) !important;
}

.team-list-card {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: var(--surface-muted);
}

.team-manage-card {
  padding: 10px 14px;
}

.wb-split {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 1680px;
}

main:has(.whiteboards-page) {
  padding-bottom: 0;
  overflow: hidden;
}

.whiteboards-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.whiteboards-page .hint-warn {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  box-shadow: none;
  font-size: 12px;
  line-height: 1.55;
}

.wb-disabled-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  padding: 0 12px;
  max-width: min(980px, 100%);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  cursor: default;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.whiteboards-page .page-heading > :first-child {
  align-items: center;
}

.whiteboards-page .overview-panel-head {
  align-items: center;
}

.whiteboards-page .overview-panel-head .sect-head-count {
  align-self: center;
  margin-bottom: 0;
}

.whiteboards-page .overview-block {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.wb-list-block,
.wb-detail-block {
  min-height: 0;
}

.wb-list-panel,
.wb-detail-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: none;
  height: 100%;
  box-sizing: border-box;
}

.wb-list-panel {
  overflow-x: hidden;
  overflow-y: auto;
}

.wb-detail-panel {
  gap: 14px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: stretch;
}

.wb-group {
  display: grid;
  gap: 10px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
  box-shadow: none;
}

.wb-group:last-child {
  margin-bottom: 0;
}

.wb-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fg);
  font-size: 12px;
  font-weight: 760;
  list-style: none;
}

.wb-group > summary::-webkit-details-marker {
  display: none;
}

.wb-group > summary::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.wb-group-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-group > summary small {
  flex: none;
}

.wb-group-items {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
}

.wb-group > summary small,
.wb-scope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.wb-scope {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  overflow: hidden;
  line-height: 22px;
  text-overflow: ellipsis;
}

.wb-item {
  display: grid;
  gap: 8px;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.wb-item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.wb-item.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.wb-item-head,
.wb-item-foot,
.wb-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.wb-item-head {
  justify-content: flex-start;
}

.wb-item-foot {
  justify-content: space-between;
}

.wb-item-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.wb-item-main strong,
.wb-item-main > .wb-id-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-item-main strong {
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 650;
}

.wb-item-main > .wb-id-text,
.wb-item-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.wb-item-meta {
  align-items: center;
  font-family: inherit;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.wb-item-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-height: var(--button-height);
  margin: 0;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 36%, var(--surface));
}

.wb-detail-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.wb-detail-head .eyebrow {
  display: none;
}

.wb-detail-head h2 {
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-detail-head code {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.wb-meta-card {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.wb-meta-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.wb-meta-card strong {
  display: block;
  min-width: 0;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 680;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-admin-info {
  margin: 0;
  color: var(--muted);
}

.wb-admin-info summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
}

.wb-admin-info summary::-webkit-details-marker {
  display: none;
}

.wb-admin-info summary:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--accent-strong);
}

.wb-admin-info code {
  display: block;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}

.wb-board-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 220px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.wb-board-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--button-height);
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.wb-board-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.wb-board-panel pre {
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 16px;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.wb-detail-head button.danger,
.wb-delete-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.wb-detail-head button.danger {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

.wb-detail-head button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.wb-delete-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.wb-delete-dialog {
  display: grid;
  gap: 12px;
  width: min(520px, 92vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

.wb-delete-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.wb-delete-body > div:last-child {
  min-width: 0;
  flex: 1;
}

.wb-delete-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-weight: 800;
}

.wb-delete-dialog h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.wb-delete-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.wb-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.roles-page .roles-layout {
  gap: 14px;
}

.roles-tree-header,
.roles-editor-form {
  background: var(--surface);
}

.roles-tree-header.dashboard-toolbar {
  width: 100%;
  min-height: auto;
  padding: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.roles-tree-header.dashboard-toolbar > input[type="search"],
.roles-tree-header.dashboard-toolbar > input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.roles-tree-header.dashboard-toolbar > input[type="search"]:hover,
.roles-tree-header.dashboard-toolbar > input[type="text"]:hover,
.roles-tree-header.dashboard-toolbar > input[type="search"]:focus,
.roles-tree-header.dashboard-toolbar > input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.roles-tree {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.roles-group-row,
.roles-bot-row,
.roles-profile-row {
  margin: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 30%, transparent);
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.roles-group-section,
.roles-profile-row {
  border-bottom: 0;
}

.roles-bot-row {
  border-top: 0;
}

.roles-group-row:hover,
.roles-bot-row:hover,
.roles-profile-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.roles-group-row.selected,
.roles-bot-row.selected,
.roles-profile-row.selected {
  border-left: 0;
  padding-left: 12px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: none;
}

.roles-bot-row.selected {
  padding-left: 20px;
}

.roles-badge,
.roles-profile-match {
  border-radius: var(--radius-full);
}

.roles-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: 700;
}

.roles-badge.has-role {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.roles-badge.no-role {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
}

.roles-editor-inject {
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 28%, transparent);
}

.roles-field-label {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.roles-inline-menu {
  width: 132px;
}

.roles-profile-apply-controls .roles-apply-group-menu {
  width: 100%;
}

.roles-profile-apply-controls .roles-apply-group-menu .sect-sort-value {
  max-width: calc(100% - 44px);
}

.roles-profile-apply-controls .roles-apply-group-menu .sect-sort-pop {
  left: 0;
  min-width: 100%;
  transform: none;
}

.roles-profile-apply-bot {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0 6px 6px 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}

.roles-profile-apply-bot::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}

.roles-profile-apply-bot input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.roles-profile-apply-bot:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}

.roles-profile-apply-bot:has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.roles-editor-actions button,
.schedule-actions button {
  box-shadow: none;
}

.bd-layout,
.skills-page-grid,
.roles-page .roles-layout,
.wb-split {
  max-width: 1680px;
}

.bd-roster,
.bd-profile-head,
.bd-tile,
.settings-card,
.settings-group-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.bd-roster {
  top: 78px;
}

.bd-roster-item.on,
.skills-choice.selected,
.skills-discovery-tabs button.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: none;
}

.sessions-page .sessions-view-controls,
.sessions-page .page-heading-actions {
  align-items: center;
}

.sessions-page .sessions-view-controls {
  gap: 8px;
}

.sessions-page .page-heading > .sessions-heading-main {
  flex: 1 1 auto;
  align-items: center;
  gap: 4px 8px;
}

.sessions-page .sessions-heading-main > h1 {
  flex: none;
}

.sessions-page .sessions-heading-main .sessions-view-controls {
  flex: 0 1 auto;
  min-width: 0;
}

.sessions-page .sessions-page-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.sessions-page {
  --sessions-heading-control-height: var(--button-height);
  --sessions-switch-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --sessions-switch-active-fg: var(--accent);
  --sessions-groupby-motion: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sessions-page .sessions-page-actions > .create-session-btn,
.sessions-page .sessions-view-controls > .segmented,
.sessions-page .sessions-view-controls > .kanban-team-menu,
.sessions-page .sessions-view-controls > .kanban-team-menu > summary {
  height: var(--sessions-heading-control-height);
  min-height: var(--sessions-heading-control-height);
  max-height: var(--sessions-heading-control-height);
}

.sessions-page .sessions-view-controls > .kanban-team-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.sessions-page .sessions-view-controls :where(.segmented button, .kanban-team-menu > summary),
.sessions-page .sessions-page-actions > .create-session-btn {
  font-size: 12px;
  font-weight: 700;
}

.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active,
.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"] {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
  box-shadow: none;
}

.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active:hover,
.sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"]:hover {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
}

.sessions-page .sessions-page-actions > .create-session-btn {
  min-width: 0;
  width: auto;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.sessions-page .sessions-page-actions > .create-session-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.sessions-page .sessions-view-controls > .segmented {
  flex: none;
}

.sessions-page .sessions-view-controls > .kanban-groupby {
  box-sizing: border-box;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  will-change: max-width, padding, gap, opacity;
  transition:
    max-width var(--sessions-groupby-motion),
    padding var(--sessions-groupby-motion),
    gap var(--sessions-groupby-motion),
    border-color 180ms ease,
    opacity 150ms ease-out 100ms,
    visibility 0s linear 0s;
}

.sessions-page .sessions-view-controls > .kanban-groupby button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  transition:
    background-color 220ms ease,
    color 200ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sessions-page .sessions-view-controls > .kanban-groupby.is-collapsed {
  max-width: 0;
  padding-right: 0;
  padding-left: 0;
  gap: 0;
  border-color: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    max-width var(--sessions-groupby-motion),
    padding var(--sessions-groupby-motion),
    gap var(--sessions-groupby-motion),
    border-color 180ms ease,
    opacity 120ms ease-in,
    visibility 0s linear 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand-wordmark,
  .topbar .brand-product {
    animation: none;
  }

  .sessions-page .sessions-view-controls > .kanban-groupby,
  .sessions-page .sessions-view-controls > .kanban-groupby button {
    transition: none;
  }
}

.v3r-wrap {
  gap: 12px;
}

.v3r-panel,
.v3r-graph-card {
  padding: 12px;
}

.v3r-graph-card {
  background: var(--surface);
}

.v3r-node.st-running .v3r-box,
.v3r-dot.cur.live,
.v3r-edge.live,
.v3r-verdict.vd-live,
.insights-page .insights-metrics,
.insights-page .insights-overview-grid,
.insights-page .insight-panel,
.insights-page .hbfill {
  animation: none;
}

.insights-page .insight-tabs,
.insights-page .detailtabbar {
  gap: 6px;
  border-bottom: 0;
  margin-bottom: 14px;
}

.insights-page .itab,
.insights-page .detailtabbar button {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 0;
}

.insights-page .itab.on,
.insights-page .detailtabbar button.on {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.insights-page .strow,
.insights-page .srow,
.insights-page .rec,
.insights-page .turnrow,
.insights-page .lrow,
.insights-page .ws-panel {
  border-radius: var(--radius-lg);
}

.page :where(
  button:not(.card-act):not(.term-btn):not(.modal-close):not(.skills-help-button):not(.skills-pager-button):not(.kanban-card-act):not(.railnode):not(.gbar),
  .btn-link:not(.card-act):not(.term-btn)
) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-weight: 650;
  line-height: 1;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.page :where(button.primary, .btn-link.primary) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.page :where(button.primary, .btn-link.primary):hover {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 88%, white 12%);
  color: var(--on-accent);
}

.page :where(button.contrast, button.danger) {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: transparent;
  color: var(--danger);
}

.page :where(button.contrast, button.danger):hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}

.page :where(button.ghost, .schedule-actions button, .update-actions button, .roles-editor-actions button:not(.primary):not(.danger), .connector-item-actions button, .connector-url-row button, .connector-copy-button) {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.page :where(button.ghost, .schedule-actions button, .update-actions button, .roles-editor-actions button:not(.primary):not(.danger), .connector-item-actions button, .connector-url-row button, .connector-copy-button):hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.page-heading-actions > button:not(.primary),
.page-heading-actions > .btn-link:not(.primary) {
  min-width: 82px;
  min-height: var(--button-height);
  border-radius: var(--radius-full);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-size: 12px;
}

.page-heading-actions > button:not(.primary):hover,
.page-heading-actions > .btn-link:not(.primary):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.page-heading-actions > .page-primary-action,
.page-heading-actions > button.primary {
  min-height: var(--button-height);
  border-radius: var(--radius-full);
}

.page-heading-actions > .page-primary-action {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.page-heading-actions > .page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.page :where(.segmented, .skills-discovery-tabs, .detailtabbar, .insight-tabs) {
  align-items: center;
}

.page .segmented {
  border-radius: var(--radius-full);
}

.page .segmented button {
  min-height: calc(var(--button-height) - 4px);
  padding: 0 12px;
  border-radius: var(--radius-full);
}

.page > .dashboard-toolbar,
.dashboard-toolbar {
  --dashboard-toolbar-active-bg: color-mix(in srgb, var(--muted) 12%, var(--surface));
  --dashboard-toolbar-active-fg: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-wrap: wrap;
}

:root[data-theme="dark"] .page > .dashboard-toolbar,
:root[data-theme="dark"] .insights-page .insights-filters.dashboard-toolbar,
:root[data-theme="dark"] .sessions-page .sessions-filters.dashboard-toolbar {
  border: 0;
  background: transparent;
}

form.dashboard-toolbar {
  width: 100%;
}

nav.dashboard-toolbar {
  width: fit-content;
}

form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
form.dashboard-toolbar > input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

form.dashboard-toolbar > input[type="search"]:hover:not(:disabled),
form.dashboard-toolbar > input[type="text"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

form.dashboard-toolbar > input[type="search"]:focus,
form.dashboard-toolbar > input[type="text"]:focus {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

#sched-filters > input[type="search"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

#sched-filters > input[type="search"]:focus,
#sched-filters > input[type="search"]:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.dashboard-toolbar > select:not([multiple]),
.dashboard-toolbar > button,
.dashboard-toolbar > .btn-link,
.dashboard-toolbar > .filter-toggle,
.dashboard-toolbar > .sect-sort-menu,
.dashboard-toolbar > .toolbar-status {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-toolbar > select:not([multiple]) {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background-color: var(--surface);
  color: var(--muted);
}

.page form.dashboard-toolbar > select:not([multiple]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar > .sect-sort-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.dashboard-toolbar > .sect-sort-menu > summary {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.dashboard-toolbar > .sect-sort-menu > summary:hover,
.dashboard-toolbar > .sect-sort-menu[open] > summary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar:has(> .sect-sort-menu[open]) {
  position: relative;
  z-index: 1300;
}

.dashboard-toolbar > .sect-sort-menu[open] {
  z-index: 1301;
}

.dashboard-toolbar > .sect-sort-menu .sect-sort-value {
  max-width: 100%;
}

.dashboard-toolbar > .sect-sort-menu > .sect-sort-pop {
  left: 50%;
  z-index: 1302;
  width: 100%;
  min-width: 100%;
  max-width: min(320px, 80vw);
  transform: translateX(-50%);
}

.dashboard-toolbar > button,
.dashboard-toolbar > .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.dashboard-toolbar > button:hover:not(:disabled),
.dashboard-toolbar > .btn-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .page-primary-action,
.dashboard-toolbar > button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.dashboard-toolbar > .page-primary-action:hover:not(:disabled),
.dashboard-toolbar > button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .toolbar-status {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-toolbar > .toolbar-status:empty {
  display: none;
}

.dashboard-toolbar > .toolbar-status.error {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  color: var(--danger);
}

.dashboard-toolbar .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.page form.dashboard-toolbar > .filter-toggle {
  gap: 10px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar .filter-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dashboard-toolbar .filter-toggle span::before {
  content: none;
  display: none;
}

.dashboard-toolbar .filter-toggle-label {
  line-height: 1;
}

.dashboard-toolbar .filter-toggle-switch {
  position: relative;
  flex: none;
  width: 31px;
  height: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}

.dashboard-toolbar .filter-toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--faint);
  transform: translateY(-50%);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.dashboard-toolbar .filter-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  color: var(--accent-strong);
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) {
  border-color: var(--border-soft);
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.roles-page .roles-tree-header.dashboard-toolbar > input[type="search"],
.roles-page .roles-tree-header.dashboard-toolbar > input[type="text"] {
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab.on,
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab[aria-selected="true"],
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab.on:hover,
.page :where(.roles-subnav, .team-subnav, .connectors-subnav).insight-tabs .itab[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.connectors-subnav-slot {
  display: flex;
  justify-content: flex-start;
}

.roles-page .roles-group-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
  overflow: visible;
}

.roles-page .roles-group-row,
.roles-page .roles-bot-row,
.roles-page .roles-profile-row {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transform: none;
}

.roles-page .roles-group-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.roles-page .roles-group-row::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.roles-page .roles-group-row .roles-group-arrow {
  grid-column: 2;
}

.roles-page .roles-group-row .roles-group-icon {
  grid-column: 3;
  display: none;
}

.roles-page .roles-group-row .roles-group-info {
  grid-column: 3;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.roles-page .roles-group-row .roles-group-chevron {
  grid-column: 4;
}

.roles-page .roles-bot-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
  overflow: hidden;
  box-sizing: border-box;
}

.roles-page .roles-bot-list:empty {
  display: none;
}

.roles-page .roles-bot-row {
  min-height: 48px;
  padding: 8px 10px;
}

.roles-page .roles-group-row:hover,
.roles-page .roles-bot-row:hover,
.roles-page .roles-profile-row:hover {
  transform: none;
}

.roles-page .roles-group-row.selected,
.roles-page .roles-bot-row.selected,
.roles-page .roles-profile-row.selected {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-soft));
}

.roles-page .roles-group-row.selected {
  border: 0;
  background: transparent;
}

.roles-page .roles-bot-row.selected {
  padding-left: 10px;
}

.roles-page .roles-profile-row.selected {
  padding-left: 12px;
}

.roles-page .roles-bot-indent {
  display: none;
}

.roles-editor-head,
.roles-profile-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.roles-editor-head > div:first-child,
.roles-profile-editor-head > span:first-child {
  min-width: 0;
}

.roles-editor-head-actions {
  flex: none;
  justify-content: flex-end;
}

.roles-editor-footer {
  gap: 10px;
  justify-content: space-between;
}

.roles-profile-editor .roles-editor-footer {
  min-height: 18px;
  justify-content: flex-end;
}

.roles-editor-actions button.primary {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.roles-editor-actions button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) .filter-toggle-switch {
  border-color: color-mix(in srgb, var(--dashboard-toolbar-active-fg) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--dashboard-toolbar-active-fg) 16%, var(--surface));
}

.dashboard-toolbar:not(.sessions-filters) .filter-toggle:has(input:checked) .filter-toggle-switch::after {
  background: var(--dashboard-toolbar-active-fg);
  transform: translate(13px, -50%);
}

.groups-toolbar {
  align-items: center;
}

.groups-toolbar input[type="search"] {
  flex: 1 1 280px;
  max-width: 460px;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.groups-toolbar input[type="search"]:hover:not(:disabled) {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) !important;
  color: var(--accent-strong);
}

.groups-toolbar input[type="search"]:focus,
.groups-toolbar input[type="search"]:focus-visible {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important;
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.groups-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.groups-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.groups-toolbar #g-refresh {
  flex: none;
}

.dashboard-toolbar > .spanfilter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  margin: 0;
}

.dashboard-toolbar > .spanfilter:empty {
  display: none;
}

.dashboard-toolbar > .spanfilter > .spanchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.dashboard-toolbar > .spanfilter > .spanchip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .spanfilter > .spanchip.on {
  border-color: var(--border-soft);
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.dashboard-toolbar > .spanfilter > .spanchip b {
  color: inherit;
  font-size: inherit;
  font-weight: 800;
}

.dashboard-toolbar > .spanfilter.cli-filter {
  gap: 2px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip:hover {
  border: 0;
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}

.dashboard-toolbar > .spanfilter.cli-filter > .spanchip.on,
.dashboard-toolbar > .spanfilter.cli-filter > .spanchip.on:hover {
  border: 0;
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.dashboard-toolbar .segmented,
.team-subnav.dashboard-toolbar,
.connectors-subnav.dashboard-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  height: var(--button-height);
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}

.dashboard-toolbar .segmented button,
.team-subnav.dashboard-toolbar a,
.connectors-subnav.dashboard-toolbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.dashboard-toolbar .segmented button.active,
.dashboard-toolbar .segmented button[aria-pressed="true"],
.team-subnav.dashboard-toolbar a.active,
.connectors-subnav.dashboard-toolbar a.active {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
  box-shadow: none;
}

.dashboard-toolbar .segmented button:hover,
.team-subnav.dashboard-toolbar a:hover,
.connectors-subnav.dashboard-toolbar a:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.dashboard-toolbar .segmented button.active:hover,
.dashboard-toolbar .segmented button[aria-pressed="true"]:hover,
.team-subnav.dashboard-toolbar a.active:hover,
.connectors-subnav.dashboard-toolbar a.active:hover {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
}

.insights-page .dashboard-toolbar #insight-project {
  width: 190px;
  min-width: 190px;
}

.insights-page .dashboard-toolbar #insight-time {
  width: 132px;
  min-width: 132px;
}

.insights-page .dashboard-toolbar #insight-review-filter {
  width: 136px;
  min-width: 136px;
}

.insights-page .dashboard-toolbar #insight-cli-filter {
  width: 154px;
  min-width: 154px;
}

.sessions-page .sessions-view-controls :is(.kanban-groupby, .sessions-view-toggle) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  gap: 2px;
  border-color: var(--border-soft);
}

.sessions-page .sessions-view-controls :is(.kanban-groupby, .sessions-view-toggle) button {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
}

.page :where(.actions, .update-actions, .schedule-actions, .roles-editor-actions, .connector-item-actions, .connector-edit-actions, .team-manage-actions, .team-role-actions) {
  align-items: center;
  gap: 8px;
}

.page :where(.connector-item-actions, .team-manage-actions, .roles-editor-actions, .update-actions) {
  min-height: var(--button-height);
}

.team-subnav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.team-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.team-subnav a:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}

.team-subnav a.active {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.team-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.team-card h2 {
  margin: 0 !important;
}

.team-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
  font-size: 13px;
}

.tf-team-h,
.team-identity-row,
.team-pull-row,
.team-inline-form,
.team-manage-head,
.team-manage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-identity-row {
  margin: 0;
}

.team-identity-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.team-identity-label::before {
  content: "";
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.team-identity-row #tf-owner {
  color: var(--fg);
}

.team-bind-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-bind-status[hidden] {
  display: none !important;
}

.team-bind-status .ok {
  color: var(--success);
}

.team-bind-status .err {
  color: var(--danger);
}

.tf-team-h {
  cursor: pointer;
}

.tf-team-h b {
  color: var(--fg);
  font-size: 14px;
}

.team-pull-row {
  margin-top: 12px;
}

.team-pull-row .team-group-name-field {
  min-width: 200px;
}

.team-pull-row .tf-gout {
  display: block;
  flex-basis: 100%;
  font-size: 13px;
}

.tf-dep-h {
  margin: 10px 0 2px;
  cursor: pointer;
}

.team-inline-form {
  margin: 0 0 6px;
}

.team-inline-form #tm-newname {
  min-width: 200px;
}

.team-inline-form #tm-hub {
  flex: 1;
  min-width: 240px;
}

.team-inline-form #tm-code {
  min-width: 160px;
}

.team-manage-head b {
  color: var(--fg);
}

.team-manage-actions {
  margin-left: auto;
  gap: 6px;
}

.team-role-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.team-role-modal[hidden] {
  display: none !important;
}

.team-role-dialog {
  display: grid;
  gap: 12px;
  width: min(560px, 92vw);
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--modal-shadow);
}

.team-role-dialog h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}

.team-role-dialog textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  box-sizing: border-box;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  font: 13px/1.5 var(--mono);
}

.team-role-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}

.team-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.connector-section {
  width: 100%;
  max-width: none;
}

.connectors-page {
  gap: 8px;
}

.connector-list-card {
  padding: 16px;
}

.connectors-page .cn-form :is(input, select, textarea),
.connectors-page .cn-edit-instruction {
  width: 100%;
  box-sizing: border-box;
}

.connectors-page .cn-form textarea,
.connectors-page .cn-edit-instruction {
  font-family: inherit;
  font-size: 13px;
}

.connectors-page #cn-chat {
  margin-top: 6px;
}

.connector-item-head,
.connector-url-row,
.connector-item-actions,
.connector-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-item-head b {
  color: var(--fg);
  font-size: 14px;
}

.connector-item-actions {
  margin-left: auto;
}

.connector-url-row {
  margin-top: 8px;
  font-size: 13px;
}

.connector-url-row code {
  font-size: 12px;
  word-break: break-all;
}

.connector-edit-actions {
  margin-top: 8px;
}

.ui-field-title {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
  vertical-align: middle;
}

.ui-field-title-text {
  min-width: 0;
}

.ui-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  cursor: default;
}

.ui-info-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, var(--muted) 38%, var(--border-soft));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

.ui-info-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 1400;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  padding: 9px 12px 9px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.ui-info-pop::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 42%, var(--border-soft)));
}

.ui-info-pop-floating {
  position: fixed;
  bottom: auto;
  z-index: 2147483647;
  opacity: 1;
  /* Interactive: let the pointer reach the popover so its text is selectable /
     copyable (JS keeps it open while hovered). */
  pointer-events: auto;
  user-select: text;
  cursor: text;
  transform: translate(-50%, -100%);
}

.ui-info-pop-floating.ui-info-pop-bottom {
  transform: translate(-50%, 0);
}

.ui-info-tip:hover .ui-info-mark,
.ui-info-tip:focus .ui-info-mark,
.ui-info-tip:focus-within .ui-info-mark {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  color: var(--accent);
}

.ui-info-tip:hover .ui-info-pop,
.ui-info-tip:focus .ui-info-pop,
.ui-info-tip:focus-within .ui-info-pop {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ui-overflow-text {
  container-type: inline-size;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.ui-overflow-text.is-overflowing {
  cursor: default;
}

.ui-overflow-scroll {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.ui-overflow-text.is-overflowing:hover .ui-overflow-scroll {
  max-width: none;
  overflow: visible;
  animation: ui-overflow-text-pan var(--ui-overflow-duration, 5200ms) ease-in-out infinite alternate;
}

.ui-overflow-popover {
  max-width: min(460px, calc(100vw - 48px));
  padding: 9px 12px 9px 18px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}

@keyframes ui-overflow-text-pan {
  0%,
  18% {
    transform: translateX(0);
  }
  82%,
  100% {
    transform: translateX(min(0px, calc(100cqw - 100%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-overflow-text.is-overflowing:hover .ui-overflow-scroll {
    max-width: 100%;
    overflow: hidden;
    animation: none;
    text-overflow: ellipsis;
    transform: none;
  }
}

.skills-defaults-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px 14px;
}

.skills-page .skills-defaults-panel {
  grid-template-columns: 1fr;
  align-items: start;
  align-content: space-between;
  gap: 12px;
}

.skills-page .skills-defaults-panel .skills-control-block + .skills-control-block {
  margin-top: 2px;
  padding-top: 0;
  padding-left: 0;
  border-top: 0;
  border-left: 0;
}

.skills-page .skills-install-panel .skills-install-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: 12px 14px;
}

.skills-page .skills-install-panel .skills-source-label {
  grid-column: 1;
  grid-row: 1;
}

.skills-page .skills-install-panel .skills-install-path-field {
  grid-column: 2;
  grid-row: 1;
}

.skills-page .skills-install-panel .skills-install-ref-field {
  grid-column: 1;
  grid-row: 2;
}

.skills-page .skills-install-panel .skills-install-bottom-row {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.skills-page .skills-install-panel .skills-install-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-content: flex-end;
}

.skills-page .skills-install-panel .skills-local-discovery-panel {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: var(--button-height);
  padding: 8px 10px;
}

.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel div {
  min-width: 0;
}

.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel strong,
.skills-page .skills-install-panel .skills-install-bottom-row .skills-local-discovery-panel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-install-status-row {
  margin: 8px 0 0;
}

.skills-defaults-panel .bd-section-title {
  margin: 0;
}

.skills-segmented-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.skills-segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  overflow-x: auto;
}

.skills-segmented button {
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-segmented button:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}

.skills-segmented button.active,
.skills-segmented button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.skills-setting-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.skills-install-panel .ui-field-title {
  font: inherit;
}

.skills-install-panel .ui-info-pop {
  bottom: auto;
  top: calc(100% + 8px);
  white-space: pre-line;
  transform: translate(-50%, -4px);
}

.skills-install-panel .ui-info-tip:hover .ui-info-pop,
.skills-install-panel .ui-info-tip:focus .ui-info-pop,
.skills-install-panel .ui-info-tip:focus-within .ui-info-pop {
  transform: translate(-50%, 0);
}

.skills-install-grid input,
.skills-attach-row .sect-sort-menu > summary {
  height: var(--button-height);
  min-height: var(--button-height);
  border-radius: var(--radius-full);
}

.skills-install-grid input {
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

.skills-install-grid input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.skills-install-grid input:hover:not(:disabled),
.skills-install-grid input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"] {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none;
}

.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"]:hover:not(:disabled),
.skills-page .skills-install-grid .skills-install-field-wide > input[type="text"]:focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"] {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none !important;
  outline: none;
}

.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"]:hover:not(:disabled),
.skills-page .skills-install-grid .skills-source-label .skills-source-control > input[type="text"]:focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
) {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
):hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-page :where(
  #skills-refresh,
  .skills-install-actions button,
  .skills-local-discovery-panel button,
  .skills-candidate-list-head button,
  .skills-attach-row > button,
  .skills-pager-button,
  .skills-discovery-dialog footer button,
  .skills-card-actions button
):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skills-page .skills-install-actions button[data-action="install"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.skills-page .skills-install-actions button[data-action="install"]:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.skills-attach-menu {
  width: 100%;
  min-width: 0;
}

.skills-attach-menu .sect-sort-value {
  max-width: 100%;
}

.skills-attach-menu > .sect-sort-pop {
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  transform: none;
}

.skills-attach-menu > .sect-sort-pop button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-source-badge,
.skills-count-pill,
.team-count-pill,
.team-meta-pill,
.team-status-pill,
.connector-status-pill,
.connector-item-meta span {
  border-radius: var(--radius-full);
}

.skills-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-soft);
  background: transparent;
}

.skills-card-actions button,
.skills-card-actions button + button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
}

.skills-card-actions button + button {
  border-left: 1px solid var(--border-soft);
}

.skills-card-actions [data-action="remove-skill"] {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border-soft));
  color: var(--danger);
}

.team-card {
  gap: 12px;
}

.team-card-head {
  display: flex;
  align-items: flex-end;
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.team-card-head h2 {
  margin: 0 !important;
}

.team-card-note {
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.team-count-pill,
.team-meta-pill,
.team-status-pill,
.connector-status-pill,
.connector-item-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-count-pill {
  margin-left: auto;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.team-status-pill.ok,
.connector-status-pill.ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-soft));
  background: var(--success-soft);
}

.team-status-pill.err {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border-soft));
  background: var(--danger-soft);
}

.team-filters.dashboard-toolbar,
.team-inline-form.dashboard-toolbar {
  width: 100%;
}

.team-filters.dashboard-toolbar {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.team-filters.dashboard-toolbar input[type="search"],
.team-inline-form.dashboard-toolbar input[type="text"] {
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}

.team-filters.dashboard-toolbar input[type="search"]:hover,
.team-filters.dashboard-toolbar input[type="search"]:focus,
.team-inline-form.dashboard-toolbar input[type="text"]:hover,
.team-inline-form.dashboard-toolbar input[type="text"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.team-page #tf-search {
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.team-page #tf-search:hover:not(:disabled),
.team-page #tf-search:focus,
.team-page #tf-search:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

.team-filters .team-cli-menu {
  width: var(--dropdown-trigger-width);
  min-width: var(--dropdown-trigger-width);
}

.team-page .card label.team-pill-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.team-page .card label.team-pill-field > span {
  flex: none;
  color: var(--muted);
}

.team-page .card label.team-pill-field > input {
  flex: 1 1 140px;
  width: 100%;
  min-width: 0;
  height: calc(var(--button-height) - 2px);
  min-height: calc(var(--button-height) - 2px);
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--fg);
  font: inherit;
  line-height: 1;
  box-shadow: none !important;
  outline: 0;
}

.team-page .card label.team-pill-field > input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.team-page .card label.team-pill-field:hover,
.team-page .card label.team-pill-field:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.team-page .card label.team-pill-field:hover > span,
.team-page .card label.team-pill-field:focus-within > span {
  color: var(--accent-strong);
}

.team-capability-cell .team-cap-field {
  width: 100%;
}

.team-page .card label.filter-toggle,
.team-page .team-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.team-page .card label.filter-toggle:has(input:checked),
.team-page .team-check-pill.selected {
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}

.team-page .team-check-pill {
  box-sizing: border-box;
  width: 12px;
  min-width: 12px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.team-check-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-check-pill .team-check-dot {
  position: relative;
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
}

.team-check-pill.selected {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: var(--surface);
}

.team-check-pill.selected .team-check-dot {
  background: var(--accent);
}

.team-page .card label.team-check-pill {
  box-sizing: border-box;
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface);
}

.team-page .card label.team-check-pill.selected {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-soft));
  background: var(--surface);
  color: var(--accent);
}

.team-page .card label.team-check-pill .team-check-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
}

.tf-team-h,
.tf-dep-h {
  width: 100%;
  min-height: 30px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.tf-team-h::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.tf-team-h > b,
.tf-dep-h > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-team-h .team-chevron,
.tf-dep-h .team-chevron {
  order: 20;
  margin-left: auto;
}

.tf-team-h .team-status-pill,
.tf-team-h .team-meta-pill,
.tf-dep-h .tf-rmmember {
  flex: none;
}

.tf-team-h:hover,
.tf-dep-h:hover {
  background: transparent;
  color: var(--accent-strong);
  transform: none;
}

.team-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  font-size: 0;
  font-weight: 800;
  line-height: 1;
}

.team-chevron::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.tf-team-h[aria-expanded="true"] .team-chevron::before,
.tf-dep-h[aria-expanded="true"] .team-chevron::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.team-list-card {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 42%, var(--surface));
}

.team-deployment-block {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-soft));
  border-radius: 0;
  background: transparent;
}

.team-roster-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
}

.team-bot-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 0.6fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.team-bot-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.team-bot-row.selected {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.team-bot-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.team-bot-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.team-bot-main strong,
.team-bot-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-bot-main span,
.team-capability-cell,
.team-role-cell,
.team-pull-hint {
  color: var(--muted);
  font-size: 12px;
}

.team-capability-cell,
.team-role-cell {
  min-width: 0;
}

.team-pull-row {
  gap: 8px;
}

.team-pull-row .team-group-name-field {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 360px;
}

.team-inline-output {
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.team-inline-output[hidden] {
  display: none !important;
}

.team-join-form #tm-hub {
  flex: 1 1 320px;
  max-width: none;
}

.team-join-form #tm-code {
  flex: 0 1 220px;
}

.team-manage-card {
  padding: 12px;
}

.team-manage-head {
  min-width: 0;
}

.team-manage-actions {
  margin-left: auto;
}

.team-invite-code {
  font-size: 15px;
}

.connectors-page .cn-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
  align-items: start;
  max-width: none;
}

.connectors-page .cn-form > * {
  min-width: 0;
}

.connectors-page .connector-list-card {
  width: 100%;
}

.connectors-page .cn-field,
.connectors-page .cn-field-wide {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.connectors-page .cn-field-wide {
  grid-column: 1 / -1;
}

.connectors-page .cn-form .ui-field-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.connectors-page .cn-form :is(input, textarea),
.connectors-page .connector-form-menu > summary,
.settings-field-menu > summary,
.settings-card .maint-time input,
.settings-card .settings-pill-input {
  border-radius: var(--radius-full);
}

.connectors-page .cn-form :is(input, textarea) {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
}

.connectors-page .cn-form input,
.connectors-page .connector-form-menu > summary,
.settings-field-menu > summary,
.settings-card .maint-time input,
.settings-card .settings-pill-input {
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: 12px;
  font-weight: 700;
}

.settings-card .maint-time input,
.settings-card .settings-pill-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  line-height: normal;
  outline: none;
  box-shadow: none;
}

.settings-card .settings-pill-input::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.settings-card .maint-time input:hover:not(:disabled),
.settings-card .maint-time input:focus,
.settings-card .settings-pill-input:hover:not(:disabled),
.settings-card .settings-pill-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]) {
  box-sizing: border-box;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--fg);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"])::placeholder {
  color: var(--faint);
  font-weight: 600;
}

.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]):hover:not(:disabled),
.connectors-page .cn-form .cn-field > :where(input:not([type]), input[type="text"]):focus {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  color: var(--accent-strong);
  box-shadow: none !important;
}

.connectors-page .cn-form textarea {
  min-height: 92px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
}

.connectors-page .connector-form-menu,
.settings-field-menu {
  width: 100%;
  min-width: 0;
}

.connectors-page .connector-form-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
}

.settings-field-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
}

.connectors-page .connector-form-menu .sect-sort-value,
.settings-field-menu .sect-sort-value {
  max-width: 100%;
}

.connectors-page .connector-form-menu .sect-sort-pop,
.settings-field-menu .sect-sort-pop {
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  transform: none;
}

.settings-field-menu .sect-sort-pop button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-chat-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.connector-inline-link {
  display: inline-flex;
  margin-top: 0;
  text-decoration: none;
}

.connector-inline-link:hover {
  text-decoration: none;
}

.connector-group-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

.connector-group-picker-trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.connector-group-picker-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-group-picker-trigger:hover,
.connector-group-picker.open .connector-group-picker-trigger {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  transform: none;
}

.connector-group-picker-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.connector-group-picker.open .connector-group-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.connector-group-picker-popover {
  position: absolute;
  z-index: 1600;
  top: calc(100% + 7px);
  left: 0;
  box-sizing: border-box;
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: min(360px, calc(100vw - 64px));
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.connector-group-search {
  position: relative;
  display: block;
}

.connectors-page .cn-form .connector-group-search > input[type="search"] {
  height: 34px;
  min-height: 34px;
  padding: 0 12px 0 34px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.connector-group-search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}

.connector-group-search-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: left center;
}

.connector-group-options {
  display: grid;
  gap: 3px;
  max-height: 228px;
  overflow-y: auto;
}

.connector-group-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.connector-group-option:hover,
.connector-group-option.selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.connector-group-option > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.connector-group-option b,
.connector-group-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connector-group-option b { font-size: 12px; }
.connector-group-option small { color: var(--muted); font-size: 10.5px; font-weight: 600; }

.connector-group-check {
  position: relative;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.connector-group-option.selected .connector-group-check {
  border-color: var(--accent);
  background: var(--accent);
}

.connector-group-option.selected .connector-group-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(45deg);
}

.connector-group-option-all {
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.connector-group-empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.connector-new-group-config {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

.connector-strategy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.connector-strategy-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  box-shadow: none;
}

.connector-strategy-option:hover,
.connector-strategy-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: none;
}

.connector-strategy-option > span:last-child { display: grid; gap: 4px; min-width: 0; }
.connector-strategy-option b { color: var(--fg); font-size: 12px; }
.connector-strategy-option small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }

.connector-strategy-radio {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.connector-strategy-option.selected .connector-strategy-radio {
  border: 4px solid var(--accent);
}

.connector-dedup-field { display: grid; gap: 7px; }

.connector-new-group-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.cn-optional {
  margin-left: 4px;
  font-weight: 600;
}

.connector-form-hint {
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.connector-log-policy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  cursor: pointer;
}
.connector-log-policy input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
.connector-log-policy > span { display: grid; gap: 4px; }
.connector-log-policy strong { color: var(--fg); font-size: 12px; }
.connector-log-policy small { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.45; }

.connector-created-wrap {
  margin-top: 12px;
}

.connector-list-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.connector-list-card:has(> .connector-list-loading) {
  grid-template-rows: minmax(0, 1fr);
}

.connector-list-loading {
  min-height: 220px;
}

.connector-list-card:has(.connector-list-empty) {
  place-content: center;
  place-items: center;
}

.connector-list-empty {
  margin: 0;
  text-align: center;
}

.connector-created-card,
.connector-item-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  background: var(--surface);
}

.connector-created-title,
.connector-created-line,
.connector-created-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.connector-created-title {
  font-size: 13px;
  font-weight: 700;
}

.connector-created-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}

.connector-created-line code,
.connector-created-card pre,
.connector-url-row code {
  word-break: break-all;
}

.connector-created-card pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  font-size: 12px;
  white-space: pre-wrap;
}

.connector-item-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.connector-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.connector-item-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.connector-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.connector-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 0;
  flex-wrap: wrap;
}

.connector-url-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.connector-item-title .connector-status-pill {
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  min-width: 48px;
  padding: 0 9px;
}

.connector-copy-button {
  justify-self: end;
  white-space: nowrap;
}

.connector-copy-button.copied,
.connector-copy-button.copied:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--success) 48%, var(--border-soft));
  background: var(--success-soft);
  color: var(--success);
  transform: none;
}

.connector-item-note,
.connector-edit-actions span {
  font-size: 12px;
  line-height: 1.45;
}

.cn-edit-box {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

@media (min-width: 981px) {
  main:has(.connectors-page) {
    padding-bottom: 0;
    overflow: hidden;
  }

  main:has(.connectors-page) .connectors-page {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .connectors-page .connector-list-section,
  .connectors-page .connector-list-card {
    min-height: 0;
  }

  .connectors-page .connector-list-section {
    display: grid;
  }

  .connectors-page .connector-list-card {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .connectors-page .connector-list-card > .connector-list-loading {
    height: 100%;
    min-height: 0;
  }
}

.connector-create-modal {
  width: min(840px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
  overflow: hidden;
}

.connector-create-modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.connector-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.connector-modal-header {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 12px 18px 8px;
}

.connector-modal-header h3 {
  grid-column: 2;
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

.connector-modal-header h3::before {
  content: none;
}

.connector-modal-close {
  position: relative;
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.connector-modal-close > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-0.5px);
}

.connector-modal-close:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.connector-modal-body {
  min-height: 0;
  padding: 4px 18px 0;
  overflow-y: auto;
}

.connector-modal-body .connector-created-wrap {
  margin-top: 0;
}

.connector-create-modal #cn-verify[open] {
  z-index: 1500;
}

.connector-create-modal #cn-verify .sect-sort-pop {
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 1501;
}

.connector-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
}

.connector-modal-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.connector-create-message {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.connector-create-message.err {
  color: var(--danger);
}

@media (max-width: 720px) {
  .connector-create-modal {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .connector-modal-card {
    max-height: calc(100dvh - 24px);
  }

  .connector-modal-header,
  .connector-modal-actions {
    padding-right: 14px;
    padding-left: 14px;
  }

  .connector-modal-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .connectors-page .cn-form {
    grid-template-columns: 1fr;
  }

  .connector-strategy-options {
    grid-template-columns: 1fr;
  }

  .connector-group-picker-popover {
    min-width: 100%;
  }
}

.settings-grid {
  display: grid;
  align-items: stretch;
  gap: 18px;
  max-width: none;
  min-width: 0;
}

.settings-layout {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.settings-page .settings-primary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  width: 100%;
  max-width: none;
}

.settings-page .settings-primary-grid > .settings-block {
  grid-column: span 2;
}

.settings-page .settings-primary-grid > .settings-block:nth-of-type(5) {
  grid-column: span 4;
}

.settings-page .settings-secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  width: 100%;
  max-width: none;
}

.settings-group {
  min-width: 0;
  width: 100%;
}

.settings-group-card {
  display: grid;
  align-items: stretch;
  gap: 18px;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 16px;
  box-sizing: border-box;
  overflow: visible;
}

.settings-group-main .settings-group-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-group-main .settings-vc-block {
  grid-column: span 2;
}

.settings-group-ops .settings-group-card {
  grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
}

.settings-group-card > .settings-block {
  min-height: 0;
}

.settings-group-card > .settings-block > .settings-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.settings-group-main .settings-card {
  align-content: start;
}

.settings-vc-block .settings-card {
  grid-template-columns: max-content minmax(280px, 1fr);
  align-items: center;
  column-gap: 18px;
}

.settings-vc-block .settings-block-title-row {
  grid-column: 1 / -1;
}

.settings-vc-block .settings-field-row {
  grid-template-columns: auto minmax(190px, 1fr);
}

.settings-vc-block .settings-lark-cli-status,
.settings-vc-block .settings-feishu-login {
  grid-column: 1 / -1;
}

.settings-lark-cli-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  padding: 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.settings-lark-cli-status > span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-full);
  background: currentColor;
}

.settings-lark-cli-status strong {
  min-width: 0;
  font-weight: 700;
}

.settings-lark-cli-status code {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  font-size: 10.5px;
}

.settings-lark-cli-status.is-ready {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  color: var(--success);
}

.settings-lark-cli-status.is-warning {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
}

.settings-feishu-login {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.settings-feishu-login p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.settings-feishu-login img {
  display: block;
  width: min(200px, 60vw);
  height: auto;
  border: 8px solid var(--qr-surface);
  border-radius: var(--radius-lg);
  background: var(--qr-surface);
}

.settings-feishu-login-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
}

.settings-feishu-login-close::before,
.settings-feishu-login-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
}

.settings-feishu-login-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.settings-feishu-login-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.settings-feishu-login-close:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.settings-alert-card,
.settings-status-row {
  grid-column: 1 / -1;
}

.settings-block {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.settings-block > .sect-head {
  height: var(--section-title-row-height);
  min-height: var(--section-title-row-height);
}

.settings-card {
  display: grid;
  row-gap: 8px;
  column-gap: 12px;
  padding: 16px;
  overflow: visible;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  box-sizing: border-box;
  align-content: start;
}

.settings-page .settings-primary-grid .settings-card {
  align-content: center;
}

.settings-card .bd-section-title {
  margin: 0;
}

.settings-block-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.settings-block-title-extra {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
}

.settings-title-note {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: min(520px, 100%);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.skills-page .bd-section-title::before,
.skills-page .sect-head h2::before,
.team-page .sect-head h2::before,
.connectors-page .sect-head h2::before {
  width: 3px;
  height: 14px;
  flex: 0 0 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.settings-page .bd-section-title::before,
.page.settings-page .settings-card > .bd-section-title::before {
  width: var(--section-title-dot-size);
  height: var(--section-title-dot-size);
  flex: 0 0 var(--section-title-dot-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 88%, #fff) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 38%, var(--border)));
}

.settings-card .toggle-row {
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
}

.settings-card .toggle-row:first-of-type {
  border-top: 0;
}

.settings-card .toggle-row input:checked + .switch {
  box-shadow: none;
}

.settings-card .toggle-tx strong {
  display: block;
  font-size: 12.5px;
}

.settings-card .toggle-tx {
  min-width: 0;
}

.settings-card .toggle-tx strong {
  overflow-wrap: anywhere;
}

.settings-card .settings-toggle-title {
  font-weight: 700;
}

.settings-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.settings-field-row .ui-field-title {
  min-width: 0;
}

.settings-maintenance-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.settings-maintenance-update,
.settings-maintenance-restart {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.settings-maintenance-update {
  grid-template-columns: max-content auto;
  align-items: center;
  justify-content: start;
  column-gap: 16px;
}

.settings-maintenance-grid .toggle-row {
  border-top: 0;
}

.settings-card .maint-time label {
  display: grid;
  grid-template-columns: auto minmax(160px, 220px);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-page .settings-card .maint-time input[type="time"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full) !important;
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.settings-page .settings-text-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.settings-page .settings-text-input:disabled { opacity: 0.5; }

.settings-page .settings-subfield {
  display: grid;
  gap: 8px;
  padding: 8px 0 2px;
  min-width: 0;
}
.settings-page .settings-subfield-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-all;
}
.settings-page .settings-inline-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  word-break: break-all;
}
.settings-page .settings-inline-link:disabled { opacity: 0.5; cursor: default; }

.settings-page .settings-card .maint-time input[type="time"]:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-muted));
  color: var(--muted);
}

.settings-page .settings-card .maint-time input[type="time"]::-webkit-date-and-time-value {
  min-height: var(--button-height);
  line-height: var(--button-height);
  text-align: left;
}

.settings-page .settings-card .maint-time input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.72;
}

.settings-update-block .settings-card {
  display: flex;
  flex-direction: column;
}

.settings-update-block .update-version {
  min-height: 42px;
  margin: 0;
  align-items: center;
}

.settings-update-block .hint-warn {
  margin: 4px 0 0;
}

.settings-update-block .update-actions {
  justify-content: flex-end;
  align-self: flex-end;
  min-height: 42px;
  margin-top: 0;
}

.settings-status-row {
  min-height: 24px;
}

.settings-status-row .oncall-status:empty {
  display: none;
}

.update-actions .page-primary-action {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.update-actions .page-primary-action:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.office-load-button {
  border-radius: var(--radius-full);
}

.office-frame-shell {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #0b0d12;
}

.office-game-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: #0b0d12;
}

main:has(.office-frame-shell) {
  padding-bottom: 0;
  overflow: hidden;
}

input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  margin-bottom: 12px;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
input.office-proxy-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

@media (max-width: 980px) {
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-heading > :first-child,
  .skills-section-head > div:first-child {
    display: grid;
    align-items: start;
    gap: 4px;
  }

  .page-heading p:not(.eyebrow),
  .skills-section-head p {
    max-width: 100%;
    margin: 0;
  }

  .page :where(.bd-section-title, .bd-subsection-title) + .bd-section-note {
    display: block;
    max-width: 100%;
    margin: 6px 0 0;
  }

  .page-heading-actions,
  .insight-head-acts {
    width: 100%;
    justify-content: flex-start;
  }

  .connectors-page .cn-form,
  .settings-grid,
  .wb-split {
    grid-template-columns: 1fr;
  }

  .settings-page .settings-primary-grid,
  .settings-page .settings-secondary-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .settings-group-main .settings-group-card,
  .settings-group-ops .settings-group-card {
    grid-template-columns: 1fr;
  }

  .settings-group-main .settings-vc-block {
    grid-column: 1 / -1;
  }

  .settings-vc-block .settings-card,
  .settings-vc-block .settings-field-row {
    grid-template-columns: 1fr;
  }

  .settings-lark-cli-status {
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .settings-lark-cli-status code {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-block-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .settings-block-title-extra {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .settings-title-note {
    max-width: 100%;
    text-align: left;
  }

  .settings-page .settings-primary-grid > .settings-block,
  .settings-page .settings-primary-grid > .settings-block:nth-of-type(5) {
    grid-column: 1 / -1;
  }

  .settings-field-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-maintenance-grid {
    grid-template-columns: 1fr;
  }

  .settings-maintenance-update {
    grid-template-columns: 1fr;
  }

  .connectors-page .cn-form > label,
  .connectors-page .cn-field {
    margin-top: 2px;
  }

  .team-bot-row,
  .connector-url-row,
  .connector-chat-control {
    grid-template-columns: 1fr;
  }

  .team-check-pill,
  .connector-item-actions,
  .team-manage-actions {
    margin-left: 0;
  }
}

/* ── Webhook invocation logs ─────────────────────────────────────────────── */
.webhook-logs-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.webhook-logs-panel {
  height: 100%;
  overflow: hidden;
}

.webhook-log-heading-copy {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.webhook-log-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--button-height);
  padding: 0 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.webhook-log-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
}

.webhook-log-live.refreshing i {
  animation: webhook-log-pulse 900ms ease-in-out infinite alternate;
}

@keyframes webhook-log-pulse {
  to { opacity: .4; transform: scale(.76); }
}

.webhook-log-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.webhook-log-metric {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 13px 15px;
  overflow: hidden;
}

.webhook-log-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: .7;
}

.webhook-log-metric.ok::before { background: var(--success); }
.webhook-log-metric.error::before { background: var(--danger); }
.webhook-log-metric > span,
.webhook-log-metric > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-metric > strong {
  color: var(--fg);
  font-size: 23px;
  line-height: 1.15;
}
.webhook-log-metric.error > strong { color: var(--danger); }

.webhook-logs-content form.webhook-log-toolbar {
  display: grid;
  grid-template-columns: minmax(340px, 1.6fr) minmax(180px, 0.72fr) minmax(150px, 0.62fr) minmax(170px, 0.72fr) auto;
  gap: 8px;
  margin: 0;
  padding-block: 4px;
}

.webhook-logs-content form.webhook-log-toolbar > input[type="search"] {
  width: 100%;
  min-width: 0;
}

.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu {
  width: 100%;
  min-width: 0;
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu > summary {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
  padding-block: 2px;
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu .sect-sort-value {
  max-width: calc(100% - 2px);
}
.webhook-logs-content form.webhook-log-toolbar > .webhook-log-filter-menu .sect-sort-pop {
  left: 0;
  width: max(100%, 220px);
  min-width: 100%;
  transform: none;
}
.webhook-log-refresh { white-space: nowrap; }
.webhook-log-error { margin: 0; }

.webhook-log-workspace {
  display: grid;
  grid-template-columns: minmax(350px, 430px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 520px;
}

.webhook-log-list-panel,
.webhook-log-detail-panel {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.webhook-log-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.webhook-log-panel-head {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
}
.webhook-log-panel-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.webhook-log-panel-head strong { font-size: 13px; }
.webhook-log-panel-head span { color: var(--muted); font-size: 11.5px; }

.webhook-log-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

button.webhook-log-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  box-shadow: none;
  text-align: left;
}
button.webhook-log-row:hover,
button.webhook-log-row.active {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: none;
}
button.webhook-log-row.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.webhook-log-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--faint);
}
.webhook-log-status-dot.ok { background: var(--success); }
.webhook-log-status-dot.error { background: var(--danger); }
.webhook-log-row-main { display: grid; gap: 6px; min-width: 0; }
.webhook-log-row-title,
.webhook-log-row-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.webhook-log-row-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-row-title code {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}
.webhook-log-row-meta {
  color: var(--muted);
  font-size: 10.5px;
}
.webhook-log-row-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-row-result { display: grid; justify-items: end; gap: 5px; }
.webhook-log-row-result b { color: var(--muted); font-size: 12px; }
.webhook-log-row-result b.ok { color: var(--success); }
.webhook-log-row-result b.error { color: var(--danger); }
.webhook-log-row-result small { color: var(--muted); font-size: 10.5px; }
.webhook-log-more { margin: 10px auto; }

.webhook-log-empty {
  display: grid;
  place-content: center;
  place-items: center;
  gap: 7px;
  min-height: 220px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.webhook-log-empty > span { color: var(--accent); font-size: 26px; }
.webhook-log-empty strong { color: var(--fg); font-size: 13px; }
.webhook-log-empty p { max-width: 360px; margin: 0; font-size: 12px; }

.webhook-log-detail-panel {
  overflow-y: auto;
}
.webhook-log-detail-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
}
.webhook-log-detail-head > div { display: grid; gap: 5px; min-width: 0; }
.webhook-log-detail-head h2 { margin: 0; font-size: 17px; }
.webhook-log-detail-head p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-result-pill {
  justify-self: start;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}
.webhook-log-result-pill.ok { background: var(--success-soft); color: var(--success); }
.webhook-log-result-pill.error { background: var(--danger-soft); color: var(--danger); }

.webhook-log-failure {
  display: grid;
  gap: 4px;
  margin: 14px 16px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}

.webhook-log-detail-section {
  display: grid;
  gap: 9px;
  margin: 0 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}
.webhook-log-detail-section:last-child { border-bottom: 0; padding-bottom: 18px; }
.webhook-log-detail-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
}
.webhook-log-detail-section h3 small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.webhook-log-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.webhook-log-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.webhook-log-facts dt { color: var(--muted); font-size: 10.5px; }
.webhook-log-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-facts code { padding: 0; background: transparent; font-size: 10.5px; }

.webhook-log-target-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.webhook-log-target-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.webhook-log-target-facts dt { color: var(--muted); font-size: 10.5px; }
.webhook-log-target-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-log-target-facts code {
  padding: 0;
  background: transparent;
  font-size: 10.5px;
  white-space: normal;
  word-break: break-word;
}

.webhook-log-json {
  box-sizing: border-box;
  max-height: 300px;
  margin: 0;
  padding: 11px 12px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
}
.webhook-log-json.full-height {
  max-height: none;
}
.webhook-log-detail-empty { margin: 0; color: var(--muted); font-size: 12px; }

@media (min-width: 981px) {
  main:has(.webhook-logs-page) {
    padding-bottom: 0;
    overflow: hidden;
  }
  main:has(.webhook-logs-page) .webhook-logs-page {
    height: 100%;
    overflow: hidden;
  }
  .webhook-log-workspace {
    flex: 1 1 0;
    min-height: 0;
  }
}

@media (max-width: 1200px) {
  .webhook-logs-content form.webhook-log-toolbar { grid-template-columns: minmax(220px, 1fr) 170px 140px 155px auto; }
  .webhook-log-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-log-target-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .webhook-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-logs-content form.webhook-log-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .webhook-logs-content form.webhook-log-toolbar > input[type="search"] { grid-column: 1 / -1; }
  .webhook-log-workspace { grid-template-columns: 1fr; }
  .webhook-log-list-panel { max-height: 520px; }
  .webhook-log-detail-panel { max-height: none; }
  .webhook-log-detail-head { position: static; }
}

@media (max-width: 600px) {
  .webhook-log-metrics,
  .webhook-logs-content form.webhook-log-toolbar,
  .webhook-log-facts,
  .webhook-log-target-facts { grid-template-columns: 1fr; }
  .webhook-logs-content form.webhook-log-toolbar > input[type="search"] { grid-column: auto; }
  .webhook-log-live { display: none; }
  .webhook-log-detail-head { grid-template-columns: 1fr; }
  .webhook-log-detail-head > button { justify-self: start; }
}

/* ════════════════════════════════════════════════════════════════════════════
   "2077" CYBERPUNK SKIN
   Distilled from the kaboo webui (frontend/src/styles/cyberpunk.css). The whole
   dashboard is variable-driven, so re-pointing the design tokens under
   :root[data-skin="cyber"] re-skins every component; the rest of this section
   adds the neon flourishes (grid, scanlines, data-rain, glow, sharp corners).
   Placed last in the file so it wins over the light/dark token blocks via source
   order (equal specificity). The light/dark mode is intentionally ignored here —
   2077 ships its own dark neon palette.
   ════════════════════════════════════════════════════════════════════════════ */

:root[data-skin="cyber"] {
  color-scheme: dark;
  --bg: hsl(240 44% 6%);
  --bg-soft: hsl(240 40% 8%);
  --surface: hsl(236 40% 9% / 0.72);
  --surface-raised: hsl(238 42% 12% / 0.84);
  --surface-muted: hsl(236 30% 14% / 0.7);
  --fg: hsl(188 72% 88%);
  --muted: hsl(196 30% 64%);
  --faint: hsl(196 22% 52%);
  --border: hsl(196 82% 44% / 0.5);
  --border-soft: hsl(196 70% 40% / 0.3);
  --accent: hsl(186 100% 56%);
  --accent-strong: hsl(186 100% 72%);
  --accent-soft: hsl(186 100% 52% / 0.16);
  --success: hsl(150 85% 58%);
  --success-soft: hsl(150 85% 50% / 0.16);
  --warning: hsl(56 97% 60%);
  --warning-soft: hsl(56 97% 52% / 0.16);
  --danger: hsl(330 100% 64%);
  --danger-soft: hsl(330 100% 58% / 0.18);
  --on-accent: hsl(240 60% 6%);
  --on-danger: hsl(240 60% 6%);
  --modal-shadow: 0 24px 80px hsl(240 70% 2% / 0.7), 0 0 36px hsl(186 100% 52% / 0.18);
  --modal-backdrop: hsl(240 60% 3% / 0.72);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(240 70% 3% / 0.55), 0 0 0 1px hsl(186 100% 52% / 0.06);
  --radius: 4px;
}

:root[data-skin="cyber"] body {
  background-color: hsl(240 46% 5%);
  background-image: linear-gradient(
    180deg,
    hsl(240 44% 6%) 0%,
    hsl(252 46% 4%) 58%,
    hsl(240 48% 5%) 100%
  );
  background-attachment: fixed;
  color: var(--fg);
}

/* Lift the real UI above the fixed FX layer (the FX sits at z-index:0). */
:root[data-skin="cyber"] .app-shell {
  position: relative;
  z-index: 1;
}

/* ── Fixed background FX: neon grid + glow + scanlines + vignette + data-rain ─ */
.cyber-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cyber-fx-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 112%, hsl(186 100% 52% / 0.18), transparent 44%),
    radial-gradient(ellipse at 16% 104%, hsl(330 100% 58% / 0.16), transparent 42%),
    linear-gradient(0deg, hsl(56 97% 52% / 0.05), transparent 28%),
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 44px);
  opacity: 0.85;
}

.cyber-fx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    hsl(186 100% 52% / 0.04) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.6;
}

/* CRT vignette darkens the corners. */
.cyber-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, transparent 55%, hsl(240 70% 3% / 0.6) 100%);
}

.cyber-rain {
  position: absolute;
  inset: 0;
}

.cyber-rain-col {
  position: absolute;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--mono);
  font-size: var(--sz, 14px);
  line-height: 1;
  letter-spacing: 1px;
  color: hsl(var(--rc, 186 100% 60%));
  opacity: var(--op, 0.4);
  text-shadow: 0 0 6px hsl(var(--rc, 186 100% 60%) / 0.7);
  white-space: nowrap;
  /* bright leading glyph (bottom) → fading trail (top) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #fff 100%);
  animation: cyber-rain-fall var(--dur, 8s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

@keyframes cyber-rain-fall {
  from { transform: translateY(-115%); }
  to { transform: translateY(115vh); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-rain-col { animation: none; opacity: 0.12; }
}

/* ── Chrome: glassy neon sidebar + topbar ───────────────────────────────────*/
:root[data-skin="cyber"] .sidebar {
  background: hsl(240 40% 7% / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-right-color: hsl(186 90% 50% / 0.28);
}

:root[data-skin="cyber"] .topbar {
  background: hsl(240 40% 6% / 0.7);
  border-bottom-color: hsl(186 90% 50% / 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

:root[data-skin="cyber"] .brand-mark {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(330 100% 60%));
  color: hsl(240 60% 6%);
  border-radius: 4px;
  box-shadow: 0 0 14px hsl(186 100% 52% / 0.5);
}

:root[data-skin="cyber"] .brand strong {
  font-family: var(--mono);
  letter-spacing: 1px;
  text-shadow: 0 0 12px hsl(186 100% 60% / 0.45);
}

/* ── Navigation: neon active rail ───────────────────────────────────────────*/
:root[data-skin="cyber"] .sidebar-nav a:hover {
  background: hsl(186 100% 52% / 0.08);
  color: var(--accent-strong);
}

:root[data-skin="cyber"] .sidebar-nav a.active {
  background: transparent;
  color: hsl(186 100% 74%);
  box-shadow: none;
}

:root[data-skin="cyber"] .sidebar-nav a.active::before {
  background: linear-gradient(135deg, hsl(186 80% 26% / 0.45), hsl(330 70% 24% / 0.3));
}

/* ── Headings ───────────────────────────────────────────────────────────────*/
:root[data-skin="cyber"] .page-heading h1 {
  font-family: var(--mono);
  text-shadow: 0 0 18px hsl(186 100% 60% / 0.35);
}

:root[data-skin="cyber"] .eyebrow {
  color: var(--warning) !important;
  text-shadow: 0 0 10px hsl(56 97% 60% / 0.4);
}

/* ── Cards & metrics: faint inner neon edge + glowing figures ────────────────*/
:root[data-skin="cyber"] .panel,
:root[data-skin="cyber"] .metric-card,
:root[data-skin="cyber"] .bd-card {
  border-color: hsl(196 82% 44% / 0.4);
  box-shadow: var(--shadow), inset 0 1px 0 hsl(186 100% 60% / 0.07);
}

:root[data-skin="cyber"] .metric-card strong {
  color: var(--accent-strong);
  text-shadow: 0 0 14px hsl(186 100% 60% / 0.4);
}

/* ── Primary actions: neon gradient ─────────────────────────────────────────*/
:root[data-skin="cyber"] .btn-link.primary,
:root[data-skin="cyber"] button.primary {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(56 97% 56%));
  color: hsl(240 60% 6%);
  border-color: hsl(186 100% 56%);
  box-shadow: 0 0 16px hsl(186 100% 52% / 0.3);
}

/* ── Segmented switchers (incl. the skin switcher itself) ────────────────────*/
:root[data-skin="cyber"] .segmented {
  border-color: hsl(186 80% 46% / 0.35);
  background: hsl(240 36% 9% / 0.6);
}

:root[data-skin="cyber"] .segmented button.active {
  background: linear-gradient(135deg, hsl(186 100% 52%), hsl(186 100% 62%));
  color: hsl(240 60% 6%);
  box-shadow: 0 0 12px hsl(186 100% 52% / 0.35);
}

:root[data-skin="cyber"] .sessions-page {
  --sessions-switch-active-fg: var(--brand-accent);
}

:root[data-skin="cyber"] .dashboard-toolbar {
  --dashboard-toolbar-active-fg: var(--brand-accent);
}

:root[data-skin="cyber"] .sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button.active,
:root[data-skin="cyber"] .sessions-page .sessions-view-controls :where(.kanban-groupby, .sessions-view-toggle) button[aria-pressed="true"] {
  background: var(--sessions-switch-active-bg);
  color: var(--sessions-switch-active-fg);
  box-shadow: none;
}

:root[data-skin="cyber"] .dashboard-toolbar .segmented button.active,
:root[data-skin="cyber"] .dashboard-toolbar .segmented button[aria-pressed="true"],
:root[data-skin="cyber"] .team-subnav.dashboard-toolbar a.active {
  background: var(--dashboard-toolbar-active-bg);
  color: var(--dashboard-toolbar-active-fg);
  box-shadow: none;
}

/* CLI badges: fold the light hard-coded palette into the neon surface tokens
   (mirrors the existing dark-theme treatment). */
:root[data-skin="cyber"] .cli-claude-code,
:root[data-skin="cyber"] .cli-codex,
:root[data-skin="cyber"] .cli-codex-app,
:root[data-skin="cyber"] .cli-cursor,
:root[data-skin="cyber"] .cli-gemini,
:root[data-skin="cyber"] .cli-opencode,
:root[data-skin="cyber"] .cli-mtr,
:root[data-skin="cyber"] .cli-hermes,
:root[data-skin="cyber"] .cli-mira,
:root[data-skin="cyber"] .cli-pi,
:root[data-skin="cyber"] .cli-aiden,
:root[data-skin="cyber"] .cli-coco {
  background: var(--surface-muted);
  color: var(--fg);
  border-color: var(--border);
}

/* Themed form controls in 2077 — inner glow + accent-cyan focus ring. */
:root[data-skin="cyber"] input:not([type=checkbox]):not([type=radio]),
:root[data-skin="cyber"] select,
:root[data-skin="cyber"] textarea {
  background-color: hsl(240 36% 9% / 0.7);
  box-shadow: inset 0 0 12px hsl(186 100% 52% / 0.06);
}
:root[data-skin="cyber"] input:focus,
:root[data-skin="cyber"] select:focus,
:root[data-skin="cyber"] textarea:focus {
  box-shadow: 0 0 0 3px hsl(186 100% 52% / 0.18), 0 0 14px hsl(186 100% 52% / 0.25);
}

/* ════════════════════════════════════════════════════════════════════════════
   2077 MOTION FX — CRT flicker / roll line, HUD frame, random glitches, and the
   KIROSHI NETLINK boot loader. Ported from kaboo's cyberpunk.css. DOM nodes are
   injected by cyber-fx.ts only while the skin is active.
   ════════════════════════════════════════════════════════════════════════════ */

/* CRT flicker + scrolling roll line (inside the behind-content #cyber-fx). */
.cyber-flicker {
  position: absolute;
  inset: 0;
  background: hsl(186 100% 52% / 0.04);
  mix-blend-mode: screen;
  animation: cyber-flicker 0.18s steps(2, end) infinite;
}

@keyframes cyber-flicker {
  0% { opacity: 0.85; }
  100% { opacity: 0.42; }
}

.cyber-rollline {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, hsl(330 100% 64% / 0.5), transparent);
  box-shadow: 0 0 12px hsl(330 100% 64% / 0.4);
  opacity: 0.5;
  animation: cyber-roll 9s linear infinite;
}

@keyframes cyber-roll {
  0% { transform: translateY(-6vh); opacity: 0; }
  8% { opacity: 0.5; }
  60% { opacity: 0.5; }
  72%, 100% { transform: translateY(112vh); opacity: 0; }
}

/* Full-screen HUD corner brackets + NETWATCH tag (above content). */
.cyber-hud {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.cyber-hud-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid hsl(186 100% 60% / 0.55);
  opacity: 0.7;
  filter: drop-shadow(0 0 6px hsl(186 100% 52% / 0.4));
}

.cyber-hud-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.cyber-hud-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.cyber-hud-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.cyber-hud-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.cyber-hud-tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: hsl(56 97% 64% / 0.6);
  text-shadow: 0 0 8px hsl(56 97% 52% / 0.5);
}

/* Random page-glitch overlay (above content); cp-fx-* on <body> drive it. */
.cyber-glitch {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}

body.cp-fx-tear .cyber-glitch {
  background: linear-gradient(
    180deg,
    transparent 0 46%,
    hsl(330 100% 60% / 0.6) 46% 48%,
    hsl(186 100% 60% / 0.6) 48% 50%,
    hsl(56 96% 58% / 0.45) 50% 52%,
    transparent 52%
  );
  animation: cp-fx-tear 0.4s steps(2, end);
}

@keyframes cp-fx-tear {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.9; transform: translateY(-26vh) translateX(-8px); }
  35% { opacity: 0.5; transform: translateY(28vh) translateX(9px); }
  55% { opacity: 0.85; transform: translateY(8vh) translateX(-5px); }
  75% { opacity: 0.4; transform: translateY(-14vh) translateX(6px); }
  100% { opacity: 0; transform: translateY(40vh); }
}

body.cp-fx-invert .cyber-glitch {
  mix-blend-mode: difference;
  background: hsl(186 100% 60%);
  animation: cp-fx-invert 0.22s steps(1, end);
}

@keyframes cp-fx-invert {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.95; }
  50% { opacity: 0.1; }
  75% { opacity: 0.7; }
}

body.cp-fx-blackout .cyber-glitch {
  mix-blend-mode: normal;
  background: hsl(240 40% 2%);
  animation: cp-fx-blackout 0.26s steps(1, end);
}

@keyframes cp-fx-blackout {
  0%, 100% { opacity: 0; }
  18% { opacity: 0.92; }
  34% { opacity: 0.08; }
  52% { opacity: 0.85; }
  70% { opacity: 0; }
}

body.cp-fx-shake main { animation: cp-fx-shake 0.28s steps(1, end); }

@keyframes cp-fx-shake {
  0%, 100% { transform: translate(0, 0) skewX(0deg); }
  15% { transform: translate(-3px, 1px) skewX(0.6deg); }
  30% { transform: translate(4px, -2px) skewX(-0.8deg); }
  45% { transform: translate(-2px, 1px); }
  60% { transform: translate(3px, 0) skewX(0.5deg); }
  80% { transform: translate(-1px, -1px); }
}

body.cp-fx-rgb main { animation: cp-fx-rgb 0.34s steps(2, end); }

@keyframes cp-fx-rgb {
  0%, 100% { filter: none; transform: none; }
  25% {
    filter: drop-shadow(3px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-3px 0 hsl(186 100% 60% / 0.7));
    transform: translateX(-2px);
  }
  50% {
    filter: drop-shadow(-4px 0 hsl(330 100% 60% / 0.6)) drop-shadow(4px 0 hsl(186 100% 60% / 0.6));
    transform: translateX(2px);
  }
  75% {
    filter: drop-shadow(2px 0 hsl(330 100% 60% / 0.7)) drop-shadow(-2px 0 hsl(186 100% 60% / 0.7));
  }
}

body.cp-fx-slice main { animation: cp-fx-slice 0.32s steps(2, end); }

@keyframes cp-fx-slice {
  0%, 100% { transform: none; }
  20% { transform: translateX(-12px) skewX(7deg); }
  40% { transform: translateX(10px) skewX(-5deg); }
  60% { transform: translateX(-6px) skewX(3deg); }
  80% { transform: translateX(4px) skewX(-1deg); }
}

/* ── Boot decrypt loader (plays once when switching into 2077) ───────────────*/
.cyber-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, hsl(252 50% 6%) 0%, hsl(252 60% 3%) 100%),
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.06) 0 1px, transparent 1px 3px);
  animation: cyber-boot-fade 3.2s ease forwards;
}

.cyber-boot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, hsl(252 70% 2% / 0.85) 100%);
}

.cyber-boot-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.04) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 74%);
  animation: cyber-grid-pan 3.2s linear;
}

@keyframes cyber-boot-fade {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cyber-blink { 50% { opacity: 0; } }

@keyframes cyber-grid-pan {
  from { background-position: 0 -40px, -40px 0; opacity: 0.3; }
  to { background-position: 0 0, 0 0; opacity: 1; }
}

.cyber-loader {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--mono);
}

.cyber-loader-frame {
  position: relative;
  width: min(440px, 86vw);
  padding: 16px 22px;
  overflow: hidden;
  color: hsl(186 100% 72%);
  background: linear-gradient(135deg, hsl(252 50% 8% / 0.92), hsl(240 60% 5% / 0.94));
  border: 1px solid hsl(186 100% 52% / 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 36px hsl(186 100% 52% / 0.18), inset 0 0 50px hsl(186 100% 52% / 0.06);
  text-shadow: 0 0 8px hsl(186 100% 52% / 0.45);
}

.cyber-loader-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -40%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(56 96% 56%), transparent);
  box-shadow: 0 0 10px hsl(56 96% 56% / 0.7);
  animation: cyber-loader-scan 1.6s linear infinite;
}

@keyframes cyber-loader-scan {
  from { left: -40%; }
  to { left: 100%; }
}

.cyber-loader-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid hsl(186 100% 52% / 0.22);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: hsl(56 96% 70%);
}

.cyber-loader-jp { color: hsl(330 100% 70% / 0.7); letter-spacing: 0.28em; }

.cyber-loader-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(13px, 2.4vw, 16px);
}

.cyber-loader-prompt { color: hsl(56 96% 64%); }

.cyber-loader-text {
  letter-spacing: 0.08em;
  color: hsl(186 100% 80%);
  transition: color 0.2s ease;
}

.cyber-loader-text.done {
  color: hsl(56 96% 80%);
  text-shadow: 0 0 10px hsl(56 96% 56% / 0.6);
}

.cyber-loader-cursor {
  color: hsl(56 96% 70%);
  animation: cyber-blink 1s steps(1, end) infinite;
}

.cyber-loader-stream {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  color: hsl(186 60% 52% / 0.6);
  white-space: nowrap;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cyber-flicker,
  .cyber-rollline,
  .cyber-glitch,
  .cyber-boot,
  .cyber-boot-grid,
  .cyber-loader-frame::after,
  .cyber-loader-cursor,
  body.cp-fx-shake main,
  body.cp-fx-rgb main,
  body.cp-fx-slice main {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FALLOUT SKIN — Pip-Boy phosphor green terminal on near-black.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-skin="fallout"] {
  color-scheme: dark;
  --bg: hsl(140 32% 5%);
  --bg-soft: hsl(140 30% 7%);
  --surface: hsl(140 26% 8%);
  --surface-raised: hsl(140 26% 11%);
  --surface-muted: hsl(140 22% 13%);
  --fg: hsl(140 84% 80%);
  --muted: hsl(140 28% 56%);
  --faint: hsl(140 22% 44%);
  --border: hsl(140 48% 22%);
  --border-soft: hsl(140 45% 17%);
  --accent: hsl(138 92% 52%);
  --accent-strong: hsl(138 92% 66%);
  --accent-soft: hsl(138 92% 52% / 0.15);
  --success: hsl(120 80% 55%);
  --success-soft: hsl(120 70% 50% / 0.16);
  --warning: hsl(44 96% 56%);
  --warning-soft: hsl(44 96% 52% / 0.16);
  --danger: hsl(8 90% 62%);
  --danger-soft: hsl(8 88% 55% / 0.18);
  --on-accent: hsl(140 40% 6%);
  --on-danger: hsl(140 40% 6%);
  --modal-shadow: 0 24px 80px hsl(140 60% 2% / 0.7), 0 0 30px hsl(138 92% 52% / 0.12);
  --modal-backdrop: hsl(140 50% 2% / 0.7);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(140 60% 2% / 0.6);
  --radius: 2px;
}

:root[data-skin="fallout"] .brand strong,
:root[data-skin="fallout"] .page-heading h1 {
  font-family: var(--mono);
  letter-spacing: 0.5px;
}
:root[data-skin="fallout"] .page-heading h1 { text-shadow: 0 0 14px hsl(138 92% 52% / 0.4); }

:root[data-skin="fallout"]     { --surface: hsl(140 26% 8% / 0.7); --surface-raised: hsl(140 26% 11% / 0.82); --surface-muted: hsl(140 22% 13% / 0.64); }

:root[data-skin="fallout"] .app-shell { position: relative; z-index: 0; }

:root[data-skin="fallout"] body {
  background:
    radial-gradient(ellipse at 50% -6%, hsl(138 92% 52% / 0.16), transparent 36%),
    radial-gradient(ellipse at 86% 90%, hsl(96 80% 46% / 0.1), transparent 34%),
    linear-gradient(180deg, hsl(140 36% 6%) 0%, hsl(150 34% 4%) 52%, hsl(140 40% 5%) 100%),
    repeating-linear-gradient(0deg, hsl(138 92% 52% / 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, hsl(138 92% 52% / 0.04) 0 1px, transparent 1px 44px);
  background-attachment: fixed;
}
:root[data-skin="fallout"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/skins/fallout-vaultboy.webp') right -1% bottom -8% / auto min(100vh, 1100px) no-repeat;
  opacity: 0.12;
  filter: drop-shadow(0 0 24px hsl(138 92% 52% / 0.35));
}

/* ════════════════════════════════════════════════════════════════════════════
   2077 EASTER EGG — "BREACH PROTOCOL". Over-scroll past the bottom of the page
   to detonate a full-screen RGB-split glitch storm. Driven by cyber-fx.ts.
   Ported from kaboo's CyberpunkBreach.
   ════════════════════════════════════════════════════════════════════════════ */
.cyber-breach {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  overflow: hidden;
}

.cyber-breach-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(186 100% 52% / 0.5), hsl(330 100% 58% / 0.4));
  mix-blend-mode: screen;
  animation: cyber-breach-flash 4.2s ease-out forwards;
}

.cyber-breach-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, hsl(186 100% 52% / 0.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, hsl(330 100% 58% / 0.1) 0 1px, transparent 1px 38px);
  animation: cyber-breach-grid 4.2s steps(8, end) forwards;
}

.cyber-breach-shards { position: absolute; inset: 0; }

.cyber-breach-shard {
  position: absolute;
  left: 0;
  right: 0;
  background: hsl(var(--hue, 186 100% 52%) / 0.4);
  mix-blend-mode: screen;
  opacity: 0;
  animation: cyber-breach-shard var(--dur, 0.4s) steps(2, end) var(--delay, 0s) infinite;
}

.cyber-breach-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  text-align: center;
  font-family: var(--mono);
  animation: cyber-breach-caption 4.2s ease forwards;
}

.cyber-breach-tag {
  font-size: clamp(11px, 2vw, 16px);
  letter-spacing: 0.24em;
  color: hsl(186 100% 70%);
  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
}

.cyber-breach-caption,
.cyber-breach-sub {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: hsl(56 96% 84%);
}

.cyber-breach-caption {
  font-size: clamp(20px, 5vw, 54px);
  text-shadow: 0 0 18px hsl(330 100% 58% / 0.9), 0 0 4px hsl(186 100% 70% / 0.85);
}

.cyber-breach-sub {
  font-size: clamp(13px, 2.6vw, 28px);
  color: hsl(186 96% 78%);
  text-shadow: 0 0 12px hsl(186 100% 52% / 0.8);
}

.cyber-breach-caption::before,
.cyber-breach-caption::after,
.cyber-breach-sub::before,
.cyber-breach-sub::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.cyber-breach-caption::before,
.cyber-breach-sub::before {
  color: hsl(330 100% 60%);
  animation: cyber-breach-glitch-a 0.4s steps(2, end) infinite;
}

.cyber-breach-caption::after,
.cyber-breach-sub::after {
  color: hsl(186 100% 56%);
  animation: cyber-breach-glitch-b 0.4s steps(2, end) infinite;
}

.cyber-breach-quake .app-shell {
  animation: cyber-breach-quake 0.76s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes cyber-breach-flash {
  0% { opacity: 0; }
  3% { opacity: 1; }
  18% { opacity: 0.4; }
  100% { opacity: 0; }
}

@keyframes cyber-breach-grid {
  0% { opacity: 0; transform: translateY(-6px); }
  10% { opacity: 1; }
  86% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes cyber-breach-shard {
  0%, 100% { opacity: 0; transform: translateX(0); }
  40% { opacity: 0.85; transform: translateX(var(--shift, 10px)); }
  60% { opacity: 0.5; transform: translateX(calc(var(--shift, 10px) * -0.6)); }
}

@keyframes cyber-breach-glitch-a {
  0%, 100% { transform: translate(-2px, 0); }
  50% { transform: translate(-5px, 1px); }
}

@keyframes cyber-breach-glitch-b {
  0%, 100% { transform: translate(2px, 0); }
  50% { transform: translate(5px, -1px); }
}

@keyframes cyber-breach-caption {
  0%, 16% { opacity: 0; }
  30% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cyber-breach-quake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 2px); }
  40%, 60% { transform: translate(7px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-breach-flash,
  .cyber-breach-shards { display: none; }
  .cyber-breach-grid,
  .cyber-breach-banner { animation: none; opacity: 1; }
  .cyber-breach-caption::before,
  .cyber-breach-caption::after,
  .cyber-breach-sub::before,
  .cyber-breach-sub::after { display: none; }
  .cyber-breach-quake .app-shell { animation: none; }
}

/* ── Skin ↔ PR #123 bridge ───────────────────────────────────────────────────
   PR #123 hardcodes panel/card backgrounds under [data-theme="dark"] (glass look)
   instead of using --surface, so dark skins would all look alike. Re-point the
   prominent surfaces to the active skin's --surface so switching is visible.
   Appended last → wins over the PR's [data-theme="dark"] rules by source order. */
:root:not([data-skin="default"]) .panel,
:root:not([data-skin="default"]) .metric-card,
:root:not([data-skin="default"]) .bd-card,
:root:not([data-skin="default"]) .mate,
:root:not([data-skin="default"]) .session-card,
:root:not([data-skin="default"]) .session-board-column,
:root:not([data-skin="default"]) .filters:not(.dashboard-toolbar) {
  background: var(--surface);
}
:root:not([data-skin="default"]) .session-board-column > header {
  background: var(--surface-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   v3 runs page — "flight recorder" visual language.
   Status hues derive from theme tokens so light/dark/skins all inherit;
   gateWaiting gets its own violet (approval ≠ blocked).  All motion is
   CSS-only and disabled under prefers-reduced-motion.
   (`.v3-terminal-*` above is the codex-owned terminal slot — untouched.)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --v3r-pending: var(--faint);
  --v3r-running: var(--accent);
  --v3r-done: var(--success);
  --v3r-blocked: var(--warning);
  --v3r-failed: var(--danger);
  --v3r-gate: #7c5cd6;
  /* edge-activation: 分支未选中的中性终态 — 比 pending 更"收起"，绝不能像
     失败（它是 by-design 的非事件） */
  --v3r-skipped: var(--faint);
}
:root[data-theme="dark"] { --v3r-gate: #a78bfa; }

.v3r-title { display: inline-block; margin-left: 0; font-family: var(--mono); font-size: 1.18rem; letter-spacing: 0; }
.v3r-runid { font-family: var(--mono); font-size: 12.5px; }

/* status pill — shared by list rows, panel header, run badge */
.v3r-pill {
  display: inline-flex; align-items: center; gap: .38em;
  padding: .14em .62em; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ns, var(--muted)) 14%, transparent);
  color: var(--ns, var(--muted));
  border: 1px solid color-mix(in srgb, var(--ns, var(--muted)) 32%, transparent);
}
.v3r-pill .dot, .v3r-inst .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ns, var(--muted));
}
.st-pending     { --ns: var(--v3r-pending); }
.st-running     { --ns: var(--v3r-running); }
.st-gateWaiting { --ns: var(--v3r-gate); }
.st-done        { --ns: var(--v3r-done); }
.st-skipped     { --ns: var(--v3r-skipped); }
.st-cancelled   { --ns: var(--v3r-skipped); }
.st-blocked     { --ns: var(--v3r-blocked); }
.st-failed      { --ns: var(--v3r-failed); }
/* skipped 整体降透明度 + 虚线盒 — 一眼读出"这条路没走"，与 pending 区分 */
.v3r-node.st-skipped, .v3r-node.st-cancelled { opacity: .55; }
.v3r-node.st-skipped .v3r-box, .v3r-node.st-cancelled .v3r-box { stroke-dasharray: 4 3; }
.rs-running   { --ns: var(--v3r-running); }
.rs-succeeded { --ns: var(--v3r-done); }
.rs-cancelling { --ns: var(--v3r-blocked); }
.rs-cancelled { --ns: var(--v3r-skipped); }
.rs-blocked   { --ns: var(--v3r-blocked); }
.rs-failed    { --ns: var(--v3r-failed); }

.v3r-wrap { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.v3r-graph-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface);
}
.v3r-graph { max-height: 48vh; overflow: auto; }
.v3r-graph-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}
.v3r-graph-stage svg {
  display: block;
  flex: 0 0 auto;
}
.v3r-legend {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
  padding: .45rem .9rem; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--muted);
}
.v3r-legend .lg { display: inline-flex; align-items: center; gap: .35em; }
.v3r-legend .lg::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ns, var(--muted));
}
.v3r-legend .lg-loop::before { content: none; }
.v3r-legend .lg-loop { font-family: var(--mono); }

/* ── graph nodes (SVG) ── */
.v3r-node { cursor: pointer; }
.v3r-node .v3r-box {
  fill: color-mix(in srgb, var(--ns) 9%, var(--surface-raised));
  stroke: color-mix(in srgb, var(--ns) 52%, var(--border));
  stroke-width: 1.2;
  transition: fill .2s ease, stroke .2s ease;
}
.v3r-node:hover .v3r-box { fill: color-mix(in srgb, var(--ns) 16%, var(--surface-raised)); }
.v3r-node.sel .v3r-box { stroke: var(--accent-strong); stroke-width: 2; }
.v3r-node .v3r-nid {
  fill: var(--fg); font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.v3r-node .v3r-nstatus {
  fill: var(--ns); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v3r-node.st-running .v3r-box { animation: v3r-breathe 2.2s ease-in-out infinite; }

/* loop capsule: dashed outer frame = composite-container affordance */
.v3r-loopnode .v3r-cap {
  fill: none; stroke: color-mix(in srgb, var(--ns) 45%, var(--border));
  stroke-width: 1.2; stroke-dasharray: 5 4;
}
.v3r-loopnode.sel .v3r-cap { stroke: var(--accent-strong); stroke-dasharray: none; }
.v3r-spin {
  fill: var(--ns); font-size: 13px; font-weight: 700;
  transform-box: fill-box; transform-origin: center;
}
.st-running .v3r-spin { animation: v3r-spin 2.4s linear infinite; }
.v3r-dot.done { fill: var(--ns); }
.v3r-dot.cur  { fill: var(--ns); stroke: color-mix(in srgb, var(--ns) 40%, transparent); stroke-width: 3; }
.v3r-dot.cur.live { animation: v3r-breathe 1.4s ease-in-out infinite; }
.v3r-dot.todo { fill: none; stroke: var(--faint); stroke-width: 1.2; }
.v3r-dot.grant { stroke: var(--accent-strong); stroke-width: 1.6; }
.v3r-dot.grant.done, .v3r-dot.grant.cur { fill: var(--accent-strong); }
.v3r-dots-verdict { font-size: 11px; font-weight: 700; }
.v3r-dots-verdict.ok { fill: var(--v3r-done); }
.v3r-dots-verdict.warn { fill: var(--v3r-blocked); }

/* edges: quiet by default, marching-ants into live nodes */
.v3r-edge { fill: none; stroke: color-mix(in srgb, var(--fg) 26%, transparent); stroke-width: 1.5; }
.v3r-edge.live {
  stroke: var(--v3r-running); stroke-width: 1.8;
  stroke-dasharray: 6 5; animation: v3r-flow 0.9s linear infinite;
}

/* ── node panel ── */
.v3r-panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem; background: var(--surface);
}
.v3r-panel-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.v3r-loop-mark { font-size: 17px; font-weight: 700; color: var(--accent); }
.v3r-nodeid { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.v3r-crumb { margin: .2rem 0 .55rem; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: .45em; }
.v3r-crumb .sep { color: var(--faint); }
.v3r-goal {
  margin: .45rem 0; padding: .5rem .7rem; font-size: 12.5px; color: var(--muted);
  border-left: 3px solid var(--border); background: var(--surface-muted);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; white-space: pre-wrap;
}
.v3r-deps { margin: .4rem 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.v3r-dep {
  font-family: var(--mono); font-size: 11.5px; padding: .1em .5em;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted);
}
.v3r-err { margin: .4rem 0; font-size: 12.5px; color: var(--v3r-blocked); }
.v3r-term-slot { margin-top: .75rem; }

/* ── loop iteration timeline ── */
.v3r-loop-sec { margin-top: .65rem; }
.v3r-loop-meter {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem;
  font-size: 13px; color: var(--muted);
}
.v3r-loop-meter .num { font-variant-numeric: tabular-nums; }
.v3r-loop-meter .num b { font-family: var(--mono); font-size: 15px; color: var(--fg); }
.v3r-granted-tag {
  font-size: 11px; font-weight: 700; padding: .1em .5em; border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.v3r-rounds {
  display: flex; flex-direction: column; gap: .45rem;
  max-height: 380px; overflow-y: auto; padding: .15rem;
}
.v3r-round {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: .45rem .6rem; background: var(--surface-muted);
}
.v3r-round.cur { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.v3r-round.vd-exit { border-color: color-mix(in srgb, var(--v3r-done) 50%, var(--border)); }
.v3r-round.vd-exhausted { border-color: color-mix(in srgb, var(--v3r-blocked) 55%, var(--border)); }
.v3r-round-head { display: flex; align-items: center; gap: .45em; margin-bottom: .15rem; }
.v3r-round-head .rn { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--fg); }
.v3r-verdict { font-size: 11px; font-weight: 700; white-space: nowrap; }
.v3r-verdict.vd-exit { color: var(--v3r-done); }
.v3r-verdict.vd-continue { color: var(--muted); }
.v3r-verdict.vd-exhausted { color: var(--v3r-blocked); }
.v3r-verdict.vd-live { color: var(--v3r-running); animation: v3r-blink 1.6s ease-in-out infinite; }
/* round mini-dag: body instances drawn like real graph nodes (template gives
   the shape; undispatched slots are dashed ghosts) */
.v3r-mini-svg { display: block; }
.v3r-mini .v3r-nid { font-size: 11px; }
.v3r-mini .v3r-mini-dot { fill: var(--ns); }
.v3r-mini.st-running .v3r-mini-dot { animation: v3r-breathe 1.4s ease-in-out infinite; }
.v3r-mini.sel .v3r-box { stroke: var(--accent-strong); stroke-width: 2; }
.v3r-mini.ghost .v3r-box { stroke-dasharray: 3 3; fill: transparent; }
.v3r-mini.ghost .v3r-nid, .v3r-mini.ghost .v3r-mini-dot { opacity: .55; }
/* the strip naming which instance's terminal is mounted below the timeline */
.v3r-inst-strip {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .7rem; padding: .45rem .65rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none;
  background: var(--surface-muted); font-size: 12px; color: var(--muted);
}
.v3r-inst-strip .lbl { font-weight: 700; color: var(--faint); letter-spacing: .04em; }
.v3r-nodeid.sm { font-size: 12.5px; }
#v3-inst-strip:not(:empty) + .v3r-term-slot { margin-top: 0; }
.v3r-cta {
  margin-top: .55rem; padding: .5rem .7rem; font-size: 12.5px;
  color: var(--v3r-blocked); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--v3r-blocked) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--v3r-blocked) 35%, transparent);
}
.v3r-cta code { font-family: var(--mono); }

@keyframes v3r-spin { to { transform: rotate(360deg); } }
@keyframes v3r-flow { to { stroke-dashoffset: -11; } }
@keyframes v3r-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes v3r-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .st-running .v3r-spin, .v3r-edge.live, .v3r-node.st-running .v3r-box,
  .v3r-dot.cur.live, .v3r-verdict.vd-live { animation: none; }
}

/* ── Workflows page baseline ─────────────────────────────────────────────── */
.workflows-page {
  gap: 14px;
}

.v3r-runs-section,
.v3r-graph-section,
.v3r-node-section {
  min-width: 0;
}

.v3r-run-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--button-height);
}

.v3r-run-toolbar .sect-head-action {
  margin-left: 0;
}

.v3r-detail-heading {
  overflow: visible;
}

.v3r-detail-heading::after {
  z-index: 0;
}

.v3r-detail-heading > * {
  position: relative;
  z-index: 1;
}

.page-heading .v3r-title-row {
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.page-heading .v3r-title-row > h1 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3r-back-link {
  position: relative;
  z-index: 1;
  flex: none;
  min-width: 0;
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.v3r-back-link:hover {
  z-index: 3;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

.v3r-run-status-pill {
  flex: none;
}

.page-heading-actions > button.v3r-cancel-button {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 5%, transparent);
  color: var(--danger);
}

.page-heading-actions > button.v3r-cancel-button:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--danger);
}

.v3r-cancel-notice {
  padding: .62rem .82rem;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: var(--warning);
  font-size: 12px;
}

.v3r-cancel-notice.done {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border-soft));
  background: color-mix(in srgb, var(--muted) 6%, var(--surface));
  color: var(--muted);
}

.v3r-run-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
  min-width: var(--button-height);
  min-height: var(--button-height);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.v3r-run-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow-x: hidden;
  overflow-y: auto;
}

.v3r-run-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 34%, transparent);
  color: var(--fg);
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    transform 150ms ease;
}

.v3r-run-card:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  transform: translateY(-1px);
}

.v3r-run-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.v3r-run-main small {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
}

.v3r-empty {
  margin: 0;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 44%, transparent);
}

.v3r-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 14px;
  align-items: start;
}

.v3r-graph-card,
.v3r-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.v3r-graph-card {
  padding: 0;
  overflow: hidden;
}

.v3r-graph {
  min-height: 320px;
  max-height: min(560px, calc(100vh - 260px));
  padding: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    radial-gradient(circle at center, color-mix(in srgb, var(--border-soft) 70%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px;
}

.sect-head .v3r-node-status-pill {
  color: var(--ns, var(--muted));
}

.sect-head .sect-head-hint:has(.v3r-node-status-pill) {
  align-self: center;
  margin-bottom: 0;
  line-height: 1;
}

.sect-head .v3r-node-status-pill .dot {
  background: var(--ns, var(--muted));
}

.v3r-legend {
  gap: 8px 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-muted) 42%, transparent);
}

.v3r-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.v3r-panel #v3-node-meta {
  display: grid;
  align-content: start;
  gap: 10px;
}

.v3r-panel > .muted {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
}

.v3r-panel-head {
  min-height: var(--button-height);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.v3r-goal,
.v3r-inst-strip,
.v3r-round,
.v3r-cta {
  border-radius: var(--radius-lg);
}

.v3r-goal {
  margin: 0;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-muted) 48%, transparent);
}

.v3r-deps {
  margin: 0;
}

.v3r-dep,
.v3r-granted-tag,
.v3r-verdict {
  border-radius: var(--radius-full);
}

.v3r-rounds {
  padding: 2px;
}

.v3-terminal-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

main:has(.workflows-page .v3r-wrap) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) .workflows-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) .v3r-wrap {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph-section,
main:has(.workflows-page .v3r-wrap) .v3r-node-section {
  display: grid;
  grid-template-rows: var(--section-title-row-height) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

main:has(.workflows-page .v3r-wrap) .v3r-graph {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

main:has(.workflows-page .v3r-wrap) .v3r-panel {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-wrap) #v3-node-meta {
  min-height: 0;
  overflow: auto;
}

main:has(.workflows-page .v3r-wrap) .v3r-term-slot {
  min-height: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) {
  padding-bottom: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .workflows-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .v3r-runs-section {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

main:has(.workflows-page .v3r-runs-section) .v3r-run-list {
  height: 100%;
}

@media (max-width: 1180px) {
  main:has(.workflows-page .v3r-wrap) {
    padding-bottom: 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main:has(.workflows-page .v3r-wrap) .workflows-page,
  main:has(.workflows-page .v3r-wrap) .v3r-wrap,
  main:has(.workflows-page .v3r-wrap) .v3r-graph-section,
  main:has(.workflows-page .v3r-wrap) .v3r-node-section,
  main:has(.workflows-page .v3r-wrap) .v3r-graph-card,
  main:has(.workflows-page .v3r-wrap) .v3r-panel {
    height: auto;
    overflow: visible;
  }

  .v3r-wrap {
    grid-template-columns: 1fr;
  }

  main:has(.workflows-page .v3r-wrap) .v3r-graph {
    min-height: 320px;
    max-height: min(560px, calc(100vh - 260px));
  }
}

/* ── Insight workbench (owner-only #/insights page) ───────────────────────────
   Visual layer ported from the reference app (agent-session-insights, html.ts
   STYLE) so this page reads as that read-only "工作台", not generic dashboard
   cards. The reference is dark-only with hardcoded hexes; here its variables
   (--panel/--line/--mut/--acc/--good/--warn/--bad) and stray hexes are remapped
   to the dashboard's light/dark design tokens and SCOPED under .insights-page,
   so the workbench look carries over while still respecting the active theme.
   Phase colors match the reference exactly: edit=green research=blue run=amber
   delegate=purple discuss=gray. */
.insights-page {
  --panel: var(--surface);
  --line: var(--border);
  --mut: var(--muted);
  --acc: var(--accent);
  --good: var(--success);
  --warn: var(--warning);
  --bad: var(--danger);
  --ins-inner: var(--surface-muted);
  --ins-recess: var(--bg-soft);
  --ins-faint: var(--faint);
  --ph-edit: var(--success);
  --ph-research: var(--accent);
  --ph-run: var(--warning);
  --ph-delegate: #a06fd6;
  --ph-discuss: var(--muted);
  --ph-unknown: var(--border);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}
.insights-page {
  --insight-module-gap: 14px;
  --insight-grid-gap: 12px;
}

.insights-page .insight-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.insights-page .insight-title-line h1 {
  flex: 0 0 auto;
}

.insights-page .insight-title-line .insight-tabs {
  flex: 0 1 auto;
}

.insights-page .insights-filters .insight-head-acts {
  flex: 0 0 auto;
  margin-left: auto;
}

.insights-page .insight-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--button-height);
  min-width: 0;
}

.insight-page-status {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  color: var(--mut);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.insight-page-status:empty {
  display: none;
}

/* section labels (uppercase eyebrow) — reference h3 */
.insights-page .block h3,
.insights-page .insight-detail h3,
.insights-page .insight-section-label {
  font-size: 12px; color: var(--mut); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 10px;
}

/* metric cards (reference .cards/.card/.cv/.cl/.cs) */
.insights-page .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--insight-grid-gap); }
.insights-page .insights-metrics { margin: 0; }
.insights-page .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insights-page .cv { font-size: 20px; font-weight: 600; line-height: 1.2; }
.insights-page .cl { color: var(--mut); font-size: 12px; margin-top: 4px; }
.insights-page .cs { color: var(--mut); font-size: 11px; margin-top: 2px; }

/* overview blocks (reference .block/.grid2col/.recblock) */
.insights-page .block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insights-page .recblock { background: var(--ins-inner); }
.insights-overview-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--insight-grid-gap); margin: 0; }
@media (max-width: 900px) { .insights-overview-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .insights-page .insight-tab-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .insights-page .insight-title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .insights-page .insights-filters .insight-head-acts {
    justify-content: flex-end;
    width: 100%;
    margin-left: 0;
  }

  .insight-page-status {
    text-align: left;
  }
}

/* recommendations (reference .reclist/.rec/.rectop/.recev/.recact) */
.insights-page .reclist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.insights-page .insight-detail .reclist { grid-template-columns: 1fr; }
.insights-page .rec {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border: 1px solid var(--line); border-left: 3px solid var(--mut);
  border-radius: 7px; background: var(--panel); padding: 9px 11px;
}
/* <button class="rec"> carries UA defaults (justify-content + text-align: center)
   that centre the card body. The non-clickable rec (no evidence ⇒ no .rec-clickable,
   which is the only place text-align:left lived) hit exactly that — its impact/actions
   rendered centred. Reset on every rec button so clickable/non-clickable align identically. */
.insights-page button.rec { justify-items: stretch; justify-content: stretch; text-align: left; width: 100%; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
.insights-page .recblock .rec { background: var(--ins-recess); }
.insights-page .rec.bad { border-left-color: var(--bad); }
.insights-page .rec.warn { border-left-color: var(--warn); }
.insights-page .rec.info { border-left-color: var(--acc); }
.insights-page .rectop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insights-page .rectop b { font-size: 13px; line-height: 1.35; }
.insights-page .rectop span { flex: 0 0 auto; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.insights-page .rec.bad .rectop span { color: var(--bad); border-color: var(--bad); }
.insights-page .rec.warn .rectop span { color: var(--warn); border-color: var(--warn); }
.insights-page .rec.info .rectop span { color: var(--acc); border-color: var(--acc); }
.insights-page .recev { color: var(--fg); font-size: 12px; line-height: 1.45; }
.insights-page .recact { color: var(--mut); font-size: 12px; line-height: 1.45; }

/* top failed tools — horizontal bars (reference .hbrow/.hbtrack/.hbfill/.hbval) */
.insights-page .hbars { display: grid; gap: 4px; }
.insights-page .hbrow { display: grid; grid-template-columns: 116px 1fr 64px; align-items: center; gap: 10px; padding: 4px 4px; border-radius: 6px; }
.insights-page .hblabel { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.insights-page .hbtrack { background: var(--ins-inner); border-radius: 6px; height: 14px; overflow: hidden; }
.insights-page .hbfill { height: 100%; background: linear-gradient(90deg, var(--danger-soft), var(--bad)); border-radius: 6px; min-width: 3px; transform-origin: left; animation: insight-bar-grow .55s ease both; }
.insights-page .hbval { font-size: 12px; color: var(--mut); text-align: right; white-space: nowrap; }
.insights-page .hbval small { color: var(--ins-faint); font-size: 10px; margin-left: 5px; }
.insights-page .ihist-jump { background: transparent; border: 0; color: var(--acc); font: inherit; font-size: 11px; cursor: pointer; padding: 0 0 0 8px; white-space: nowrap; }
.insights-page .ihist-jump:hover { text-decoration: underline; }
.insights-page .hbrow-click { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.insights-page .hbrow-click:hover { background: var(--ins-inner); }

/* top-level tabs (总览 / 会话 / 分布 / 热点) */
.insights-page .insight-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-height: var(--button-height);
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
}
.insights-page .itab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}
.insights-page .itab:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.insights-page .itab.on,
.insights-page .itab[aria-selected="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .itab.on:hover,
.insights-page .itab[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .insight-panel[hidden] { display: none; }
.insights-page .insight-panel:not([hidden]) {
  display: grid;
  gap: var(--insight-module-gap);
  min-width: 0;
}
.insights-page :where(#insight-overview, #insight-flow, #insight-dist, #insight-hot, #insight-list-view) {
  display: grid;
  gap: var(--insight-module-gap);
  min-width: 0;
}

/* filter-bar additions: analyzable toggle and clear */
.insights-page .ins-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mut); cursor: pointer; white-space: nowrap; }
.insights-page .ins-toggle input { cursor: pointer; }
.insights-page .ins-clear {
  background: transparent; color: var(--mut); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.insights-page .ins-clear:hover { color: var(--fg); border-color: var(--acc); }

/* distribution histograms + hotspots grids */
.insights-page .ins-hint { margin: 0; font-size: 12px; }
.insights-page .ihist-grid,
.insights-page .hot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--insight-grid-gap); align-items: start; }
.insights-page .ihist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.insights-page .ihist-head h3 { margin: 0; }
.insights-page .trend-block { grid-column: 1 / -1; }
.insights-page .trend { display: flex; align-items: flex-end; gap: 2px; height: 60px; padding-top: 8px; }
.insights-page .trendbar { flex: 1 1 0; min-width: 2px; min-height: 2px; background: var(--acc); opacity: .8; border-radius: 2px 2px 0 0; transition: height .4s ease; }
.insights-page .trendbar:hover { opacity: 1; }
.insights-page .hot-sessions, .insights-page .hot-note { grid-column: 1 / -1; }
.insights-page .hot-note { margin-top: 0; }
.insights-page .insight-disclosure { margin: 0; color: var(--ins-faint); font-size: 11px; line-height: 1.55; white-space: pre-line; border-top: 1px solid var(--line); padding-top: 10px; }
/* recurrence hotspots (file / command / error) with expandable contributing sessions */
.insights-page .hotlist { display: grid; gap: 2px; }
.insights-page .hotitem.open { background: var(--ins-recess); border-radius: 7px; }
.insights-page .hotrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 7px; }
.insights-page .hotrow:hover { background: var(--ins-inner); }
.insights-page .hotlabel { font-size: 12px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .hotmeta { font-size: 11px; color: var(--mut); white-space: nowrap; }
.insights-page .hotmeta .bad { color: var(--bad); }
.insights-page .hotses { font-size: 11px; color: var(--acc); white-space: nowrap; }
.insights-page .hot-sess { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 8px 9px; }
.insights-page .hot-sesslink { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--ins-inner); color: var(--fg); border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .hot-sesslink:hover { border-color: var(--acc); color: var(--acc); }
/* ⌘K command palette */
.insights-page .insight-head-acts { display: flex; align-items: center; gap: 8px; }
.insights-page .insight-palette,
.insights-page.insight-palette {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}
.insights-page .insight-palette[hidden],
.insights-page.insight-palette[hidden] { display: none; }
.insights-page .insight-palette .modal-backdrop,
.insights-page.insight-palette .modal-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  backdrop-filter: none;
}
.insights-page .insight-palette.palette-centered .modal-backdrop,
.insights-page.insight-palette.palette-centered .modal-backdrop {
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
}
.insights-page .palette-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 32px));
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: palette-panel-fade 0.18s ease both;
}
.insights-page .palette-panel.anchored {
  right: auto;
  width: min(420px, calc(100vw - 32px));
  max-height: min(var(--palette-panel-max-height, 560px), calc(100vh - 24px));
  transform: none;
}
.insights-page .palette-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  box-shadow: none;
}
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  outline: none;
  box-shadow: none;
}
.insights-page .palette-input:hover,
.insights-page .palette-input:focus,
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover,
.page.insights-page .insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover,
.insights-page.insight-palette input.palette-input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}
.insights-page .palette-list {
  display: grid;
  gap: 4px;
  max-height: min(420px, var(--palette-list-max-height, 52vh));
  overflow: auto;
  padding: 0;
}
.insights-page .palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.insights-page .palette-item.on,
.insights-page .palette-item:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
}
.insights-page .pal-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights-page .pal-sub { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.insights-page .palette-item.on .pal-sub,
.insights-page .palette-item:hover .pal-sub { color: var(--accent-strong); }
.insights-page .palette-empty { margin: 0; padding: 10px var(--button-padding-x); text-align: center; }
@keyframes palette-panel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 行为流 (Flow) tab */
.insights-page .flow-sub { font-size: 12px; margin: 0; }
.insights-page .flow-pipe-block { margin: 0; }
.insights-page .flow-pipe-block > h3,
.insights-page .subagent-block > h3 {
  display: inline-flex;
  align-items: center;
  margin: 0 10px 12px 0;
  vertical-align: bottom;
}
.insights-page .flow-pipe-block > .flow-sub,
.insights-page .subagent-block > .ins-hint {
  display: inline-block;
  margin: 0 0 10px;
  vertical-align: bottom;
}
.insights-page .flow-pipe { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; }
.insights-page .flow-node { flex: 1 1 0; min-width: 110px; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.insights-page .flow-node strong { font-size: 13px; }
.insights-page .flow-node .flow-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.insights-page .flow-node .flow-n em, .insights-page .flow-node .flow-t em { font-style: normal; color: var(--mut); font-weight: 400; font-size: 12px; }
.insights-page .flow-node .flow-t { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .flow-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.insights-page .flow-arrow { align-self: center; color: var(--mut); font-size: 16px; flex: 0 0 auto; }
.insights-page .flow-bhead { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 10px; font-size: 11px; color: var(--mut); padding: 0 0 6px; }
.insights-page .flow-bars { display: grid; gap: 8px; }
.insights-page .flow-brow { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 10px; align-items: center; }
.insights-page .flow-blabel { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.insights-page .flow-blabel i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.insights-page .flow-btrack { position: relative; height: 16px; background: var(--ins-recess); border-radius: 5px; overflow: hidden; display: flex; align-items: center; }
.insights-page .flow-bfill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; opacity: .85; }
.insights-page .flow-btrack em { position: relative; font-style: normal; font-size: 11px; color: var(--fg); margin-left: 7px; font-variant-numeric: tabular-nums; }
.insights-page .flow-bfill.phase-research { background: var(--ph-research); }
.insights-page .flow-bfill.phase-edit { background: var(--ph-edit); }
.insights-page .flow-bfill.phase-run { background: var(--ph-run); }
.insights-page .flow-bfill.phase-delegate { background: var(--ph-delegate); }
.insights-page .flow-bfill.phase-discuss { background: var(--ph-discuss); }
.insights-page .flow-rhythm { display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.insights-page .flow-sess { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 56px; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.insights-page .flow-sess:hover { background: var(--ins-inner); }
.insights-page .flow-stitle { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .flow-sess .mph { flex: 1; height: 11px; }
.insights-page .flow-stime { font-size: 11px; color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; }
/* sub-agent swim-lanes (detail view) */
.insights-page .subagent-block .ins-hint { margin: 0 0 10px; }
.insights-page .sublanes { display: grid; gap: 8px; }
.insights-page .sublane { display: grid; gap: 5px; padding: 9px 12px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); border-left: 3px solid var(--ph-delegate); }
.insights-page .sublane.bad { border-left-color: var(--bad); }
.insights-page .sublane-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.insights-page .sublane-type { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--acc); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.insights-page .sublane-task { font-size: 12px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .sublane .mph { height: 8px; }
.insights-page .sublane-stats { display: flex; gap: 14px; font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .sublane-stats .bad { color: var(--bad); }

/* Sessions tab: full-width list ⇆ full-width detail (mirrors ASI 会话, replaces
   the cramped master-detail side panel) */
.insights-page #insight-list-view .insight-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }
.insights-page .sesssort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.insights-page .sesssort .sect-sort-menu {
  width: 132px;
  min-width: 132px;
}
.insights-page .sesssort .sect-sort-menu > summary {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 calc(var(--button-padding-x) + 18px) 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.insights-page .sesssort .sect-sort-menu > summary:hover,
.insights-page .sesssort .sect-sort-menu[open] > summary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.insights-page .sesssort .sect-sort-menu .sect-sort-value {
  max-width: 100%;
}
.insights-page .sesssort .sect-sort-pop {
  left: 50%;
  z-index: 1302;
  width: 100%;
  min-width: 100%;
  transform: translateX(-50%);
}
.insights-page .sesssort:has(.sect-sort-menu[open]) {
  position: relative;
  z-index: 1300;
}
.insights-page .insight-layout-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 2px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: none;
}
.insights-page .insight-layout-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--button-height) - 6px);
  min-height: calc(var(--button-height) - 6px);
  max-height: calc(var(--button-height) - 6px);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.insights-page .insight-layout-switch button:hover {
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
  color: var(--accent-strong);
}
.insights-page .insight-layout-switch button.active,
.insights-page .insight-layout-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--accent);
}
.insights-page .ins-back {
  background: transparent; color: var(--mut); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; margin: 0;
}
.insights-page .ins-back:hover { color: var(--fg); border-color: var(--acc); }
.insights-page #insight-detail-view {
  display: grid;
  gap: var(--insight-module-gap);
}
.insights-page #insight-detail-view .insight-detail {
  display: grid;
  gap: var(--insight-module-gap);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
/* full-width rich rows */
.insights-page .slist.wide { max-height: none; overflow: visible; gap: 10px; }
.insights-page .slist.wide .srmain strong { -webkit-line-clamp: 1; font-size: 14px; }
.insights-page .slist.wide .mph { max-width: 440px; height: 8px; }
.insights-page .slist.wide .srmsg { justify-self: end; }
/* dense table layout for the session list */
.insights-page .stable { display: grid; gap: 1px; }
.insights-page .strow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 54px 54px 46px 54px 60px 78px; gap: 10px; align-items: center; width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-lg); }
.insights-page .strow:hover { border-color: var(--border-soft); background: var(--ins-inner); }
.insights-page .strow.on { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: var(--accent-soft); }
.insights-page .strow.review { border-color: color-mix(in srgb, var(--bad) 42%, var(--border-soft)); }
.insights-page .sthead { font-size: 11px; color: var(--mut); cursor: default; position: sticky; top: 56px; background: var(--panel); border-radius: 0; }
.insights-page .sthead:hover { background: var(--panel); }
.insights-page .stc-title { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.insights-page .stc-title strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .stc-title small { font-size: 11px; color: var(--mut); }
.insights-page .stc-proj { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.insights-page .stc-num { font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.insights-page .stc-num.bad { color: var(--bad); }
.insights-page .stc-time { color: var(--mut); }
.insights-page .strow.nostat .stc-msg { grid-column: 3 / 8; font-size: 11px; color: var(--mut); }

/* session detail panel (full-width detail view) */
.insight-detail { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.insight-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.insight-list-head h3 { font-size: 13px; margin: 0; }
.insight-list-head span { font-size: 11px; color: var(--mut); }

/* session rows (reference .slist/.srow/.srmain/.srstats) */
.insights-page .slist { display: grid; gap: 8px; max-height: 72vh; overflow: auto; }
.insights-page .srow {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: 100%; box-sizing: border-box;
  background: var(--ins-inner); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 9px 11px; color: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .15s ease;
}
.insights-page .srow:hover { border-color: var(--border-soft); background: var(--ins-recess); transform: translateY(-1px); box-shadow: var(--shadow); }
.insights-page .srow.on { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: var(--accent-soft); }
.insights-page .srow.review { border-color: color-mix(in srgb, var(--bad) 42%, var(--border-soft)); }
.insights-page .srmain { display: grid; gap: 5px; min-width: 0; }
.insights-page .srmain strong { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.insights-page .srmain small { font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-page .srstats { display: flex; flex-wrap: wrap; gap: 6px; }
.insights-page .srstats b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.insights-page .srstats b em { font-style: normal; color: var(--fg); font-weight: 800; margin-left: 0; }
.insights-page .srstats b.bad {
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
  color: var(--bad);
}
.insights-page .srstats b.bad em { color: var(--bad); }
.insights-page .srmsg { font-size: 11px; color: var(--mut); }

.insights-page .slist.wide .srow {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
}
.insights-page .slist.wide .srstats { flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
@media (max-width: 760px) {
  .insights-page .slist.wide .srow { grid-template-columns: 1fr; }
  .insights-page .slist.wide .srstats { justify-content: flex-start; flex-wrap: wrap; }
}

/* phase-mix mini bar (reference .mph) + proportional bar (reference .pmx) */
.insights-page .mph { display: flex; gap: 1px; height: 7px; overflow: hidden; border-radius: 3px; margin-top: 1px; background: var(--ins-recess); }
.insights-page .mph i { display: block; height: 100%; min-width: 1px; }
.insights-page .pmx { display: flex; height: 11px; border-radius: 5px; overflow: hidden; background: var(--ins-inner); }
.insights-page .pmx i { display: block; height: 100%; }
.insights-page i.phase-research { background: var(--ph-research); }
.insights-page i.phase-edit { background: var(--ph-edit); }
.insights-page i.phase-run { background: var(--ph-run); }
.insights-page i.phase-delegate { background: var(--ph-delegate); }
.insights-page i.phase-discuss { background: var(--ph-discuss); }
.insights-page i.phase-unknown { background: var(--ph-unknown); }
.insights-page .leg { font-size: 11px; color: var(--mut); margin-top: 6px; }
.insights-page .ld { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: middle; }

/* detail head (reference .shead/.smeta) */
.insights-page .shead h2 { font-size: 16px; margin: 0 0 4px; }
.insights-page .smeta { color: var(--mut); font-size: 12px; margin: 0 0 12px; }
.insights-page .smeta code { font-family: var(--mono); }
.insights-page .insight-detail-metrics { margin-bottom: 10px; }
.insights-page .insight-meta { font-size: 12px; color: var(--mut); margin: 8px 0; }
.insights-page .insight-empty { color: var(--mut); padding: 24px; text-align: center; }
.insights-page .mut { color: var(--ins-faint); }
.insights-page .note { color: var(--mut); font-size: 12px; margin-top: 8px; }

/* detail tabs: 动作 span / 逐轮对账 (reference .detailtabbar) */
.insights-page .detailtabs { margin-top: 0; }
.insights-page .detailtabbar { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.insights-page .detailtabbar button {
  background: transparent; color: var(--mut); border: 1px solid transparent; border-bottom: 0;
  border-radius: 7px 7px 0 0; padding: 7px 13px; font: inherit; font-size: 12px; cursor: pointer; margin-bottom: -1px;
}
.insights-page .detailtabbar button:hover { color: var(--fg); }
.insights-page .detailtabbar button.on { color: var(--fg); background: var(--panel); border-color: var(--line); font-weight: 600; }
.insights-page .detailtabbar b { font-weight: 500; color: var(--acc); margin-left: 5px; }
.insights-page .insight-tab-panel[hidden] { display: none; }

/* 动作 span — trace (reference .tracebox/.spanlist/.spanrow/.spanst/.spanline) */
.insights-page .tracebox { background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; }
.insights-page .tracehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--mut); font-size: 12px; margin-bottom: 8px; }
.insights-page .tracehead b { color: var(--fg); }
.insights-page .tracebad { color: var(--bad); }
.insights-page .spanlist { display: grid; gap: 5px; max-height: 62vh; overflow: auto; }
.insights-page .spanrow {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 9px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 7px; padding: 7px 9px;
}
.insights-page .spanrow.ph-research { border-left-color: var(--ph-research); }
.insights-page .spanrow.ph-edit { border-left-color: var(--ph-edit); }
.insights-page .spanrow.ph-run { border-left-color: var(--ph-run); }
.insights-page .spanrow.ph-delegate { border-left-color: var(--ph-delegate); }
.insights-page .spanrow.ph-discuss { border-left-color: var(--ph-discuss); }
.insights-page .spanrow.error { background: var(--danger-soft); border-color: var(--bad); border-left-color: var(--bad); }
.insights-page .spanrail { display: flex; flex-direction: column; gap: 3px; color: var(--ins-faint); font-size: 11px; font-family: var(--mono); white-space: nowrap; }
.insights-page .spanrail .sr-turn { color: var(--mut); }
.insights-page .spanbody { display: grid; gap: 4px; min-width: 0; }
.insights-page .spantop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mut); font-size: 11px; }
.insights-page .spantop b { font-family: var(--mono); color: var(--fg); font-size: 12px; }
.insights-page .spanst { border-radius: 999px; background: var(--ins-inner); border: 1px solid var(--line); padding: 1px 8px; font-size: 10px; font-weight: 700; }
.insights-page .spanst.ok { color: var(--good); border-color: var(--good); }
.insights-page .spanst.error { color: var(--bad); border-color: var(--bad); }
.insights-page .spanst.running { color: var(--warn); border-color: var(--warn); }
.insights-page .spanline { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.insights-page .spanline > span { color: var(--ins-faint); font-size: 11px; text-align: right; line-height: 1.6; }
.insights-page .spanline code, .insights-page .spanline em {
  min-width: 0; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 7px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--fg); font-style: normal;
}
.insights-page .spanline em { color: var(--mut); }

/* 逐轮对账 — ledger (reference .ledger/.lrow/.lhead/.lstat) */
.insights-page .ledger { display: grid; gap: 6px; max-height: 62vh; overflow: auto; }
.insights-page .lrow { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-lg); padding: 8px 12px; }
.insights-page .lrow.dom-research { border-left-color: var(--ph-research); }
.insights-page .lrow.dom-edit { border-left-color: var(--ph-edit); }
.insights-page .lrow.dom-run { border-left-color: var(--ph-run); }
.insights-page .lrow.dom-delegate { border-left-color: var(--ph-delegate); }
.insights-page .lrow.dom-discuss { border-left-color: var(--ph-discuss); }
.insights-page .lhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.insights-page .lno { color: var(--mut); font-size: 12px; font-family: var(--mono); font-weight: 700; flex: 0 0 auto; }
.insights-page .lphases { display: flex; flex-wrap: wrap; gap: 5px; }
.insights-page .lphase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .lphase::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--mut); }
.insights-page .lphase.phase-research::before { background: var(--ph-research); }
.insights-page .lphase.phase-edit::before { background: var(--ph-edit); }
.insights-page .lphase.phase-run::before { background: var(--ph-run); }
.insights-page .lphase.phase-delegate::before { background: var(--ph-delegate); }
.insights-page .lphase.phase-discuss::before { background: var(--ph-discuss); }
.insights-page .lstat { display: flex; gap: 14px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--mut); flex-wrap: wrap; }
.insights-page .lstat b { color: var(--fg); font-weight: 600; }
.insights-page .lerr { color: var(--bad); font-weight: 600; }
.insights-page .lcontent { display: grid; gap: 6px; margin-top: 8px; min-width: 0; }
.insights-page .lcontent-preview,
.insights-page .lcontent-more { display: grid; gap: 5px; min-width: 0; }
.insights-page .lcontent-line {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start;
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; min-width: 0;
}
.insights-page .lcontent-line.error { border-color: rgba(248, 81, 73, .35); background: rgba(248, 81, 73, .07); }
.insights-page .lcontent-line b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--mut); font-family: var(--mono); font-size: 11px; font-weight: 650;
}
.insights-page .lcontent-line span {
  min-width: 0; color: var(--fg); font-family: var(--mono); font-size: 11px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.insights-page .lcontent details { color: var(--mut); font-size: 11px; }
.insights-page .lcontent summary {
  cursor: pointer; user-select: none; display: inline-flex; width: fit-content;
  border: 1px dashed var(--line); border-radius: 999px; padding: 2px 8px; background: var(--bg);
}
.insights-page .lcontent summary:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .lcontent details[open] .lcontent-more { margin-top: 6px; max-height: 260px; overflow: auto; padding-right: 2px; }
.insights-page .lcontent details[open] .lcontent-line span {
  display: block; max-height: 96px; overflow: auto; white-space: pre-wrap;
}
.insights-page .lcontent-omitted,
.insights-page .lcontent-empty { color: var(--mut); font-size: 11px; }

/* diagnosis-driven: recommendations as evidence entry points + focus/highlight */
.insights-page .rec.rec-clickable {
  cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit;
  appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s, transform .04s;
}
.insights-page .rec.rec-clickable:hover { border-color: var(--acc); }
.insights-page .rec.rec-clickable:active { transform: translateY(1px); }
.insights-page .rec.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .rec-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--acc); }
.insights-page .rec.active .rec-cta::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--acc); }
.insights-page .spanrow.hot { border-left-width: 4px; box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .tracehead .ev-toggle {
  cursor: pointer; font: inherit; font-size: 11px; color: var(--mut); background: var(--bg);
  border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.insights-page .tracehead .ev-toggle:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .ev-reason { margin: 0 0 8px; font-size: 12px; color: var(--mut); line-height: 1.45; }

/* per-turn efficiency metrics (read/edit/run/fail/time + dominant phase) */
.insights-page .ldom { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; color: var(--fg); flex: 0 0 auto; }
.insights-page .ldom::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--mut); }
.insights-page .ldom.phase-research::before { background: var(--ph-research); }
.insights-page .ldom.phase-edit::before { background: var(--ph-edit); }
.insights-page .ldom.phase-run::before { background: var(--ph-run); }
.insights-page .ldom.phase-delegate::before { background: var(--ph-delegate); }
.insights-page .ldom.phase-discuss::before { background: var(--ph-discuss); }
.insights-page .lmets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.insights-page .lmet {
  display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--mut);
  background: var(--ins-inner); border-radius: 6px; padding: 2px 7px; border-left: 2px solid var(--line);
}
.insights-page .lmet i { font-style: normal; }
.insights-page .lmet b { color: var(--fg); font-weight: 700; font-family: var(--mono); }
.insights-page .lmet.zero { opacity: .4; }
.insights-page .lmet.phase-research { border-left-color: var(--ph-research); }
.insights-page .lmet.phase-edit { border-left-color: var(--ph-edit); }
.insights-page .lmet.phase-run { border-left-color: var(--ph-run); }
.insights-page .lmet.phase-delegate { border-left-color: var(--ph-delegate); }
.insights-page .lmet.phase-discuss { border-left-color: var(--ph-discuss); }
.insights-page .lmet-bad { border-left-color: var(--bad); color: var(--bad); }
.insights-page .lmet-bad b { color: var(--bad); }
.insights-page .lmet-dur { border-left-color: var(--acc); }
.insights-page .lrow.hot { border-left-width: 4px; box-shadow: 0 0 0 1px var(--acc) inset; }

/* enriched evidence: intent→result span rows */
.insights-page .span-subj { font-family: var(--mono); font-size: 11px; color: var(--fg); background: var(--ins-recess); border-radius: 5px; padding: 1px 6px; }
.insights-page .span-dur { margin-left: auto; color: var(--mut); font-size: 11px; font-family: var(--mono); flex: 0 0 auto; }
.insights-page .span-outcome { margin-top: 4px; }
.insights-page .span-res { display: inline-flex; align-items: center; font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); }
.insights-page .span-res.rc-bad { color: var(--bad); border-color: var(--bad); background: var(--danger-soft); }
/* evidence groups (失败/慢/返工) */
.insights-page .evidence { display: grid; gap: 12px; }
.insights-page .evgroup { display: grid; gap: 6px; }
.insights-page .evgroup-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); }
.insights-page .evgroup-head b { font-weight: 700; }
.insights-page .evgroup-head span { color: var(--mut); background: var(--ins-inner); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.insights-page .evgroup-failure .evgroup-head b { color: var(--bad); }
.insights-page .evgroup-slow .evgroup-head b { color: var(--warn); }
.insights-page .ev-timeline > summary { cursor: pointer; user-select: none; color: var(--mut); font-size: 12px; padding: 4px 0; list-style-position: inside; }
.insights-page .ev-timeline > summary:hover { color: var(--fg); }
.insights-page .ev-timeline[open] { display: grid; gap: 5px; margin-top: 2px; }
/* 轮次效率 cards */
.insights-page .turnlist { display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.insights-page .turncard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--mut); border-radius: var(--radius-lg); padding: 9px 12px; }
.insights-page .turncard.sev-bad { border-left-color: var(--bad); }
.insights-page .turncard.sev-warn { border-left-color: var(--warn); }
.insights-page .turncard.sev-info { border-left-color: var(--acc); }
.insights-page .turncard.hot { box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .turncard-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.insights-page .turn-no { color: var(--mut); font-family: var(--mono); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.insights-page .turn-headline { font-size: 13px; font-weight: 650; color: var(--fg); }
.insights-page .turn-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.insights-page .tm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .tm b { color: var(--fg); font-weight: 800; font-family: var(--mono); }
.insights-page .tm.bad {
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
  color: var(--bad);
}
.insights-page .tm.bad b { color: var(--bad); }
.insights-page .turn-ev { margin-top: 8px; }
.insights-page .turn-ev > summary { cursor: pointer; user-select: none; color: var(--mut); font-size: 11px; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 8px; width: fit-content; list-style-position: inside; }
.insights-page .turn-ev > summary:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .turn-ev[open] .spanlist { margin-top: 6px; }
.insights-page .turn-hidden { padding: 6px 2px 0; font-size: 11px; }

/* ── v3: actionable recommendations + compact evidence rows + 详情 drawer + per-turn timeline ── */
.insights-page .rec-impact { font-size: 12px; color: var(--fg); line-height: 1.45; }
.insights-page .rec-actions { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.insights-page .rec-actions li { font-size: 12px; color: var(--fg); line-height: 1.4; }
.insights-page .rec-why { font-size: 11px; color: var(--mut); line-height: 1.4; }

/* compact span row: one dense flex line (.sprow-line) + optional 详情 drawer (.spandetail) */
.insights-page .spanrow { display: block; grid-template-columns: none; padding: 0; overflow: hidden; }
.insights-page .sprow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 6px 9px; font-size: 12px; }
.insights-page .sprow-line.clickable { cursor: pointer; }
.insights-page .sprow-line.clickable:hover { background: var(--ins-inner); }
.insights-page .spanrow.open > .sprow-line { background: var(--ins-inner); }
.insights-page .sprow-line.clickable:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.insights-page .span-turn { color: var(--mut); font-family: var(--mono); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.insights-page .span-what { color: var(--fg); font-weight: 600; flex: 0 0 auto; }
.insights-page .span-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.insights-page .span-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.insights-page .span-tag.tg-failure {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}
.insights-page .span-tag.tg-slow {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}
.insights-page .span-tag.tg-retry {
  color: var(--ph-delegate);
  border-color: color-mix(in srgb, var(--ph-delegate) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--ph-delegate) 8%, var(--surface));
}
.insights-page .span-detail-btn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 11px; color: var(--mut);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px;
}
.insights-page .span-detail-btn:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .spanrow.open .span-detail-btn { color: var(--acc); border-color: var(--acc); }

.insights-page .spandetail { border-top: 1px dashed var(--line); background: var(--ins-recess); padding: 9px 11px; display: grid; gap: 9px; }
.insights-page .span-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px 14px; margin: 0; }
.insights-page .span-kv > div { display: grid; gap: 1px; min-width: 0; }
.insights-page .span-kv dt { color: var(--mut); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.insights-page .span-kv dd { margin: 0; color: var(--fg); font-size: 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.insights-page .span-flank { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--mut); font-family: var(--mono); }
.insights-page .span-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insights-page .span-ctx-label { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }

/* operation strip — phase-coloured timeline glyphs (shared by drawer + per-turn rows) */
.insights-page .opstrip { display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.insights-page .op { width: 9px; height: 9px; border-radius: 2px; background: var(--ph-discuss); position: relative; opacity: .9; }
.insights-page .op.ph-research { background: var(--ph-research); }
.insights-page .op.ph-edit { background: var(--ph-edit); }
.insights-page .op.ph-run { background: var(--ph-run); }
.insights-page .op.ph-delegate { background: var(--ph-delegate); }
.insights-page .op.ph-discuss { background: var(--ph-discuss); }
.insights-page .op.bad { outline: 1.5px solid var(--bad); outline-offset: 1px; }
.insights-page .op.cur { outline: 2px solid var(--acc); outline-offset: 1px; transform: scale(1.2); z-index: 1; }

/* 动作 span — filter chips + table */
.insights-page .spanfilter:not(.cli-filter) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.insights-page .spanchip {
  cursor: pointer; font: inherit; font-size: 12px; color: var(--mut);
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
}
.insights-page .spanchip b { color: var(--fg); font-family: var(--mono); margin-left: 4px; }
.insights-page .spanchip:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .spanchip.on { color: var(--fg); border-color: var(--acc); background: var(--accent-soft); }
.insights-page .spanchip.tg-failure.on { border-color: var(--bad); color: var(--bad); }
.insights-page .spanchip.tg-slow.on { border-color: var(--warn); color: var(--warn); }
/* block (not grid): grid items with overflow:hidden collapse their auto-row to the border height */
.insights-page .spantable { display: block; max-height: 60vh; overflow: auto; padding-right: 2px; }
.insights-page .spantable > .spanrow { margin-bottom: 5px; }
.insights-page .spantable > .spanrow:last-child { margin-bottom: 0; }

/* 逐轮对账 — per-turn timeline (all turns; normal collapsed, flagged severity-coloured) */
/* block (not grid): grid items with overflow:hidden collapse their auto-row to the border height */
.insights-page .turnlist { display: block; max-height: 62vh; overflow: auto; padding-right: 2px; }
.insights-page .turnlist > .turnrow { margin-bottom: 8px; }
.insights-page .turnlist > .turnrow:last-child { margin-bottom: 0; }
.insights-page .turn-sum { padding: 0 2px 4px; font-size: 11px; }
/* 会话轨迹 turn-rail */
.insights-page .turnrail-block { background: var(--ins-inner); }
.insights-page .turnrail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.insights-page .turnrail-legend { display: flex; gap: 11px; flex-wrap: wrap; font-size: 11px; color: var(--mut); }
.insights-page .rl-item { display: inline-flex; align-items: center; gap: 4px; }
.insights-page .rl-item i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.insights-page .turnrail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
/* filled phase-color nodes on a serial main line (mirrors reference design) */
.insights-page .railnode { position: relative; min-width: 27px; height: 27px; padding: 0 7px; border: none; border-radius: 7px; background: var(--ph-discuss); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s ease, box-shadow .1s ease; }
.insights-page .railnode > span { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.insights-page .railnode:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.insights-page .railnode.phase-research { background: var(--ph-research); }
.insights-page .railnode.phase-edit { background: var(--ph-edit); }
.insights-page .railnode.phase-run { background: var(--ph-run); }
.insights-page .railnode.phase-delegate { background: var(--ph-delegate); }
.insights-page .railnode.phase-discuss { background: var(--ph-discuss); }
.insights-page .railnode.phase-unknown { background: var(--ph-unknown); }
.insights-page .railnode.hot { outline: 2px solid var(--acc); outline-offset: 1px; }
.insights-page .railnode.dim { opacity: .3; }
.insights-page .railnode .rb { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ins-inner); }
.insights-page .railnode .rb-fail { top: -3px; right: -3px; background: var(--bad); }
.insights-page .railnode .rb-slow { bottom: -3px; right: -3px; background: var(--warn); }
.insights-page .railnode .rb-rec { top: -3px; left: -3px; background: var(--acc); }
/* 委派分支 — subagent branch dots between main-line nodes */
.insights-page .railbranch { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; }
.insights-page .rbr-sub { width: 6px; height: 6px; border-radius: 50%; background: #2bb6c4; display: inline-block; }
.insights-page .rl-sep { border-left: 1px solid var(--line); padding-left: 11px; }
/* 工作时序 Gantt */
.insights-page .gantt-block { background: var(--ins-inner); }
.insights-page .gantt-cap { font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .gantt { margin-top: 10px; }
.insights-page .gtrack { position: relative; height: 34px; background: var(--ins-recess); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.insights-page .gbar { position: absolute; top: 5px; height: 24px; min-width: 2px; padding: 0; border: none; border-radius: 2px; background: var(--ph-discuss); opacity: .8; cursor: pointer; }
.insights-page .gbar:hover { opacity: 1; box-shadow: 0 0 0 1px var(--fg); z-index: 2; }
.insights-page .gbar.phase-research { background: var(--ph-research); }
.insights-page .gbar.phase-edit { background: var(--ph-edit); }
.insights-page .gbar.phase-run { background: var(--ph-run); }
.insights-page .gbar.phase-delegate { background: var(--ph-delegate); }
.insights-page .gbar.phase-discuss { background: var(--ph-discuss); }
.insights-page .gbar.phase-unknown { background: var(--ph-unknown); }
.insights-page .gbar.gbar-slow { top: 1px; height: 32px; }
.insights-page .gbar.gbar-fail { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); opacity: 1; }
/* 上下文曲线 context curve */
.insights-page .ctxcurve-block { background: var(--ins-inner); }
.insights-page .ctxchart { display: flex; gap: 8px; margin-top: 10px; }
.insights-page .ctxyaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 52px; padding-bottom: 16px; font-size: 10px; color: var(--mut); font-variant-numeric: tabular-nums; }
.insights-page .ctxplot { flex: 1; min-width: 0; }
.insights-page .ctxcurve { display: block; width: 100%; height: 72px; background: var(--ins-recess); border: 1px solid var(--line); border-radius: 6px; }
.insights-page .ctxline { fill: none; stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.insights-page .ctxarea { fill: var(--accent-soft); opacity: .4; stroke: none; }
.insights-page .ctxhit { fill: transparent; cursor: crosshair; }
.insights-page .ctxhit:hover { fill: var(--acc); opacity: .12; }
.insights-page .ctxxaxis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10px; color: var(--mut); font-variant-numeric: tabular-nums; }
/* shared hover tooltip for rail / gantt / context curve */
.insights-page .ins-tip { position: fixed; z-index: 1200; pointer-events: none; max-width: 340px; padding: 5px 9px; font-size: 11px; line-height: 1.5; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .32); font-variant-numeric: tabular-nums; white-space: nowrap; }
.insights-page .ins-tip[hidden] { display: none; }
.insights-page .turnrow { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ph-discuss); border-radius: var(--radius-lg); overflow: hidden; }
.insights-page .turnrow.sev-bad { border-left-color: var(--bad); }
.insights-page .turnrow.sev-warn { border-left-color: var(--warn); }
.insights-page .turnrow.sev-info { border-left-color: var(--line); }
.insights-page .turnrow.flagged { background: var(--ins-inner); }
.insights-page .turnrow.hot { box-shadow: 0 0 0 1px var(--acc) inset; }
.insights-page .turnline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 11px; }
.insights-page .turnrow .turn-headline { font-size: 12px; }
.insights-page .turnrow.sev-info .turn-headline { color: var(--mut); font-weight: 500; }
.insights-page .turn-strip { flex: 1 1 120px; }
.insights-page .turn-mini { font-size: 11px; color: var(--mut); font-family: var(--mono); flex: 0 0 auto; }
.insights-page .turn-expand-btn {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 11px; color: var(--mut);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px;
}
.insights-page .turn-expand-btn:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .turnrow.open .turn-expand-btn { color: var(--acc); border-color: var(--acc); }
.insights-page .turn-prompt { display: flex; gap: 8px; padding: 0 11px 8px; font-size: 12px; align-items: flex-start; }
.insights-page .tp-label { flex: 0 0 auto; font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; margin-top: 2px; }
/* prompt source attribution chip (人 / bot / a2a) — replaces the generic 用户 chip when known */
.insights-page .tp-src { display: inline-flex; align-items: center; gap: 3px; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.insights-page .tp-src-bot { border-color: var(--ph-delegate); color: var(--ph-delegate); }
.insights-page .tp-src-a2a { border-color: var(--acc); color: var(--acc); }
.insights-page .tp-src-system { border-color: var(--line); color: var(--mut); opacity: .85; }
.insights-page .tp-mentions { font-size: 10px; color: var(--mut); align-self: center; }
/* 系统 sender filter chip is a muted opt-in (codex: system 默认弱化) */
.insights-page .spanchip-sys { color: var(--mut); opacity: .8; }
.insights-page .spanchip-sys.on { opacity: 1; }

/* full-text prompt modal (老滕: 弹窗看全文) — fixed overlay + centred reading panel */
.insights-page .insight-modal { position: fixed; inset: 0; z-index: 1000; }
.insights-page .insight-modal[hidden] { display: none; }
.insights-page .modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(3px); }
.insights-page .modal-panel { position: relative; margin: 6vh auto 0; width: min(760px, calc(100% - 32px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--modal-shadow); overflow: hidden; animation: insight-fade-up .18s ease both; }
.insights-page .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; }
.insights-page .modal-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.insights-page .modal-turnno { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.insights-page .modal-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.insights-page .modal-close { cursor: pointer; font-size: 20px; line-height: 1; color: var(--mut); background: none; border: none; padding: 0 2px; }
.insights-page .modal-close:hover { color: var(--fg); }
.insights-page .modal-body { padding: 14px 16px; overflow: auto; }
.insights-page .modal-md { font-size: 13px; }
.insights-page .modal-raw { font-size: 12px; max-height: none; }
.insights-page .modal-trunc { margin: 10px 0 0; font-size: 11px; }

/* 对话回放 (conversation replay) — Feishu-style chat bubbles + load-more */
.insights-page .convo { display: flex; flex-direction: column; gap: 10px; }
.insights-page .convo-controls { display: flex; flex-direction: column; gap: 8px; }
.insights-page .convo-search { width: 100%; padding: 7px 11px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--fg); font: inherit; font-size: 13px; }
.insights-page .convo-search:focus { outline: none; border-color: var(--acc); }
.insights-page .convo-filters { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.insights-page .convo-filters .spanfilter { margin-bottom: 0; align-items: center; }
.insights-page .convo-flabel { font-size: 11px; color: var(--mut); margin-right: 2px; align-self: center; }
.insights-page .convothread { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow: auto; padding: 4px 2px; }
.insights-page .cbub { max-width: 82%; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 11px; display: flex; flex-direction: column; gap: 5px; }
.insights-page .cbub-left { align-self: flex-start; border-top-left-radius: 3px; }
.insights-page .cbub-right { align-self: flex-end; border-top-right-radius: 3px; background: var(--accent-soft); border-color: var(--acc); }
.insights-page .cbub.sev-bad { border-left: 3px solid var(--bad); }
.insights-page .cbub.sev-warn { border-left: 3px solid var(--warn); }
.insights-page .cbub-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.insights-page .cbub-turn { font-family: var(--mono); font-size: 10px; color: var(--mut); }
.insights-page .cbub-opcount { font-size: 10px; color: var(--mut); }
.insights-page .cbub-rec { font-size: 10px; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 0 6px; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights-page .cbub-body { font-size: 13px; min-width: 0; }
.insights-page .cbub-body .md-body { font-size: 13px; }
.insights-page .cbub-foot { display: flex; justify-content: flex-end; }
.insights-page .cbub-ops { background: var(--ins-recess); max-width: 88%; }
/* agent narration ("说了什么") inside the agent bubble, above its operations */
.insights-page .cbub-saywrap { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.insights-page .cbub-say { font-size: 13px; color: var(--fg); border-left: 2px solid var(--acc); padding-left: 9px; overflow-wrap: anywhere; word-break: break-word; }
.insights-page .cbub-say .md-body { font-size: 13px; }
.insights-page .cbub-ops-list { display: flex; flex-direction: column; gap: 3px; }
.insights-page .cop-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; padding: 3px 5px; border-radius: 6px; }
.insights-page .cop-line.clickable { cursor: pointer; }
.insights-page .cop-line.clickable:hover { background: var(--ins-inner); }
.insights-page .cop.open > .cop-line { background: var(--ins-inner); }
.insights-page .cop.bad .span-what { color: var(--bad); }
.insights-page .cop .spandetail { border: 1px solid var(--line); border-radius: 6px; margin-top: 3px; }
.insights-page .convo-more { display: flex; justify-content: center; padding: 6px 0 2px; }
.insights-page p.convo-more { font-size: 11px; }
.insights-page .convo-loadmore { font-size: 12px; padding: 5px 16px; }

/* 文件改动 + 跑过的命令 — work-summary panels at the top of 动作 span */
.insights-page .worksum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.insights-page .ws-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ins-recess); padding: 9px 11px; min-width: 0; }
.insights-page .ws-panel h4 { margin: 0 0 7px; font-size: 12px; color: var(--mut); font-weight: 650; }
.insights-page .ws-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.insights-page .ws-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.insights-page .ws-path, .insights-page .ws-cmd { font-family: var(--mono); font-size: 11px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.insights-page .ws-path { direction: rtl; text-align: left; }
.insights-page .ws-row.bad .ws-cmd { color: var(--bad); }
.insights-page .ws-meta { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; color: var(--mut); font-size: 10.5px; font-family: var(--mono); }
.insights-page .ws-stat { flex: 0 0 auto; display: inline-flex; gap: 7px; align-items: baseline; font-family: var(--mono); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.insights-page .ws-stat-edits { color: var(--mut); font-weight: 500; }
.insights-page .ws-add { color: var(--success); }
.insights-page .ws-del { color: var(--danger); }
.insights-page .ws-x { color: var(--mut); }
.insights-page .ws-fail { color: var(--bad); }
@media (max-width: 760px) { .insights-page .worksum { grid-template-columns: 1fr; } }
/* prompt 原文: markdown-rendered by default, clamped (展开 lifts the clamp, 原文 shows raw) */
.insights-page .tp-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.insights-page .tp-md { max-height: 7.5em; overflow: auto; }
.insights-page .tp-md.expanded { max-height: 60vh; }
.insights-page .tp-actions { display: flex; gap: 6px; }
.insights-page .tp-toggle { cursor: pointer; font: inherit; font-size: 10px; color: var(--mut); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.insights-page .tp-toggle:hover { color: var(--fg); border-color: var(--acc); }
.insights-page .tp-raw { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
/* markdown body — compact, scoped to .insights-page, dashboard tokens only (no new palette) */
.insights-page .md-body { color: var(--fg); line-height: 1.55; overflow-wrap: anywhere; }
.insights-page .md-body > :first-child { margin-top: 0; }
.insights-page .md-body > :last-child { margin-bottom: 0; }
.insights-page .md-body p { margin: 4px 0; }
.insights-page .md-body h1, .insights-page .md-body h2, .insights-page .md-body h3,
.insights-page .md-body h4, .insights-page .md-body h5, .insights-page .md-body h6 { margin: 7px 0 3px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.insights-page .md-body ul, .insights-page .md-body ol { margin: 4px 0; padding-left: 18px; }
.insights-page .md-body li { margin: 1px 0; }
.insights-page .md-body blockquote { margin: 5px 0; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--mut); }
.insights-page .md-body a { color: var(--acc); text-decoration: underline; }
.insights-page .md-body code { font-family: var(--mono); font-size: 11px; background: var(--ins-inner); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.insights-page .md-body pre { margin: 5px 0; background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; overflow-x: auto; }
.insights-page .md-body pre code { background: none; border: none; padding: 0; font-size: 11px; line-height: 1.5; white-space: pre; }
.insights-page .md-body table { border-collapse: collapse; margin: 5px 0; font-size: 11px; display: block; overflow-x: auto; }
.insights-page .md-body th, .insights-page .md-body td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; }
.insights-page .md-body th { background: var(--ins-inner); }
.insights-page .md-body img { max-width: 100%; height: auto; }
.insights-page .md-body hr { border: none; border-top: 1px solid var(--line); margin: 7px 0; }
.insights-page .turn-advice { padding: 0 11px 8px; font-size: 12px; color: var(--warn); line-height: 1.45; }
.insights-page .turnrow.sev-bad .turn-advice { color: var(--bad); }
.insights-page .turn-detail { border-top: 1px dashed var(--line); background: var(--ins-recess); padding: 9px 11px; display: grid; gap: 8px; }
.insights-page .turn-detail .turn-metrics { margin-top: 0; }

/* raw command/output preview inside a 详情 drawer (owner-only, run-class spans) */
.insights-page .span-io { display: grid; gap: 3px; }
.insights-page .span-io-label { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.insights-page .span-io-text {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--fg);
  background: var(--ins-inner); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
  max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 逐轮对账 grouped-by-recommendation mode: section header + turns beneath it */
.insights-page .ledgersort { margin-bottom: 10px; }
.insights-page .turn-group { margin-bottom: 16px; }
.insights-page .turn-group:last-child { margin-bottom: 0; }
.insights-page .turn-group > .turnrow { margin-bottom: 8px; }
.insights-page .turn-group > .turnrow:last-child { margin-bottom: 0; }
.insights-page .turn-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 7px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.insights-page .turn-group-head b { font-size: 12px; color: var(--fg); }
.insights-page .turn-group-head span { font-size: 11px; color: var(--mut); font-family: var(--mono); flex: 0 0 auto; }
.insights-page .turn-group-head.sev-bad b { color: var(--bad); }
.insights-page .turn-group-head.sev-warn b { color: var(--warn); }

/* motion: staggered page-load reveal + grow failure bars */
@keyframes insight-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes insight-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.insights-page .insights-metrics { animation: insight-fade-up .35s ease both; }
.insights-page .insights-overview-grid { animation: insight-fade-up .35s ease both; animation-delay: .05s; }
.insights-page .insight-panel { animation: insight-fade-up .35s ease both; animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .insights-page .insights-metrics,
  .insights-page .insights-overview-grid,
  .insights-page .insight-panel,
  .insights-page .hbfill { animation: none; }
  .insights-page .srow { transition: none; }
  .insights-page .srow:hover { transform: none; }
}

/* ─── Dropdown baseline ────────────────────────────────────────────────────
   Workbench SortMenu is the source of truth: surface trigger, soft border,
   capsule shape, compact typography, and light accent hover/selected states. */
.page select:not([multiple]),
dialog select:not([multiple]) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 36px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  background-position: right 14px center;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
  box-shadow: none;
}

.page select:not([multiple]):hover:not(:disabled),
dialog select:not([multiple]):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background-color: color-mix(in srgb, var(--accent) 4%, var(--surface));
  color: var(--accent-strong);
}

.page select:not([multiple]):focus,
dialog select:not([multiple]):focus {
  border-color: var(--accent);
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page select[multiple],
dialog select[multiple] {
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  background-image: none;
  color: var(--fg);
  box-shadow: none;
}

.page select[multiple]:hover:not(:disabled),
dialog select[multiple]:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
}

:root[data-theme="dark"] .page select:not([multiple]),
:root[data-theme="dark"] dialog select:not([multiple]) {
  background-color: var(--surface);
  border-color: var(--border-soft);
}

:root[data-theme="dark"] .page select[multiple],
:root[data-theme="dark"] dialog select[multiple] {
  background-color: var(--surface);
  border-color: var(--border-soft);
}

.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.page.insights-page form.dashboard-toolbar > input[type="search"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.page.insights-page form.dashboard-toolbar > .ins-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.page.insights-page form.dashboard-toolbar > .ins-clear:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

/* ─── Bot 配置：平台化表单控件 ───────────────────────────────────────────── */
.bot-defaults-page .bd-detail,
.bot-defaults-page .bd-card.bd-profile {
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root[data-theme="dark"] .bot-defaults-page .bd-card.bd-profile {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  background-image: none;
}

.bot-defaults-page .bd-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.bot-defaults-page .bd-profile-head > .bd-profile-meta {
  align-self: center;
}

.bot-defaults-page .bd-roster {
  top: 0;
}

.bot-defaults-page #bd-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 5px;
}

.bot-defaults-page #bd-filters > input[type="search"] {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page #bd-filters > input[type="search"]:hover:not(:disabled),
.bot-defaults-page #bd-filters > input[type="search"]:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-roster-list {
  display: grid;
  gap: 3px;
  min-width: 0;
}

@media (max-width: 980px) {
  .bot-defaults-page .bd-roster {
    display: grid;
    overflow: visible;
  }

  .bot-defaults-page .bd-roster-list {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .bot-defaults-page .bd-roster-list .bd-roster-item {
    flex: 0 0 auto;
  }
}

.bot-defaults-page #bd-refresh { margin-left: 0; }

.bot-defaults-page .bd-name-editor .bd-name-input {
  box-sizing: border-box;
  flex: 1 1 260px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 2px;
}

.bot-defaults-page .bd-profile-id .bd-name-editor[hidden] {
  display: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input {
  box-sizing: border-box;
  flex: 1 1 280px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input:hover:not(:disabled),
.bot-defaults-page .bd-profile-id .bd-name-editor .bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  box-sizing: border-box;
  flex: 1 1 280px;
  width: auto;
  min-width: 180px;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.bot-defaults-page .bd-profile-id .bd-name-editor input.bd-name-input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-name-editor button {
  flex: none;
}

.bot-defaults-page .bd-name-editor .bd-name-input:hover:not(:disabled),
.bot-defaults-page .bd-name-editor .bd-name-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

@media (max-width: 980px) {
  .bot-defaults-page .bd-profile-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bot-defaults-page .bd-profile-head > .bd-profile-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.bot-defaults-page .bd-body .bd-row :where(label, .bd-field) {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-body .bd-row {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.bot-defaults-page .bd-body .bd-row + .bd-row,
.bot-defaults-page .bd-body .toggle-row + .bd-row,
.bot-defaults-page .bd-body .bd-row + .toggle-row {
  margin-top: 12px;
}

.bot-defaults-page .bd-body .bd-row :where(label, .bd-field) > span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.bot-defaults-page .bd-field-title,
.bot-defaults-page .toggle-tx .bd-field-title,
.bot-defaults-page :where(.bd-section-title, .bd-subsection-title) .bd-field-title,
.bot-defaults-page .bd-body .bd-row .bd-field-title {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  column-gap: 6px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.bot-defaults-page .bd-field-title-text {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
}

.bot-defaults-page .bd-info-tip {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  outline: none;
  color: var(--faint);
  cursor: default;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-field-title-text,
.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-info-tip,
.bot-defaults-page .bd-body .bd-row .bd-field-title .ui-info-mark {
  margin: 0;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-field-title-text {
  display: block;
}

.bot-defaults-page .bd-body .bd-row .bd-field-title .bd-info-tip {
  display: inline-grid;
}

.bot-defaults-page .bd-info-tip .ui-info-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--border-soft) 92%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted));
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.bot-defaults-page .bd-info-tip:hover .ui-info-mark,
.bot-defaults-page .bd-info-tip:focus .ui-info-mark,
.bot-defaults-page .bd-info-tip:focus-within .ui-info-mark {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.bot-defaults-page .bd-info-tip:hover,
.bot-defaults-page .bd-info-tip:focus,
.bot-defaults-page .bd-info-tip:focus-within {
  color: var(--accent);
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .bd-section-note {
  margin: 6px 0 0;
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .bd-section-note + :where(input, textarea, .bd-row) {
  margin-top: 8px;
}

.bot-defaults-page .bd-runtime-env > .bd-subsection:first-of-type {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"], textarea) {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
}

.bot-defaults-page .bd-tile textarea {
  min-height: 96px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font: 12px/1.5 var(--mono);
  resize: vertical;
}

.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
  outline: none;
}

.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]):hover:not(:disabled),
.bot-defaults-page .bd-tile :where(input[type="text"], input[type="number"]):focus,
.bot-defaults-page .bd-tile textarea:hover:not(:disabled),
.bot-defaults-page .bd-tile textarea:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
.bot-defaults-page .bd-tile input[type="text"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus,
.bot-defaults-page .bd-tile input[type="number"]:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  box-shadow: none;
}

.bot-defaults-page .bd-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.bot-defaults-page .bd-toggle-grid .toggle-row {
  min-width: 0;
  height: 100%;
  margin: 0;
}

.bot-defaults-page .bd-substitute-target-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.75fr) minmax(126px, 1.35fr) minmax(104px, 1fr) var(--button-height);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-row > :where(.bd-field-menu, input, .bd-substitute-target-name) {
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-add,
.bot-defaults-page .bd-substitute-target-remove {
  display: inline-grid;
  place-items: center;
  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}

.bot-defaults-page .bd-substitute-target-add {
  justify-self: start;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
}

.bot-defaults-page .bd-substitute-target-add,
.bot-defaults-page .bd-substitute-target-remove {
  position: relative;
}

.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: inherit;
  font-size: 0;
  line-height: 1;
}

.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span::before,
.bot-defaults-page .bd-body .bd-substitute-targets :where(.bd-substitute-target-add, .bd-substitute-target-remove) > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  content: '';
  transform: translate(-50%, -50%);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-add > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-remove > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bot-defaults-page .bd-body .bd-substitute-targets .bd-substitute-target-remove > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.bot-defaults-page .bd-substitute-target-add:hover:not(:disabled),
.bot-defaults-page .bd-substitute-target-remove:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.bot-defaults-page .bd-substitute-target-remove:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

@media (max-width: 720px) {
  .bot-defaults-page .bd-toggle-grid {
    grid-template-columns: 1fr;
  }

  .bot-defaults-page .bd-substitute-target-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) var(--button-height);
    grid-template-areas:
      "type id remove"
      "name name remove";
  }

  .bot-defaults-page .bd-substitute-target-type { grid-area: type; }
  .bot-defaults-page .bd-substitute-target-id { grid-area: id; }
  .bot-defaults-page .bd-substitute-target-name { grid-area: name; }
  .bot-defaults-page .bd-substitute-target-remove { grid-area: remove; }
}

.bot-defaults-page .bd-substitute-target-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-name > input {
  flex: 1 1 auto;
  min-width: 0;
}

.bot-defaults-page .bd-substitute-target-name > input:disabled {
  background: transparent;
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.bot-defaults-page .bd-substitute-target-name-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

:root[data-theme="dark"] .bot-defaults-page .bd-substitute-target-name-chip {
  color: var(--bg);
}

.bot-defaults-page .bd-substitute-target-resolving {
  font-size: 12px;
  color: var(--muted);
}

.bot-defaults-page .bd-substitute-target-resolution-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-muted));
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.bot-defaults-page .bd-field-menu {
  width: 100%;
  min-width: 0;
}

.bot-defaults-page .bd-field-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
  line-height: 1;
}

.bot-defaults-page .bd-field-menu .sect-sort-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  max-width: 100%;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.bot-defaults-page .bd-field-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  transform: none;
  z-index: 1300;
}

.bot-defaults-page .bd-field-menu[open] {
  position: relative;
  z-index: 1300;
}

.bot-defaults-page :where(.bd-section, .bd-subsection) > .actions,
.bot-defaults-page .bd-row > .actions {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: var(--button-height);
  margin: 10px 0 0;
}

.bot-defaults-page .actions .oncall-status {
  order: -1;
  margin-right: auto;
}

.bot-defaults-page .actions .oncall-status:empty {
  display: none;
}

.bot-defaults-page .actions:not(:has(button)):not(:has(.oncall-status:not(:empty))) {
  display: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button,
.bot-defaults-page #bd-refresh,
.bot-defaults-page .page-primary-action,
.bot-defaults-page .bd-feishu-login {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button.primary,
.bot-defaults-page #bd-refresh,
.bot-defaults-page .page-primary-action,
.bot-defaults-page .bd-feishu-login {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.bot-defaults-page :where(.actions, .bd-name-editor) button.primary:hover:not(:disabled),
.bot-defaults-page #bd-refresh:hover:not(:disabled),
.bot-defaults-page .page-primary-action:hover:not(:disabled),
.bot-defaults-page .bd-feishu-login:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: none;
}

.bot-defaults-page .actions button:not(.primary):not(.danger):hover:not(:disabled),
.bot-defaults-page .bd-name-editor button:not(.primary):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-form {
  justify-items: stretch;
  width: 100%;
}

dialog.onboarding-dialog .onboarding-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

dialog.onboarding-dialog .onboarding-session :where(p, strong, small) {
  display: block;
  margin: 0;
}

dialog.onboarding-dialog .onboarding-session strong {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
}

dialog.onboarding-dialog .onboarding-session small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

dialog.onboarding-dialog button.onboarding-session-action {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  box-shadow: none;
}

dialog.onboarding-dialog button.onboarding-session-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-field {
  width: 100%;
  min-width: 0;
}

dialog.onboarding-dialog .onboarding-field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"], .onboarding-menu) {
  width: 100%;
  min-width: 0;
  max-width: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]) {
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):hover:not(:disabled),
dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):hover:not(:disabled),
dialog.onboarding-dialog .onboarding-field > :where(input[type="text"], input[type="email"]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  outline: none;
  box-shadow: none;
}

dialog.onboarding-dialog .onboarding-menu {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

dialog.onboarding-dialog .onboarding-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  box-sizing: border-box;
  line-height: 1;
}

dialog.onboarding-dialog .onboarding-menu .sect-sort-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  max-width: 100%;
  line-height: 1;
}

dialog.onboarding-dialog .onboarding-menu .sect-sort-pop {
  left: 0;
  width: 100%;
  min-width: 100%;
  transform: none;
}

dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary,
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:hover:not(:disabled),
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:focus,
dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  text-shadow: none;
}

dialog.onboarding-dialog .onboarding-actions button.onboarding-submit.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

dialog.onboarding-dialog .onboarding-technical {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
}

dialog.onboarding-dialog .onboarding-technical > summary {
  cursor: pointer;
  font-weight: 700;
}

dialog.onboarding-dialog .onboarding-technical > code {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  dialog.onboarding-dialog .qr-card,
  dialog.onboarding-dialog .onboarding-status {
    transition-property: opacity;
  }
}

.insights-page .insight-head-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insights-page .insight-head-acts > button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.insights-page .insight-head-acts > .ins-clear {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--muted);
}

.insights-page .insight-head-acts > .ins-clear:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.insights-page .insight-head-acts > button.primary {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}

.insights-page .insight-head-acts > button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.insights-page .insight-heading-actions .insight-palette-trigger {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.insights-page .insight-heading-actions .insight-palette-trigger:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

/* ─── 创建会话 modal ─────────────────────────────────────────────────────── */
.create-session-btn { white-space: nowrap; }
.create-session-modal {
  --cs-gap: 12px;
  --cs-inner-gap: 8px;
  --cs-padding: 18px;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-color: var(--border-soft);
  background: var(--surface);
  overflow: hidden;
}

.create-session-modal .cs-card {
  display: grid;
  gap: var(--cs-gap);
  max-height: calc(100vh - 32px);
  padding: var(--cs-padding);
  overflow: auto;
}

.create-session-modal .cs-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--section-title-row-height);
  margin: 0;
  padding-bottom: var(--cs-gap);
}

.create-session-modal .cs-header h3 {
  display: inline-flex;
  align-items: center;
  min-height: var(--section-title-text-height);
  margin: 0;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: var(--section-title-text-height);
}

.create-session-modal .cs-header h3::before {
  content: none;
}

.create-session-modal #cs-form {
  display: grid;
  gap: var(--cs-gap);
}

.create-session-modal textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  resize: vertical;
  min-height: 124px;
}
.create-session-modal fieldset {
  margin: 0;
  padding: var(--cs-gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}
.create-session-modal [hidden] {
  display: none !important;
}
.create-session-modal legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.create-session-modal .cs-content,
.create-session-modal .cs-bots,
.create-session-modal .cs-lead-row {
  display: grid;
  gap: var(--cs-inner-gap);
}
.create-session-modal .cs-bot-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-inner-gap);
}
.create-session-modal .cs-mode,
.create-session-modal .cs-column {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-inner-gap);
}
.create-session-modal .cs-mode legend,
.create-session-modal .cs-column legend {
  flex: 0 0 100%;
}
.create-session-modal .cs-bot,
.create-session-modal .cs-mode label,
.create-session-modal .cs-column label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--cs-inner-gap);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  min-width: 0;
  margin: 0;
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label)::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--border-soft);
  box-shadow: inset 0 0 0 1px var(--border);
}
.create-session-modal .cs-bot {
  width: auto;
  min-width: 120px;
  max-width: min(220px, 100%);
  margin: 0;
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label) span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-session-modal .cs-bot:hover,
.create-session-modal .cs-mode label:hover,
.create-session-modal .cs-column label:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label):has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong);
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label):has(input:checked)::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label):has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.create-session-modal :where(.cs-bot, .cs-mode label, .cs-column label) input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.create-session-modal fieldset small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.create-session-modal .cs-mode small,
.create-session-modal .cs-column small {
  flex: 0 0 100%;
}
.create-session-modal .cs-advanced-field > small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.create-session-modal .cs-lead-row select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  margin: 0;
  padding: 0 36px 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  background-position: right 14px center;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
}
.create-session-modal .cs-lead-row select:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}
.create-session-modal .cs-lead-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal .cs-advanced {
  display: grid;
  gap: var(--cs-gap);
}
.create-session-modal .cs-advanced-title {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-inner-gap);
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  transition: color 150ms ease;
}
.create-session-modal .cs-advanced-title::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms ease;
}
.create-session-modal .cs-advanced.open .cs-advanced-title::after {
  transform: translateY(2px) rotate(225deg);
}
.create-session-modal .cs-advanced-title:hover {
  color: var(--accent-strong);
}
.create-session-modal .cs-advanced-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.create-session-modal .cs-advanced-fields {
  display: grid;
  gap: var(--cs-gap);
}
.create-session-modal .cs-advanced-field {
  display: grid;
  gap: var(--cs-inner-gap);
  margin: 0;
}
.create-session-modal .cs-advanced-field > span {
  display: block;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  /* The legacy global input reset uses chained :not() selectors with high specificity. */
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  background-clip: padding-box;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"]:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
}
dialog.create-session-modal .cs-advanced input.cs-pill-input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal .cs-loading {
  min-height: 96px;
  padding: var(--cs-gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
}
.create-session-modal .cs-actions {
  gap: var(--cs-inner-gap);
  justify-content: flex-end;
  margin: 0;
}
.create-session-modal .cs-actions button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}
.create-session-modal .cs-submit {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  background: transparent;
  color: var(--accent);
}
.create-session-modal .cs-submit:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}
.create-session-modal .cs-empty {
  margin: 0;
  padding: var(--cs-gap);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--muted);
}
.create-session-modal .cs-warn { color: var(--warning); }
dialog.create-session-modal input.cs-bot-search[type="search"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: var(--button-height) !important;
  min-height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 var(--button-padding-x) !important;
  border: 1px solid var(--border-soft) !important;
  /* Mirrors .cs-pill-input: the legacy global input reset uses high-specificity chained :not() selectors. */
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  background-clip: padding-box;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: normal;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
dialog.create-session-modal input.cs-bot-search[type="search"]:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)) !important;
}
dialog.create-session-modal input.cs-bot-search[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.create-session-modal .cs-keep-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.create-session-modal .cs-keep-open input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
.create-session-modal .cs-keep-open:hover {
  color: var(--fg);
}
.create-session-modal .cs-keep-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
}
.create-session-modal .cs-keep-success a {
  color: inherit;
  font-weight: 700;
}

/* Feishu login QR code inline display */
.st-feishu-qr {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  text-align: center;
}
.st-feishu-qr-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.st-feishu-qr-img { width: 200px; height: 200px; display: block; margin: 0 auto 12px; }
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
}
.st-btn:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.st-btn-ghost { background: transparent; color: var(--muted); }
.st-larkcli-ok { margin: 8px 0 0; font-size: 12px; color: var(--success); }
.st-larkcli-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--warning);
  font-size: 12px;
}
.st-larkcli-warn code {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-size: 11px;
}

/* Shared action-button primitives. Page-level creation keeps its label, while
   refresh remains compact and is named through its native tooltip/ARIA label. */
button.ui-create-action {
  --ui-create-action-gap: 6px;
  --ui-create-action-padding-x: var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-create-action-gap);
  padding-right: var(--ui-create-action-padding-x);
  padding-left: var(--ui-create-action-padding-x);
  white-space: nowrap;
}

.ui-create-action .ui-action-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.ui-create-action-label {
  flex: none;
  min-width: 0;
}

.page-heading-actions > button.ui-refresh-button,
.insights-page .insight-head-acts > button.ui-refresh-button,
.roles-tree-header > button.ui-refresh-button,
#bd-refresh.ui-refresh-button,
#g-refresh.ui-refresh-button,
#skills-refresh.ui-refresh-button,
#roles-refresh.ui-refresh-button,
#roles-profile-refresh.ui-refresh-button,
#insight-refresh.ui-refresh-button {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--button-height);
  min-width: var(--button-height);
  max-width: var(--button-height);
  height: var(--button-height);
  min-height: var(--button-height);
  max-height: var(--button-height);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

button.ui-refresh-button .ui-action-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.page-heading-actions > button.ui-refresh-button:hover:not(:disabled),
.insights-page .insight-head-acts > button.ui-refresh-button:hover:not(:disabled),
.roles-tree-header > button.ui-refresh-button:hover:not(:disabled),
#bd-refresh.ui-refresh-button:hover:not(:disabled),
#g-refresh.ui-refresh-button:hover:not(:disabled),
#skills-refresh.ui-refresh-button:hover:not(:disabled),
#roles-refresh.ui-refresh-button:hover:not(:disabled),
#roles-profile-refresh.ui-refresh-button:hover:not(:disabled),
#insight-refresh.ui-refresh-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

button.ui-refresh-button.is-loading .ui-action-icon {
  animation: ui-refresh-icon-spin 760ms linear infinite;
}

@keyframes ui-refresh-icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  button.ui-refresh-button.is-loading .ui-action-icon {
    animation: none;
  }
}

/* ─── 会议角色预设编辑面（settings 页 VC 区块） ─────────────────────────── */
.vc-profiles-section {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.25));
}
.vc-profile-card {
  border: 1px solid var(--border, rgba(128, 128, 128, 0.25));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vc-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}
.vc-profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.vc-profile-field > span {
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.vc-profile-field-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* 帮助气泡正文：i18n 文案用 \n 分段，按行呈现 */
.vc-profile-help {
  white-space: pre-line;
}
.vc-profiles-freeze {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
}
.vc-profile-field input[type='text'],
.vc-profile-field textarea {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
/* 字段内下拉占满列宽，触发文字不再被全局 92px 截断 */
.vc-profile-field .sect-sort-menu {
  width: 100%;
}
.vc-profile-field .sect-sort-value {
  max-width: none;
  flex: 1;
}
/* Agent 下拉弹层：加宽 + 限高滚动，容纳「名字 · CLI + 告警」两行选项 */
.vc-profile-agent-menu > .sect-sort-pop {
  min-width: min(300px, 84vw);
  max-width: 340px;
  max-height: min(320px, 60vh);
  overflow-y: auto;
}
.vc-profile-agent-menu .sect-sort-pop button {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.4;
  white-space: normal;
}
.vc-agent-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vc-agent-option-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  overflow-wrap: anywhere;
}
.vc-agent-option-cli {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.62;
}
.vc-agent-option-warn {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warning);
}
.vc-profile-instructions textarea {
  resize: vertical;
  min-height: 72px;
}
.vc-profile-count {
  font-style: normal;
  opacity: 0.6;
}
.vc-profile-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.vc-profile-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
}
.vc-profile-hint {
  font-style: normal;
  font-size: 11px;
  opacity: 0.6;
}
.vc-profile-err {
  font-style: normal;
  font-size: 11px;
  color: var(--danger, #d4483b);
}
.vc-profiles-link:disabled {
  opacity: 0.5;
  cursor: default;
}
.vc-profiles-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent, #4a7dff);
  cursor: pointer;
  align-self: flex-start;
}
.vc-profile-remove {
  color: var(--danger, #d4483b);
}
.vc-profiles-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vc-profiles-save {
  font: inherit;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent, #4a7dff);
  background: var(--accent, #4a7dff);
  color: #fff;
  cursor: pointer;
}
.vc-profiles-save:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Installed Skills library: search stays lightweight; selection affordances
   appear only after the explicit Select action. Mutations update cards in place. */
.skills-installed-header-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.skills-installed-header-actions button {
  min-height: var(--button-compact-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.skills-library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.skills-installed-search {
  position: relative;
  display: block;
  min-width: 0;
}

.skills-installed-search > .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;
}

.skills-installed-search input {
  width: 100%;
  min-height: var(--button-height);
  padding-right: 38px;
  border-radius: var(--radius-full);
}

.skills-installed-search [data-action="clear-installed-search"] {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

.skills-installed-search [data-action="clear-installed-search"]:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.skills-select-all-results {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-height);
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-select-all-results input,
.skills-row-title input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.skills-filter-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-installed-live:empty {
  display: none;
}

.skills-installed-live:not(:empty) {
  min-height: 22px;
  margin: -2px 0 12px;
}

.skills-library-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 176px;
  padding: 36px 18px;
  box-sizing: border-box;
  place-content: center;
  text-align: center;
}

.skills-library-empty strong {
  font-size: 14px;
}

.skills-library-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.skills-library-empty button {
  margin-top: 5px;
}

.skills-row-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.skills-row-title > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.skills-canonical-name {
  color: var(--faint) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}

.skills-installed-card {
  transition:
    opacity 190ms ease,
    transform 190ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.skills-installed-card.is-selectable {
  cursor: pointer;
  user-select: none;
}

.skills-installed-card.is-selectable:hover,
.skills-installed-card.is-selectable:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border-soft));
  outline: none;
}

.skills-installed-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.skills-installed-card.is-removing {
  pointer-events: none;
  opacity: .5;
  transform: scale(.985);
}

.skills-removing-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-removing-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border-soft));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ui-refresh-icon-spin 760ms linear infinite;
}

.skills-bulk-action-bar {
  position: sticky;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(620px, calc(100% - 32px));
  min-height: 62px;
  margin: 2px auto 0;
  padding: 10px 12px 10px 18px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-soft) 84%, var(--accent));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--modal-shadow);
  backdrop-filter: blur(16px);
}

.skills-bulk-action-bar > span {
  display: grid;
  gap: 2px;
}

.skills-bulk-action-bar strong {
  font-size: 13px;
}

.skills-bulk-action-bar small {
  color: var(--muted);
  font-size: 11px;
}

.skills-bulk-action-bar button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-weight: 800;
}

.skills-remove-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
}

.skills-remove-dialog::backdrop {
  background: rgba(9, 12, 20, .48);
  backdrop-filter: blur(3px);
}

.skills-remove-dialog > article {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.skills-remove-dialog header {
  display: grid;
  gap: 8px;
}

.skills-remove-dialog h3,
.skills-remove-dialog p {
  margin: 0;
}

.skills-remove-dialog header p,
.skills-remove-dialog-body > p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.skills-remove-dialog-body {
  display: grid;
  gap: 10px;
}

.skills-remove-dialog-body > ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 10px 30px;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  font-family: var(--mono);
  font-size: 12px;
}

.skills-remove-reference-warning {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border-soft));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.skills-remove-reference-warning > strong {
  color: var(--warning);
  font-size: 12.5px;
}

.skills-remove-reference-warning p {
  color: var(--muted);
  font-size: 12px;
}

.skills-remove-reference-warning ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills-remove-reference-warning li {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: 8px;
  font-size: 11.5px;
}

.skills-remove-reference-warning li span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .skills-installed-block > .sect-head {
    align-items: center;
    flex-wrap: nowrap;
  }

  .skills-installed-block > .sect-head .sect-head-hint {
    display: none;
  }

  .skills-installed-header-actions {
    margin-left: auto;
  }

  .skills-library-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .skills-installed-search {
    grid-column: 1 / -1;
  }

  .skills-select-all-results {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
  }

  .skills-filter-count {
    justify-self: start;
  }

  .skills-library-toolbar > .skills-pager {
    justify-self: end;
  }

  .skills-installed-panel {
    padding: 14px;
  }

  .skills-bulk-action-bar {
    width: calc(100% - 20px);
    min-height: 68px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    margin-top: 8px;
    padding: 10px 10px 10px 14px;
  }

  .skills-bulk-action-bar button {
    min-height: 44px;
  }

  .skills-remove-dialog > article {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skills-installed-card {
    transition: opacity 100ms linear;
  }

  .skills-removing-label::before {
    animation: none;
  }
}

/* Mobile dashboard shell ----------------------------------------------------
   The desktop shell deliberately owns the viewport and delegates scrolling to
   main/panel containers. Once the sidebar becomes a top tab rail, keep that
   rail constrained to the viewport (otherwise its max-content width removes
   the horizontal scroll range), and let tall control pages participate in the
   main mobile scroll instead of being squeezed into desktop-sized grid rows. */
@media (max-width: 980px) {
  .chrome-body {
    gap: 0;
  }

  .sidebar {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sidebar-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 720px) {
  main:has(.sessions-page),
  main:has(.groups-page) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  main:has(.sessions-page) .sessions-page {
    height: auto;
    min-height: 100%;
    grid-template-rows: none;
    overflow: visible;
  }

  main:has(.sessions-page) .sessions-page:not(:has(#bulk-bar:not([hidden]))) {
    grid-template-rows: none;
  }

  main:has(.sessions-page) .sessions-heading-main,
  main:has(.sessions-page) .sessions-view-controls {
    width: 100%;
    min-width: 0;
  }

  main:has(.sessions-page) .sessions-view-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main:has(.sessions-page) .sessions-view-toggle button {
    width: auto;
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
    white-space: nowrap;
  }

  main:has(.sessions-page) .bulk-bar {
    top: -16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    box-shadow: 0 0 0 16px var(--bulk-bar-bg), var(--shadow);
  }

  main:has(.sessions-page) .bulk-bar[hidden] {
    display: none;
  }

  main:has(.sessions-page) .bulk-bar #bulk-count {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  main:has(.sessions-page) .bulk-bar button {
    width: 100%;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
  }

  main:has(.sessions-page) .sessions-view-stage,
  main:has(.sessions-page) .sessions-view-stage[data-view="table"] {
    min-height: 0;
    overflow: visible;
  }

  main:has(.sessions-page) .sessions-board {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  main:has(.sessions-page) .session-board-column {
    height: min(70dvh, 640px);
    min-height: 320px;
  }

  main:has(.sessions-page) .sessions-kanban {
    height: auto;
    overflow: visible;
  }

  main:has(.sessions-page) .kanban-column {
    height: min(70dvh, 640px);
    min-height: 320px;
  }

  main:has(.groups-page) .groups-page {
    height: auto;
    min-height: 100%;
    grid-template-rows: none;
    overflow: visible;
  }

  main:has(.groups-page) .groups-page:has(> .hint-warn) {
    grid-template-rows: none;
  }

  main:has(.groups-page) .groups-matrix-section {
    height: min(70dvh, 640px);
    min-height: 320px;
  }
}