/* 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: #8b98aa;
  --border: #d9e0e8;
  --border-soft: #e8edf3;
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-soft: #e3f2fa;
  --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: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --sidebar-width: 236px;
  --mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 280ms;
  /* stacking: numbers match the historical scale so skins/overlays keep order */
  --z-behind: -1;
  --z-fx: 0;
  --z-content: 1;
  --z-sticky-cell: 2;
  --z-sticky-corner: 3;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-dropdown: 30;
  --z-popover: 50;
  --z-palette: 60;
  --z-select: 100;
  --z-modal: 1000;
  --z-tooltip: 1200;
  --z-fx-overlay: 9000;
  --z-overlay: 9999;
  --z-intro: 99999;
  --z-breach: 100000;
  --z-login: 100001;
  --status-working: var(--accent-strong);
  --status-working-soft: var(--accent-soft);
  --status-starting: var(--success);
  --status-starting-soft: var(--success-soft);
  --status-ready: var(--success);
  --status-ready-soft: var(--success-soft);
  --status-attention: var(--warning);
  --status-attention-soft: var(--warning-soft);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111418;
  --bg-soft: #171b21;
  --surface: #191f26;
  --surface-raised: #202832;
  --surface-muted: #141a20;
  --fg: #ecf1f7;
  --muted: #a5b0bf;
  --faint: #7b8796;
  --border: #2f3946;
  --border-soft: #26303b;
  --accent: #38bdf8;
  --accent-strong: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --success: #5fd18b;
  --success-soft: rgba(64, 166, 98, 0.16);
  --warning: #e8bf62;
  --warning-soft: rgba(199, 142, 39, 0.16);
  --danger: #ff7a7a;
  --danger-soft: rgba(220, 38, 38, 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;
}

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;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--surface);
  font: 700 12px / 1 var(--mono);
  letter-spacing: 0;
}

.brand strong,
.topbar-title strong {
  display: block;
  font-size: 16px;
  letter-spacing: 0;
}

.brand small,
.topbar-title span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.brand .brand-version {
  margin-top: 2px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.9;
}

.sidebar-version {
  flex: 1;
  min-width: 0;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-top: 24px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.sidebar-nav a:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Red dot on the Settings nav when a newer botmux version is available. */
.sidebar-nav a.nav-has-update {
  position: relative;
}
.sidebar-nav a.nav-has-update::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}

.sidebar-foot {
  margin-top: auto;
  padding: 10px 8px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-toggle {
  flex: none;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: var(--surface-muted);
  color: var(--fg);
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

/* 收起态：侧栏收窄成图标栏（只在桌面布局生效；窄屏侧栏本来就折成顶栏） */
@media (min-width: 981px) {
  :root[data-sidebar="collapsed"] {
    --sidebar-width: 68px;
  }
  :root[data-sidebar="collapsed"] .sidebar {
    padding: 18px 10px;
  }
  :root[data-sidebar="collapsed"] .brand {
    justify-content: center;
    padding: 8px 0;
  }
  :root[data-sidebar="collapsed"] .brand > span:not(.brand-mark) {
    display: none;
  }
  :root[data-sidebar="collapsed"] .sidebar-nav a {
    justify-content: center;
    padding: 8px;
  }
  :root[data-sidebar="collapsed"] .sidebar-nav a span {
    display: none;
  }
  :root[data-sidebar="collapsed"] .connection-status {
    display: none;
  }
  :root[data-sidebar="collapsed"] .sidebar-version {
    display: none;
  }
  :root[data-sidebar="collapsed"] .sidebar-foot {
    justify-content: center;
    padding: 10px 0 4px;
  }
  :root[data-sidebar="collapsed"] .sidebar-toggle svg {
    transform: rotate(180deg);
  }
}

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.connection-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint);
}

.connection-status.online::before {
  background: var(--success);
}
.connection-status.offline::before {
  background: var(--danger);
}
.connection-status.online {
  color: var(--success);
}
.connection-status.offline {
  color: var(--danger);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.topbar-auth[hidden] {
  display: none;
}
.topbar-user {
  max-width: 180px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-logout {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
}

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

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

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

.topbar-add-bot {
  white-space: nowrap;
}

/* 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 0.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: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-popover);
  min-width: 192px;
  max-height: min(70vh, 460px);
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--modal-shadow);
}
.theme-menu-pop[hidden] {
  display: none;
}

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

.tm-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* override the base button{justify-content:center} */
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.tm-item .tm-svg {
  color: var(--muted);
  flex: 0 0 auto;
}
.tm-item:hover {
  background: var(--surface-muted);
}
.tm-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.tm-item.active .tm-svg {
  color: var(--accent-strong);
}

main {
  width: 100%;
  /* 不设上限：收起侧栏腾出的宽度交还内容区（看板/表格都按容器弹性布局）。 */
  max-width: none;
  padding: 24px;
}

.page {
  display: grid;
  gap: 18px;
}

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

.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 {
  margin: 0 0 5px !important;
  color: var(--accent-strong) !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.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 Next Runs 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;
}

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

.overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.overview-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.overview-list-row:last-child {
  border-bottom: 0;
}
.overview-list-row strong {
  display: block;
}
.overview-list-row span {
  color: var(--muted);
  font-size: 12px;
}

.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 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.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: 0.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;
}

.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 page polish: stat strip, chips, pills ── */
.sched-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sched-stat {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

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

.sched-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.sched-stat-accent strong {
  color: var(--accent-strong);
}

.sched-stat-danger {
  border-color: color-mix(
    in srgb,
    var(--danger, #dc2626) 36%,
    var(--border-soft)
  );
}
.sched-stat-danger strong {
  color: var(--danger, #dc2626);
}

.delivery-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-pill[data-kind="new-topic"] {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.delivery-pill[data-kind="local"] {
  color: var(--muted);
}

.schedule-running {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-strong);
  font-weight: 700;
}

.schedule-running::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: sched-pulse 1.2s ease-in-out infinite;
}

@keyframes sched-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.78);
  }
}

.system-schedule-dialog {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

.system-schedule-dialog::backdrop {
  background: rgba(15, 23, 42, 0.56);
}

.system-schedule-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.system-schedule-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.system-schedule-dialog-heading h2 {
  margin: 2px 0 0;
  font-size: 18px;
  letter-spacing: 0;
}

.system-schedule-dialog label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}

.system-schedule-dialog select {
  width: 100%;
}

.system-schedule-dialog-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.system-schedule-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Schedules 卡片布局：宽屏卡片列表替代 9 列表格 ──
   旧表格在 9 列下横向溢出、移动端靠 td 卡片化补丁硬撑；卡片天然响应式，
   规则人话化 + prompt 可展开，信息层级更清晰。 */
.sched-list {
  display: grid;
  gap: 12px;
}

.sched-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sched-card-system {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}

.sched-card-paused {
  opacity: 0.72;
}

.sched-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sched-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.sched-card-name {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sched-card-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sched-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sched-chip-system {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sched-chip-state.is-on {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 9%, transparent);
}

.sched-card-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sched-card-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.sched-card-rule-main {
  font-size: 14px;
  font-weight: 700;
}

.sched-card-cron {
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: 12px;
}

.sched-card-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 18px;
}

.sched-card-time {
  display: grid;
  gap: 3px;
  align-content: start;
}

.sched-card-time-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.sched-card-time-value {
  font-size: 13px;
}

.sched-card-time-error {
  color: var(--danger, #dc2626);
  font-weight: 700;
}

.sched-card-relative {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.sched-card-sub {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}

.sched-card-detail {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}

.sched-card-detail-block {
  display: grid;
  gap: 5px;
}

.sched-card-prompt {
  margin: 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sched-card-id {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.sched-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sched-card-foot .schedule-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sched-card-foot .schedule-actions button {
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.sched-card-foot .schedule-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.sched-card-foot
  .schedule-actions
  button[data-op="delete"]:hover:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--danger, #dc2626) 45%,
    var(--border-soft)
  );
  color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
}

.sched-card-foot .schedule-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sched-card-expand {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sched-card-expand:hover {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
}

.sched-empty-state {
  display: grid;
  gap: 6px;
  padding: 34px 20px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.sched-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sched-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ── 首尾列固定的横向滚动矩阵（群组与 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: var(--z-sticky-cell);
}
.matrix-scroll th:last-child,
.matrix-scroll td:last-child {
  position: sticky;
  right: 0;
  z-index: var(--z-sticky-cell);
}
.matrix-scroll th:first-child,
.matrix-scroll th:last-child {
  z-index: var(--z-sticky-corner);
}
/* 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 {
  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;
  animation: page-loading-in 0.25s ease-out;
}
.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;
}

button,
.btn-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  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;
}

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 {
  background: var(--surface-muted);
  color: var(--muted);
}
.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: start;
  /* faint blueprint grid behind the wall — atmosphere, not decoration */
  background-image:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--border-soft) 38%, transparent) 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--border-soft) 38%, transparent) 0 1px,
      transparent 1px 24px
    );
  border-radius: var(--radius);
  padding: 10px;
}

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

.session-board-column {
  --col-signal: var(--border);
  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: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--col-signal) 7%, transparent),
      transparent 80%
    ),
    var(--surface-muted);
}

.session-board-column h2 {
  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;
}

/* 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 {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.session-board-count {
  min-width: 28px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  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: 1;
  font-variant-numeric: tabular-nums;
}

.session-board-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.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: linear-gradient(
    180deg,
    color-mix(in srgb, var(--danger) 4%, var(--surface)),
    var(--surface) 140px
  );
}

/* 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 {
  display: grid;
  gap: 10px;
  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.1));
}

/* 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));
}

.session-card.attention-focused {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 38%, transparent);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-raised));
}

@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;
}

.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-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;
}

/* ── 看板视图（multica Issues 风格）：横排状态列 + 简洁卡片 ─────────────────── */
.sessions-kanban {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  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;
  min-height: 320px;
  max-height: calc(100vh - 250px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  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-end;
  gap: 8px;
  flex-wrap: wrap;
}

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

/* 团队下拉做成与右侧 .segmented 同款胶囊：同高、同边框、圆角 999，
   去掉原生箭头换内嵌 chevron */
.kanban-team-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 200px;
  min-height: 38px;
  padding: 0 30px 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.4 6 7.8l3.4-3.4' fill='none' stroke='%238b98aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.kanban-team-select:hover {
  background-color: var(--surface-muted);
}

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

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

/* 团队清单加载中的整板占位（替代裸文本） */
.kanban-loading {
  flex: 1;
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--faint);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.kanban-team-select:disabled {
  opacity: 0.7;
  cursor: default;
}

/* 对方部署的会话卡：来源徽章 + 虚线边框区分快照身份 */
.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 {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.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: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 团队模式列头：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;
  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 {
  display: grid;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  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.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 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

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

/* 右上角动作区：运行状态点常显；重命名/详情按钮平时隐身，悬停/聚焦才浮现 */
.kanban-card-top-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.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);
}

/* 选择器带上 .kanban-card 提特异性：通用 .card-act 基础规则（display/尺寸）
   定义在本节之后，同特异性会反杀这里的覆盖。 */
.kanban-card .kanban-card-act {
  width: 24px;
  height: 24px;
  min-height: 24px;
  /* 不悬停时彻底不占位（opacity:0 仍会把短 ID 永久挤成省略号） */
  display: none;
}

.kanban-card:hover .kanban-card-act,
.kanban-card:focus-within .kanban-card-act {
  display: inline-flex;
}

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

.kanban-card-title {
  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 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
  color: var(--faint);
  font-size: 11px;
}

/* ── 页面内终端弹窗（看板卡片点击落点）───────────────────────────────────── */
.term-modal {
  width: min(1560px, 96vw);
  height: min(88vh, 1100px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}

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

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

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

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

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

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

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

.term-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

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

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

/* ── 会话历史弹窗：飞书式左右气泡 ─────────────────────────────────────────── */
.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: 12px;
}

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

.history-msg.mine {
  margin-left: auto;
  flex-direction: row-reverse;
}

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

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

.history-msg.mine .history-msg-meta {
  justify-content: flex-end;
}

.history-bubble {
  padding: 8px 11px;
  border-radius: 10px;
  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-msg.mine .history-bubble {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.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;
}

/* 左上角 brand 的 owner 头像：盖满 brand-mark 方块 */
.brand-mark {
  position: relative;
  overflow: hidden;
}

.brand-owner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: var(--z-content);
}

.brand-mark.brand-has-owner::before,
.brand-mark.brand-has-owner::after,
.brand-mark:has(.brand-owner-img)::before,
.brand-mark:has(.brand-owner-img)::after {
  content: none !important;
  display: none !important;
}

.brand-mark.brand-has-owner,
.brand-mark:has(.brand-owner-img) {
  background: transparent;
}

.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 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.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);
}

/* 终端访问药丸：左「终端」段(accent ghost·只读旁观) + 右「钥匙」段(accent 实心·
   主操作，可写)。两段一个圆角壳，钥匙段实心更抢眼，读起来就是「这个才是操作」。 */
.term-pill {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.term-pill .term-btn {
  width: 30px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  /* the pill shell owns the rounding; reset so the global `button{border-radius:999px}`
     pill-ify rule doesn't turn the <button> key segment into a circle. */
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    filter 0.15s ease,
    transform 0.07s ease;
}
/* selectors scoped to .term-pill so they out-specify `.term-pill .term-btn`
   above (both 0,2,0) by source order — otherwise the segments stay transparent. */
.term-pill .term-open {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.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);
  border-left: 1px solid color-mix(in srgb, var(--on-accent) 28%, 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: 8px;
  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 {
  padding: 20px;
}
dialog header {
  margin-bottom: 14px;
}
dialog h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
dialog header p {
  margin: 4px 0 0;
  color: var(--muted);
}
.session-attention-guide {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}
.session-attention-guide strong {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.session-attention-guide p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.session-attention-kicker {
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}
.session-attention-action {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
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;
}

.cell-in,
.cell-out,
.cell-error,
.cell-unknown {
  text-align: center;
  font-weight: 800;
}

.cell-in {
  color: var(--success);
}
.cell-out {
  color: var(--faint);
}
.cell-error {
  color: var(--danger);
}
.cell-unknown {
  color: var(--warning);
}

.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;
}

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

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

.form-row span,
.bd-body .bd-row 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: 8px;
}

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

.hint-ok,
.hint-warn {
  padding: 10px 12px;
  border-radius: 8px;
  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 {
  position: sticky;
  top: 78px;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  /* warning-soft 在暗色主题带透明度，sticky 浮条悬在列表上会透字——
     垫一层页面底色保证不透明，同时保留各主题自己的警示色调 */
  background:
    linear-gradient(var(--warning-soft), var(--warning-soft)), var(--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;
}
.idle-cleanup-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 2px;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.idle-cleanup-summary,
.idle-cleanup-controls {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.idle-cleanup-controls {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.idle-cleanup-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  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 {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.idle-cleanup-count {
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.idle-cleanup-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.idle-cleanup-thresholds {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  min-height: 32px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
}
.idle-cleanup-thresholds button {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.idle-cleanup-thresholds button:hover:not(.active) {
  color: var(--fg);
  background: color-mix(in srgb, var(--border-soft) 60%, transparent);
}
.idle-cleanup-thresholds button.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.idle-cleanup-run {
  min-height: 32px;
  padding: 0 15px;
  font-weight: 800;
  transition:
    transform 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.idle-cleanup-run:hover:not(:disabled) {
  transform: translateY(-1px);
}
.idle-cleanup-run:active:not(:disabled) {
  transform: scale(0.98);
}
.idle-cleanup-status {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0 11px;
  border-radius: 999px;
  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: 12px;
  font-weight: 800;
}
.idle-cleanup-status:empty {
  display: none;
}
:root[data-theme="dark"] .idle-cleanup-bar {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
:root[data-theme="dark"] .idle-cleanup-count,
:root[data-theme="dark"] .idle-cleanup-thresholds button.active {
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .idle-cleanup-thresholds {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.09);
}
:root[data-theme="dark"] .idle-cleanup-status {
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
@media (max-width: 720px) {
  .idle-cleanup-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .idle-cleanup-controls {
    justify-content: flex-start;
  }
  .idle-cleanup-thresholds {
    flex: 1 1 180px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
  }
  .idle-cleanup-thresholds button {
    min-width: 0;
    padding: 0 8px;
  }
  .idle-cleanup-run {
    flex: 1 1 118px;
  }
  .idle-cleanup-status {
    justify-self: start;
  }
}
input.row-select,
#select-all {
  cursor: pointer;
}

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

.onboarding-dialog article {
  overflow: visible;
}

.onboarding-status {
  margin: 12px 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: 14px 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.qr-image {
  width: min(260px, 74vw);
  height: auto;
  border: 10px solid var(--qr-surface);
  border-radius: 8px;
  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: 14px;
  margin: 14px 0 4px;
}

.onboarding-field {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

.onboarding-field select,
.onboarding-field input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
}

/* Custom select — themed dropdown (native <select> popup can't be styled). */
.cselect {
  position: relative;
  width: 100%;
}

.cselect-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  text-align: left;
}

.cselect-btn:hover {
  border-color: var(--muted);
}

.cselect.open .cselect-btn,
.cselect-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cselect-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cselect-chev {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.cselect.open .cselect-chev {
  transform: rotate(180deg);
}

.cselect-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-select);
  display: flex;
  flex-direction: column;
  max-height: min(280px, 50vh);
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--modal-shadow);
}

.cselect-pop[hidden] {
  display: none;
}

.cselect-search {
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 9px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 7px !important;
  background: var(--surface-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 32px !important;
}

.cselect-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

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

.cselect-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.cselect-list::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.cselect-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.cselect-item:hover {
  background: var(--surface-muted);
}

.cselect-item.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.cselect-item[hidden] {
  display: none;
}

.cselect-main {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.cselect-btn .cselect-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cselect-hint {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cselect-item.active .cselect-hint {
  color: var(--accent-strong);
  opacity: 0.85;
}

.onboarding-hint {
  margin: -6px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--faint);
}

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

.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;
}

.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);
}

.grant-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 8px 0;
}

.grant-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.grant-toolbar label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.grant-toolbar input[type="search"] {
  min-width: 220px;
}

.grant-member-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 380px;
  overflow: auto;
}

.grant-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.grant-member-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.grant-member-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.grant-member-main img,
.grant-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.grant-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 800;
}

.grant-member-main small,
.grant-member-main code {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grant-badges,
.grant-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 620px) {
  #g-drawer fieldset {
    min-inline-size: 0;
  }
  .grant-toolbar,
  .grant-toolbar label,
  .grant-toolbar input,
  .grant-toolbar select {
    width: 100%;
    min-width: 0;
  }
  .grant-member-row {
    align-items: stretch;
    flex-direction: column;
  }
  .grant-member-actions {
    width: 100%;
  }
  .grant-member-actions button {
    flex: 1 1 auto;
  }
}

.grant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.grant-badge.ok {
  background: var(--success-soft);
  color: var(--success);
}

.grant-badge.owner,
.grant-badge.operator {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.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 label {
  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;
}

.bd-danger-zone {
  margin: 16px 20px 20px;
  padding-top: 14px;
  border-top: 1px solid
    color-mix(in srgb, var(--danger) 28%, var(--border-soft));
}

.bd-danger-zone .bd-section-title {
  color: var(--danger);
}

/* ── 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);
}
.update-changelog {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.update-release {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  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-foot {
    display: none;
  }
  .topbar {
    position: static;
    align-items: flex-start;
  }
  .metric-grid,
  .overview-grid {
    grid-template-columns: 1fr;
  }
  main {
    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;
  }
  .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;
  }
  .kanban-column {
    flex: none;
    min-height: 0;
    max-height: none;
  }
  .kanban-col-list {
    overflow-y: visible;
  }
  .term-modal {
    width: calc(100vw - 16px);
    height: calc(100vh - 24px);
  }
  .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;
  }
}

/* ─── 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: 15px;
  flex-shrink: 0;
}
.roles-group-info {
  flex: 1;
  min-width: 0;
}
.roles-group-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-group-meta {
  font-size: 11px;
  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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roles-bot-id {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Badges ─── */
.roles-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  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: 999px;
  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: 15px;
  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-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;
  }
}

/* ─── Workflow runtime: list, detail, parallel timeline, IO cards ─── */
/* Status pills + dangling badges piggyback on the global semantic tokens
   (--accent / --success / --warning / --danger + their *-soft pairs) so
   light <-> dark switches just by flipping data-theme on <html>. */
.wf-status {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 11px;
  font-variant: small-caps;
  background: var(--bg-soft);
  color: var(--muted);
}
.wf-status-pending {
  background: var(--bg-soft);
  color: var(--muted);
}
.wf-status-running {
  background: var(--accent-soft);
  color: var(--accent);
}
.wf-status-waiting {
  background: var(--warning-soft);
  color: var(--warning);
}
.wf-status-succeeded {
  background: var(--success-soft);
  color: var(--success);
}
.wf-status-failed {
  background: var(--danger-soft);
  color: var(--danger);
}
.wf-status-cancelled {
  background: var(--bg-soft);
  color: var(--muted);
}
.wf-dangling.has {
  color: var(--danger);
  font-weight: 600;
}
.wf-dangling.none {
  color: var(--muted);
}
.wf-run-error {
  margin-top: 0.25rem;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.wf-subnav {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.wf-subnav a {
  padding: 0.35rem 0.7rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wf-subnav a.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
  font-weight: 600;
}
.wf-subnav a:hover {
  color: var(--fg);
}

.wf-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.wf-detail-head h2 {
  margin: 0 0 0.15rem;
  font-size: 18px;
  line-height: 1.25;
}
.wf-detail-head #wf-cancel-run {
  margin-left: auto;
}
.wf-detail-head #wf-detail-refresh {
  white-space: nowrap;
}
.wf-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.wf-summary-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  min-width: 0;
  background: var(--surface);
}
.wf-summary-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.2rem;
}
.wf-summary-item strong {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wf-summary-item .wf-status {
  display: inline-block;
}
.wf-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem;
  margin-bottom: 0.8rem;
  background: var(--surface);
}
.wf-panel-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.wf-panel-title h3 {
  margin: 0;
  font-size: 15px;
}
.wf-panel-title button {
  margin-left: auto;
}
.wf-dangling-panel.has {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.wf-dangling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.wf-dangling-grid ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}
.wf-dangling-grid li {
  margin: 0.15rem 0;
  overflow-wrap: anywhere;
}
.wf-table-scroll {
  overflow-x: auto;
}
.wf-timeline-scroll {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wf-timeline-scroll table th {
  position: sticky;
  top: 0;
  z-index: var(--z-content);
}
.wf-parallel-axis {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 0.35rem 170px;
}
.wf-parallel-list {
  display: grid;
  gap: 0.45rem;
}
.wf-parallel-row {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr);
  gap: 0.6rem;
  align-items: center;
}
.wf-parallel-label {
  min-width: 0;
}
.wf-parallel-label code {
  display: block;
  overflow-wrap: anywhere;
}
.wf-parallel-label .muted {
  display: block;
  margin-top: 0.1rem;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.wf-parallel-track {
  position: relative;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-soft), var(--surface));
  overflow: hidden;
}
/* Coloured bars sit on top of any theme; foreground stays #fff because the
   bars carry the strong fill themselves and the contrast holds in both modes. */
.wf-parallel-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-parallel-running,
.wf-parallel-effectAttempting {
  background: var(--accent);
}
.wf-parallel-waiting {
  background: var(--warning);
}
.wf-parallel-pending {
  background: #8250df;
}
.wf-parallel-succeeded {
  background: var(--success);
}
.wf-parallel-failed,
.wf-parallel-timedOut {
  background: var(--danger);
}
.wf-parallel-cancelled {
  background: var(--faint);
}
:root[data-theme="dark"] .wf-parallel-running,
:root[data-theme="dark"] .wf-parallel-effectAttempting {
  color: var(--on-accent);
}
:root[data-theme="dark"] .wf-parallel-waiting,
:root[data-theme="dark"] .wf-parallel-succeeded,
:root[data-theme="dark"] .wf-parallel-cancelled {
  color: var(--bg);
}
:root[data-theme="dark"] .wf-parallel-failed,
:root[data-theme="dark"] .wf-parallel-timedOut {
  color: var(--on-danger);
}
.wf-io-list {
  display: grid;
  gap: 0.7rem;
}
.wf-io-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem;
  background: var(--surface);
}
.wf-io-card.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.wf-io-card header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}
.wf-io-card header > div:first-child {
  min-width: 0;
}
.wf-io-card header code,
.wf-io-meta code {
  overflow-wrap: anywhere;
}
.wf-io-card header .muted {
  display: block;
  margin-top: 0.1rem;
  overflow-wrap: anywhere;
}
.wf-io-meta {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wf-approval-box {
  margin-top: 0.6rem;
  padding: 0.55rem;
  border: 1px solid var(--warning);
  border-radius: 4px;
  background: var(--warning-soft);
}
.wf-approval-box label span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 12px;
}
.wf-approval-comment {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--surface);
  color: var(--fg);
}
.wf-approval-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}
.wf-approval-status {
  margin: 0.5rem 0 0;
}
.wf-io-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
}
.wf-io-block {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-muted);
  min-width: 0;
}
.wf-io-block summary {
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  font-weight: 600;
}
.wf-io-block summary .muted {
  margin-left: 0.3rem;
  font-weight: 400;
}
.wf-io-pre {
  margin: 0;
  padding: 0.5rem;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    12px / 1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  background: var(--surface);
  color: var(--fg);
  border-top: 1px solid var(--border);
}
.wf-io-empty {
  padding: 0.5rem;
}
.wf-terminal-block {
  grid-column: 1 / -1;
}
.wf-terminal-actions {
  padding: 0.45rem 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.wf-resume-status {
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--border);
}
/* Terminal iframe content is itself a CLI surface (Tokyo Night theme), so
   the wrapper stays dark in both modes to avoid a white flash before xterm
   boots. */
.wf-terminal-frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  border-top: 1px solid var(--border);
  background: #0d1117;
}
.wf-error-msg {
  display: block;
  margin-top: 0.15rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}

/* 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;
}

/* Workflow catalog */
.catalog-head,
.catalog-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.catalog-head h2,
.catalog-detail-head h2 {
  margin: 0 0 0.15rem;
  font-size: 18px;
  line-height: 1.25;
}
.catalog-run-form {
  display: grid;
  gap: 0.65rem;
  max-width: 900px;
}
.catalog-run-form label span,
.catalog-param header {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 12px;
}
.catalog-run-form textarea,
.catalog-run-form input[type="text"] {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font:
    12px / 1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  color: var(--fg);
  background: var(--surface);
}
.catalog-run-form textarea {
  resize: vertical;
  min-height: 150px;
}
.catalog-chat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.catalog-param-errors {
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  padding: 0.45rem 0.65rem;
  border-radius: 3px;
}
.catalog-param-errors ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}
.catalog-param-list {
  display: grid;
  gap: 0.55rem;
}
.catalog-param {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.55rem;
  background: var(--surface-muted);
}
.catalog-param header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

@media (max-width: 720px) {
  .wf-detail-head {
    flex-wrap: wrap;
    align-items: center;
  }
  .wf-detail-head > div {
    min-width: 0;
    flex: 1 1 220px;
  }
  .wf-detail-head h2 code {
    overflow-wrap: anywhere;
  }
  .wf-detail-head #wf-cancel-run {
    margin-left: 0;
  }
  .wf-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wf-panel {
    padding: 0.55rem;
  }
  .wf-parallel-axis {
    margin-left: 0;
  }
  .wf-parallel-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .wf-io-card header {
    flex-direction: column;
  }
  .wf-io-grid {
    grid-template-columns: 1fr;
  }
  .wf-terminal-frame {
    height: 360px;
  }
  .wf-approval-actions button {
    flex: 1 1 120px;
  }
  .wf-timeline-scroll {
    max-height: 420px;
  }
  .catalog-head,
  .catalog-detail-head {
    flex-direction: column;
  }
  .catalog-chat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .wf-summary-grid {
    grid-template-columns: 1fr;
  }
  .wf-approval-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .wf-approval-actions button {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   数字员工工作台 — 统一视觉层（未来 / 科技 / 数字人）
   设计语言：深空底 + 蓝青极光氛围、玻璃面板、胶囊按钮与标签、
   每个 bot 一颗专属色相的"数字生命球"。强视觉只在品牌区（团队卡），
   工作面（board / 表格 / 表单页）保持密度与可扫描性。
   状态光语义：青=执行中 · 绿=就绪 · 琥珀=需要你 · 红=异常 · 蓝=启动中
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --info: #2779d8;
  --info-soft: rgba(39, 121, 216, 0.12);
  --accent: #0a8bbf;
  --accent-strong: #066d99;
  --accent-soft: rgba(10, 139, 191, 0.1);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --sidebar-width: 250px;
  --status-working: var(--accent);
  --status-working-soft: var(--accent-soft);
  --status-starting: var(--info);
  --status-starting-soft: var(--info-soft);
  --status-ready: var(--success);
  --status-ready-soft: var(--success-soft);
  --status-attention: var(--warning);
  --status-attention-soft: var(--warning-soft);
}

:root[data-theme="dark"] {
  --bg: #07090f;
  --bg-soft: #0b0f17;
  --surface: #0e141d;
  --surface-raised: #151d29;
  --surface-muted: #0b1018;
  --fg: #eef2f8;
  --muted: #99a3b3;
  --faint: #5d6675;
  --border: #25303f;
  --border-soft: #1a2330;
  --accent: #5be3ff;
  --accent-strong: #8feeff;
  --accent-soft: rgba(91, 227, 255, 0.13);
  --success: #4ee69a;
  --success-soft: rgba(78, 230, 154, 0.13);
  --warning: #ffc24d;
  --warning-soft: rgba(255, 194, 77, 0.13);
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.13);
  --info: #4f8bff;
  --info-soft: rgba(79, 139, 255, 0.14);
  --on-accent: #051018;
  --on-danger: #1c0508;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
}

/* ── 极光底（dark 专属氛围；紫色只允许出现在这里）─────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  overflow: hidden;
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.3;
}
.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: var(--z-content);
}

/* ── 固定侧栏（标准后台布局：齐顶到底、直角、细分割线，背景与主区连续）─────── */
.sidebar {
  margin: 0;
  top: 0;
  height: 100vh;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}
:root[data-theme="dark"] .sidebar {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border-right-color: var(--border);
}

/* 品牌：深色 tile + 青色信号带，与 favicon/logo 同源（仅默认皮肤；
   具名皮肤有自己的 brand-mark 规则，见文件后段 [data-skin] 覆写） */
:root[data-skin="default"] .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background:
    radial-gradient(
      circle at 50% 46%,
      color-mix(in srgb, var(--accent) 42%, transparent) 0 26%,
      transparent 58%
    ),
    linear-gradient(150deg, #2b3240, #141922 62%, #0f131b);
  border: 1px solid
    color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 信号带：横线 + 中心脉冲点（有 owner 头像时不渲染，防止遮挡用户头像） */
:root[data-skin="default"]
  .brand-mark:not(.brand-has-owner):not(:has(.brand-owner-img))::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7dd7ff, var(--accent) 60%, #1d6fb8);
  transform: translateY(-50%);
}

:root[data-skin="default"]
  .brand-mark:not(.brand-has-owner):not(:has(.brand-owner-img))::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #eaf7ff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translate(-50%, -50%);
}

.sidebar-nav {
  gap: 2px;
}
.sidebar-nav a {
  gap: 11px;
  border-radius: 11px;
  font-size: 13px;
}
.sidebar-nav a svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-nav a.active,
.sidebar-nav a[aria-current="page"] {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--info) 10%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-strong);
}

/* ── 顶栏：透明玻璃，仅右侧操作区（品牌只在侧栏出现一次，顶栏不重复）──────── */
.topbar {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
  justify-content: flex-end;
}
.topbar-title {
  display: none;
}

/* ── 全局 attention strip（任何页面常驻，待处理最高优先级）────────────────── */
.attention-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 24px 0;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--warning) 14%, transparent),
    color-mix(in srgb, var(--warning) 4%, transparent) 70%
  );
  font-size: 13px;
}
.attention-strip[hidden] {
  display: none;
}
.attention-strip b {
  color: var(--warning);
}
.attention-strip-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--warning);
  color: #2a1c00;
  font-size: 11px;
  font-weight: 800;
  animation: strip-pulse 2s ease-in-out infinite;
}
@keyframes strip-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 18%, transparent);
  }
}
.attention-strip-longest {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.attention-strip-go {
  margin-left: auto;
  flex: none;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--warning);
  color: #2a1c00;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .attention-strip-ic {
    animation: none;
  }
}

/* ── 胶囊化：按钮 / 标签 / 分段控件 ──────────────────────────────────────── */
button,
.btn-link {
  border-radius: 999px;
  padding: 0 13px;
}
button.primary,
.btn-link.primary {
  background: linear-gradient(120deg, var(--accent), var(--info));
  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: 999px;
}
.segmented button {
  border-radius: 999px;
}
.segmented button.active {
  background: linear-gradient(120deg, var(--accent), var(--info));
  color: var(--on-accent);
}
.badge,
.status {
  border-radius: 999px;
  text-transform: none;
  font-weight: 700;
}

/* 状态光语义重排：青=执行中 · 蓝=启动 · 绿=就绪 · 琥珀/红=要人管 */
.status-working,
.status-active {
  background: var(--status-working-soft);
  color: var(--status-working);
}
.status-analyzing {
  background: var(--status-working-soft);
  color: var(--status-working);
}
.status-starting {
  background: var(--status-starting-soft);
  color: var(--status-starting);
}
.status-idle {
  background: var(--status-ready-soft);
  color: var(--status-ready);
}
.status-dormant {
  background: var(--surface-muted);
  color: var(--muted);
}
.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: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.045),
    transparent 40%
  );
}

/* ── 数字生命球（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: 9px;
}
.orb-avatar.orb-square.orb-avatar-sm,
.orb-avatar.orb-square.orb-avatar-sm .orb-img {
  border-radius: 6px;
}
/* 群列表名称单元格：群头像 + 群名/ID 横向排列。 */
.g-chat-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-chat-meta {
  min-width: 0;
}
.g-working-dir-cell {
  width: 320px;
  min-width: 280px;
  max-width: 320px;
  text-align: left;
  white-space: normal;
}
.g-working-dir-cell code {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
  font-size: 12px;
  line-height: 1.45;
}
.g-working-dir-cell small,
.g-working-dir-unset {
  color: var(--muted);
}
.g-working-dir-detail {
  display: grid;
  gap: 6px;
  margin: 12px 0 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.g-working-dir-detail code {
  overflow-wrap: anywhere;
}
.g-working-dir-detail dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0;
  font-size: 12px;
}
.g-working-dir-detail dt {
  color: var(--muted);
}
.g-working-dir-detail dd {
  margin: 0;
}
.g-working-dir-editor {
  margin-bottom: 18px;
}
.g-working-dir-editor > p {
  margin: 0 0 10px;
}
.g-working-dir-editor-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.g-working-dir-editor-body input {
  flex: 1 1 360px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
}
.g-working-dir-editor .oncall-status {
  display: block;
  min-height: 18px;
  margin-top: 7px;
}
.g-profile-status {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  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-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: 999px;
  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: 999px;
  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: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-muted);
}
.g-save-profile-switch button {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.g-save-profile-switch button.active {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft));
  color: var(--accent-strong);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 16%, transparent);
}
.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: 20px;
}
.g-save-profile-status.ok {
  color: var(--success);
}
.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);
}

/* ── 工作台首页 ─────────────────────────────────────────────────────────── */
.hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
:root[data-theme="dark"] .pill {
  background: rgba(255, 255, 255, 0.045);
}
.pill b {
  color: var(--fg);
  font-size: 14px;
}
.pill-hot {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
}
.pill-hot b {
  color: var(--warning);
}

.sect-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.sect-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.sect-head span {
  color: var(--faint);
  font-size: 12px;
}
.sect-head a {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 13px;
}
/* AI 团队折叠/展开开关：贴着卡片栅格下沿居中，弱化成次级控件 */
.team-toggle {
  justify-self: center;
  margin-top: -6px;
  min-height: 28px;
  padding: 3px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  box-shadow: none;
}
.team-toggle:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.mate {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 15px 13px;
  border-radius: 16px;
  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: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.05),
    transparent 38%
  );
}
.mate-attn {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--warning) 18%, transparent),
    0 10px 32px color-mix(in srgb, var(--warning) 9%, 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: 999px;
}
: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: 999px;
  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);
}

/* 需要你处理 — 队列卡 */
.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.qcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--warning) 10%, transparent),
      transparent 60%
    ),
    var(--surface);
}
:root[data-theme="dark"] .qcard {
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--warning) 10%, transparent),
      transparent 60%
    ),
    rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}
.qcard-empty {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  justify-content: center;
}
.qcard-tx {
  min-width: 0;
  flex: 1;
}
.qcard-tx b {
  display: block;
  font-size: 12.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qcard-tx span {
  color: var(--muted);
  font-size: 11.5px;
}
.qcard-go {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--warning);
  color: #2a1c00;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* 下方两栏 */
.overview-cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
  align-items: start;
}
.overview-side {
  display: grid;
  gap: 14px;
}
.sess-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.sess-row:last-child {
  border-bottom: 0;
}
.sess-tx {
  min-width: 0;
  flex: 1;
}
.sess-tx b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sess-tx span {
  color: var(--faint);
  font-size: 11px;
}

/* 此刻概览圆环 */
.donut-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
}
.donut-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
}
.donut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
  mask: radial-gradient(farthest-side, transparent 63%, #000 64%);
}
/* flex 列整体居中：grid 两行会均分高度，把数字顶上、标签压到环上 */
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}
.donut-center b {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}
.donut-center span {
  display: block;
  font-size: 9px;
  line-height: 1.2;
  color: var(--faint);
  max-width: 54px; /* 限制在中心孔内，英文 Active Sessions 折两行 */
}
.donut-legend {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.donut-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}

/* ── 会话看板：工作面收敛（弱玻璃 + 高密度 + 新状态光）───────────────────── */
.sessions-board {
  background-image: none;
  padding: 0;
}
.session-board-column {
  border-radius: 16px;
}
:root[data-theme="dark"] .session-board-column {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .session-board-column > header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--col-signal) 8%, transparent),
    transparent 85%
  );
  border-color: rgba(255, 255, 255, 0.07);
}
.session-board-column h2 {
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
}
.session-board-count {
  border-radius: 999px;
  font-family: inherit;
}
.session-board-needs-you {
  --col-signal: var(--status-attention);
}
.session-board-needs-you {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--status-attention) 4%, var(--surface)),
    var(--surface) 140px
  );
}
.session-board-starting {
  --col-signal: var(--status-starting);
}
.session-board-working {
  --col-signal: var(--status-working);
}
.session-board-idle {
  --col-signal: var(--status-ready);
}
:root[data-theme="dark"] .session-board-needs-you {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--status-attention) 6%, transparent),
      transparent 140px
    ),
    rgba(255, 255, 255, 0.03);
}
.session-card {
  border-radius: 12px;
}
:root[data-theme="dark"] .session-card {
  background: rgba(13, 17, 26, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}
.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: 999px;
}

/* 表格 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: 9px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sessions-filters > input[type="search"] {
  flex: 0 1 300px;
  min-width: 200px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.sessions-filters select {
  width: auto;
  min-height: 36px;
  padding: 0 30px 0 14px;
  border-radius: 999px;
  background-color: var(--surface);
  border: 1px solid var(--border-soft);
  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"] .sessions-filters > input[type="search"],
:root[data-theme="dark"] .sessions-filters select {
  background-color: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.sessions-filters > input[type="search"]:focus,
.sessions-filters select:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 「仅活跃」toggle chip：checkbox 隐藏，整个胶囊就是开关 */
.sessions-filters .filter-toggle {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  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"] .sessions-filters .filter-toggle {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.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;
}
.filter-cli summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 30px 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background-color: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: 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;
}
.filter-cli summary::-webkit-details-marker {
  display: none;
}
:root[data-theme="dark"] .filter-cli summary {
  background-color: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.filter-cli summary b {
  font-weight: 700;
  color: var(--fg);
}
.filter-cli summary b.cli-filter-active {
  color: var(--accent);
}
.filter-cli[open] summary {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--fg);
}
.filter-cli-pop {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: var(--modal-shadow);
}
.filter-cli-search {
  flex: none;
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg);
  font-size: 12.5px;
}
.filter-cli-search::placeholder {
  color: var(--muted);
}
.filter-cli-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-cli-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.filter-cli-action:hover {
  text-decoration: underline;
}
.filter-cli-options {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  max-height: 240px;
  overflow-y: auto;
}
.filter-cli-pop .filter-check.is-filtered-out {
  display: none;
}
:root[data-theme="dark"] .filter-cli-pop {
  background: #131a26;
  border-color: rgba(255, 255, 255, 0.12);
}
.filter-cli-pop .filter-check {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.filter-cli-pop .filter-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-cli-pop .filter-check:has(input:checked) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}

@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: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 左：员工名册 */
.bd-roster {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
: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: 11px;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.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: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--info) 8%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bd-roster-tx {
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
}
.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: 999px;
  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: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 18px 20px;
  border-radius: 18px;
  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: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 6%, transparent),
    transparent 45%
  );
}
.bd-profile-head .orb-avatar {
  width: 54px;
  height: 54px;
}
.bd-profile-id {
  min-width: 0;
}
.bd-profile-id strong {
  display: block;
  font-size: 18px;
}
.bd-profile-id .mate-role {
  margin-top: 5px;
}
.bd-profile-id code {
  display: block;
  margin-top: 5px;
  padding: 0;
  background: transparent;
  color: var(--faint);
  font-size: 10.5px;
}
/* 机器人改名（档案头 ✎ → 行内编辑器） */
.bd-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bd-name-row strong {
  display: inline;
}
.bd-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  flex: none;
  /* 常驻淡显、悬停点亮——比 hover 才出现更易被发现，又不抢名字的视觉重心 */
  opacity: 0.65;
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.bd-name-edit:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.bd-name-edit svg {
  width: 14px;
  height: 14px;
}
.bd-name-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bd-name-editor[hidden] {
  display: none;
}
.bd-name-input {
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: inherit;
  width: min(240px, 56vw);
}
.bd-name-input:focus {
  outline: none;
  border-color: var(--accent);
}
.bd-name-editor button {
  padding: 4px 12px;
  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: 8px;
  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: var(--z-login);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
.feishu-login-modal {
  position: relative;
  width: min(360px, 92vw);
  padding: 24px 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.feishu-login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  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 0 8px;
  font-size: 16px;
}
.feishu-login-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.5;
}
.feishu-login-qr {
  min-height: 40px;
  display: flex;
  justify-content: center;
}
.permission-setup-result {
  margin-top: 10px;
  font-size: 13px;
}

.permission-setup-modal .onboarding-steps {
  margin: 8px 0 0;
  padding-left: 20px;
}
.bd-profile-meta {
  margin: 0 0 0 auto;
  display: grid;
  gap: 5px;
  text-align: right;
  flex: none;
}
.bd-profile-meta small {
  color: var(--muted);
  font-size: 11.5px;
}
.bd-profile-meta .bd-meta-ok {
  color: var(--success);
}

/* 配置 tile 两栏 */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
.bd-tile {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px 18px 14px;
}
: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: 12px;
}
.bd-tile .bd-section + .bd-section {
  margin-top: 12px;
  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;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(320px, 760px);
  gap: 14px;
  max-width: 100%;
  min-width: 0;
}

.settings-card {
  padding: 4px 18px 16px;
  min-width: 0;
  overflow: hidden;
}

.settings-card .bd-section {
  padding-top: 14px;
}
.settings-card .bd-section + .bd-section {
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.settings-actions {
  margin-top: 8px;
}
.settings-inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.settings-inline-control button {
  min-height: 38px;
  white-space: nowrap;
}
.settings-card .toggle-row {
  min-width: 0;
}
.settings-card .toggle-tx {
  min-width: 0;
}
.settings-card .toggle-tx strong,
.settings-card .toggle-tx small {
  overflow-wrap: anywhere;
}
.settings-card .toggle-tx small {
  -webkit-line-clamp: unset;
  color: var(--muted);
}

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

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

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

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

.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-help-tip {
  position: relative;
  display: inline-flex;
}

.skills-help-button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.skills-help-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: var(--z-popover);
  width: min(520px, calc(100vw - 48px));
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  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,
.skills-install-note {
  grid-column: 1 / -1;
}

.skills-install-note {
  display: grid;
  gap: 4px;
  margin: 0;
}

.skills-install-note span {
  display: block;
}

.skills-install-note strong {
  color: var(--fg);
  font-weight: 700;
}

.skills-install-grid label,
.skills-install-grid .skills-source-label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.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-install-action-row,
.skills-candidate-list,
.skills-local-discovery-panel {
  grid-column: 1 / -1;
}

.skills-install-action-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 9px 0 0;
  border-top: 1px solid var(--border-soft);
}

.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-advanced-fields {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.skills-install-actions,
.skills-local-discovery-panel,
.skills-candidate-list-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.skills-install-actions {
  position: absolute;
  top: 9px;
  right: 0;
  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 13px;
  white-space: nowrap;
}

.skills-candidate-list {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  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 {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px !important;
  align-items: start;
  color: var(--fg) !important;
}

.skills-candidate-row input {
  width: auto;
  margin-top: 2px;
}

.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: 8px;
  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-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 58%
    ),
    var(--surface);
  box-shadow: var(--shadow);
}

.skills-overview-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.skills-overview-copy h2 {
  margin: 0;
  color: var(--fg);
  font-size: 18px;
  line-height: 1.25;
}

.skills-overview-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.skills-metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.skills-metric-strip .skills-metric-warn {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--border-soft));
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}

.skills-metric-strip .skills-metric-warn small {
  color: var(--danger);
}
.skills-metric-strip .skills-metric-warn strong {
  color: var(--danger);
}

.skills-metric-strip span {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
}

.skills-metric-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-metric-strip strong {
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  font-family: var(--mono);
}

@media (min-width: 720px) {
  .skills-metric-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .skills-metric-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.skills-installed-panel {
  padding: 18px;
  min-width: 0;
}

.skills-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.skills-section-head-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.skills-section-head h2 {
  margin: 0;
  font-size: 16px;
}

.skills-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.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: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-muted) 24%, transparent),
      transparent 46%
    ),
    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: 999px;
  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: 999px;
  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;
  padding: 18px;
}

.skills-bots-panel h2 {
  margin: 0;
  font-size: 16px;
}

.skills-matrix-block {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.skills-list-unified {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.skills-item-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.skills-item-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  box-shadow: var(--shadow);
}

.skills-item-card.unused {
  border-color: color-mix(in srgb, var(--danger) 20%, var(--border-soft));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--danger) 2%, transparent),
    transparent
  );
}

.skills-item-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.skills-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.skills-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}

.skills-item-unused-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 10.5px;
  font-weight: 700;
}

.skills-item-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.skills-item-desc.empty {
  color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.skills-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  flex-wrap: wrap;
}

.skills-item-actions {
  display: inline-flex;
  gap: 8px;
}

.skills-item-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}

.skills-item-actions button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.skills-item-actions button[data-action="remove-skill"]:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

/* Bot Assignment Area */
.skills-item-assignment {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--border-soft);
}

.skills-assignment-title {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skills-assignment-bots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.skills-bot-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
}

.skills-bot-toggle-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-muted));
}

.skills-bot-toggle-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.skills-bot-toggle-chip.active:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.skills-bot-toggle-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skills-bot-toggle-chip.errored {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background: color-mix(in srgb, var(--danger) 4%, var(--surface-muted));
}

.skills-bot-toggle-chip.errored:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.skills-bot-chip-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.2;
}

.skills-bot-chip-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-bot-chip-status {
  font-size: 9.5px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.skills-bot-toggle-chip.active .skills-bot-chip-status {
  color: rgba(255, 255, 255, 0.8);
}

.skills-matrix-cell-disabled {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--muted) 10%, transparent) 4px,
    color-mix(in srgb, var(--muted) 10%, transparent) 8px
  );
}

.skills-matrix-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* broken-reference cleanup panel */
.skills-matrix-dangling {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.skills-matrix-dangling-head {
  display: grid;
  gap: 2px;
}
.skills-matrix-dangling-head strong {
  color: var(--danger);
  font-size: 12.5px;
}
.skills-matrix-dangling-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.skills-matrix-dangling-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skills-matrix-dangling-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 9px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border-soft));
  border-radius: 999px;
  background: var(--surface);
  font-size: 11.5px;
}

.skills-matrix-dangling-name {
  color: var(--fg);
}
.skills-matrix-dangling-name em {
  margin-right: 6px;
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.skills-matrix-dangling-chip button {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.skills-matrix-dangling-chip button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

/* Source filter tabs */
.skills-source-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-muted);
}

.skills-source-filter button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 120ms ease;
}

.skills-source-filter button:hover {
  color: var(--fg);
  background: var(--surface);
}

.skills-source-filter button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Source badges by kind */
.skills-source-badge.skills-kind-builtin {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-muted));
  color: var(--warning);
}

.skills-source-badge.skills-kind-native {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border-soft));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-muted));
  color: var(--success);
}

.skills-item-card.skills-kind-builtin {
  border-left: 3px solid var(--warning);
}

.skills-item-card.skills-kind-native {
  border-left: 3px solid var(--success);
}

.skills-item-card.skills-kind-registry {
  border-left: 3px solid var(--accent);
}

/* Injection mode pills */
.skills-mode-dynamic,
.skills-mode-global,
.skills-mode-prompt,
.skills-mode-off {
  --mode-color: var(--muted);
}

.skills-mode-dynamic {
  --mode-color: var(--accent);
}
.skills-mode-global {
  --mode-color: var(--warning);
}
.skills-mode-prompt {
  --mode-color: var(--info);
}
.skills-mode-off {
  --mode-color: var(--muted);
}

.skills-bot-toggle-chip.skills-mode-dynamic,
.skills-bot-toggle-chip.skills-mode-global,
.skills-bot-toggle-chip.skills-mode-prompt,
.skills-bot-toggle-chip.skills-mode-off {
  border-color: color-mix(in srgb, var(--mode-color) 40%, var(--border-soft));
}

.skills-bot-toggle-chip.skills-mode-dynamic.active,
.skills-bot-toggle-chip.skills-mode-global.active,
.skills-bot-toggle-chip.skills-mode-prompt.active,
.skills-bot-toggle-chip.skills-mode-off.active {
  border-color: var(--mode-color);
  background: var(--mode-color);
  color: #fff;
}

.skills-injection-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid
    color-mix(in srgb, var(--mode-color) 40%, var(--border-soft));
  color: var(--mode-color);
  background: color-mix(in srgb, var(--mode-color) 10%, var(--surface-muted));
}

/* Per-bot injection panel */
.skills-injection-panel {
  padding: 18px;
  min-width: 0;
}

.skills-injection-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.skills-injection-list {
  display: grid;
  gap: 10px;
}

.skills-injection-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
}

.skills-injection-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skills-injection-bot-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.skills-injection-bot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-injection-bot-cli {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-injection-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skills-injection-control select {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
}

.skills-injection-control select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.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: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.skills-main-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

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

.skills-bot-perspective {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  min-height: 420px;
}

.skills-bot-roster {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: min(70vh, 720px);
  overflow: auto;
  padding-right: 4px;
}

.skills-bot-roster-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.skills-bot-roster-item:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.skills-bot-roster-item.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-bot-roster-item.errored {
  opacity: 0.78;
}

.skills-bot-roster-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.skills-bot-roster-name {
  overflow: hidden;
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-bot-roster-cli {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-bot-roster-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.skills-bot-roster-count.warn {
  color: var(--danger);
}

.skills-bot-detail {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.skills-bot-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.skills-bot-detail-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-bot-detail-meta strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-bot-detail-meta span {
  color: var(--muted);
  font-size: 12px;
}

.skills-bot-search input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--fg);
  font-size: 13px;
}

.skills-bot-detail-sections {
  display: grid;
  gap: 16px;
}

.skills-bot-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-bot-section-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.skills-bot-section-head h3 {
  margin: 0;
  font-size: 13px;
}

.skills-bot-section-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.skills-bot-section-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.skills-bot-skill-list {
  display: grid;
  gap: 8px;
}

.skills-bot-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.skills-bot-skill-row.skills-kind-builtin {
  border-left: 3px solid var(--warning);
}

.skills-bot-skill-row.skills-kind-native {
  border-left: 3px solid var(--success);
}

.skills-bot-skill-row.skills-kind-registry {
  border-left: 3px solid var(--accent);
}

.skills-bot-skill-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.skills-bot-skill-row p,
.skills-bot-skill-row small {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.skills-bot-skill-row button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.skills-control-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skills-defaults-panel .skills-control-block + .skills-control-block {
  margin-top: 14px;
  padding-top: 14px;
  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: 96px;
  padding: 13px 14px;
  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: 8px;
  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(860px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 64px));
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--modal-shadow);
  color: var(--fg);
}

.skills-discovery-dialog::backdrop {
  background: color-mix(in srgb, #0b1524 42%, transparent);
  backdrop-filter: blur(4px);
}

.skills-discovery-dialog article {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.skills-discovery-dialog header {
  display: grid;
  gap: 5px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.skills-discovery-dialog h3,
.skills-discovery-dialog p {
  margin: 0;
}

.skills-discovery-dialog h3 {
  font-size: 17px;
}

.skills-discovery-dialog p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.skills-discovery-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: 520px;
  overflow: auto;
  padding: 16px 20px;
}

.skills-discovery-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.skills-discovery-tabs button {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.skills-discovery-tabs button.selected {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.skills-discovery-tabs strong {
  font-size: 12px;
}

.skills-discovery-tabs small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.skills-discovery-path {
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.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;
  gap: 8px;
}

.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;
  gap: 7px;
}

.skills-discovery-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-muted);
  cursor: pointer;
}

.skills-discovery-row input {
  margin-top: 3px;
}

.skills-discovery-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skills-discovery-row strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.skills-discovery-row.installed {
  opacity: 0.68;
  cursor: default;
}

.skills-discovery-dialog footer {
  justify-content: end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-soft);
}

@media (min-width: 1600px) {
  .skills-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .skills-page-grid {
    grid-template-columns: 1fr;
  }
  .skills-side-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skills-overview {
    grid-template-columns: 1fr;
  }
  .skills-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .skills-item-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .skills-item-assignment {
    padding-left: 0;
    border-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
  }
  .skills-bot-perspective {
    grid-template-columns: 1fr;
  }
  .skills-bot-roster {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .skills-bot-roster-item {
    flex: 0 0 auto;
    min-width: 200px;
    width: auto;
  }
}

@media (max-width: 620px) {
  .skills-page-grid,
  .skills-side-rail,
  .skills-main-panel,
  .skills-defaults-panel,
  .skills-install-panel,
  .skills-overview,
  .skills-installed-panel {
    width: 100%;
    max-width: 100%;
  }
  .skills-side-rail,
  .skills-install-grid,
  .skills-source-control,
  .skills-install-actions,
  .skills-local-discovery-panel,
  .skills-candidate-list-head,
  .skills-section-head-row,
  .skills-overview,
  .skills-metric-strip,
  .skills-row,
  .skills-choice-group,
  .skills-choice-group-compact {
    grid-template-columns: 1fr;
  }
  .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-matrix-corner,
  .skills-matrix-rowhead {
    width: 148px;
    min-width: 148px;
    max-width: 148px;
  }
  .skills-source-filter {
    width: 100%;
    border-radius: 8px;
  }
  .skills-source-filter button {
    flex: 1 1 auto;
  }
  .skills-main-toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .skills-view-toggle {
    width: 100%;
  }
  .skills-view-toggle button {
    flex: 1;
  }
  .skills-bot-detail-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .skills-bot-skill-row {
    grid-template-columns: 1fr;
  }
  .skills-injection-row {
    grid-template-columns: 1fr;
  }
  .skills-injection-control {
    justify-content: space-between;
  }
  .skills-install-actions,
  .skills-local-discovery-panel,
  .skills-candidate-list-head {
    display: grid;
    justify-items: stretch;
  }
}

@media (max-width: 460px) {
  .skills-install-action-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .skills-advanced-options summary {
    padding-right: 0;
  }
  .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: 999px;
  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: linear-gradient(120deg, var(--accent), var(--info));
  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-role-entry > summary {
  cursor: pointer;
  color: var(--fg);
  font-weight: 700;
}
.bd-profile-roles .bd-subsection-title {
  margin: 0 0 4px;
}
.bd-profile-role-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.bd-profile-role-entry {
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.bd-profile-role-content pre {
  margin: 8px 0 0;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--radius-sm);
  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: 11px;
  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;
    max-height: none;
  }
  .bd-roster-item {
    flex: 0 0 auto;
    max-width: 220px;
  }
  .bd-grid {
    grid-template-columns: 1fr;
  }
  .bd-profile-head {
    flex-wrap: wrap;
  }
  .bd-profile-meta {
    text-align: left;
    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: 11px;
  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）：去面板底，控件胶囊化 */
.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: 999px;
  padding: 0 16px;
  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 16px;
  border-radius: 999px;
  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: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
:root[data-theme="dark"] .card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* 角色管理：树面板对齐名册风格 */
:root[data-theme="dark"] .roles-tree-panel,
:root[data-theme="dark"] .roles-editor-panel {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.08);
}
.roles-tree-panel,
.roles-editor-panel {
  border-radius: 16px;
}
.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: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--info) 8%, transparent)
  );
  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: 999px;
}

/* ── 看板列顺序自定义：列头可拖拽 + 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: 999px;
  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;
  }
}

/* 工作流子导航：下划线 tab → 胶囊段 */
.wf-subnav {
  border-bottom: 0;
  gap: 6px;
}
.wf-subnav a {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 0;
  font-size: 12.5px;
  font-weight: 600;
}
.wf-subnav a.active {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

@media (max-width: 980px) {
  .sidebar {
    margin: 0;
    height: auto;
    border-radius: 0;
    top: 0;
  }
  .overview-cols {
    grid-template-columns: 1fr;
  }
  .attention-strip {
    margin: 12px 16px 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   "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;
  --radius-sm: 3px;
  --radius-lg: 6px;
}

: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: var(--z-content);
}

/* ── Fixed background FX: neon grid + glow + scanlines + vignette + data-rain ─ */
.cyber-fx {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  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,
:root[data-skin="cyber"] .topbar-title 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: linear-gradient(
    135deg,
    hsl(186 80% 26% / 0.45),
    hsl(330 70% 24% / 0.3)
  );
  color: hsl(186 100% 74%);
  box-shadow:
    inset 2px 0 0 hsl(186 100% 56%),
    0 0 16px hsl(186 100% 52% / 0.18);
}

/* ── 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);
}

/* ── Status + badges ────────────────────────────────────────────────────────*/
:root[data-skin="cyber"] .connection-status.online::before {
  box-shadow: 0 0 8px hsl(150 85% 58% / 0.85);
}

/* 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: var(--z-dropdown);
  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: var(--z-fx-overlay);
  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: var(--z-overlay);
  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: var(--z-content);
  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;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EXTRA SKINS — palettes distilled from the kaboo webui (frontend/src/styles/*).
   Each is a self-contained token override (variable system re-skins everything);
   they ship their own light/dark palette and ignore the base light/dark mode.
   Placed after the base :root blocks so they win by source order.
   ════════════════════════════════════════════════════════════════════════════ */

/* 原神 Genshin — light, Teyvat parchment + teal primary + gold accent */
:root[data-skin="genshin"] {
  color-scheme: light;
  --bg: hsl(216 72% 97%);
  --bg-soft: hsl(214 56% 94%);
  --surface: hsl(0 0% 100%);
  --surface-raised: hsl(0 0% 100%);
  --surface-muted: hsl(214 48% 95%);
  --fg: hsl(219 36% 17%);
  --muted: hsl(219 18% 41%);
  --faint: hsl(219 16% 55%);
  --border: hsl(208 34% 82%);
  --border-soft: hsl(208 34% 88%);
  --accent: hsl(199 70% 42%);
  --accent-strong: hsl(199 74% 33%);
  --accent-soft: hsl(198 68% 92%);
  --success: hsl(160 60% 35%);
  --success-soft: hsl(160 52% 92%);
  --warning: hsl(36 86% 42%);
  --warning-soft: hsl(42 90% 90%);
  --danger: hsl(0 72% 48%);
  --danger-soft: hsl(0 80% 96%);
  --on-accent: hsl(0 0% 100%);
  --on-danger: hsl(0 0% 100%);
  --modal-shadow: 0 24px 80px hsl(219 40% 30% / 0.22);
  --modal-backdrop: hsl(219 36% 17% / 0.4);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px hsl(216 50% 40% / 0.1);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

/* Fallout — 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;
  --radius-sm: 1px;
  --radius-lg: 4px;
}

/* PRTS (Arknights) — Rhodes Island slate-blue + cyan primary + amber */
:root[data-skin="prts"] {
  color-scheme: dark;
  --bg: hsl(213 50% 5%);
  --bg-soft: hsl(213 46% 7%);
  --surface: hsl(213 44% 8%);
  --surface-raised: hsl(213 44% 11%);
  --surface-muted: hsl(213 32% 14%);
  --fg: hsl(194 65% 92%);
  --muted: hsl(203 22% 62%);
  --faint: hsl(203 18% 50%);
  --border: hsl(194 48% 23%);
  --border-soft: hsl(194 45% 18%);
  --accent: hsl(190 95% 52%);
  --accent-strong: hsl(190 95% 66%);
  --accent-soft: hsl(190 95% 52% / 0.15);
  --success: hsl(150 75% 50%);
  --success-soft: hsl(150 70% 48% / 0.16);
  --warning: hsl(28 96% 56%);
  --warning-soft: hsl(28 96% 52% / 0.16);
  --danger: hsl(0 84% 64%);
  --danger-soft: hsl(0 80% 55% / 0.18);
  --on-accent: hsl(213 70% 6%);
  --on-danger: hsl(213 70% 6%);
  --modal-shadow: 0 24px 80px hsl(213 60% 2% / 0.7);
  --modal-backdrop: hsl(213 60% 3% / 0.7);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(213 60% 2% / 0.55);
  --radius: 3px;
  --radius-sm: 2px;
  --radius-lg: 6px;
}

/* 蔚蓝档案 Blue Archive — deep navy + bright blue primary + halo gold */
:root[data-skin="bluearchive"] {
  color-scheme: dark;
  --bg: hsl(218 51% 12%);
  --bg-soft: hsl(218 48% 15%);
  --surface: hsl(217 48% 18%);
  --surface-raised: hsl(217 48% 21%);
  --surface-muted: hsl(218 36% 18%);
  --fg: hsl(0 0% 96%);
  --muted: hsl(0 0% 76%);
  --faint: hsl(213 20% 64%);
  --border: hsl(213 56% 56% / 0.5);
  --border-soft: hsl(213 56% 56% / 0.3);
  --accent: hsl(209 100% 52%);
  --accent-strong: hsl(209 100% 70%);
  --accent-soft: hsl(209 100% 56% / 0.18);
  --success: hsl(150 65% 55%);
  --success-soft: hsl(150 60% 50% / 0.16);
  --warning: hsl(47 88% 60%);
  --warning-soft: hsl(47 88% 56% / 0.18);
  --danger: hsl(0 80% 66%);
  --danger-soft: hsl(0 78% 58% / 0.18);
  --on-accent: hsl(0 0% 100%);
  --on-danger: hsl(0 0% 100%);
  --modal-shadow: 0 24px 80px hsl(218 60% 4% / 0.6);
  --modal-backdrop: hsl(218 51% 8% / 0.55);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px hsl(218 60% 4% / 0.4);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

/* 绝区零 ZZZ — acid lime on charcoal, bold hollow vibe */
:root[data-skin="zzz"] {
  color-scheme: dark;
  --bg: hsl(240 24% 8%);
  --bg-soft: hsl(244 26% 10%);
  --surface: hsl(244 28% 11%);
  --surface-raised: hsl(244 28% 14%);
  --surface-muted: hsl(244 22% 15%);
  --fg: hsl(75 90% 86%);
  --muted: hsl(280 18% 66%);
  --faint: hsl(280 14% 52%);
  --border: hsl(75 60% 40% / 0.55);
  --border-soft: hsl(75 50% 36% / 0.32);
  --accent: hsl(75 90% 60%);
  --accent-strong: hsl(75 95% 74%);
  --accent-soft: hsl(75 90% 60% / 0.16);
  --success: hsl(140 75% 55%);
  --success-soft: hsl(140 70% 50% / 0.16);
  --warning: hsl(48 100% 62%);
  --warning-soft: hsl(48 100% 56% / 0.16);
  --danger: hsl(340 90% 66%);
  --danger-soft: hsl(340 85% 58% / 0.18);
  --on-accent: hsl(240 30% 8%);
  --on-danger: hsl(240 30% 8%);
  --modal-shadow: 0 24px 80px hsl(240 40% 2% / 0.7);
  --modal-backdrop: hsl(240 30% 3% / 0.7);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(240 40% 2% / 0.55);
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 8px;
}

/* Terminal-flavoured skins: monospace + glow on brand / page titles. */
:root[data-skin="fallout"] .brand strong,
:root[data-skin="fallout"] .topbar-title strong,
:root[data-skin="fallout"] .page-heading h1,
:root[data-skin="prts"] .brand strong,
:root[data-skin="prts"] .topbar-title strong,
:root[data-skin="prts"] .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="prts"] .page-heading h1 {
  text-shadow: 0 0 14px hsl(190 95% 52% / 0.4);
}

/* Genshin/Blue Archive carry a gold secondary — tint the brand mark with it. */
:root[data-skin="genshin"] .brand-mark {
  background: linear-gradient(135deg, hsl(199 70% 42%), hsl(42 78% 58%));
  color: #fff;
}
:root[data-skin="bluearchive"] .brand-mark {
  background: linear-gradient(135deg, hsl(209 100% 52%), hsl(47 88% 60%));
  color: hsl(218 51% 12%);
}

/* ════════════════════════════════════════════════════════════════════════════
   SKIN BACKGROUNDS — the layered neon-glow / grid backgrounds + decorative art
   that make each theme recognisable (ported from kaboo's body.<skin>-mode rules).
   Surfaces are made translucent so the fixed background shows through the chrome
   and cards. Raster art is referenced from kaboo's CDN (loads on-network; if it
   404s off-network the gradient layers still carry the theme).
   ════════════════════════════════════════════════════════════════════════════ */

/* translucent surfaces so the fixed page background reads through chrome + cards */
:root[data-skin="genshin"] {
  --surface: hsl(0 0% 100% / 0.74);
  --surface-raised: hsl(0 0% 100% / 0.88);
  --surface-muted: hsl(214 48% 95% / 0.7);
}
: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="prts"] {
  --surface: hsl(213 44% 8% / 0.7);
  --surface-raised: hsl(213 44% 11% / 0.82);
  --surface-muted: hsl(213 32% 14% / 0.64);
}
:root[data-skin="bluearchive"] {
  --surface: hsl(217 48% 18% / 0.74);
  --surface-raised: hsl(217 48% 21% / 0.86);
  --surface-muted: hsl(218 36% 18% / 0.66);
}
:root[data-skin="zzz"] {
  --surface: hsl(244 28% 11% / 0.7);
  --surface-raised: hsl(244 28% 14% / 0.82);
  --surface-muted: hsl(244 22% 15% / 0.64);
}

/* lift content above any fixed ::before art layer */
:root[data-skin="genshin"] .app-shell,
:root[data-skin="fallout"] .app-shell,
:root[data-skin="prts"] .app-shell,
:root[data-skin="bluearchive"] .app-shell,
:root[data-skin="zzz"] .app-shell {
  position: relative;
  z-index: var(--z-fx);
}

/* 原神 — gentle-breeze parchment + Teyvat glow */
:root[data-skin="genshin"] body {
  background:
    linear-gradient(
      180deg,
      hsl(216 72% 97% / 0.68) 0%,
      hsl(202 78% 96% / 0.58) 42%,
      hsl(42 72% 95% / 0.74) 100%
    ),
    radial-gradient(circle at 20% 16%, hsl(42 88% 78% / 0.36), transparent 28%),
    radial-gradient(
      circle at 82% 26%,
      hsl(198 86% 74% / 0.34),
      transparent 30%
    ),
    radial-gradient(circle at 70% 78%, hsl(154 66% 78% / 0.3), transparent 28%),
    repeating-linear-gradient(
      115deg,
      hsl(42 78% 58% / 0.055) 0 1px,
      transparent 1px 48px
    ),
    url("/assets/skins/genshin-breeze.webp");
  background-position:
    center,
    20% 16%,
    82% 26%,
    70% 78%,
    center,
    center;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-size:
    cover,
    cover,
    cover,
    cover,
    100% 100%,
    cover;
  background-attachment: fixed;
}

/* Fallout — phosphor glow + CRT scanlines, Vault-Boy watermark bottom-right */
: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: var(--z-behind);
  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));
}

/* PRTS — Rhodes Island operator console (cyan glow + fine grid) */
:root[data-skin="prts"] body {
  background:
    radial-gradient(
      ellipse at 18% 12%,
      hsl(190 95% 52% / 0.18),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 88% 78%,
      hsl(28 96% 56% / 0.12),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      hsl(216 56% 6%) 0%,
      hsl(213 50% 4%) 58%,
      hsl(217 56% 5%) 100%
    ),
    repeating-linear-gradient(
      90deg,
      hsl(190 95% 52% / 0.055) 0 1px,
      transparent 1px 72px
    ),
    repeating-linear-gradient(
      0deg,
      hsl(190 95% 52% / 0.045) 0 1px,
      transparent 1px 36px
    );
  background-attachment: fixed;
}
:root[data-skin="prts"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  background: url("/assets/skins/prts-priestess.webp") right -2% bottom / auto
    min(94vh, 1000px) no-repeat;
  opacity: 0.16;
  filter: saturate(1.1);
}

/* 蔚蓝档案 — halo gradients + soft grid, Kei sunset hero bottom-right */
:root[data-skin="bluearchive"] body {
  background:
    radial-gradient(
      ellipse at 14% 12%,
      hsl(209 100% 34% / 0.34),
      transparent 36%
    ),
    radial-gradient(ellipse at 88% 16%, hsl(47 88% 60% / 0.2), transparent 30%),
    radial-gradient(
      ellipse at 50% 92%,
      hsl(213 60% 60% / 0.22),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 86% 78%,
      hsl(188 76% 56% / 0.16),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      hsl(218 51% 10%) 0%,
      hsl(217 48% 16%) 48%,
      hsl(213 42% 14%) 100%
    ),
    linear-gradient(90deg, hsl(213 56% 56% / 0.08) 1px, transparent 1px),
    linear-gradient(0deg, hsl(47 88% 60% / 0.06) 1px, transparent 1px);
  background-size:
    cover,
    cover,
    cover,
    cover,
    cover,
    40px 40px,
    40px 40px;
  background-attachment: fixed;
}
:root[data-skin="bluearchive"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  background: url("/assets/skins/bluearchive-hero.webp") right bottom / auto
    min(86vh, 920px) no-repeat;
  opacity: 0.2;
}

/* 绝区零 — lime/violet glow + Hollow heatmap pattern */
:root[data-skin="zzz"] body {
  background:
    radial-gradient(
      ellipse at 50% -6%,
      hsl(75 90% 60% / 0.14),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 86% 90%,
      hsl(280 60% 50% / 0.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      hsl(244 30% 7%) 0%,
      hsl(252 32% 5%) 52%,
      hsl(244 30% 7%) 100%
    ),
    repeating-linear-gradient(
      0deg,
      hsl(75 90% 60% / 0.05) 0 1px,
      transparent 1px 56px
    ),
    repeating-linear-gradient(
      90deg,
      hsl(75 90% 60% / 0.04) 0 1px,
      transparent 1px 56px
    );
  background-attachment: fixed;
}
:root[data-skin="zzz"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  background: url("/assets/skins/zzz-hero.webp") center / cover no-repeat;
  opacity: 0.62;
}
/* keep the Hollow heatmap pattern as a faint overlay above the wallpaper */
:root[data-skin="zzz"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  background: url("/assets/skins/zzz-pattern.svg") center / 420px repeat;
  opacity: 0.16;
}

/* ════════════════════════════════════════════════════════════════════════════
   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: var(--z-breach);
  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;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   七龙珠 Dragon Ball — warm shonen energy: Goku-gi orange + Super-Saiyan gold,
   sunlit cream sky, and the Dragon Ball orb art bottom-right.
   Orb art: "Dragon ball.svg" by Frédéric Mahé, CC-BY-3.0, via Wikimedia Commons.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-skin="dragonball"] {
  color-scheme: light;
  --bg: hsl(36 92% 96%);
  --bg-soft: hsl(33 86% 93%);
  --surface: hsl(0 0% 100% / 0.8);
  --surface-raised: hsl(0 0% 100% / 0.92);
  --surface-muted: hsl(35 80% 93% / 0.78);
  --fg: hsl(24 50% 17%);
  --muted: hsl(26 22% 40%);
  --faint: hsl(28 18% 54%);
  --border: hsl(32 58% 80%);
  --border-soft: hsl(33 64% 87%);
  --accent: hsl(26 95% 48%);
  --accent-strong: hsl(18 92% 42%);
  --accent-soft: hsl(35 95% 88%);
  --success: hsl(145 60% 36%);
  --success-soft: hsl(145 55% 90%);
  --warning: hsl(42 100% 44%);
  --warning-soft: hsl(45 100% 88%);
  --danger: hsl(2 80% 50%);
  --danger-soft: hsl(2 85% 95%);
  --on-accent: hsl(0 0% 100%);
  --on-danger: hsl(0 0% 100%);
  --modal-shadow: 0 24px 80px hsl(26 60% 30% / 0.25);
  --modal-backdrop: hsl(24 50% 17% / 0.4);
  --qr-surface: #ffffff;
  --shadow: 0 18px 44px hsl(26 70% 40% / 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

:root[data-skin="dragonball"] .app-shell {
  position: relative;
  z-index: var(--z-fx);
}

:root[data-skin="dragonball"] body {
  background:
    radial-gradient(
      circle at 18% 14%,
      hsl(45 100% 75% / 0.45),
      transparent 30%
    ),
    radial-gradient(circle at 84% 20%, hsl(26 95% 62% / 0.28), transparent 34%),
    /* warm veil over the wallpaper so cards + text stay readable */
      linear-gradient(
        180deg,
        hsl(38 92% 96% / 0.78),
        hsl(30 86% 93% / 0.66) 50%,
        hsl(45 80% 95% / 0.8)
      ),
    url("/assets/skins/dragonball-goku.webp") center / cover no-repeat;
  background-attachment: fixed;
}

:root[data-skin="dragonball"] .brand-mark {
  background: linear-gradient(135deg, hsl(26 95% 52%), hsl(45 100% 55%));
  color: #fff;
}
:root[data-skin="dragonball"] .page-heading h1 {
  text-shadow: 0 2px 0 hsl(45 100% 72% / 0.55);
}

/* ════════════════════════════════════════════════════════════════════════════
   中分鸡 iKun — 唱跳 rap 篮球 meme skin: stage-purple backdrop, basketball
   orange + hot-pink/cyan spotlight glows, and an original basketball motif.
   (No real-person photo / no song lyrics — original artwork only.)
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-skin="ikun"] {
  color-scheme: dark;
  --bg: hsl(268 38% 8%);
  --bg-soft: hsl(270 36% 10%);
  --surface: hsl(268 34% 12% / 0.74);
  --surface-raised: hsl(268 34% 15% / 0.86);
  --surface-muted: hsl(268 26% 16% / 0.66);
  --fg: hsl(40 60% 94%);
  --muted: hsl(280 16% 66%);
  --faint: hsl(280 13% 52%);
  --border: hsl(28 70% 50% / 0.5);
  --border-soft: hsl(28 60% 46% / 0.3);
  --accent: hsl(24 95% 55%);
  --accent-strong: hsl(28 100% 67%);
  --accent-soft: hsl(24 95% 55% / 0.16);
  --success: hsl(150 70% 52%);
  --success-soft: hsl(150 65% 48% / 0.16);
  --warning: hsl(45 100% 58%);
  --warning-soft: hsl(45 100% 52% / 0.16);
  --danger: hsl(330 90% 62%);
  --danger-soft: hsl(330 85% 58% / 0.18);
  --on-accent: hsl(268 50% 8%);
  --on-danger: hsl(268 50% 8%);
  --modal-shadow: 0 24px 80px hsl(270 50% 2% / 0.7);
  --modal-backdrop: hsl(270 40% 3% / 0.7);
  --qr-surface: #ffffff;
  --shadow: 0 14px 40px hsl(270 50% 2% / 0.55);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
}

:root[data-skin="ikun"] .app-shell {
  position: relative;
  z-index: var(--z-fx);
}

:root[data-skin="ikun"] body {
  background:
    radial-gradient(
      ellipse at 50% -8%,
      hsl(24 95% 55% / 0.22),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 12% 92%,
      hsl(330 90% 60% / 0.16),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 88% 86%,
      hsl(190 90% 55% / 0.14),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      hsl(270 40% 8%) 0%,
      hsl(276 42% 6%) 55%,
      hsl(268 40% 8%) 100%
    );
  background-attachment: fixed;
}
:root[data-skin="ikun"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  background: url("/assets/skins/ikun-hero.webp") center / cover no-repeat;
  opacity: 0.6;
}

:root[data-skin="ikun"] .brand-mark {
  background: linear-gradient(135deg, hsl(24 95% 55%), hsl(330 90% 60%));
  color: #fff;
}

/* ── 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"]) .qcard,
: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 {
  background: var(--surface);
}
:root:not([data-skin="default"]) .session-board-column > header {
  background: var(--surface-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   SKIN SWITCH-IN INTROS — short, original per-skin transitions (mounted by
   skin-intro.ts; 2077 uses its own boot loader). All fade out via si-fade.
   ════════════════════════════════════════════════════════════════════════════ */
.skin-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* frosted mask so the page dims softly behind the intro (less abrupt) */
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: si-fade var(--si-dur, 2s) ease forwards;
}
/* ease IN at the start + OUT at the end, instead of popping on instantly */
@keyframes si-fade {
  0% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* —— 原神: "原神，启动" — ZZZ-style text loader in Genshin's cream/teal/gold —— */
.si-genshin {
  background:
    radial-gradient(circle at 50% 46%, hsl(42 92% 82% / 0.5), transparent 42%),
    radial-gradient(circle at 50% 46%, hsl(198 80% 74% / 0.4), transparent 60%),
    linear-gradient(180deg, hsl(214 66% 97% / 0.82), hsl(204 72% 94% / 0.82));
}
.si-genshin .si-gi-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 36%,
    hsl(42 95% 82% / 0.6) 48%,
    hsl(198 92% 86% / 0.55) 52%,
    transparent 66%
  );
  background-size: 250% 100%;
  animation: si-gi-shine var(--si-dur, 2s) ease forwards;
}
.si-genshin .si-gi-text {
  position: relative;
  font-weight: 900;
  font-size: clamp(30px, 7vw, 64px);
  letter-spacing: 0.12em;
  background: linear-gradient(
    100deg,
    hsl(199 76% 40%),
    hsl(186 72% 46%) 42%,
    hsl(42 88% 50%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 0 hsl(0 0% 100% / 0.6))
    drop-shadow(0 0 28px hsl(42 90% 62% / 0.6));
  animation: si-gi-pop var(--si-dur, 2s) cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes si-gi-shine {
  0% {
    background-position: 120% 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    background-position: -40% 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes si-gi-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
    letter-spacing: 0.5em;
  }
  35% {
    transform: scale(1.06);
    opacity: 1;
    letter-spacing: 0.12em;
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes si-blink {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* —— 绝区零: TV static / channel-switch "NOW LOADING" —— */
.si-zzz {
  background: rgba(7, 7, 13, 0.85);
}
.si-zzz .si-static {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      hsl(75 90% 60% / 0.05) 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 2px,
      transparent 2px 3px
    );
  mix-blend-mode: screen;
  animation:
    si-zzz-static 0.12s steps(2) infinite,
    si-zzz-off var(--si-dur, 1.9s) ease forwards;
}
.si-zzz .si-roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  background: linear-gradient(
    180deg,
    transparent,
    hsl(75 90% 60% / 0.18),
    transparent
  );
  animation: si-zzz-roll 0.7s linear infinite;
}
.si-zzz .si-now {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(20px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: hsl(75 95% 64%);
  text-shadow: 0 0 18px hsl(75 90% 55% / 0.7);
  animation: si-blink 0.7s steps(2, end) infinite;
}
@keyframes si-zzz-static {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}
@keyframes si-zzz-roll {
  from {
    top: -14%;
  }
  to {
    top: 100%;
  }
}
@keyframes si-zzz-off {
  0%,
  78% {
    transform: scaleY(1);
    opacity: 1;
  }
  90% {
    transform: scaleY(0.02);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

/* —— 七龙珠: 悟空骑筋斗云 whooshing across with speed lines —— */
.si-dragonball {
  background: linear-gradient(
    180deg,
    hsl(205 85% 72% / 0.8),
    hsl(198 80% 86% / 0.78) 60%,
    hsl(45 90% 92% / 0.8)
  );
}
.si-dragonball .si-cloud {
  display: block;
  width: clamp(150px, 26vw, 280px);
  height: auto;
  filter: drop-shadow(0 12px 18px hsl(38 80% 35% / 0.45));
  animation: si-db-fly var(--si-dur, 1.9s) cubic-bezier(0.4, 0.02, 0.45, 1)
    forwards;
}
.si-dragonball .si-speed {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55) 0 2px,
    transparent 2px 26px
  );
  opacity: 0;
  mix-blend-mode: overlay;
  animation: si-db-speed var(--si-dur, 1.9s) ease forwards;
}
@keyframes si-db-fly {
  0% {
    transform: translateX(-65vw) translateY(22px) rotate(-6deg) scale(0.9);
  }
  50% {
    transform: translateX(0) translateY(-22px) rotate(3deg) scale(1.05);
  }
  100% {
    transform: translateX(72vw) translateY(16px) rotate(-4deg) scale(0.92);
  }
}
@keyframes si-db-speed {
  0% {
    opacity: 0;
  }
  25%,
  70% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

/* —— ikun: bouncing 3D basketball (shaded sphere + only the seams spin) —— */
.si-ikun {
  background:
    radial-gradient(circle at 50% 46%, hsl(24 95% 55% / 0.22), transparent 46%),
    linear-gradient(180deg, hsl(270 42% 9% / 0.84), hsl(276 44% 6% / 0.84));
}
.si-ikun .si-bball {
  position: relative;
  width: clamp(108px, 19vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: 50% 100%;
  background: radial-gradient(
    circle at 35% 28%,
    #ffbf80 0%,
    #ef8033 34%,
    #cf6020 66%,
    #8f3d0e 100%
  );
  box-shadow:
    inset -12px -14px 30px rgba(60, 20, 0, 0.55),
    inset 9px 9px 20px rgba(255, 210, 150, 0.4),
    0 20px 32px rgba(0, 0, 0, 0.5);
  animation: si-ikun-bounce var(--si-dur, 1.9s) cubic-bezier(0.5, 0, 0.5, 1)
    forwards;
}
.si-ikun .si-bball::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 12%;
  width: 32%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55),
    transparent 72%
  );
  filter: blur(3px);
}
.si-ikun .si-bball-seams {
  position: absolute;
  inset: 0;
  animation: si-spin 0.6s linear infinite;
}
.si-ikun .si-bball-seams svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes si-spin {
  to {
    transform: rotate(360deg);
  }
}
/* uniform scale only — never distort the circle (no squash → always round) */
@keyframes si-ikun-bounce {
  0% {
    transform: translateY(-135%) scale(0.72);
  }
  34% {
    transform: translateY(0) scale(1);
  }
  52% {
    transform: translateY(-38%) scale(1);
  }
  70% {
    transform: translateY(0) scale(1);
  }
  84% {
    transform: translateY(-13%) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skin-intro {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   v3 runs page — "flight recorder" visual language (v3.ts).
   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;
}

.v3-team-spec {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
}
.v3-team-spec-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.v3-team-spec-intro {
  margin: 6px 0 8px;
  max-width: 720px;
  line-height: 1.55;
}
.team-spec-textarea {
  width: 100%;
  min-height: 180px;
  margin-top: 8px;
  padding: 10px;
  box-sizing: border-box;
  resize: vertical;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 13px / 1.5 var(--mono);
}
.team-spec-actions {
  margin-top: 8px;
}

/* Split layout for whiteboards and workflow specs */
.wb-split {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .wb-split {
    grid-template-columns: 1fr;
  }
}

/* Whiteboard metadata grid */
.wb-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .wb-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* Team board kanban lanes responsive layout */
.team-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1024px) {
  .team-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) and (min-width: 721px) {
  .sessions-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .team-board-grid {
    grid-template-columns: 1fr;
  }
}

.v3r-title {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.v3r-runid {
  font-family: var(--mono);
  font-size: 12.5px;
}
.v3r-list-task {
  min-width: 240px;
  max-width: 480px;
}
.v3r-list-task > span {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
}
.v3r-list-source {
  min-width: 180px;
}
.v3r-list-source strong,
.v3r-list-source code {
  display: block;
  overflow-wrap: anywhere;
}
.v3r-list-source strong {
  font-size: 12.5px;
}
.v3r-list-source code {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 10.5px;
}

/* status pill — shared by list rows, panel header, run badge */
.v3r-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  padding: 0.14em 0.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: 0.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-blocked {
  --ns: var(--v3r-blocked);
}
.rs-failed {
  --ns: var(--v3r-failed);
}

.v3r-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
.v3r-context {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr);
  gap: 1.5rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.v3r-context[hidden] {
  display: none;
}
.v3r-context-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.v3r-context-task p {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.v3r-context-source {
  min-width: 0;
}
.v3r-context-source strong,
.v3r-context-source code,
.v3r-context-topic {
  display: block;
  overflow-wrap: anywhere;
}
.v3r-context-source code,
.v3r-context-topic {
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: 11px;
}
.v3r-mode {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 6px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}
.v3r-team {
  margin: 0 0 1rem;
  padding: 0.85rem 0 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.v3r-team-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.v3r-team-head > div {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  min-width: 0;
}
.v3r-team-head strong {
  font-size: 15px;
}
.v3r-team-head span {
  color: var(--muted);
  font-size: 12px;
}
.v3r-team-warn {
  margin: 0 0 0.7rem;
  color: var(--v3r-blocked);
  font-size: 12px;
}
.v3r-team-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(280px, 1.15fr) minmax(
      300px,
      1.4fr
    );
  gap: 1.2rem;
}
.v3r-team-grid h3 {
  margin: 0 0 0.45rem;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}
.v3r-members {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.v3r-member {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) auto minmax(120px, 1.4fr);
  gap: 0.5rem;
  align-items: baseline;
  font-size: 12px;
}
.v3r-member.off {
  opacity: 0.5;
}
.v3r-member-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.v3r-member-cli {
  color: var(--accent-strong);
  font-family: var(--mono);
  font-size: 10.5px;
}
.v3r-member-role {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.v3r-task-scroll {
  max-height: 170px;
  overflow: auto;
}
.v3r-task-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.v3r-task-scroll th,
.v3r-task-scroll td {
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}
.v3r-task-scroll th {
  color: var(--muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg);
}
.v3r-team-events {
  max-height: 170px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.v3r-team-event {
  display: grid;
  grid-template-columns: 38px 56px minmax(100px, 0.7fr) minmax(140px, 1.4fr);
  gap: 0.45rem;
  font-size: 11px;
  align-items: baseline;
}
.v3r-team-event .seq {
  color: var(--faint);
  font-family: var(--mono);
}
.v3r-team-event .kind {
  color: var(--accent-strong);
  font-weight: 700;
}
.v3r-team-event .route {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.v3r-team-event .body {
  color: var(--fg);
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .v3r-team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .v3r-team-grid > :last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .v3r-context {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .v3r-team-grid {
    grid-template-columns: 1fr;
  }
  .v3r-team-grid > :last-child {
    grid-column: auto;
  }
  .v3r-team-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .v3r-team-event {
    grid-template-columns: 34px 52px 1fr;
  }
  .v3r-team-event .body {
    grid-column: 2 / -1;
  }
}
.v3r-graph-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  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-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  padding: 0.45rem 0.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: 0.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 0.2s ease,
    stroke 0.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-bar {
  fill: var(--ns);
}
.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;
}
.bp-node .bp-agent {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.bp-node .bp-goal {
  fill: var(--faint);
  font-size: 10px;
}
.bp-node .bp-gate {
  font-size: 11px;
}
.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: 10px;
  padding: 1rem;
  background: var(--surface);
}
.v3r-panel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.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;
}
.v3r-crumb {
  margin: 0.2rem 0 0.55rem;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.v3r-crumb .sep {
  color: var(--faint);
}
.v3r-goal {
  margin: 0.45rem 0;
  padding: 0.5rem 0.7rem;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 3px solid var(--border);
  background: var(--surface-muted);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
}
.v3r-deps {
  margin: 0.4rem 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}
.v3r-dep {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 0.1em 0.5em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
}
.v3r-err {
  margin: 0.4rem 0;
  font-size: 12.5px;
  color: var(--v3r-blocked);
}
.v3r-owner {
  margin: 0.35rem 0;
  font-size: 12px;
  color: var(--muted);
}
.v3r-term-slot {
  margin-top: 0.75rem;
}

/* ── loop iteration timeline ── */
.v3r-loop-sec {
  margin-top: 0.65rem;
}
.v3r-loop-meter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.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: 0.1em 0.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: 0.45rem;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.15rem;
}
.v3r-round {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.45rem 0.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: 0.45em;
  margin-bottom: 0.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: 0.55;
}
/* the strip naming which instance's terminal is mounted below the timeline */
.v3r-inst-strip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px 8px 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: 0.04em;
}
.v3r-nodeid.sm {
  font-size: 12.5px;
}
#v3-inst-strip:not(:empty) + .v3r-term-slot {
  margin-top: 0;
}
.v3r-cta {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  font-size: 12.5px;
  color: var(--v3r-blocked);
  border-radius: 8px;
  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: 0.55;
  }
}
@keyframes v3r-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.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;
  }
}
/* ── 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;
}
.insight-page-status {
  color: var(--mut);
  font-size: 12px;
  margin: 4px 0 14px;
  min-height: 14px;
}

/* 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: 0.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: 10px;
}
.insights-page .insights-metrics {
  margin-bottom: 16px;
}
.insights-page .episode-overview {
  margin: 16px 0;
}
.insights-page .episode-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.insights-page .episode-overview-head p {
  margin: 3px 0 0;
}
.insights-page .episode-metrics {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .insights-page .episode-overview {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100vw - 30px);
  }
  .insights-page .episode-overview-head {
    align-items: stretch;
    flex-direction: column;
  }
  .insights-page .episode-overview-head .pill {
    align-self: flex-start;
  }
  .insights-page .episode-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .insights-page .episode-metrics .card {
    min-width: 0;
  }
  .insights-page .episode-overview .insight-disclosure {
    overflow-wrap: anywhere;
  }
}
.insights-page .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  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: 8px;
  padding: 12px 14px;
}
.insights-page .recblock {
  background: var(--ins-inner);
}
.insights-overview-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  margin: 16px 0 18px;
}
@media (max-width: 900px) {
  .insights-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* 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 0.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 (总览 / 会话 / 分布 / 热点) — mirrors .detailtabbar */
.insights-page .insight-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 16px;
}
.insights-page .itab {
  background: transparent;
  color: var(--mut);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: -1px;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}
.insights-page .itab:hover {
  color: var(--fg);
}
.insights-page .itab.on {
  color: var(--fg);
  background: var(--panel);
  border-color: var(--line);
  font-weight: 600;
}
.insights-page .insight-panel[hidden] {
  display: none;
}

/* filter-bar additions: project/time selects, analyzable toggle, clear */
/* `select.ins-select` (not just `.ins-select`) so this beats the theme-layer
   `:root[data-theme="dark"] .page :where(...select...)` rule (same specificity,
   defined earlier) — that rule uses a `background:` shorthand which otherwise
   wipes our chevron and leaves a pill indistinguishable from the filter buttons.
   appearance:none (global) already removed the native arrow, so draw it here. */
.page.insights-page select.ins-select {
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 0;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 12px;
  max-width: 220px;
  cursor: pointer;
  background-color: var(--ins-inner);
  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 10px center;
}
.page.insights-page select.ins-select:hover {
  border-color: var(--mut);
}
.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: 8px;
  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 0 12px;
  font-size: 12px;
}
.insights-page .ihist-grid,
.insights-page .hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  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: 0.8;
  border-radius: 2px 2px 0 0;
  transition: height 0.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: 2px;
}
.insights-page .insight-disclosure {
  margin-top: 16px;
  color: var(--ins-faint);
  font-size: 11px;
  line-height: 1.55;
  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);
}
/* optimization console: share selected insight recommendations with an existing bot */
.insights-page .opt-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.insights-page .opt-field {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
}
.insights-page .opt-field > span {
  font-size: 12px;
  color: var(--mut);
}
.insights-page .opt-field .ins-select {
  max-width: none;
  width: 100%;
}
.insights-page .opt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.insights-page .opt-actions .primary {
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--acc);
  color: var(--btn-fg, #fff);
  cursor: pointer;
}
.insights-page .opt-actions button:disabled,
.insights-page .opt-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.insights-page .opt-status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--mut);
  line-height: 1.45;
}
.insights-page .opt-status.ok {
  color: var(--good);
}
.insights-page .opt-status.bad {
  color: var(--bad);
}
.insights-page .opt-status a {
  color: var(--acc);
}
.insights-page .opt-source {
  margin: -2px 0 10px;
  font-size: 12px;
  color: var(--mut);
}
.insights-page .opt-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.insights-page .opt-rec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}
.insights-page .opt-rec {
  cursor: pointer;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.insights-page .opt-rec:hover {
  border-color: var(--acc);
}
.insights-page .opt-rec.active {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc) inset;
}
.insights-page .opt-rec input {
  margin-top: 2px;
  accent-color: var(--acc);
}
.insights-page .opt-rec-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}
@media (max-width: 840px) {
  .insights-page .opt-grid {
    grid-template-columns: 1fr;
  }
  .insights-page .opt-rec-list {
    grid-template-columns: 1fr;
  }
  .insights-page .opt-kpis {
    grid-template-columns: 1fr;
  }
}
/* ⌘K command palette */
.insights-page .insight-head-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.insights-page .insight-palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-palette);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.insights-page .insight-palette[hidden] {
  display: none;
}
.insights-page .insight-palette .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.insights-page .palette-panel {
  position: relative;
  margin-top: 12vh;
  width: min(560px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.insights-page .palette-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
}
.insights-page .palette-list {
  max-height: 50vh;
  overflow: auto;
  padding: 6px;
  display: grid;
  gap: 2px;
}
.insights-page .palette-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 8px;
}
.insights-page .palette-item.on,
.insights-page .palette-item:hover {
  background: var(--accent-soft);
}
.insights-page .pal-label {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.insights-page .pal-sub {
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
  flex: 0 0 auto;
}
.insights-page .palette-empty {
  padding: 16px;
  text-align: center;
}
/* 行为流 (Flow) tab */
.insights-page .flow-sub {
  font-size: 12px;
  margin: -4px 0 12px;
}
.insights-page .flow-pipe-block {
  margin-bottom: 14px;
}
.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: 10px;
}
.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: 0.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: -2px 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: 8px;
  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-bottom: 12px;
}
.insights-page .sesssort {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.insights-page .sesssort-label {
  font-size: 11px;
  margin-right: 2px;
}
.insights-page .ins-back {
  background: transparent;
  color: var(--mut);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 12px;
}
.insights-page .ins-back:hover {
  color: var(--fg);
  border-color: var(--acc);
}
.insights-page #insight-detail-view .insight-detail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
/* full-width rich rows */
.insights-page .slist.wide {
  max-height: none;
  overflow: visible;
  gap: 10px;
}
.insights-page .slist.wide .srow {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
}
.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 .srstats {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.insights-page .slist.wide .srmsg {
  justify-self: end;
}
@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;
  }
}
.insights-page .sesssort-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 4px;
  vertical-align: middle;
}
/* 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: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.insights-page .strow:hover {
  background: var(--ins-inner);
}
.insights-page .strow.on {
  background: var(--accent-soft);
  border-left-color: var(--acc);
}
.insights-page .strow.review {
  border-left-color: var(--bad);
}
.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: 10px;
  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-left: 3px solid transparent;
  border-radius: 8px;
  padding: 9px 11px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.insights-page .srow:hover {
  background: var(--ins-recess);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.insights-page .srow.on {
  border-left-color: var(--acc);
  background: var(--accent-soft);
}
.insights-page .srow.review {
  border-left-color: var(--bad);
}
.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: 4px 6px;
}
.insights-page .srstats b {
  font-size: 11px;
  color: var(--mut);
  font-weight: 500;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.insights-page .srstats b em {
  font-style: normal;
  color: var(--fg);
  font-weight: 600;
  margin-left: 4px;
}
.insights-page .srstats b.bad em {
  color: var(--bad);
}
.insights-page .srmsg {
  font-size: 11px;
  color: var(--mut);
}

/* 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: 16px;
}
.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: 8px;
  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: 8px;
  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: 5px;
  background: var(--ins-inner);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fg);
}
.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, 0.35);
  background: rgba(248, 81, 73, 0.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 0.15s,
    box-shadow 0.15s,
    transform 0.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: 0.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: 8px;
  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: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--mut);
  background: var(--ins-inner);
  border-radius: 6px;
  padding: 2px 7px;
}
.insights-page .tm b {
  color: var(--fg);
  font-weight: 700;
  font-family: var(--mono);
}
.insights-page .tm.bad {
  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: 4px;
  flex-wrap: wrap;
}
.insights-page .span-tag {
  font-size: 10px;
  color: var(--mut);
  background: var(--ins-inner);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
}
.insights-page .span-tag.tg-failure {
  color: var(--bad);
  border-color: var(--bad);
}
.insights-page .span-tag.tg-slow {
  color: var(--warn);
  border-color: var(--warn);
}
.insights-page .span-tag.tg-retry {
  color: var(--ph-delegate);
  border-color: var(--ph-delegate);
}
.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: 0.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: 0.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: 0.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: var(--z-content);
}

/* 动作 span — filter chips + table */
.insights-page .spanfilter {
  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 0.1s ease,
    box-shadow 0.1s ease;
}
.insights-page .railnode > span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.insights-page .railnode:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 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: 0.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: 0.8;
  cursor: pointer;
}
.insights-page .gbar:hover {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--fg);
  z-index: var(--z-sticky-cell);
}
.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: 0.4;
  stroke: none;
}
.insights-page .ctxhit {
  fill: transparent;
  cursor: crosshair;
}
.insights-page .ctxhit:hover {
  fill: var(--acc);
  opacity: 0.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: var(--z-tooltip);
  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, 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: 8px;
  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: 0.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: 0.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: 0.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: var(--z-modal);
}
.insights-page .insight-modal[hidden] {
  display: none;
}
.insights-page .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.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(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: insight-fade-up 0.18s ease both;
}
.insights-page .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  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: 8px;
  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: 8px;
  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: 0.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 0.35s ease both;
}
.insights-page .insights-overview-grid {
  animation: insight-fade-up 0.35s ease both;
  animation-delay: 0.05s;
}
.insights-page .insight-panel {
  animation: insight-fade-up 0.35s ease both;
  animation-delay: 0.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;
  }
}

/* ─── 创建会话 modal ─────────────────────────────────────────────────────── */
.create-session-btn {
  white-space: nowrap;
}
.create-session-modal .cs-card {
  padding: 20px;
}
.create-session-modal textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--fg);
}
.create-session-modal fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 12px 0;
  padding: 10px 12px;
}
.create-session-modal legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
}
.create-session-modal .cs-bots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 12px;
}
.create-session-modal .cs-bot {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.create-session-modal .cs-mode label,
.create-session-modal .cs-column label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  cursor: pointer;
}
.create-session-modal fieldset small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.create-session-modal .cs-lead-row {
  margin: 12px 0;
}
.create-session-modal .cs-lead-row select {
  margin: 4px 0;
  padding: 6px 8px;
}
.create-session-modal .cs-advanced {
  margin: 12px 0;
}
.create-session-modal .cs-advanced summary {
  cursor: pointer;
  color: var(--muted);
}
.create-session-modal .cs-empty {
  color: var(--muted);
  margin: 0;
}
.create-session-modal .cs-warn {
  color: var(--warn, #c60);
}

/* ─── Whiteboards page ───────────────────────────────────────────────────── */
.wb-page {
  min-width: 0;
  display: block;
}
.wb-page .page-heading {
  margin-bottom: 20px;
  flex-direction: row;
  align-items: flex-start;
}
.wb-page .page-heading > div {
  min-width: 0;
  flex: 1;
}
.wb-page .page-heading .pill {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}
.wb-page .page-heading h1 {
  font-size: 24px;
}
.wb-page .wb-lead {
  margin: 8px 0 0;
  max-width: 42em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.wb-total {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  margin-left: 8px;
}
.wb-kind-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}
.wb-kind-switch button {
  min-height: 44px;
  min-width: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 6px 4px;
  box-shadow: none;
}
.wb-kind-switch button:hover {
  color: var(--fg);
  background: transparent;
}
.wb-kind-switch button.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 0 0 1px var(--border-soft, var(--border));
}
.wb-kind-switch button.active[data-kind="chat"] {
  color: var(--accent-strong);
}
.wb-kind-switch button.active[data-kind="team"] {
  color: #6d28d9;
}
:root[data-theme="dark"] .wb-kind-switch button.active[data-kind="team"] {
  color: #c4b5fd;
}
.wb-kind-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .wb-kind-name {
    font-size: 12px;
  }
}
.wb-kind-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.wb-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.wb-kind-chip.is-chat {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.wb-kind-chip.is-team {
  background: rgba(109, 40, 217, 0.12);
  color: #6d28d9;
}
:root[data-theme="dark"] .wb-kind-chip.is-team {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
}
.wb-kind-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.wb-kind-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  min-width: 0;
}
.wb-kind-banner.is-chat {
  background: var(--accent-soft);
  border-color: rgba(2, 132, 199, 0.18);
}
.wb-kind-banner.is-team {
  background: rgba(109, 40, 217, 0.06);
  border-color: rgba(109, 40, 217, 0.22);
}
:root[data-theme="dark"] .wb-kind-banner.is-team {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.28);
}
.wb-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.wb-detail-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.wb-detail-id {
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wb-manage-details {
  margin-bottom: 18px;
  color: var(--muted);
}
.wb-manage-details summary,
.wb-content-raw summary {
  cursor: pointer;
}
.wb-manage-details code {
  display: block;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}
.wb-content-head {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.wb-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 16px 0;
  line-height: 1.65;
  background: transparent;
}
.wb-item-top {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.wb-item-title {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.wb-item-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: #6d28d9;
  white-space: nowrap;
  flex-shrink: 0;
}
:root[data-theme="dark"] .wb-item-progress-label {
  color: #c4b5fd;
}
.wb-item-bits {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.wb-item-meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
}
.wb-item-group {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wb-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.wb-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft, var(--border));
  overflow: hidden;
}
.wb-progress-fill {
  height: 100%;
  width: 0;
  background: #7c3aed;
  border-radius: inherit;
}
.wb-page .wb-item.is-team {
  border-left-color: rgba(124, 58, 237, 0.55);
}
.wb-page .wb-item.is-team.active {
  border-left-color: #7c3aed;
}
.wb-team-eyebrow {
  text-transform: none;
  color: #6d28d9 !important;
}
:root[data-theme="dark"] .wb-team-eyebrow {
  color: #c4b5fd !important;
}
.wb-page .wb-item-check {
  display: flex;
  align-items: center;
  padding: 0 2px;
  flex-shrink: 0;
}
.wb-page .wb-split {
  gap: 0;
  border-top: 1px solid var(--border);
}
.wb-page .wb-list-panel {
  display: block;
  min-width: 0;
  padding: 18px 18px 18px 0;
}
.wb-page .wb-detail-panel {
  min-width: 0;
  padding: 24px;
  border-left: 1px solid var(--border);
}
.wb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  min-height: 44px;
}
.wb-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wb-page #wb-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  margin: 0;
}
.wb-search-count {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
}
.wb-page .wb-tabs {
  background: transparent;
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
  gap: 4px;
}
.wb-page .wb-tab {
  border-radius: 6px;
  min-height: 36px;
  padding: 6px 8px;
}
.wb-page .wb-tab.active {
  box-shadow: none;
  background: var(--surface-raised);
  color: var(--accent);
}
.wb-page .wb-item-row {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.wb-page .wb-item {
  display: block;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  padding: 14px 10px;
  border-left: 3px solid transparent;
}
.wb-page .wb-item:hover {
  background: var(--surface-raised);
}
.wb-page .wb-item.active {
  border-left-color: var(--accent);
  background: var(--surface-raised);
}
.wb-page .wb-item-row.checked .wb-item {
  background: var(--warning-soft);
}
.wb-page .wb-item-check {
  min-width: 24px;
  justify-content: center;
}
.wb-page input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.wb-page .wb-select-all {
  min-height: 36px;
}
.wb-page .wb-meta-grid {
  border-bottom: 1px solid var(--border);
  gap: 4px 20px;
  padding-bottom: 12px;
}
.wb-page .wb-content pre {
  font: 13px/1.7 var(--mono, monospace);
}
.wb-page .wb-icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
}
.wb-placeholder {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 280px;
  color: var(--muted);
}
.wb-page .wb-back {
  display: none;
}
.wb-page .wb-bulk-bar {
  position: static;
  flex-wrap: wrap;
  border-radius: 6px;
  margin-top: 12px;
}
.wb-page .wb-delete-backdrop [role="dialog"] {
  border-radius: 8px !important;
  overflow-wrap: anywhere;
  max-height: 90dvh;
  overflow-y: auto;
}
@media (max-width: 980px) {
  .wb-kind-banner {
    flex-direction: column;
    gap: 8px;
  }
  .wb-page .wb-list-panel {
    padding: 16px 0;
  }
  .wb-page .wb-detail-panel {
    display: none;
    border-left: 0;
    padding: 16px 0;
  }
  .wb-page.wb-show-detail .wb-list-panel {
    display: none;
  }
  .wb-page.wb-show-detail .wb-detail-panel {
    display: block;
  }
  .wb-page .wb-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    min-height: 44px;
  }
  .wb-page .wb-tab {
    min-height: 44px;
  }
  .wb-page .wb-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}
.wb-list-panel {
  display: grid;
  gap: 12px;
}

/* Group tabs (shared with workflow specs page) */
.wb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin: 0 0 12px;
  background: var(--surface-muted);
  border-radius: 12px;
}
.wb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  min-width: 0;
  box-shadow: none;
}
.wb-tab:hover {
  color: var(--fg);
  background: transparent;
}
.wb-tab.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 0 0 1px var(--border-soft, var(--border));
}
.wb-tab-label {
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wb-tab-count {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--border-soft, var(--border));
  color: var(--muted);
  flex: 0 0 auto;
}
.wb-tab.active .wb-tab-count {
  background: rgba(14, 165, 233, 0.15);
  color: var(--accent, #0ea5e9);
}
.wb-tab-panel-hint {
  margin: 0 0 10px 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.wb-item-preview {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.wb-section {
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 14px;
  background: var(--surface-muted, rgba(15, 23, 42, 0.02));
  overflow: hidden;
}
.wb-section-group {
  border-color: rgba(14, 165, 233, 0.22);
}
.wb-section-orphan-recent {
  border-color: rgba(245, 158, 11, 0.28);
}
.wb-section-orphan-older {
  border-color: rgba(100, 116, 139, 0.24);
  opacity: 0.92;
}
.wb-group {
  margin: 0;
}
.wb-group-summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  list-style: none;
}
.wb-group-summary::-webkit-details-marker {
  display: none;
}
.wb-group-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-group-count {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--muted);
  flex: 0 0 auto;
}
.wb-group-hint {
  margin: 0;
  padding: 0 14px 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.wb-group-items {
  padding: 0 8px 10px;
}
.wb-group-items .wb-item-row {
  margin-left: 8px;
  margin-right: 8px;
}
.wb-item-row.checked .wb-item {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(
    in srgb,
    var(--warning-soft) 55%,
    var(--surface-raised)
  );
}
.wb-bulk-bar {
  margin-bottom: 10px;
}
.wb-bulk-bar[hidden] {
  display: none !important;
}
.wb-section-check input {
  margin: 0;
}
.bd-specialty-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 0 0 12px;
  padding: 8px 0;
  border: 0;
  min-width: 0;
}
.bd-specialty-options legend {
  font-size: 13px;
  color: var(--muted);
}
.bd-specialty-options label,
.bd-specialty-enabled {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.bd-specialty-options input,
.bd-specialty-enabled input {
  flex: 0 0 auto;
  margin: 0;
  width: 18px;
  height: 18px;
}
.bd-specialties .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-specialties button {
  min-height: 44px;
  white-space: normal;
}
.bd-specialties [role="status"] {
  font-size: 13px;
  overflow-wrap: anywhere;
  min-height: 20px;
}
.tf-match-positions {
  min-height: 44px;
}
.bd-page,
.tf-page {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.bd-page .page-heading > div,
.tf-page .page-heading > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bd-page .bd-layout,
.bd-page .bd-detail,
.bd-page .bd-tile,
.tf-page .card {
  min-width: 0;
}
@media (max-width: 600px) {
  .tf-page table,
  .tf-page tbody {
    display: block;
    width: 100%;
  }
  .tf-page tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 64px;
    gap: 4px;
  }
  .tf-page td {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .tf-page td:nth-child(4) {
    grid-column: 2 / -1;
  }
  .tf-page td:nth-child(5) {
    grid-column: 2 / -1;
  }
  .tf-page input,
  .tf-page select {
    max-width: 100%;
    box-sizing: border-box;
  }
  .bd-page .bd-section-note,
  .bd-page .bd-help {
    overflow-wrap: anywhere;
  }
}