/* ── Google Fonts ─────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap");

/* ── Self-hosted fallback fonts ──────────────────────────── */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: optional; src: url("/src/styles/fonts/Sora-300.woff2") format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: optional; src: url("/src/styles/fonts/Sora-400.woff2") format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: optional; src: url("/src/styles/fonts/Sora-500.woff2") format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: optional; src: url("/src/styles/fonts/Sora-600.woff2") format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: optional; src: url("/src/styles/fonts/Sora-700.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; font-display: optional; src: url("/src/styles/fonts/JetBrainsMono-300.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: optional; src: url("/src/styles/fonts/JetBrainsMono-400.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: optional; src: url("/src/styles/fonts/JetBrainsMono-500.woff2") format('woff2'); }

:root {
  /* ── Backgrounds ──────────────────────────────────────── */
  --bg-page:        #f9f8f6;
  --surface:        #ffffff;
  --surface-2:      #f9f8f6;
  --surface-3:      #f7f5f2;
  --surface-hover:  #faf9f7;
  --elevated:       #f7f5f2;
  --bg-sidebar:     #121520;
  --bg-input:       #f9f8f6;

  /* ── Borders ──────────────────────────────────────────── */
  --rule:           #ebe7e0;
  --rule-2:         #f2eee8;
  --border-hover:   #ccc5ba;
  --border-strong:  #b8b0a0;

  /* ── Text (warm undertones) ───────────────────────────── */
  --ink:     #1a1714;
  --ink-70:  #4a4238;
  --ink-50:  #9a9088;
  --ink-40:  #c4beb6;
  --ink-20:  #c4beb6;
  --ink-10:  rgba(30,27,24,0.06);
  --ink-06:  rgba(30,27,24,0.04);

  /* ── Accent — Indigo ─────────────────────────────────── */
  --accent:              #5B6AD0;
  --accent-solid:        #5B6AD0;
  --accent-hover:        #4a59c0;
  --accent-text:         #5B6AD0;
  --accent-bg:           rgba(91,106,208,0.08);
  --accent-border:       rgba(91,106,208,0.15);
  --accent-glow:         rgba(91,106,208,0.08);
  --accent-glow-strong:  rgba(91,106,208,0.20);
  --accent-gradient:     linear-gradient(135deg, #5B6AD0, #7c8aef);

  /* ── Status ───────────────────────────────────────────── */
  --emerald:      #059669;
  --emerald-bg:   rgba(5,150,105,0.06);
  --emerald-rule: rgba(5,150,105,0.15);
  --amber:        #d97706;
  --amber-bg:     rgba(217,119,6,0.06);
  --amber-rule:   rgba(217,119,6,0.15);
  --rose:         #e11d48;
  --rose-bg:      rgba(225,29,72,0.06);
  --rose-rule:    rgba(225,29,72,0.15);
  --blue:         #2563eb;
  --blue-bg:      rgba(37,99,235,0.06);
  --blue-rule:    rgba(37,99,235,0.15);
  --violet:       #7c3aed;
  --violet-bg:    rgba(124,58,237,0.06);
  --violet-rule:  rgba(124,58,237,0.15);

  /* ── Op chip colours — solid, white text ─────────────── */
  --op-create-bg:     #8B5CF6;
  --op-create-text:   #ffffff;
  --op-create-border: #8B5CF6;
  --op-get-bg:        #3B82F6;
  --op-get-text:      #ffffff;
  --op-get-border:    #3B82F6;
  --op-list-bg:       #06B6D4;
  --op-list-text:     #ffffff;
  --op-list-border:   #06B6D4;
  --op-update-bg:     #F97316;
  --op-update-text:   #ffffff;
  --op-update-border: #F97316;
  --op-delete-bg:     #F43F5E;
  --op-delete-text:   #ffffff;
  --op-delete-border: #F43F5E;
  --op-search-bg:     #10B981;
  --op-search-text:   #ffffff;
  --op-search-border: #10B981;
  --op-aggregate-bg:     #0ea5e9;
  --op-aggregate-text:   #ffffff;
  --op-aggregate-border: #0ea5e9;
  /* extended ops */
  --op-merge-bg:       #6366f1;
  --op-merge-text:     #ffffff;
  --op-merge-border:   #6366f1;
  --op-fork-bg:        #a855f7;
  --op-fork-text:      #ffffff;
  --op-fork-border:    #a855f7;
  --op-push-bg:        #0ea5e9;
  --op-push-text:      #ffffff;
  --op-push-border:    #0ea5e9;
  --op-set-bg:         #14b8a6;
  --op-set-text:       #ffffff;
  --op-set-border:     #14b8a6;
  --op-configure-bg:   #f59e0b;
  --op-configure-text: #ffffff;
  --op-configure-border: #f59e0b;
  --op-execute-bg:     #10B981;
  --op-execute-text:   #ffffff;
  --op-execute-border: #10B981;
  --op-propose-bg:     #fb923c;
  --op-propose-text:   #ffffff;
  --op-propose-border: #fb923c;
  --op-analyse-bg:     #F97316;
  --op-analyse-text:   #ffffff;
  --op-analyse-border: #F97316;
  --op-synthesise-bg:  #a855f7;
  --op-synthesise-text: #ffffff;
  --op-synthesise-border: #a855f7;
  --op-summarise-bg:   #ec4899;
  --op-summarise-text: #ffffff;
  --op-summarise-border: #ec4899;

  /* ── Entity / modifier chips ──────────────────────────── */
  --chip-entity-bg:       #f4f0ea;
  --chip-entity-text:     #5a5248;
  --chip-entity-border:   #ebe7e0;
  --chip-modifier-bg:     #eee6ff;
  --chip-modifier-text:   #7c3aed;
  --chip-modifier-border: rgba(124,58,237,0.10);

  /* ── Fonts ────────────────────────────────────────────── */
  --f-display:    'Outfit', 'Sora', sans-serif;
  --f-sans:       'DM Sans', 'Sora', sans-serif;
  --f-mono:       'IBM Plex Mono', 'JetBrains Mono', monospace;
  --font-display: 'Outfit', 'Sora', sans-serif;
  --font-body:    'DM Sans', 'Sora', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   14px;
  --radius-pill: 20px;

  /* ── Blur ─────────────────────────────────────────────── */
  --blur-panel:   12px;
  --blur-sidebar: 10px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:        0 1px 2px rgba(30,27,24,0.04);
  --shadow:           0 2px 8px rgba(30,27,24,0.06);
  --shadow-lg:        0 8px 24px rgba(30,27,24,0.10);
  --shadow-glow:      0 2px 16px rgba(91,106,208,0.20);
  --shadow-glow-hover: 0 4px 24px rgba(91,106,208,0.30);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:    0.15s ease;
  --transition-default: 0.2s ease;

  /* ── Layout ───────────────────────────────────────────── */
  --nav-width:      220px;
  --topbar-height:  54px;
  --rail-w:         200px;
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Sidebar ──────────────────────────────────────────── */
  --rail-bg:          #121520;
  --rail-text:        rgba(255,255,255,0.55);
  --rail-text-active: #c0caff;
  --rail-hover:       rgba(255,255,255,0.04);

  /* ── Design-system semantic names ────────────────────── */
  --bg-surface:         #ffffff;
  --bg-surface-hover:   #faf9f7;
  --bg-elevated:        #f7f5f2;
  --bg-sidebar:         #121520;
  --bg-input:           #f9f8f6;
  --border-subtle:      #f2eee8;
  --border-default:     #ebe7e0;
  --text-primary:       #1a1714;
  --text-muted:         #9a9088;
  --text-faint:         #c4beb6;
  --accent-surface:     rgba(91,106,208,0.08);
  --success-text:       #059669;
  --success-surface:    rgba(5,150,105,0.06);
  --success-border:     rgba(5,150,105,0.15);
  --success-dot:        #059669;
  --success-dot-glow:   rgba(5,150,105,0.3);
  --warning-text:       #d97706;
  --warning-surface:    rgba(217,119,6,0.06);
  --warning-border:     rgba(217,119,6,0.15);
  --error-text:         #e11d48;
  --error-surface:      rgba(225,29,72,0.06);
  --error-border:       rgba(225,29,72,0.15);
  --entity-bg:          #f4f0ea;
  --entity-text:        #5a5248;
  --entity-border:      #ebe7e0;
  --modifier-bg:        #eee6ff;
  --modifier-text:      #7c3aed;
  --modifier-border:    rgba(124,58,237,0.10);

}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f9f8f6;
  color: #4a4238;
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.mono {
  font-family: var(--f-mono);
}

/* ── Status pips ──────────────────────────────────────────── */
.pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.nav-pip {
  width: 7px;
  height: 7px;
}

.npip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

@keyframes ripple-go {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.6); }
  40%  { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}

@keyframes ripple-warn {
  0%   { box-shadow: 0 0 0 0   rgba(251,191,36,0.5); }
  40%  { box-shadow: 0 0 0 5px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0   rgba(251,191,36,0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes barGrow {
  from { transform-origin: left center; transform: scaleX(0); }
  to   { transform-origin: left center; transform: scaleX(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pip-connected,
.npip-go {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.4);
  animation: ripple-go 5s ease infinite;
}

.pip-degraded {
  background: var(--amber);
  animation: ripple-warn 5s ease infinite;
}

.pip-disconnected,
.npip-off {
  background: var(--ink-20);
}

/* ── Shared page header ───────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 4px;
}

.page-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.page-title span {
  color: var(--ink-20);
  font-weight: 300;
}

.page-title-sub,
.page-subtitle {
  font-size: 13px;
  color: var(--ink-50);
  margin-top: 2px;
}

.ph-left  { display: flex; flex-direction: column; }
.ph-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Shared filter buttons ────────────────────────────────── */
.filter-row { display: flex; gap: 4px; }

.fp {
  border: 1px solid transparent;
  background: none;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  font-family: var(--f-sans);
  transition: all 0.15s;
}

.fp:hover {
  color: var(--ink-70);
  background: var(--surface-hover);
}

.fp.on {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(30,27,24,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,27,24,0.20); }

/* ── Button primitives ────────────────────────────────────── */
.btn {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  border-color: var(--border-default);
  color: var(--ink-70);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-text);
  border: none;
}

.btn-ghost:hover {
  color: var(--accent);
}

.btn-danger {
  background: var(--error-surface);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.btn-danger:hover {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.25);
}

/* ── Card / glass panel ───────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid #ebe7e0;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(30,27,24,0.02);
  overflow: hidden;
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--accent-border);
}

/* ── Global input ─────────────────────────────────────────── */
.input {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.input:focus {
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.input::placeholder { color: var(--text-faint); }

.input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Global toggle ─────────────────────────────────────────── */
.toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-default);
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle.on { background: var(--accent-solid); }

.toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle.on::after { transform: translateX(16px); }

/* ── Status tags ───────────────────────────────────────────── */
.tag {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tag-success   { background: var(--success-surface); color: var(--success-text); }
.tag-warning   { background: var(--warning-surface); color: var(--warning-text); }
.tag-error     { background: var(--error-surface);   color: var(--error-text); }
.tag-neutral   { background: var(--bg-elevated);     color: var(--text-muted); }
.tag-connected { background: var(--success-surface); color: var(--success-text); }

.tag-connected::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-dot);
  box-shadow: 0 0 6px var(--success-dot-glow);
  animation: ripple-go 3s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Rise animation ───────────────────────────────────────── */
.rise   { animation: rise 0.25s ease-out both; }
.rise-1 { animation-delay: 0.03s; }
.rise-2 { animation-delay: 0.06s; }

/* ── Gradient text (stat card deltas) ─────────────────────── */
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Ambient orbs — disabled in light mode ─────────────────── */
.ambient-orbs { position: relative; }
.ambient-orbs::before,
.ambient-orbs::after { content: none; }


:root {
  --rail-width: 200px;
  --sidebar-width: 380px;
}
@media (max-width: 1200px) {
  :root { --sidebar-width: 320px; }
}

.app-shell,
.shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: none;
  height: 100vh;
  overflow: hidden;
}

.app-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 32px 40px 60px;
}


.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  z-index: 200;
  padding-right: 20px;
}

@keyframes hb {
  0%, 100% { box-shadow: 0 0 0 2px rgba(5, 150, 105, .2); }
  50% { box-shadow: 0 0 0 4px rgba(5, 150, 105, .12); }
}

.topbar-brand {
  width: var(--nav-width);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  border-right: 1px solid var(--rule);
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 28px;
  height: 28px;
}

.brand-mark span {
  border-radius: 3px;
  background: var(--ink);
}

.brand-mark span:nth-child(2),
.brand-mark span:nth-child(3) {
  opacity: 0.55;
}

.brand-mark span:nth-child(4) {
  opacity: 0.22;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-name span {
  color: var(--ink-40);
}

.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.topbar-center .search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-page);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 7px 12px;
  width: 280px;
  transition: all 0.15s;
}

.topbar-center .search-wrap:focus-within {
  background: var(--surface);
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.topbar-center .search-wrap svg { color: var(--ink-40); flex-shrink: 0; }

.topbar-center .search-wrap input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}

.topbar-center .search-wrap input::placeholder { color: var(--ink-40); }

.search-kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-40);
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.tb-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: default;
  transition: border-color 0.15s;
}

.tb-chip-stat {
  min-width: 108px;
  justify-content: flex-start;
}

.tb-chip:hover { border-color: var(--accent-solid); }
.tb-chip-user {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pip-stop { background: var(--rose); }

.tb-chip-policy {
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid var(--rule);
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-go { background: var(--emerald); }
.dot-warn { background: var(--amber); }
.dot-rose { background: var(--rose); }

.tb-chip-policy strong {
  color: var(--ink);
  font-weight: 700;
}

.tb-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-40);
  transition: all 0.13s;
  position: relative;
}

.tb-icon-btn:hover { color: var(--ink-70); border-color: var(--accent-solid); background: var(--bg-page); }

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
  border: 1.5px solid var(--surface);
}

.tb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-2);
  background: var(--accent-gradient);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.tb-logout-btn {
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  font-size: 12px;
  font-weight: 500;
  padding: 0 11px;
  cursor: pointer;
  transition: all .13s;
}

.tb-logout-btn:hover {
  border-color: var(--accent-solid);
  color: var(--ink);
  background: var(--bg-page);
}

.tb-logout-btn:disabled {
  opacity: .65;
  cursor: default;
}

@media (max-width: 1024px) {
  .topbar-brand {
    width: auto;
    border-right: 0;
  }
}


/* ══════ SIDEBAR NAV ══════ */
.rail {
  width: 200px;
  background: #121520;
  display: flex;
  flex-direction: column;
  padding: 22px 12px 20px;
  gap: 0;
  z-index: 10;
  overflow: hidden;
}

/* ── Brand ── */
.rail-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px 28px;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
}

.rail-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rail-logo-name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

/* ── Section labels ── */
.rail-section-label {
  padding: 16px 8px 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.15);
  pointer-events: none;
}

/* ── Nav items ── */
.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}

.rail-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.12s;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  font-family: var(--f-sans);
  white-space: nowrap;
}

.rail-item:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.04);
}

.rail-item.active {
  background: rgba(91,106,208,0.12);
  color: #c0caff;
  box-shadow: 0 0 12px rgba(91,106,208,0.08);
  border-color: rgba(91,106,208,0.10);
}

/* Badge */
.rail-badge {
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  background: rgba(91,106,208,0.25);
  color: #c0caff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.rail-item.active .rail-badge {
  background: rgba(91,106,208,0.3);
  color: #c0caff;
}

/* Divider */
.rail-divider {
  width: calc(100% - 16px);
  margin: 6px 8px;
  height: 1px;
  background: rgba(255,255,255,0.04);
}

/* Bottom section */
.rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 12px;
  width: 100%;
}

.rail-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(91,106,208,0.10);
  color: rgba(255,255,255,0.4);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-family: var(--f-sans);
  flex-shrink: 0;
  margin: 4px 12px;
}

/* User row */
.rail-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
}

.rail-user-name {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-family: var(--f-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── User menu popover ── */
.nav-popover {
  position: fixed;
  z-index: 9999;
  background: #1e2235;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  padding: 0;
  overflow: hidden;
  transform: translateY(-50%);
}

.nav-popover-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  text-align: left;
  transition: background 0.12s;
  line-height: 1;
}

.nav-popover-row:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}

.nav-popover-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}

.nav-popover-row-danger,
.nav-popover-row-danger svg {
  color: #fb7185;
}

.nav-popover-row-danger:hover {
  background: rgba(251,113,133,0.08);
  color: #fb7185;
}


.login-page {
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ── Left brand panel ── */
.login-brand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: #1a1d23;
  position: relative;
  overflow: hidden;
}

.login-brand-panel::before {
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.login-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.login-grid-lines {
  position: absolute; inset: 0;
  opacity: 0.04; pointer-events: none; z-index: 0;
}
.login-grid-lines svg { width: 100%; height: 100%; }

.login-brand-logo {
  display: flex; align-items: center; gap: 12px; z-index: 1;
}

.login-brand-name {
  font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.02em;
}

.login-brand-message {
  z-index: 1; max-width: 400px;
}

.login-brand-message h1 {
  font-size: 40px; font-weight: 600; color: #fff;
  line-height: 1.15; letter-spacing: -0.03em;
  margin: 0;
}

.login-brand-message h1 em {
  font-style: normal; font-weight: 300; font-size: 28px;
  display: block; margin-top: 12px;
  background: linear-gradient(90deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-brand-footer {
  z-index: 1; font-size: 12px; color: #9ca0b0; line-height: 1.5;
}

/* ── Right form panel ── */
.login-form-panel {
  width: 480px; min-height: 100vh;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  animation: lp-slide-in 0.6s cubic-bezier(0.16,1,0.3,1);
}

@keyframes lp-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.login-form-inner { width: 100%; max-width: 340px; }

.login-head { margin-bottom: 36px; }

.login-title {
  font-size: 26px; font-weight: 600; color: #111218;
  letter-spacing: -0.03em; margin-bottom: 8px;
}

.login-sub {
  font-size: 14px; color: #6b7084; line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 13px; font-weight: 500; color: #111218;
}

.login-hint {
  font-size: 12px; color: #9ca0b0;
}

.login-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  color: #111218;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  font-family: inherit;
}

.login-input::placeholder { color: #9ca0b0; }

.login-input:focus {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.login-error {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
}

.login-submit {
  width: 100%; padding: 13px; margin-top: 10px;
  font-size: 15px; font-weight: 600;
  color: #fff; background: #10b981; border: none; border-radius: 10px;
  cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  font-family: inherit;
  position: relative; overflow: hidden;
}

.login-submit::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.2s;
}

.login-submit:hover {
  background: #059669; transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}

.login-submit:hover::before { opacity: 1; }

.login-submit:active {
  transform: translateY(0); box-shadow: none;
}

.login-submit:disabled {
  opacity: 0.65; cursor: default; transform: none; box-shadow: none;
}

@media (max-width: 900px) {
  .login-page { flex-direction: column; }
  .login-brand-panel { padding: 28px; min-height: auto; }
  .login-brand-message, .login-brand-footer { display: none; }
  .login-form-panel { width: 100%; flex: 1; border-radius: 24px 24px 0 0; }
}


.setp-page {
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.setp-brand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: #1a1d23;
  position: relative;
  overflow: hidden;
}

.setp-brand-panel::before {
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.setp-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.setp-grid-lines {
  position: absolute; inset: 0;
  opacity: 0.04; pointer-events: none; z-index: 0;
}
.setp-grid-lines svg { width: 100%; height: 100%; }

.setp-brand-logo {
  display: flex; align-items: center; gap: 12px; z-index: 1;
}

.setp-brand-name {
  font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.02em;
}

.setp-brand-message {
  z-index: 1; max-width: 400px;
}

.setp-brand-message h1 {
  font-size: 40px; font-weight: 600; color: #fff;
  line-height: 1.15; letter-spacing: -0.03em;
  margin: 0;
}

.setp-brand-message h1 em {
  font-style: normal; font-weight: 300; font-size: 28px;
  display: block; margin-top: 12px;
  background: linear-gradient(90deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.setp-brand-footer {
  z-index: 1; font-size: 12px; color: #9ca0b0; line-height: 1.5;
}

.setp-form-panel {
  width: 480px; min-height: 100vh;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  animation: lp-slide-in 0.6s cubic-bezier(0.16,1,0.3,1);
}

.setp-form-inner { width: 100%; max-width: 340px; }

.setp-head { margin-bottom: 32px; }

.setp-title {
  font-size: 26px; font-weight: 600; color: #111218;
  letter-spacing: -0.03em; margin-bottom: 8px;
}

.setp-sub {
  font-size: 14px; color: #6b7084; line-height: 1.5;
}

.setp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setp-label {
  font-size: 13px; font-weight: 500; color: #111218;
}

.setp-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  color: #111218;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  font-family: inherit;
}

.setp-input::placeholder { color: #9ca0b0; }

.setp-input:focus {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.setp-checklist {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
}

.setp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #9ca0b0;
  transition: color 0.15s;
}

.setp-check.ok {
  color: #10b981;
}

.setp-check-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.setp-error {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
}

.setp-submit {
  width: 100%; padding: 13px; margin-top: 4px;
  font-size: 15px; font-weight: 600;
  color: #fff; background: #10b981; border: none; border-radius: 10px;
  cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  font-family: inherit;
}

.setp-submit:hover:not(:disabled) {
  background: #059669; transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}

.setp-submit:active:not(:disabled) {
  transform: translateY(0); box-shadow: none;
}

.setp-submit:disabled {
  opacity: 0.45; cursor: default;
}

@media (max-width: 900px) {
  .setp-page { flex-direction: column; }
  .setp-brand-panel { padding: 28px; min-height: auto; }
  .setp-brand-message, .setp-brand-footer { display: none; }
  .setp-form-panel { width: 100%; flex: 1; border-radius: 24px 24px 0 0; }
}


/* ── Dashboard ─────────────────────────────────────────────── */

.dash-page {
  --dp-gap: 20px;

  padding: 0;
  font-family: var(--f-sans);
  color: var(--ink);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────── */
.dp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
  flex-wrap: wrap;
}
.dp-head-left h1 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
  color: var(--ink);
}
.dp-head-left p {
  font-size: 13px;
  color: var(--ink-70);
  margin: 0;
}
.dp-head-ctas { display: flex; gap: 10px; }

.dp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--accent-border);
  background: var(--surface);
  color: var(--accent-text);
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.dp-btn:hover { background: var(--accent-bg); }
.dp-btn.primary {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.dp-btn.primary:hover { filter: brightness(1.05); }

/* ── KPI strip ─────────────────────────────────────────────── */
.dp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--dp-gap);
  margin-bottom: var(--dp-gap);
}
.dp-kpi {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.dp-kpi-val {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}
.dp-kpi-label { font-size: 11.5px; color: var(--ink-40); margin-top: 6px; }
.dp-kpi-delta {
  font-size: 10.5px;
  margin-top: 6px;
  font-weight: 500;
}
.dp-kpi-delta.good { color: var(--emerald); }
.dp-kpi-delta.flat { color: var(--ink-40); }
.dp-kpi-delta.bad  { color: var(--rose); }

.dp-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  animation: ripple-go 5s ease infinite;
}

/* ── 12-col grid ───────────────────────────────────────────── */
.dp-g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--dp-gap);
  align-items: start;
}
.dp-row { margin-bottom: var(--dp-gap); }
.dp-s4  { grid-column: span 4; }
.dp-s8  { grid-column: span 8; }

/* ── Cards ─────────────────────────────────────────────────── */
.dp-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.dp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.dp-card-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dp-card-link {
  font-size: 11.5px;
  color: var(--accent-text);
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.dp-card-link:hover { text-decoration: underline; }

/* ── Hero chart ─────────────────────────────────────────────── */
.dp-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
}
.dp-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 8px;
}
.dp-hero-val {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1;
  color: var(--ink);
}
.dp-hero-delta {
  font-size: 12.5px;
  color: var(--emerald);
  margin-top: 6px;
  font-weight: 500;
}
.dp-hero-chart {
  height: 160px;
  margin-top: 12px;
}
.dp-hero-chart svg { width: 100%; height: 100%; display: block; }
.dp-chart-empty {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  margin-top: 12px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-md);
}

/* ── Needs attention ────────────────────────────────────────── */
.dp-issue {
  display: grid;
  grid-template-columns: 26px 1fr 16px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.dp-issue:last-child { border-bottom: 0; padding-bottom: 0; }
.dp-issue:first-child { padding-top: 0; }
.dp-issue:hover {
  background: var(--surface-hover);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-sm);
  border-bottom-color: transparent;
}
.dp-issue-sev {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.dp-issue-sev.err  { background: var(--rose-bg);   color: var(--rose); }
.dp-issue-sev.warn { background: var(--amber-bg);  color: var(--amber); }
.dp-issue-title { font-size: 12.5px; line-height: 1.4; }
.dp-issue-meta  { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-40); margin-top: 2px; }
.dp-issue-chev  { font-size: 14px; color: var(--ink-40); }
.dp-all-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
  gap: 8px;
}
.dp-all-clear-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
}
.dp-all-clear-text { font-size: 12px; color: var(--ink-40); }

/* ── Activity feed ──────────────────────────────────────────── */
.dp-act {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.dp-act:last-child { border-bottom: 0; padding-bottom: 0; }
.dp-act:first-child { padding-top: 0; }
.dp-act-ic {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.dp-act-ic.query  { background: var(--accent-bg);   color: var(--accent-text); }
.dp-act-ic.failed { background: var(--rose-bg);     color: var(--rose); }
.dp-act-ic.system { background: var(--violet-bg);   color: var(--violet); }
.dp-act-body { min-width: 0; overflow: hidden; }
.dp-act-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-act-meta {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  flex-wrap: wrap;
}
.dp-act-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 10px;
  white-space: nowrap;
}
.dp-act-badge.done   { background: var(--emerald-bg); color: var(--emerald); }
.dp-act-badge.failed { background: var(--rose-bg);    color: var(--rose); }
.dp-act-time {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  white-space: nowrap;
  padding-top: 2px;
}
.dp-act-empty {
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-40);
  font-family: var(--f-mono);
}

/* ── Right rail ─────────────────────────────────────────────── */
.dp-rail-col {
  display: flex;
  flex-direction: column;
  gap: var(--dp-gap);
  grid-column: span 4;
}
.dp-side-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.dp-side-row:last-child  { border-bottom: 0; padding-bottom: 0; }
.dp-side-row:first-child { padding-top: 0; }
.dp-side-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dp-side-dot.ok   { background: var(--emerald); animation: ripple-go 5s ease infinite; }
.dp-side-dot.warn { background: var(--amber); }
.dp-side-dot.off  { background: var(--ink-40); }
.dp-side-name { font-size: 12.5px; font-weight: 600; flex: 1; }
.dp-side-sub  { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-40); }
.dp-side-right { display: flex; align-items: center; gap: 8px; }
.dp-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.dp-badge.live     { background: var(--emerald-bg);  color: var(--emerald); }
.dp-badge.degraded { background: var(--amber-bg);    color: var(--amber); }
.dp-badge.offline  { background: var(--ink-06);      color: var(--ink-40); }
.dp-badge.deployed { background: var(--accent-bg);   color: var(--accent-text); }
.dp-badge.draft    { background: var(--ink-06);      color: var(--ink-70); }

/* Agents in rail */
.dp-ag-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--ink-06);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-70);
  flex-shrink: 0;
}
.dp-ag-body { flex: 1; min-width: 0; }
.dp-ag-name { font-size: 12.5px; font-weight: 600; }
.dp-ag-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-40); margin-top: 1px; }
.dp-ag-sessions { font-family: var(--f-mono); font-size: 11px; color: var(--ink-70); font-weight: 600; }

/* Quick actions */
.dp-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-qa-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.dp-qa-btn:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.dp-qa-ic { font-size: 14px; color: var(--ink-40); line-height: 1; }

/* ── Page entry animation ───────────────────────────────────── */
.dash-page { opacity: 0; }
.dash-page.ready { animation: rise 0.25s ease-out both; }

/* ── Error banner ───────────────────────────────────────────── */
.dp-error {
  background: var(--rose-bg);
  border: 1px solid rgba(244,63,94,0.2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--rose);
}
.dp-error-retry {
  margin-left: auto;
  background: var(--rose);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}


/* ── Reset browser defaults within the page ──────────────── */
.agents-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.agents-page {
  min-height: 100%;
  font-family: var(--f-sans);
  color: var(--ink);
}

.ag-page-inner {
  max-width: none;
}

/* ── Page header ──────────────────────────────────────────── */
.ag-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ag-page-header-left {
  flex: 1;
  min-width: 0;
}

.ag-page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

.ag-page-subtitle {
  font-size: 13px;
  color: var(--ink-70);
}

.ag-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.ag-btn {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius, 8px);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ag-btn-primary {
  background: var(--accent);
  color: #fff;
}

.ag-btn-primary:hover {
  background: var(--accent-hover);
}

.ag-btn-outline {
  background: transparent;
  color: var(--accent-text);
  border: 1.5px solid var(--accent-border);
}

.ag-btn-outline:hover {
  background: var(--accent-bg);
}

.ag-btn-ghost {
  background: var(--surface);
  color: var(--ink-70);
  border: 1px solid var(--rule-2);
}

.ag-btn-ghost:hover {
  border-color: var(--ink-40);
  color: var(--ink);
}

.ag-btn-danger {
  background: transparent;
  color: var(--rose);
  border: 1px solid var(--rule-2);
}

.ag-btn-danger:hover {
  background: var(--rose-bg);
  border-color: var(--rose);
}

.ag-btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-40);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.ag-btn-icon:hover {
  background: var(--surface-2);
  color: var(--ink-70);
  border-color: var(--rule-2);
}

/* ── Metrics strip ────────────────────────────────────────── */
.ag-metrics-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.ag-metric-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 8px);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.ag-metric-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 6px;
}

.ag-metric-value-muted {
  color: var(--ink-40);
}

.ag-metric-label {
  font-size: 11px;
  color: var(--ink-40);
  font-weight: 500;
}

/* ── Load error ───────────────────────────────────────────── */
.ag-load-error {
  padding: 12px 14px;
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--rose);
  margin-bottom: 20px;
}

/* ── Section ──────────────────────────────────────────────── */
.ag-section {
  margin-bottom: 36px;
}

.ag-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ag-section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  flex-shrink: 0;
}

.ag-section-meta {
  font-size: 12px;
  color: var(--ink-40);
  font-weight: 400;
  flex-shrink: 0;
}

.ag-section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Filter bar ───────────────────────────────────────────── */
.ag-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ag-search-input {
  width: 240px;
  height: 32px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius, 8px);
  font-family: var(--f-sans);
  font-size: 12.5px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") 10px center no-repeat;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ag-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border);
}

.ag-search-input::placeholder {
  color: var(--ink-40);
}

.ag-filter-select {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius, 8px);
  font-family: var(--f-sans);
  font-size: 12.5px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") right 10px center no-repeat;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

/* ── Loading / empty ──────────────────────────────────────── */
.ag-loading {
  padding: 48px 0;
  font-size: 13px;
  color: var(--ink-40);
  text-align: center;
}

.ag-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-40);
  font-size: 13px;
}

/* ── Agent list ───────────────────────────────────────────── */
.ag-agent-list {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Agent row ────────────────────────────────────────────── */
.ag-agent-row {
  border-bottom: 1px solid var(--rule);
  transition: background 0.12s;
}

.ag-agent-row:last-child {
  border-bottom: none;
}

.ag-agent-row.expanded {
  background: var(--surface-2);
}

.ag-agent-row-head {
  display: grid;
  grid-template-columns: 16px 1.4fr 1fr auto auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.ag-agent-row-head:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ag-agent-row.expanded .ag-agent-row-head {
  background: transparent;
}

/* ── Status dot ───────────────────────────────────────────── */
.ag-agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

.ag-agent-status-dot.draft {
  background: var(--ink-40);
}

.ag-agent-status-dot.error {
  background: var(--rose);
}

.ag-agent-status-dot.idle {
  background: var(--ink-20);
}

/* ── Name cell ────────────────────────────────────────────── */
.ag-agent-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ag-agent-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-agent-name-meta {
  font-size: 10.5px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Draft pill ───────────────────────────────────────────── */
.ag-draft-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1.5px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-40);
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── Model cell ───────────────────────────────────────────── */
.ag-agent-model-cell {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tools chip ───────────────────────────────────────────── */
.ag-agent-tools-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-70);
  font-family: var(--f-mono);
  padding: 3px 9px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  white-space: nowrap;
}

/* ── Runs / last used ─────────────────────────────────────── */
.ag-agent-runs {
  font-size: 11px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  white-space: nowrap;
  text-align: right;
  min-width: 80px;
}

.ag-agent-last-used {
  font-size: 11px;
  color: var(--ink-40);
  white-space: nowrap;
  text-align: right;
  min-width: 100px;
}

/* ── Row actions ──────────────────────────────────────────── */
.ag-agent-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ── Expand chevron ───────────────────────────────────────── */
.ag-expand-chevron {
  transition: transform 0.15s, color 0.15s;
}

.ag-agent-row.expanded .ag-expand-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

/* ── Row body (expanded) ──────────────────────────────────── */
.ag-agent-row-body {
  padding: 4px 18px 20px 48px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

/* ── Detail grid ──────────────────────────────────────────── */
.ag-agent-detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

/* ── Detail left column ───────────────────────────────────── */
.ag-detail-left-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Detail card ──────────────────────────────────────────── */
.ag-detail-card {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius, 8px);
  padding: 14px 16px;
}

.ag-detail-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-40);
  margin-bottom: 8px;
}

.ag-detail-description {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.5;
}

/* ── Connected servers ────────────────────────────────────── */
.ag-connected-servers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ag-server-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-70);
}

.ag-server-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

.ag-recent-runs-empty {
  font-size: 11.5px;
  color: var(--ink-40);
  font-style: italic;
}

.ag-run-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ag-run-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.ag-run-row:hover { background: var(--surface-2); }

.ag-run-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ag-run-dot.ok   { background: var(--emerald); }
.ag-run-dot.err  { background: var(--rose); }
.ag-run-dot.warn { background: var(--amber); }

.ag-run-query {
  font-size: 12px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-run-time {
  font-size: 11px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  flex-shrink: 0;
}

/* ── Detail actions ───────────────────────────────────────── */
.ag-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ── Delete modal (keep existing class names) ─────────────── */
.agents-delete-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.agents-delete-modal {
  width: min(460px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(14, 14, 16, 0.18);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agents-delete-modal-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rose);
}

.agents-delete-modal-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-70);
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 10px;
  padding: 10px 12px;
}

.agents-delete-agent-name {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.agents-delete-modal-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.agents-delete-btn {
  height: 34px;
  border-radius: 8px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
}

.agents-delete-btn.ghost:hover {
  border-color: var(--accent-solid);
  background: var(--surface-2);
  color: var(--ink);
}

.agents-delete-btn.danger {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

.agents-delete-btn.danger:hover {
  filter: brightness(0.94);
}

.agents-delete-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Scrollbar ────────────────────────────────────────────── */
.agents-page::-webkit-scrollbar { width: 5px; }
.agents-page::-webkit-scrollbar-track { background: transparent; }
.agents-page::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
.agents-page::-webkit-scrollbar-thumb:hover { background: var(--ink-40); }


.agents-page .agent-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  cursor: default;
  transition: all .18s var(--ease);
  display: flex;
  flex-direction: column;
}

.agents-page .agent-card:hover { border-color: var(--rule-2); box-shadow: 0 8px 32px rgba(14,14,16,.08), 0 2px 8px rgba(14,14,16,.04); transform: translateY(-2px); }
.agents-page .agent-card.draft { opacity: 0.62; }

.agents-page .card-strip { height: 2.5px; }
.agents-page .strip-live  { background: var(--emerald); }
.agents-page .strip-error { background: var(--rose); }
.agents-page .strip-idle  { background: var(--ink-10); }
.agents-page .strip-draft { background: repeating-linear-gradient(90deg, var(--ink-10) 0px, var(--ink-10) 6px, transparent 6px, transparent 10px); }

.agents-page .card-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.agents-page .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agents-page .card-top-left { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }

.agents-page .card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ink-06);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-40);
}

.agents-page .card-identity { flex: 1; min-width: 0; }
.agents-page .card-name { font-size: 14px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agents-page .card-desc { font-size: 11.5px; color: var(--ink-40); line-height: 1.5; }

.agents-page .card-badge { font-size: 10px; font-weight: 600; font-family: var(--f-mono); padding: 3px 8px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.agents-page .badge-live  { background: var(--emerald-bg); color: var(--emerald); }
.agents-page .badge-error { background: var(--rose-bg); color: var(--rose); }
.agents-page .badge-idle  { background: var(--ink-06); color: var(--ink-40); }
.agents-page .badge-draft { background: var(--amber-bg); color: var(--amber); border: 1px dashed rgba(217,119,6,.3); }

.agents-page .card-meta { display: flex; flex-direction: column; gap: 6px; }
.agents-page .meta-line { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-40); }
.agents-page .meta-line .mv { color: var(--ink-70); font-weight: 500; margin-left: 3px; }
.agents-page .meta-line .mv-bad { color: var(--rose); }
.agents-page .meta-line .mm { font-size: 11px; }

.agents-page .tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.agents-page .tag { font-size: 10.5px; font-family: var(--f-mono); padding: 2px 7px; border-radius: 4px; background: var(--ink-06); color: var(--ink-70); border: 1px solid var(--rule); }
.agents-page .tag-rag { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-rule); }
.agents-page .tag-bad { color: var(--rose); border-color: var(--rose-rule); background: var(--rose-bg); }

.agents-page .card-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }
.agents-page .cs { background: var(--surface); padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.agents-page .cs-val { font-size: 15px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.agents-page .cs-key { font-size: 10px; color: var(--ink-40); }
.agents-page .cs-val.good { color: var(--emerald); }
.agents-page .cs-val.warn { color: var(--amber); }
.agents-page .cs-val.bad  { color: var(--rose); }
.agents-page .cs-val.muted { color: var(--ink-20); }

.agents-page .card-actions { display: flex; gap: 6px; padding: 11px 14px; border-top: 1px solid var(--rule); background: var(--surface-2); }
.agents-page .ca-btn {
  flex: 1;
  height: 30px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
}
.agents-page .ca-btn.icon { flex: 0 0 30px; width: 30px; min-width: 30px; padding: 0; justify-content: center; }
.agents-page .ca-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.agents-page .ca-btn.run,
.agents-page .ca-btn.deploy { background: var(--accent-gradient); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--shadow-glow); }
.agents-page .ca-btn.delete { color: var(--rose); border-color: var(--rose-rule); background: var(--rose-bg); }
.agents-page .ca-btn.delete:hover { border-color: var(--rose); background: var(--rose-bg); }

.agents-page .card-new {
  background: var(--surface);
  border: 1.5px dashed var(--rule-2);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 24px;
  min-height: 240px;
  color: var(--ink-40);
  font-family: var(--f-sans);
  text-align: center;
  width: 100%;
}

.agents-page .card-new-icon { width: 40px; height: 40px; border-radius: 10px; border: 1.5px dashed var(--rule-2); display: flex; align-items: center; justify-content: center; }
.agents-page .card-new-label { font-size: 13.5px; font-weight: 600; }
.agents-page .card-new-sub { font-size: 11.5px; color: var(--ink-20); text-align: center; }

.agents-page .agent-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agents-page .agent-row:hover { border-color: var(--rule-2); box-shadow: 0 4px 16px rgba(14,14,16,.07); }
.agents-page .agent-row.draft { opacity: 0.62; }

.agents-page .row-main { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 20px; }
.agents-page .row-strip { width: 3px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.agents-page .rs-live  { background: var(--emerald); }
.agents-page .rs-error { background: var(--rose); }
.agents-page .rs-idle  { background: var(--ink-10); }
.agents-page .rs-draft { background: repeating-linear-gradient(180deg,var(--ink-10) 0,var(--ink-10) 4px,transparent 4px,transparent 7px); }

.agents-page .row-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--ink-06); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--ink-40); }
.agents-page .row-identity { min-width: 0; flex: 0 0 200px; }
.agents-page .row-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agents-page .row-desc { font-size: 11.5px; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agents-page .row-model { flex: 0 0 160px; display: flex; flex-direction: column; gap: 3px; }
.agents-page .row-model-val { font-size: 11.5px; font-weight: 500; color: var(--ink-70); }
.agents-page .row-model-key { font-size: 10.5px; color: var(--ink-40); }

.agents-page .row-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.agents-page .row-stats { display: flex; gap: 20px; flex-shrink: 0; }
.agents-page .row-stat { text-align: right; }
.agents-page .rs-val { font-size: 13.5px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.agents-page .rs-key { font-size: 10px; color: var(--ink-40); }
.agents-page .rs-val.good { color: var(--emerald); }
.agents-page .rs-val.warn { color: var(--amber); }
.agents-page .rs-val.bad  { color: var(--rose); }
.agents-page .rs-val.muted { color: var(--ink-20); }

.agents-page .row-badge-col { flex-shrink: 0; }
.agents-page .row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.agents-page .ra-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
}

.agents-page .ra-btn.run,
.agents-page .ra-btn.deploy { background: var(--ink); color: #fff; border-color: var(--ink); }

.agents-page .row-new {
  background: var(--surface);
  border: 1.5px dashed var(--rule-2);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  color: var(--ink-40);
}

.agents-page .row-new-label { font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .agents-page .row-model,
  .agents-page .row-tags,
  .agents-page .row-stats { display: none; }
}

/* Scope agent list row styles to Agents page to avoid cross-page class collisions. */
.agents-page .agent-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agents-page .agent-row:hover { border-color: var(--rule-2); box-shadow: 0 4px 16px rgba(14,14,16,.07); }
.agents-page .agent-row.draft { opacity: 0.62; }
.agents-page .row-main { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 20px; }
.agents-page .row-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--ink-06); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--ink-40); transition: all .15s; }
.agents-page .agent-row:hover .row-icon { background: var(--ink-10); color: var(--ink-70); }
.agents-page .row-identity { min-width: 0; flex: 0 0 200px; }
.agents-page .row-model { flex: 0 0 160px; display: flex; flex-direction: column; gap: 3px; }
.agents-page .row-model-val { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-70); }
.agents-page .row-model-key { font-size: 10.5px; color: var(--ink-40); font-family: var(--f-mono); }
.agents-page .row-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.agents-page .row-stats { display: flex; gap: 20px; flex-shrink: 0; }
.agents-page .row-stat { text-align: right; }
.agents-page .rs-val { font-family: var(--f-mono); }
.agents-page .rs-key { font-family: var(--f-mono); }
.agents-page .row-badge-col { flex-shrink: 0; }
.agents-page .row-actions { display: flex; gap: 6px; flex-shrink: 0; }

.agents-page .ra-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-sans);
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  transition: all .12s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.agents-page .ra-btn:hover { background: var(--bg-page); border-color: var(--accent-solid); color: var(--ink); }
.agents-page .ra-btn.run,
.agents-page .ra-btn.deploy { background: var(--accent-gradient); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--shadow-glow); }
.agents-page .ra-btn.run:hover,
.agents-page .ra-btn.deploy:hover { filter: brightness(1.05); }

.agents-page .tag { font-family: var(--f-mono); font-size: 10.5px; }
.agents-page .tag-rag { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-rule); }
.agents-page .tag-bad { color: var(--rose); border-color: var(--rose-rule); background: var(--rose-bg); }

/* Fully namespaced list view styles (no cross-page collisions). */
.agents-page .agents-list-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: default;
  transition: all .15s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agents-page .agents-list-row:hover { border-color: var(--rule-2); box-shadow: 0 4px 16px rgba(14,14,16,.07); }
.agents-page .agents-list-row.draft { opacity: 0.62; }

.agents-page .agents-list-main { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 20px; }
.agents-page .agents-list-strip { width: 3px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.agents-page .als-live  { background: var(--emerald); }
.agents-page .als-error { background: var(--rose); }
.agents-page .als-idle  { background: var(--ink-10); }
.agents-page .als-draft { background: repeating-linear-gradient(180deg,var(--ink-10) 0,var(--ink-10) 4px,transparent 4px,transparent 7px); }

.agents-page .agents-list-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--ink-06);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  transition: all .15s;
  flex-shrink: 0;
}

.agents-page .agents-list-row:hover .agents-list-icon { background: var(--ink-10); color: var(--ink-70); }
.agents-page .agents-list-identity { min-width: 0; flex: 0 0 200px; }
.agents-page .agents-list-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agents-page .agents-list-desc { font-size: 11.5px; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agents-page .agents-list-model { flex: 0 0 160px; display: flex; flex-direction: column; gap: 3px; }
.agents-page .agents-list-model-val { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-70); }
.agents-page .agents-list-model-key { font-size: 10.5px; color: var(--ink-40); font-family: var(--f-mono); }

.agents-page .agents-list-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.agents-page .agents-list-tags .tag { font-size: 10.5px; font-family: var(--f-mono); padding: 2px 7px; border-radius: 4px; background: var(--ink-06); color: var(--ink-70); border: 1px solid var(--rule); }
.agents-page .agents-list-tags .tag-rag { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-rule); }
.agents-page .agents-list-tags .tag-bad { color: var(--rose); border-color: var(--rose-rule); background: var(--rose-bg); }

.agents-page .agents-list-stats { display: flex; gap: 20px; flex-shrink: 0; }
.agents-page .agents-list-stat { text-align: right; }
.agents-page .agents-list-val { font-size: 13.5px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-family: var(--f-mono); }
.agents-page .agents-list-key { font-size: 10px; color: var(--ink-40); font-family: var(--f-mono); }
.agents-page .agents-list-val.good { color: var(--emerald); }
.agents-page .agents-list-val.warn { color: var(--amber); }
.agents-page .agents-list-val.bad  { color: var(--rose); }
.agents-page .agents-list-val.muted { color: var(--ink-20); }

.agents-page .agents-list-badge-col { flex-shrink: 0; }
.agents-page .agents-list-actions { display: flex; gap: 6px; flex-shrink: 0; }

.agents-page .agents-list-btn {
  height: 30px;
  min-width: 88px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-sans);
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  transition: all .12s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.agents-page .agents-list-btn.icon { min-width: 30px; width: 30px; padding: 0; }
.agents-page .agents-list-btn:disabled { opacity: .45; cursor: not-allowed; }

.agents-page .agents-list-btn:hover { background: var(--bg-page); border-color: var(--accent-solid); color: var(--ink); }
.agents-page .agents-list-btn.run,
.agents-page .agents-list-btn.deploy { background: var(--accent-gradient); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--shadow-glow); }
.agents-page .agents-list-btn.run:hover,
.agents-page .agents-list-btn.deploy:hover { filter: brightness(1.05); }
.agents-page .agents-list-btn.delete { color: var(--rose); border-color: var(--rose-rule); background: var(--rose-bg); }
.agents-page .agents-list-btn.delete:hover { border-color: var(--rose); background: var(--rose-bg); color: var(--rose); }

.agents-page .agents-list-new {
  background: var(--surface);
  border: 1.5px dashed var(--rule-2);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  color: var(--ink-40);
  font-family: var(--f-sans);
  width: 100%;
}

.agents-page .agents-list-new-label { font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .agents-page .agents-list-model,
  .agents-page .agents-list-tags,
  .agents-page .agents-list-stats { display: none; }
}


/* ── Sessions List Page ─────────────────────────────────────────────── */

.sl-page {
  opacity: 0;
}
.sl-page.ready {
  animation: rise 0.25s ease-out both;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.sl-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.sl-header-row .page-title {
  margin: 0 0 2px;
}

.sl-header-row .page-subtitle {
  margin: 0;
}


/* ── Stat cards ──────────────────────────────────────────────────────── */
.sl-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.sl-stat-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

.sl-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.sl-stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.sl-stat-value.sl-stat-emerald {
  color: var(--emerald);
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.sl-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sl-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  min-width: 180px;
}

.sl-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-20);
  pointer-events: none;
}

.sl-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  font-size: 13px;
  font-family: var(--f-sans);
  color: var(--ink);
  outline: none;
  transition: border-color 0.13s var(--ease), box-shadow 0.13s var(--ease);
}

.sl-search-input::placeholder {
  color: var(--ink-20);
}

.sl-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border);
}

/* ── Segmented control ────────────────────────────────────────────────── */
.sl-seg {
  display: inline-grid;
  grid-template-columns: repeat(var(--seg-count, 4), 1fr);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 2px;
  overflow: hidden;
  height: 34px;
  gap: 0;
  flex-shrink: 0;
}

.sl-seg-track {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--seg-count, 4));
  background: var(--accent);
  border-radius: 6px;
  transform: translateX(calc(var(--seg-index, 0) * 100%));
  transition: transform 0.22s var(--ease);
  pointer-events: none;
}

.sl-seg-opt {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-40);
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.14s var(--ease);
  white-space: nowrap;
}

.sl-seg-opt.active {
  color: #fff;
}

.sl-seg-opt:focus-visible {
  outline: none;
}

/* ── Sessions table ───────────────────────────────────────────────────── */
.sl-table {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sl-thead {
  display: grid;
  grid-template-columns: 140px 1fr 110px 110px 60px 80px 90px;
  gap: 0;
  padding: 0 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.sl-th {
  padding: 9px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}

.sl-trow {
  display: grid;
  grid-template-columns: 140px 1fr 110px 110px 60px 80px 90px;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--rule-2);
  align-items: center;
  transition: background 0.1s var(--ease);
}

.sl-trow:last-child {
  border-bottom: none;
}

.sl-trow-clickable {
  cursor: pointer;
}

.sl-trow-clickable:hover {
  background: var(--surface-2);
}

.sl-td {
  padding: 13px 8px;
  font-size: 12.5px;
  color: var(--ink-70);
}

.sl-td-id {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-40);
}

.sl-td-agent {
  min-width: 0;
}

.sl-agent-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sl-agent-query {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}

.sl-td-num {
  font-size: 12px;
  color: var(--ink-40);
}

/* ── Status pill ─────────────────────────────────────────────────────── */
.sl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--f-sans);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid;
  white-space: nowrap;
}

.sl-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sl-status-success {
  background: var(--emerald-bg);
  color: var(--emerald);
  border-color: var(--emerald-rule);
}
.sl-status-success::before { background: var(--emerald); }

.sl-status-partial {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--yellow-border);
}
.sl-status-partial::before { background: var(--amber); }

.sl-status-error {
  background: var(--rose-bg);
  color: var(--rose);
  border-color: var(--rose-rule);
}
.sl-status-error::before { background: var(--rose); }

/* ── Source chip ─────────────────────────────────────────────────────── */
.sl-src-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid;
  white-space: nowrap;
}

.sl-src-prod {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

.sl-src-sbx {
  background: var(--surface-2);
  color: var(--ink-40);
  border-color: var(--rule-2);
}

.sl-src-mixed {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-rule);
}


/* ── Session Detail Page ─────────────────────────────────────────────── */

.sd-page {
  animation: fadeUp 0.3s var(--ease) both;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ── Back button ─────────────────────────────────────────────────────── */
.sd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--f-sans);
  color: var(--ink-40);
  cursor: pointer;
  margin-bottom: 18px;
  background: none;
  border: none;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.12s var(--ease);
}

.sd-back-btn:hover {
  color: var(--ink-70);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.sd-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.sd-header-row .page-eyebrow {
  margin: 0 0 4px;
}

.sd-header-row .page-title {
  margin: 0 0 4px;
}

.sd-meta-line {
  font-size: 12.5px;
  color: var(--ink-40);
  margin-top: 4px;
  font-style: italic;
  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stat cards ──────────────────────────────────────────────────────── */
.sd-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.sd-stat-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

.sd-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.sd-stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

/* Sources dot legend */
.sd-sources-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}

.sd-sources-dots span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.sd-src-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.sd-src-emerald { background: var(--emerald); }
.sd-src-blue    { background: var(--blue); }
.sd-src-amber   { background: var(--amber); }

/* ── Run cards ───────────────────────────────────────────────────────── */
.sd-run-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.13s var(--ease);
}

.sd-run-card.sd-run-open {
  border-color: var(--rule-2);
}

.sd-run-head {
  display: grid;
  grid-template-columns: 32px 1fr auto 20px;
  gap: 14px;
  padding: 14px 18px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s var(--ease);
}

.sd-run-head:hover {
  background: var(--surface-2);
}

.sd-run-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--f-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sd-run-info {
  min-width: 0;
}

.sd-run-q {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-run-meta {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 3px;
}

.sd-run-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-40);
  flex-shrink: 0;
}

.sd-run-time-err {
  color: var(--rose);
}

.sd-run-chev {
  width: 18px;
  height: 18px;
  color: var(--ink-20);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease);
}

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

.sd-run-body {
  border-top: 1px solid var(--rule-2);
}

/* Override pt-plan-view for run body — tighten padding, disable inner scroll */
.sd-run-body .pt-plan-view {
  padding: 20px 24px;
  min-height: 0;
  overflow-y: visible;
}

/* ── Error step dots — rose variant for both step systems ───────────── */
/* .step.src-err: .steps/.step system (PromptTester.css has det/emb/llm) */
.step.src-err::before {
  background: var(--rose);
  box-shadow: 0 0 0 1px var(--rose-rule);
}
/* .tl-step.err: .tl/.tl-step system used by session detail (PromptTester.css has det/emb/llm) */
.tl-step.err::before {
  background: var(--rose);
  box-shadow: 0 0 0 1px var(--rose-rule);
}

/* ── Chip op variants for non-create operations ──────────────────────── */
/* .chip-op-create/.chip-op-list etc. are in PromptTester.css (lines 1325-1333).
   No additions needed here — this comment keeps the section explicit. */

/* ── Collapsed / error note blocks ──────────────────────────────────────*/
.sd-collapsed-note {
  margin-left: 24px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px dashed var(--rule-2);
  border-radius: 5px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-40);
}

.sd-error-summary {
  margin-left: 24px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 5px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--rose);
  line-height: 1.55;
}

/* ── Loading / error bars ────────────────────────────────────────────── */
.sd-loading,
.sl-loading {
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-40);
}

.sd-error-bar,
.sl-error-bar {
  padding: 12px 16px;
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 8px;
  font-size: 13px;
  color: var(--rose);
  margin-bottom: 16px;
}

.sd-empty,
.sl-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-40);
}


.trace-detail-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height));
}

.trace-detail-page .trace-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.trace-detail-page .th-query {
  font-size: 17px !important;
  font-style: italic;
  margin-bottom: 6px;
  margin-top: 4px;
}

.trace-detail-page .th-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-40);
}

.trace-detail-page .th-meta strong {
  color: var(--ink-70);
  font-weight: 500;
}

.trace-detail-page .th-sep {
  color: var(--rule-2);
}

.trace-detail-page .page-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  padding: 0 28px;
  background: var(--surface);
  flex-shrink: 0;
}

.trace-detail-page .ptab {
  padding: 11px 0;
  margin-right: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .13s;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
}

.trace-detail-page .ptab:hover {
  color: var(--ink-70);
}

.trace-detail-page .ptab.on {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.trace-detail-page .ptab-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ink-06);
  color: var(--ink-40);
}

.trace-detail-page .tab-view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.trace-detail-page .tab-view.show {
  display: flex;
}

.trace-detail-page .trace-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  overflow: hidden;
  padding: 16px 28px 24px;
  gap: 14px;
  min-height: 0;
}


@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.trace-detail-page .pipeline {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 0 28px;
}

.trace-detail-page .pipeline::-webkit-scrollbar {
  width: 4px;
}

.trace-detail-page .pipeline::-webkit-scrollbar-thumb {
  background: var(--rule-2);
}

.trace-detail-page .step {
  display: flex;
  align-items: stretch;
  position: relative;
  animation: stepIn .4s var(--ease) both;
}

.trace-detail-page .step:nth-child(1) {
  animation-delay: .06s;
}

.trace-detail-page .step:nth-child(2) {
  animation-delay: .12s;
}

.trace-detail-page .step:nth-child(3) {
  animation-delay: .18s;
}

.trace-detail-page .step:nth-child(4) {
  animation-delay: .24s;
}

.trace-detail-page .step:nth-child(5) {
  animation-delay: .30s;
}

.trace-detail-page .step-num-col {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 0;
  position: relative;
}

.trace-detail-page .step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-40);
  flex-shrink: 0;
  z-index: 1;
}

.trace-detail-page .step-line {
  position: absolute;
  left: 50%;
  top: 42px;
  bottom: 0;
  width: 1.5px;
  background: var(--rule);
  transform: translateX(-50%);
}

.trace-detail-page .step:last-child .step-line {
  display: none;
}

.trace-detail-page .step-content {
  flex: 1;
  padding: 14px 24px 16px 4px;
}

.trace-detail-page .step-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 4px;
}

.trace-detail-page .step-desc {
  font-size: 12.5px;
  color: var(--ink-40);
  line-height: 1.55;
  margin-bottom: 10px;
}

.trace-detail-page .step-desc code,
.trace-detail-page .step-tool-code {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-70);
  background: var(--ink-06);
  padding: 1px 5px;
  border-radius: 3px;
}

.trace-detail-page .step-tool-code {
  font-size: 13px;
  color: var(--ink);
}

.trace-detail-page .step-desc strong {
  color: var(--ink-70);
  font-weight: 600;
}

.trace-detail-page .step-desc-last {
  margin-bottom: 12px;
}

.trace-detail-page .candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.trace-detail-page .candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  transition: all .15s;
}

.trace-detail-page .candidate.winner {
  background: var(--emerald-bg);
  border-color: var(--emerald-rule);
}

.trace-detail-page .cand-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  min-width: 130px;
  flex-shrink: 0;
}

.trace-detail-page .candidate.winner .cand-name {
  color: var(--emerald);
}

.trace-detail-page .cand-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(14, 14, 16, .08);
  border-radius: 3px;
  overflow: hidden;
}

.trace-detail-page .cand-bar-fill {
  height: 100%;
  border-radius: 3px;
  animation: barGrow .7s var(--ease) .4s both;
  transform-origin: left center;
}

.trace-detail-page .fill-win {
  background: var(--emerald);
}

.trace-detail-page .fill-mid {
  background: var(--amber);
}

.trace-detail-page .fill-low {
  background: var(--ink-20);
}

.trace-detail-page .tdp-w91 {
  width: 91%;
}

.trace-detail-page .tdp-w63 {
  width: 63%;
}

.trace-detail-page .tdp-w29 {
  width: 29%;
}

.trace-detail-page .tdp-w22 {
  width: 22%;
}

.trace-detail-page .cand-score {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.trace-detail-page .candidate.winner .cand-score {
  color: var(--emerald);
}

.trace-detail-page .cand-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--emerald);
  color: #fff;
}

.trace-detail-page .cand-margin {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-40);
}

.trace-detail-page .cand-margin strong {
  color: var(--emerald);
  font-weight: 600;
}

.trace-detail-page .contract-checks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.trace-detail-page .ck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}

.trace-detail-page .cc-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trace-detail-page .cc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.trace-detail-page .cc-dot-pass {
  background: var(--emerald);
}

.trace-detail-page .cc-dot-warn {
  background: var(--amber);
}

.trace-detail-page .cc-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
}

.trace-detail-page .cc-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trace-detail-page .cc-detail {
  font-size: 11.5px;
  color: var(--ink-40);
}

.trace-detail-page .cc-result {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}

.trace-detail-page .ccr-pass {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.trace-detail-page .ccr-warn {
  background: var(--amber-bg);
  color: var(--amber);
}

.trace-detail-page .executed-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-rule);
}

.trace-detail-page .exec-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trace-detail-page .exec-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--emerald);
  margin-bottom: 2px;
}

.trace-detail-page .exec-meta {
  font-size: 12px;
  color: var(--emerald);
  opacity: .7;
}

.trace-detail-page .exec-success {
  margin-left: auto;
  font-size: 11px;
  color: var(--emerald);
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--emerald-rule);
}


.trace-detail-page .summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: fadeUp .5s var(--ease) .1s both;
}

.trace-detail-page .summary::-webkit-scrollbar {
  width: 3px;
}

.trace-detail-page .summary::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border-radius: 2px;
}

.trace-detail-page .sum-hero {
  padding: 20px 20px 18px;
  border-bottom: none;
  background: var(--surface);
}

.trace-detail-page .sum-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.trace-detail-page .sum-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.trace-detail-page .sum-hero-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--emerald-bg);
  color: var(--emerald);
  border: 1px solid var(--emerald-rule);
}

.trace-detail-page .sum-score-display {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 4px;
}

.trace-detail-page .sum-score-big {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--emerald);
  line-height: 1;
}

.trace-detail-page .sum-score-tool {
  font-size: 13px;
  color: var(--ink-40);
  margin-bottom: 8px;
  padding-bottom: 2px;
}

.trace-detail-page .conf-bar-wrap {
  margin-top: 6px;
}

.trace-detail-page .conf-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.trace-detail-page .conf-bar-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.trace-detail-page .conf-bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
}

.trace-detail-page .conf-bar-track {
  height: 5px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.trace-detail-page .conf-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--emerald);
  animation: barGrow .9s var(--ease) .3s both;
  transform-origin: left center;
}

.trace-detail-page .sum-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--rule);
}

.trace-detail-page .sum-stat {
  background: var(--surface);
  padding: 13px 16px;
}

.trace-detail-page .sum-stat:first-child {
  border-right: 1px solid var(--rule);
}

.trace-detail-page .sum-stat-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}

.trace-detail-page .sum-stat-val.blue {
  color: var(--blue);
}

.trace-detail-page .sum-stat-val.pos {
  color: var(--emerald);
}

.trace-detail-page .sum-stat-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.trace-detail-page .sum-stat-sub {
  font-size: 10.5px;
  color: var(--ink-20);
  margin-top: 1px;
}

.trace-detail-page .sum-sec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 14px 20px 10px;
}

.trace-detail-page .sum-sec-label-result {
  padding: 0 0 12px;
}

.trace-detail-page .score-dist {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.trace-detail-page .sd-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trace-detail-page .sd-rank {
  font-size: 10px;
  color: var(--ink-20);
  width: 14px;
  flex-shrink: 0;
  text-align: right;
}

.trace-detail-page .sd-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  min-width: 95px;
  flex-shrink: 0;
}

.trace-detail-page .sd-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-06);
  overflow: hidden;
}

.trace-detail-page .sd-fill {
  height: 100%;
  border-radius: 3px;
  animation: barGrow .8s var(--ease) .5s both;
  transform-origin: left center;
}

.trace-detail-page .sd-fill-1 {
  background: var(--emerald);
}

.trace-detail-page .sd-fill-2 {
  background: var(--amber);
}

.trace-detail-page .sd-fill-3,
.trace-detail-page .sd-fill-4,
.trace-detail-page .sd-fill-5 {
  background: var(--ink-20);
}

.trace-detail-page .tds-w91 {
  width: 91%;
}

.trace-detail-page .tds-w63 {
  width: 63%;
}

.trace-detail-page .tds-w29 {
  width: 29%;
}

.trace-detail-page .tds-w22 {
  width: 22%;
}

.trace-detail-page .tds-w11 {
  width: 11%;
}

.trace-detail-page .sd-score {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

.trace-detail-page .sd-row.winner .sd-name {
  color: var(--emerald);
  font-weight: 600;
}

.trace-detail-page .sd-row.winner .sd-score {
  color: var(--emerald);
}

.trace-detail-page .margin-callout {
  margin: 0 20px 16px;
  padding: 10px 14px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-rule);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trace-detail-page .mc-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.trace-detail-page .mc-desc {
  font-size: 11.5px;
  color: var(--emerald);
  line-height: 1.4;
  opacity: .8;
}

.trace-detail-page .result-section {
  border-top: 1px solid var(--rule);
  padding: 14px 20px 18px;
}

.trace-detail-page .rs-tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.trace-detail-page .rs-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trace-detail-page .rs-tool-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.trace-detail-page .rs-tool-sub {
  font-size: 11px;
  color: var(--ink-40);
}

.trace-detail-page .rs-conditions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.trace-detail-page .rsc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}

.trace-detail-page .rsc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

.trace-detail-page .rsc-label {
  font-size: 12px;
  color: var(--ink-70);
  flex: 1;
}

.trace-detail-page .rsc-pass {
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald);
}

.trace-detail-page .lat-section {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
}

.trace-detail-page .lat-bar-row {
  display: flex;
  height: 28px;
}

.trace-detail-page .lat-seg-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  transition: opacity .15s;
  cursor: default;
}

.trace-detail-page .lat-seg-bar:hover {
  opacity: .85;
}

.trace-detail-page .lsb-embed {
  background: #6366f1;
}

.trace-detail-page .lsb-score {
  background: #0891b2;
}

.trace-detail-page .lsb-contract {
  background: #d97706;
}

.trace-detail-page .lsb-exec {
  background: #059669;
}

.trace-detail-page .tds-lw18 {
  width: 18%;
}

.trace-detail-page .tds-lw28 {
  width: 28%;
}

.trace-detail-page .tds-lw9 {
  width: 9%;
}

.trace-detail-page .tds-lw45 {
  width: 45%;
}

.trace-detail-page .lat-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--rule);
}

.trace-detail-page .lat-leg-item {
  background: var(--surface-2);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trace-detail-page .lat-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.trace-detail-page .lat-dot-embed {
  background: #6366f1;
}

.trace-detail-page .lat-dot-score {
  background: #0891b2;
}

.trace-detail-page .lat-dot-contract {
  background: #d97706;
}

.trace-detail-page .lat-dot-exec {
  background: #059669;
}

.trace-detail-page .lat-leg-key {
  font-size: 10.5px;
  color: var(--ink-40);
  flex: 1;
}

.trace-detail-page .lat-leg-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-70);
}


.trace-detail-page .chains-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trace-detail-page .chains-body::-webkit-scrollbar {
  width: 4px;
}

.trace-detail-page .chains-body::-webkit-scrollbar-thumb {
  background: var(--rule-2);
}

.trace-detail-page .chains-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  flex-shrink: 0;
}

.trace-detail-page .csm-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.trace-detail-page .csm-val {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.trace-detail-page .csm-label {
  font-size: 11.5px;
  color: var(--ink-40);
}

.trace-detail-page .csm-div {
  width: 1px;
  height: 24px;
  background: var(--rule);
}

.trace-detail-page .csm-end {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-40);
}

.trace-detail-page .csm-end-value {
  color: var(--ink);
}

.trace-detail-page .chain-card {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  overflow: hidden;
  animation: fadeUp .35s var(--ease) both;
  box-shadow: 0 1px 4px rgba(14, 14, 16, .07);
}

.trace-detail-page .chain-card:nth-child(2) {
  animation-delay: .05s;
}

.trace-detail-page .chain-card:nth-child(3) {
  animation-delay: .10s;
}

.trace-detail-page .chain-card:nth-child(4) {
  animation-delay: .15s;
}

.trace-detail-page .ck-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.trace-detail-page .cc-seq {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.trace-detail-page .cc-tool {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  background: var(--ink-06);
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.trace-detail-page .cc-arrow {
  color: var(--ink-20);
  font-size: 10px;
  flex-shrink: 0;
}

.trace-detail-page .cc-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.trace-detail-page .cc-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trace-detail-page .cc-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.trace-detail-page .cc-stat-val.good {
  color: var(--emerald);
}

.trace-detail-page .cc-stat-val.warn {
  color: var(--amber);
}

.trace-detail-page .cc-stat-label {
  font-size: 9.5px;
  color: var(--ink-40);
}

.trace-detail-page .cc-divider {
  width: 1px;
  height: 26px;
  background: var(--rule);
  flex-shrink: 0;
}

.trace-detail-page .cc-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.trace-detail-page .cc-btn {
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--f-sans);
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .12s;
  white-space: nowrap;
}

.trace-detail-page .cc-btn:hover {
  background: var(--bg-page);
  border-color: var(--accent-solid);
  color: var(--ink);
}

.trace-detail-page .cc-btn.prime {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.trace-detail-page .cc-btn.prime:hover {
  background: #1c1c22;
}

.trace-detail-page .cc-btn:disabled,
.trace-detail-page .cc-btn[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.trace-detail-page .ck-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 9px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.trace-detail-page .ck-flow-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.trace-detail-page .cf-art {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--emerald-bg);
  color: var(--emerald);
  white-space: nowrap;
}

.trace-detail-page .cf-arrow {
  color: var(--ink-20);
  font-size: 9px;
}

.trace-detail-page .ck-agents {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}

.trace-detail-page .ck-agent-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  color: var(--ink-70);
}

.trace-detail-page .promoted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--violet-bg);
  color: var(--violet);
  border: 1px solid var(--violet-rule);
  flex-shrink: 0;
}

.trace-detail-page .cc-warn {
  font-size: 11px;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ── Override parent shell when this page is active ──────── */
#app-main:has(.agent-config-page) {
  padding: 0 !important;
  border: none !important;
  display: block;
}

/* ── Reset browser defaults within the page ──────────────── */
.agent-config-page,
.agent-config-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── AgentConfig page ─────────────────────────────────────── */
.agent-config-page {
  padding: 32px 40px 120px;
  min-height: 100%;
  font-family: var(--f-sans);
  color: var(--ink);
}

.ac-main-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* ── Skeleton loading state ───────────────────────────────── */

/* ── Loading state ────────────────────────────────────────── */
.ac-loading {
  padding: 48px 0;
  font-size: 13px;
  color: var(--ink-40);
  text-align: center;
}

.ac-load-error {
  padding: 12px 14px;
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--rose);
  margin-bottom: 20px;
}

/* ── Page header ──────────────────────────────────────────── */
.ac-page-header {
  margin-bottom: 36px;
}

.ac-page-header-left {
  flex: 1;
  min-width: 0;
}

.ac-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-40);
  text-decoration: none;
  margin-bottom: 10px;
  font-family: var(--f-sans);
  transition: color 0.15s;
}

.ac-back-link:hover { color: var(--accent); }

.ac-page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

.ac-page-subtitle {
  font-size: 13px;
  color: var(--ink-70);
  line-height: 1.4;
}

.ac-page-subtitle strong {
  color: var(--ink);
  font-weight: 600;
}

.ac-page-subtitle-id {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-40);
}

.ac-last-edited {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-40);
}

.ac-last-edited-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-40);
  flex-shrink: 0;
}

/* ── Numbered sections ────────────────────────────────────── */
.ac-section {
  margin-bottom: 32px;
}

.ac-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ac-section-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ac-section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.ac-section-meta {
  font-size: 12px;
  color: var(--ink-40);
  font-weight: 400;
}

.ac-section-body {
  padding-left: 38px;
}

/* ── Form fields ──────────────────────────────────────────── */
.ac-field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ac-field:last-child { margin-bottom: 0; }

.ac-field-no-margin {
  margin-bottom: 0;
}

.ac-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-70);
}

.ac-field-hint {
  font-size: 11px;
  color: var(--ink-40);
  font-weight: 400;
  margin-left: 6px;
}

.ac-field-counter {
  font-size: 10.5px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  text-align: right;
}

.ac-text-input,
.ac-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 13px;
  background: var(--bg-input);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.ac-text-input:focus,
.ac-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border);
}

.ac-text-input::placeholder,
.ac-textarea::placeholder {
  color: var(--ink-20);
}

.ac-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.ac-textarea-large {
  min-height: 140px;
  font-family: var(--f-mono);
  font-size: 12px;
}

/* ── Model card fade-in ───────────────────────────────────── */
@keyframes ac-model-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Model picker ─────────────────────────────────────────── */
.ac-model-warning {
  font-size: 11.5px;
  color: var(--amber);
  font-family: var(--f-mono);
  margin-bottom: 10px;
}

.ac-model-loading {
  font-size: 11.5px;
  color: var(--ink-40);
  font-family: var(--f-mono);
  margin-bottom: 10px;
}

.ac-model-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ac-model-card {
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  font-family: var(--f-sans);
  animation: ac-model-fade-in 0.3s var(--ease, cubic-bezier(0.16,1,0.3,1)) both;
}

.ac-model-card:hover {
  border-color: var(--ink-40);
}

.ac-model-card.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.ac-model-card.selected::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center no-repeat;
}

.ac-model-name {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.ac-model-card.selected .ac-model-name {
  color: var(--accent);
}

.ac-model-desc {
  font-size: 11px;
  color: var(--ink-70);
  line-height: 1.4;
  flex: 1;
}

.ac-model-pill {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--ink);
  color: #fff;
  margin-top: 8px;
  align-self: flex-start;
}

.ac-model-card.selected .ac-model-pill {
  background: var(--accent);
}

/* ── Server cards ─────────────────────────────────────────── */
.ac-servers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ac-servers-empty {
  font-size: 12.5px;
  color: var(--ink-40);
  font-style: italic;
  padding: 16px 0;
}

.ac-server-card {
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.ac-server-card.checked {
  border-color: var(--accent);
}

.ac-server-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.ac-server-card-head:hover {
  background: rgba(0, 0, 0, 0.015);
}

.ac-server-card.expanded .ac-server-card-head {
  border-bottom: 1px solid var(--rule);
  background: rgba(0, 0, 0, 0.012);
}

.ac-server-card.checked .ac-server-card-head {
  background: var(--accent-bg);
}

.ac-server-card.checked.expanded .ac-server-card-head {
  background: var(--accent-bg);
  border-bottom-color: var(--accent-border);
}

/* Server checkbox */
.ac-server-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-20);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.ac-server-card.checked .ac-server-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.ac-server-card.checked .ac-server-checkbox::after {
  content: '';
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center no-repeat;
}

/* Server info */
.ac-server-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ac-server-card-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-server-card-name {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ac-server-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1.5px 7px;
  border-radius: 3px;
}

.ac-server-status-go {
  background: var(--emerald-bg);
  color: var(--emerald);
  border: 1px solid var(--emerald-rule);
}

.ac-server-status-warn {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-rule);
}

.ac-server-status-down {
  background: var(--surface-2);
  color: var(--ink-40);
  border: 1px solid var(--rule);
}

.ac-server-card-meta {
  font-size: 11px;
  color: var(--ink-40);
  font-family: var(--f-mono);
}

.ac-server-tool-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-70);
  white-space: nowrap;
  margin-right: 4px;
}

.ac-server-card.checked .ac-server-tool-count {
  color: var(--accent);
  font-weight: 600;
}

.ac-server-card-chevron {
  width: 16px;
  height: 16px;
  color: var(--ink-40);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.ac-server-card.expanded .ac-server-card-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

/* Server card body (expanded tools) */
.ac-server-card-body {
  padding: 8px 0 12px;
}

.ac-server-card.checked .ac-server-card-body {
  background: var(--surface);
}

.ac-server-empty {
  padding: 14px 18px 8px;
  font-size: 11.5px;
  color: var(--ink-40);
  font-style: italic;
}

/* Tool rows */
.ac-tool-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 38px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.ac-tool-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

.ac-tool-checkbox {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--ink-20);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  transition: background 0.12s, border-color 0.12s;
}

.ac-tool-row.checked .ac-tool-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.ac-tool-row.checked .ac-tool-checkbox::after {
  content: '';
  width: 9px;
  height: 9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center no-repeat;
}

.ac-tool-name {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink);
}

.ac-tool-desc {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.ac-server-card-body-actions {
  display: flex;
  gap: 12px;
  padding: 10px 16px 4px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}

.ac-btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.12s;
}

.ac-btn-link:hover {
  text-decoration: underline;
}

/* ── Advanced section ─────────────────────────────────────── */
.ac-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-70);
  font-weight: 500;
  padding: 4px 0;
  transition: color 0.12s;
  user-select: none;
}

.ac-advanced-toggle:hover {
  color: var(--ink);
}

.ac-advanced-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.ac-advanced-open .ac-advanced-chevron {
  transform: rotate(90deg);
}

.ac-advanced-body {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
}

.ac-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ── Sticky footer ────────────────────────────────────────── */
.ac-sticky-footer {
  position: fixed;
  bottom: 0;
  left: var(--rail-width, 180px);
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
  z-index: 50;
}

.ac-sticky-footer-left {
  margin-right: auto;
  font-size: 12px;
  color: var(--ink-40);
}

.ac-unsaved-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--amber);
  font-weight: 500;
}

.ac-unsaved-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

.ac-save-msg {
  font-size: 12px;
  color: var(--emerald);
  font-weight: 500;
}

.ac-save-msg-error {
  color: var(--rose);
}

/* ── Buttons ──────────────────────────────────────────────── */
.ac-btn {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ac-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ac-btn-primary {
  background: var(--accent);
  color: #fff;
}

.ac-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.ac-btn-ghost {
  background: var(--surface);
  color: var(--ink-70);
  border: 1px solid var(--rule-2);
}

.ac-btn-ghost:hover:not(:disabled) {
  border-color: var(--ink-40);
  color: var(--ink);
}


.agent-config-page .plan-mode-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.agent-config-page .plan-card {
  border: 1.5px solid var(--rule-2);
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: all .13s var(--ease);
  background: var(--surface-2);
  position: relative;
  text-align: left;
}

.agent-config-page .plan-card:hover {
  background: var(--surface);
  border-color: var(--accent-solid);
}

.agent-config-page .plan-card.sel {
  border-color: var(--ink);
  background: var(--surface);
}

.agent-config-page .plan-card.sel::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.agent-config-page .plan-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink-06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.agent-config-page .plan-card.sel .plan-card-icon {
  background: rgba(14, 14, 16, .08);
}

.agent-config-page .plan-card-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 3px;
}

.agent-config-page .plan-card-desc {
  font-size: 10.5px;
  color: var(--ink-40);
  line-height: 1.4;
}

.agent-config-page .plan-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-config-page .plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--surface);
}

.agent-config-page .plan-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-config-page .plan-row-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.agent-config-page .plan-row-hint {
  font-size: 11px;
  color: var(--ink-40);
  font-family: var(--f-mono);
}

.agent-config-page .plan-seg {
  display: flex;
  gap: 4px;
}

.agent-config-page .plan-seg-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--f-sans);
  color: var(--ink-40);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .12s;
  background: transparent;
}

.agent-config-page .plan-seg-btn:hover {
  color: var(--ink-70);
  background: var(--ink-06);
}

.agent-config-page .plan-seg-btn.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.agent-config-page .art-tag {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
}

.agent-config-page .art-tag.produces {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.agent-config-page .art-tag.requires {
  background: var(--blue-bg);
  color: var(--blue);
}


.agent-config-page .plan-goals-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-config-page .field-row-tight {
  margin-bottom: 0;
}

.agent-config-page .plan-goal-item {
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}

.agent-config-page .pgi-header {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.agent-config-page .pgi-header:hover {
  background: var(--ink-06);
}

.agent-config-page .pgi-chevron {
  width: 14px;
  height: 14px;
  color: var(--ink-40);
  transition: transform .15s;
  flex-shrink: 0;
}

.agent-config-page .pgi-header.open .pgi-chevron {
  transform: rotate(90deg);
}

.agent-config-page .pgi-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  letter-spacing: -0.01em;
}

.agent-config-page .pgi-artifacts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.agent-config-page .pgi-body {
  padding: 0 12px 12px;
  display: none;
}

.agent-config-page .pgi-body.show {
  display: block;
}

.agent-config-page .pgi-body-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.agent-config-page .pgi-body-label {
  font-size: 11px;
  color: var(--ink-40);
  width: 80px;
  flex-shrink: 0;
}

.agent-config-page .pgi-terminals {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.agent-config-page .pgi-chain-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.agent-config-page .pgi-chain-caption {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 4px;
  margin-bottom: 2px;
}

.agent-config-page .pgi-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-70);
  flex-wrap: wrap;
}

.agent-config-page .pgi-chain-arrow {
  color: var(--ink-20);
}

.agent-config-page .pgi-chain-meta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--emerald);
}

.agent-config-page .plan-add-goal {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1.5px dashed var(--rule-2);
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink-40);
  font-size: 12.5px;
  transition: all .13s;
  background: none;
}

.agent-config-page .plan-add-goal:hover {
  border-color: var(--accent-solid);
  color: var(--ink-70);
  background: var(--surface);
}


.agent-config-page .plan-chains-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-config-page .chain-pattern-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--surface);
}

.agent-config-page .cpr-seq {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  flex-wrap: wrap;
}

.agent-config-page .cpr-tool {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-70);
  background: var(--ink-06);
  padding: 2px 7px;
  border-radius: 5px;
}

.agent-config-page .cpr-arrow {
  color: var(--ink-20);
  font-size: 10px;
}

.agent-config-page .cpr-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.agent-config-page .cpr-stat {
  font-size: 10.5px;
  color: var(--ink-40);
}

.agent-config-page .cpr-stat.good {
  color: var(--emerald);
}

.agent-config-page .enf-sel {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
}


.infrastructure-page {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-family: var(--f-sans);
}

.infrastructure-page .filter-row {
  overflow-x: auto;
}

.infrastructure-page .add-server-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
}

.pdr-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
}

.pdr-tab {
  font-size: 13px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--ink-40);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdr-tab:hover {
  color: var(--ink);
}

.pdr-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.pdr-tab-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--amber-bg, #FAEEDA);
  color: var(--amber-ink, #633806);
  font-weight: 500;
}

.pdr-panel {
  display: none;
}

.pdr-panel.show {
  display: block;
}

.pdr-op-group {
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 8px;
}

.pdr-op-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f7f5f2;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.pdr-op-header:hover {
  background: var(--surface-3, var(--surface-2));
  filter: brightness(0.97);
}

.pdr-op-meta {
  font-size: 12px;
  color: var(--ink-40);
  flex: 1;
}

.pdr-op-chevron {
  font-size: 11px;
  color: var(--ink-30, var(--ink-40));
}

.pdr-tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 24px;
  border-top: 1px solid var(--rule);
}

.pdr-tool-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule-2);
  flex-shrink: 0;
}

.pdr-entity-tag {
  font-size: 12px;
  color: var(--ink-40);
  min-width: 110px;
  flex-shrink: 0;
}

.pdr-tool-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.pdr-summary-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pdr-toggle-label {
  font-size: 11px;
  color: var(--ink-30, var(--ink-40));
}

.pdr-toggle {
  position: relative;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.pdr-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pdr-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--rule-2);
  transition: background .15s;
}

.pdr-toggle input:checked + .pdr-toggle-track {
  background: var(--emerald);
}

.pdr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: left .15s;
  pointer-events: none;
}

.pdr-toggle input:checked ~ .pdr-toggle-thumb {
  left: 14px;
}

/* ── Infrastructure page layout ──────────────────────────── */
.infrastructure-page {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-family: var(--f-sans);
}

.infrastructure-page .infra-error {
  background: var(--rose-bg);
  border: 1px solid var(--rose);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--rose);
  margin-bottom: 16px;
}

.infrastructure-page .infra-loading {
  padding: 3rem;
  text-align: center;
  font-size: 13px;
  color: var(--ink-50);
}

/* ── Server list table ───────────────────────────────────── */
.infrastructure-page .server-list-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-sans);
}

.infrastructure-page .server-list-table thead th {
  text-align: left;
  padding: 12px 20px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-50);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-page);
  white-space: nowrap;
}

.infrastructure-page .server-list-table thead th:nth-child(n+2),
.infrastructure-page .server-list-table tbody td:nth-child(n+2) {
  text-align: center;
}

.infrastructure-page .server-list-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

.infrastructure-page .server-list-table tbody tr:hover {
  background: rgba(0,0,0,0.012);
}

.infrastructure-page .server-list-table tbody td {
  padding: 16px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}

.infrastructure-page .server-list-table tbody tr:last-child td {
  border-bottom: none;
}

.infrastructure-page .server-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.infrastructure-page .server-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-page);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-70);
  flex-shrink: 0;
}

.infrastructure-page .server-name-text {
  font-weight: 600;
  color: var(--ink);
}

.infrastructure-page .server-url {
  font-size: 11px;
  color: var(--ink-50);
  font-family: var(--f-mono);
  margin-top: 1px;
}

.infrastructure-page .status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.infrastructure-page .status-badge .sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.infrastructure-page .status-badge.connected {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.infrastructure-page .status-badge.connected .sdot {
  background: var(--emerald);
}

.infrastructure-page .status-badge.degraded {
  background: var(--amber-bg);
  color: var(--amber);
}

.infrastructure-page .status-badge.degraded .sdot {
  background: var(--amber);
}

.infrastructure-page .status-badge.disconnected {
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .status-badge.disconnected .sdot {
  background: var(--ink-50);
}

.infrastructure-page .config-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--ink-50);
}

.infrastructure-page .config-badge.live {
  background: var(--emerald-bg);
  color: var(--emerald);
  animation: config-badge-in 0.35s ease both;
}

.infrastructure-page .config-badge.draft {
  background: var(--amber-bg);
  color: var(--amber);
  animation: config-badge-in 0.35s ease both;
}

@keyframes config-badge-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.infrastructure-page .tool-count {
  font-size: 12px;
  color: var(--ink-70);
}

.infrastructure-page .uptime-val {
  font-size: 12px;
  color: var(--emerald);
  font-weight: 600;
}

.infrastructure-page .last-activity {
  font-size: 12px;
  color: var(--ink-50);
}

.infrastructure-page .server-list-empty {
  text-align: center;
  padding: 48px 20px;
  font-size: 13px;
  color: var(--ink-50);
}


/* ══════════════════════════════════════
   ServerDetail — mockup redesign
   ══════════════════════════════════════ */

.infrastructure-page .server-detail,
.infrastructure-page .pipeline-page {
  display: flex;
  flex-direction: column;
}

/* ── Back link ── */
.infrastructure-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  line-height: 1;
  font-size: 12px;
  color: #b0a89e;
  cursor: pointer;
  margin-bottom: 16px;
  font-weight: 500;
  border: none;
  background: none;
  font-family: var(--f-sans);
  white-space: nowrap;
  padding: 0;
}

.infrastructure-page .back-link:hover { color: #5B6AD0; }

.infrastructure-page .back-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Detail header ── */
.infrastructure-page .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.infrastructure-page .detail-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.infrastructure-page .detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-page);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-70);
  flex-shrink: 0;
}

.infrastructure-page .detail-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.infrastructure-page .detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-50);
  margin-top: 2px;
}

.infrastructure-page .detail-meta .sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

.infrastructure-page .detail-actions {
  display: flex;
  gap: 6px;
}

/* Overflow button */
.infrastructure-page .detail-actions .btn-danger {
  border: 1px solid var(--rose);
}

.infrastructure-page .overflow-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-50);
  transition: all 0.15s;
}

.infrastructure-page .overflow-btn:hover {
  border-color: var(--ink-50);
  color: var(--ink-70);
}

/* ── Reconnect feedback ── */
.infrastructure-page .reconnect-toast {
  padding: 9px 14px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--emerald);
  margin-bottom: 12px;
}

.infrastructure-page .reconnect-error {
  padding: 9px 14px;
  background: var(--rose-bg);
  border: 1px solid var(--rose);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--rose);
  margin-bottom: 12px;
}

/* ── Health strip ── */
.infrastructure-page .health-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.infrastructure-page .health-item {
  background: var(--surface);
  padding: 14px 18px;
}

.infrastructure-page .health-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.infrastructure-page .health-value.health-warn { color: var(--rose); }

.infrastructure-page .health-label {
  font-size: 10px;
  color: var(--ink-50);
  font-weight: 500;
  margin-top: 2px;
}

/* ── Pipeline banner ── */
.infrastructure-page .draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.infrastructure-page .draft-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.infrastructure-page .draft-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infrastructure-page .draft-banner-icon.approved {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.infrastructure-page .draft-banner-icon.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.infrastructure-page .draft-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.infrastructure-page .draft-banner-sub {
  font-size: 11px;
  color: var(--ink-50);
  margin-top: 1px;
}

.infrastructure-page .draft-banner-icon.empty {
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .draft-banner-icon.audit {
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .draft-banner-error {
  font-size: 11px;
  color: var(--rose);
  flex: 1;
  padding: 0 12px;
}

/* ── Tabs ── */
.infrastructure-page .detail-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.infrastructure-page .detail-tab {
  padding: 9px 16px 11px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  font-family: var(--f-sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.infrastructure-page .detail-tab:hover { color: var(--ink-70); }

.infrastructure-page .detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.infrastructure-page .error-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--rose-bg);
  color: var(--rose);
  font-weight: 500;
}

/* Tab badges */
.infrastructure-page .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1.4;
}

.infrastructure-page .tab-badge.draft {
  background: #fef3c7;
  color: #92400e;
}

.infrastructure-page .tab-badge.issue {
  background: #ffe4e6;
  color: #be123c;
}

/* ── Panel wrapper ── */
.infrastructure-page .sd-panel {
  display: none;
}

.infrastructure-page .sd-panel.show {
  display: block;
}

/* ── Tool search / filter ── */
.infrastructure-page .tool-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.infrastructure-page .tool-search-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 11px;
  font-size: 12px;
  font-family: var(--f-sans);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.infrastructure-page .tool-search-input::placeholder { color: var(--ink-50); }
.infrastructure-page .tool-search-input:focus { border-color: var(--accent); }

.infrastructure-page .filter-btn {
  font-size: 11px;
  font-weight: 500;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-50);
  cursor: pointer;
  font-family: var(--f-sans);
  transition: all 0.15s;
  white-space: nowrap;
}

.infrastructure-page .filter-btn:hover {
  border-color: var(--ink-50);
  color: var(--ink-70);
}

.infrastructure-page .filter-btn.active {
  background: #5B6AD0;
  color: #ffffff;
  border-color: #5B6AD0;
}

.infrastructure-page .sd-empty {
  padding: 3rem;
  text-align: center;
  font-size: 13px;
  color: var(--ink-50);
}

/* ── Op groups ── */
.infrastructure-page .op-group {
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid #ebe7e0;
  background: #ffffff;
  overflow: hidden;
}

.infrastructure-page .op-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f7f5f2;
  border-bottom: 1px solid #f0ece5;
  cursor: pointer;
  user-select: none;
}

.infrastructure-page .op-group:not(:has(.tool-table)) .op-group-header {
  border-bottom: none;
}

.infrastructure-page .op-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm, 6px);
  letter-spacing: 0.3px;
}

.infrastructure-page .op-tag.configure { background: var(--op-configure-bg); color: var(--op-configure-text); }
.infrastructure-page .op-tag.get       { background: var(--op-get-bg);       color: var(--op-get-text); }
.infrastructure-page .op-tag.list      { background: var(--op-list-bg);      color: var(--op-list-text); }
.infrastructure-page .op-tag.set       { background: var(--op-set-bg);       color: var(--op-set-text); }
.infrastructure-page .op-tag.search    { background: var(--op-search-bg);    color: var(--op-search-text); }
.infrastructure-page .op-tag.create    { background: var(--op-create-bg);    color: var(--op-create-text); }
.infrastructure-page .op-tag.update    { background: var(--op-update-bg);    color: var(--op-update-text); }
.infrastructure-page .op-tag.delete    { background: var(--op-delete-bg);    color: var(--op-delete-text); }
.infrastructure-page .op-tag.merge     { background: var(--op-merge-bg);     color: var(--op-merge-text); }
.infrastructure-page .op-tag.fork      { background: var(--op-fork-bg);      color: var(--op-fork-text); }
.infrastructure-page .op-tag.push      { background: var(--op-push-bg);      color: var(--op-push-text); }
.infrastructure-page .op-tag.summarise { background: var(--op-summarise-bg); color: var(--op-summarise-text); }
.infrastructure-page .op-tag.aggregate { background: var(--op-aggregate-bg); color: var(--op-aggregate-text); }
.infrastructure-page .op-tag.execute   { background: var(--op-execute-bg);   color: var(--op-execute-text); }
.infrastructure-page .op-tag.propose   { background: var(--op-propose-bg);   color: var(--op-propose-text); }
.infrastructure-page .op-tag.analyse   { background: var(--op-analyse-bg);   color: var(--op-analyse-text); }
.infrastructure-page .op-tag.synthesise { background: var(--op-synthesise); }
.infrastructure-page .op-tag.unknown    { background: var(--ink-50); }

.infrastructure-page .op-count {
  font-size: 11px;
  color: var(--ink-50);
}

/* ── Tool table ── */
.infrastructure-page .tool-table {
  width: 100%;
  background: #ffffff;
}

/* Rules for inner <table> when .tool-table is used as a card wrapper (e.g. PipelineDraftReview) */
.infrastructure-page .tool-table table {
  width: 100%;
  border-collapse: collapse;
}

.infrastructure-page .tool-table table td {
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}

.infrastructure-page .tool-table table tr:last-child td {
  border-bottom: none;
}

.infrastructure-page .tool-table table tr:hover {
  background: rgba(0,0,0,0.01);
}

/* ── Schema drawer ── */
.infrastructure-page .schema-drawer {
  display: none;
  background: var(--bg-page);
  padding: 14px 22px 16px;
  animation: fadeUp .2s var(--ease) both;
}

.infrastructure-page .schema-drawer.open {
  display: block;
}

.infrastructure-page .sd-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.infrastructure-page .sd-close {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-50);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 5px;
  transition: all .12s;
  border: 0;
  background: none;
  font-family: var(--f-sans);
}

.infrastructure-page .sd-close:hover {
  background: var(--rule-2);
  color: var(--ink-70);
}

.infrastructure-page .schema-block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-70);
  overflow-x: auto;
  white-space: pre;
}

.infrastructure-page .sd-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.infrastructure-page .sd-summary-label {
  font-size: 12px;
  color: var(--ink-70);
}

.infrastructure-page .sd-summary-hint {
  font-size: 11px;
  color: var(--ink-50);
}

.infrastructure-page .sd-toggle {
  position: relative;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
}

.infrastructure-page .sd-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.infrastructure-page .sd-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--rule);
  transition: background .15s;
  cursor: pointer;
}

.infrastructure-page .sd-toggle input:checked + .sd-toggle-track {
  background: var(--emerald);
}

.infrastructure-page .sd-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: left .15s;
  pointer-events: none;
}

.infrastructure-page .sd-toggle input:checked ~ .sd-toggle-thumb {
  left: 14px;
}

/* ── Stats panel ── */
.infrastructure-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.infrastructure-page .stat-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.infrastructure-page .sc-label {
  font-size: 11px;
  color: var(--ink-50);
  margin-bottom: 4px;
}

.infrastructure-page .sc-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.infrastructure-page .sc-val.go { color: var(--emerald); }

.infrastructure-page .sc-sub {
  font-size: 11px;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.infrastructure-page .sc-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}

.infrastructure-page .sc-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.infrastructure-page .scbf-go { background: var(--emerald); }

/* ── Latency chart ── */
.infrastructure-page .latency-chart {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--surface);
}

.infrastructure-page .lc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-50);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.infrastructure-page .lc-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
}

.infrastructure-page .lc-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.infrastructure-page .lc-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--rule);
  min-height: 3px;
}

.infrastructure-page .lc-bar.peak { background: var(--rose); }
.infrastructure-page .lc-bar-label { font-size: 9px; color: var(--ink-50); }

.infrastructure-page .lc-bar.h27 { height: 27px; }
.infrastructure-page .lc-bar.h30 { height: 30px; }
.infrastructure-page .lc-bar.h31 { height: 31px; }
.infrastructure-page .lc-bar.h34 { height: 34px; }
.infrastructure-page .lc-bar.h35 { height: 35px; }
.infrastructure-page .lc-bar.h37 { height: 37px; }
.infrastructure-page .lc-bar.h39 { height: 39px; }
.infrastructure-page .lc-bar.h40 { height: 40px; }
.infrastructure-page .lc-bar.h43 { height: 43px; }
.infrastructure-page .lc-bar.h45 { height: 45px; }
.infrastructure-page .lc-bar.h46 { height: 46px; }
.infrastructure-page .lc-bar.h48 { height: 48px; }
.infrastructure-page .lc-bar.h52 { height: 52px; }
.infrastructure-page .lc-bar.h55 { height: 55px; }
.infrastructure-page .lc-bar.h56 { height: 56px; }
.infrastructure-page .lc-bar.h57 { height: 57px; }
.infrastructure-page .lc-bar.h58 { height: 58px; }
.infrastructure-page .lc-bar.h62 { height: 62px; }
.infrastructure-page .lc-bar.h63 { height: 63px; }
.infrastructure-page .lc-bar.h64 { height: 64px; }
.infrastructure-page .lc-bar.h67 { height: 67px; }

/* ── Error list ── */
.infrastructure-page .error-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.infrastructure-page .error-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface);
}

.infrastructure-page .error-item.is-error { border-color: var(--rose); }

.infrastructure-page .ei-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.infrastructure-page .ei-type {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 500;
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .et-error { background: var(--rose-bg); color: var(--rose); }
.infrastructure-page .et-info  { background: var(--blue-bg); color: var(--blue); }
.infrastructure-page .et-warn  { background: var(--amber-bg); color: var(--amber); }

.infrastructure-page .ei-tool {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}

.infrastructure-page .ei-time {
  font-size: 11px;
  color: var(--ink-50);
}

.infrastructure-page .ei-msg {
  font-size: 12px;
  color: var(--ink-50);
}

/* ── Schema drawer — requires_producers section ── */
.infrastructure-page .sd-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.infrastructure-page .sd-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.infrastructure-page .sd-producer-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: start;
}

.infrastructure-page .sd-producer-card:last-child { margin-bottom: 0; }

.infrastructure-page .sd-producer-tool {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  grid-column: 1 / -1;
}

.infrastructure-page .sd-producer-mapping {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-70);
}

.infrastructure-page .sd-producer-args {
  font-size: 11px;
  color: var(--ink-50);
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* ── Schema drawer — params table ── */
.infrastructure-page .sd-params-table {
  margin-bottom: 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.infrastructure-page .sd-params-head {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 80px 1fr;
  gap: 0;
  padding: 5px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.infrastructure-page .sd-params-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 80px 1fr;
  gap: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  font-size: 12px;
}

.infrastructure-page .sd-params-row:last-child { border-bottom: none; }
.infrastructure-page .sd-params-row:hover { background: var(--surface); }

.infrastructure-page .sd-pr-name {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 1px;
}

.infrastructure-page .sd-req-dot {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  margin-top: -1px;
}

.infrastructure-page .sd-pr-type {
  padding-top: 1px;
}

.infrastructure-page .sd-type-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--rule-2);
  color: var(--ink-70);
  line-height: 1.4;
}

.infrastructure-page .sd-type-badge.sd-type-unknown {
  color: var(--ink-30, var(--ink-50));
}

.infrastructure-page .sd-pr-enum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
}

.infrastructure-page .sd-enum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.infrastructure-page .sd-enum-chip {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  line-height: 1.4;
}

.infrastructure-page .sd-default-val {
  font-size: 10.5px;
  color: var(--ink-50);
  font-family: var(--f-mono);
}

/* ── Schema drawer — parameters section ── */
.infrastructure-page .sd-param-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 11px;
}

.infrastructure-page .sd-param-name {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-70);
  flex-shrink: 0;
}

.infrastructure-page .sd-param-meta {
  color: var(--ink-50);
}

/* ── Taxonomy card — source section ── */
.infrastructure-page .pdr-source-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
}

.infrastructure-page .pdr-source-type-badge.static {
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .pdr-source-type-badge.runtime {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.infrastructure-page .pdr-source-type-badge.parameterised {
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  color: color-mix(in srgb, var(--amber) 80%, var(--ink));
}

.infrastructure-page .pdr-source-requires {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.infrastructure-page .pdr-source-requires-row {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-50);
}

.infrastructure-page .pdr-source-refreshed {
  font-size: 10px;
  color: var(--ink-50);
  margin: 4px 0 6px;
}


/* ════════════════════════════════════════
   PipelineDraftReview — complete styles
   All colors use existing CSS variables
   ════════════════════════════════════════ */

/* ── Outer wrapper ── */
.pipeline-draft-review {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Empty / loading / error states ── */
.pipeline-draft-empty {
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.pipeline-draft-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-70);
}

.pipeline-draft-copy {
  font-size: 13px;
  color: var(--ink-40);
}

/* ── Error / success banners ── */
.pipeline-draft-error {
  font-size: 12px;
  color: var(--rose);
  padding: 8px 12px;
  border: 1px solid var(--rose);
  border-radius: 7px;
  background: var(--rose-bg);
  margin-bottom: 10px;
}

.pipeline-success-banner {
  font-size: 12px;
  color: var(--emerald);
  padding: 8px 12px;
  border: 1px solid var(--emerald);
  border-radius: 7px;
  background: var(--emerald-bg);
  margin-bottom: 10px;
}

/* ── Draft meta row ── */
.pipeline-draft-meta {
  margin-bottom: 14px;
}

.pipeline-draft-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pipeline-status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-40);
  border: 1px solid var(--rule);
}

.pipeline-status-badge.ok {
  background: var(--emerald-bg);
  color: var(--emerald);
  border-color: rgba(74,222,128,0.2);
}

.pipeline-flag-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 500;
  flex-shrink: 0;
}

.pipeline-draft-meta-text {
  font-size: 11px;
  color: var(--ink-40);
}

/* ── Seed progress bar ── */
.pipeline-seed-progress {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pipeline-seed-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-seed-stage {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-70);
}

.pipeline-seed-substage {
  font-size: 11px;
  color: var(--ink-40);
}

.pipeline-seed-percent {
  font-size: 11px;
  color: var(--ink-40);
}

.pipeline-seed-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--rule-2);
  overflow: hidden;
}

.pipeline-seed-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--emerald);
  transition: width .3s ease;
}

/* ── Warning summary (collapsed by default) ── */
.pipeline-warnings-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px;
}

.pipeline-warnings-summary > .pipeline-inline-meta {
  display: inline;
  margin-right: 6px;
}

.pipeline-warnings-toggle {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  color: var(--ink-40);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pipeline-warnings-toggle:hover { color: var(--ink); }

.pipeline-warning-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 4px;
}

.pipeline-warning-item {
  font-size: 11.5px;
  color: var(--amber);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pipeline-warning-item::before {
  content: '⚠';
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Draft sub-tabs ── */
.pdr-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}

.pdr-tab {
  font-size: 13px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--ink-40);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .12s;
  white-space: nowrap;
}

.pdr-tab:hover { color: var(--ink); }

.pdr-tab.on {
  color: var(--accent-text);
  border-bottom-color: var(--accent-solid);
}

.pdr-tab-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 500;
}

/* ── Tab panels ── */
.pdr-panel { display: none; }
.pdr-panel.show { display: block; }

/* ── Tools tree in draft tab — matches Tools tab exactly ── */
.pdr-op-group {
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 8px;
}

.pdr-op-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f7f5f2;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
  min-height: 38px;
}

.pdr-op-header:hover {
  filter: brightness(0.97);
}

.pdr-op-meta {
  font-size: 12px;
  color: var(--ink-40);
  flex: 1;
}

.pdr-op-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-20);
  transition: transform .2s var(--ease, ease);
  flex-shrink: 0;
}

.pdr-tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 14px;
  border-top: 1px solid var(--rule);
  min-height: 46px;
  transition: background .1s;
}

.pdr-tool-row:hover {
  background: var(--surface-2);
}

.pdr-tool-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  margin-left: 6px;
}

/* ── Entity-type and modifier chips in tool rows ── */
.pdr-tool-row .op-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdr-tool-row .et-modifier { background: var(--entity-bg);      color: var(--entity-text);    border: 1px solid var(--entity-border); }
.pdr-tool-row .et-tenant   { background: var(--emerald-bg);    color: var(--emerald); }
.pdr-tool-row .et-platform { background: var(--modifier-bg);   color: var(--modifier-text); }
.pdr-tool-row .et-session  { background: rgba(59,130,246,0.08); color: #60a5fa; }
.pdr-tool-row .et-location { background: var(--amber-bg);      color: var(--amber); }
.pdr-tool-row .et-endpoint { background: var(--rose-bg);       color: var(--rose); }

.pdr-tool-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  font-family: var(--mono, monospace);
}

.pdr-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.pdr-toggle-label {
  font-size: 11px;
  color: var(--ink-40);
}

.pdr-toggle {
  position: relative;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.pdr-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pdr-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--rule-2);
  transition: background .15s;
}

.pdr-toggle input:checked + .pdr-toggle-track {
  background: var(--emerald);
}

.pdr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transition: left .15s;
  pointer-events: none;
}

.pdr-toggle input:checked ~ .pdr-toggle-thumb {
  left: 14px;
}

/* ── Section cards (taxonomy, conventions, operations) ── */
.pipeline-review-section {
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 10px;
}

.pipeline-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.pipeline-review-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.pipeline-review-sub {
  font-size: 11.5px;
  color: var(--ink-40);
  margin-top: 2px;
}

/* ── Fields ── */
.pipeline-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pipeline-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.pipeline-field input,
.pipeline-field textarea,
.pipeline-field select {
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  transition: border-color .12s;
  resize: vertical;
}

.pipeline-field input:focus,
.pipeline-field textarea:focus,
.pipeline-field select:focus {
  outline: none;
  border-color: var(--accent-solid);
}

.pipeline-field textarea {
  min-height: 80px;
  font-size: 11.5px;
  line-height: 1.6;
}

.pipeline-readonly {
  font-size: 12px;
  color: var(--ink-70);
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface-2);
  line-height: 1.5;
  word-break: break-all;
}

/* ── Taxonomy entity cards ── */
.pipeline-entity-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pipeline-entity-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.pipeline-entity-card.review {
  border-color: #F0C070;
}

.pipeline-entity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.pipeline-entity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 0;
  background: none;
  padding: 0;
  flex: 1;
  min-width: 100px;
}

.pipeline-entity-name:focus {
  outline: none;
  border-bottom: 1px solid var(--ink-20);
}

.pipeline-entity-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pipeline-entity-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-entity-tools {
  font-size: 11px;
  color: var(--ink-40);
}

/* ── Convention cards ── */
.pipeline-convention-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-convention-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.pipeline-convention-card.review {
  border-color: #F0C070;
}

.pipeline-convention-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.pipeline-convention-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
}

.pipeline-convention-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--rule);
}

/* ── Inline meta / select ── */
.pipeline-inline-meta {
  font-size: 11px;
  color: var(--ink-40);
}

.pipeline-inline-select {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
}

/* ── Actions row ── */
.pipeline-review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: 6px;
}

.pipeline-seed-model-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

/* ════════════════════════════════════════
   Pipeline page — full-page layout
   ════════════════════════════════════════ */

.pipeline-page {
  display: flex;
  flex-direction: column;
}

/* ── Status pill in page header ── */
.pipeline-status-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pipeline-status-pill.approved {
  background: var(--emerald-bg);
  color: var(--emerald);
  border: 1px solid var(--green-border, #bbf0d0);
}

.pipeline-status-pill.draft {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--yellow-border, #e8d374);
}

/* ── Progress card ── */
.pipeline-progress-card {
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Warning banner ── */
.pipeline-warning-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: var(--amber-bg);
  border: 1px solid var(--yellow-border, #e8d374);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

/* ── Section containers ── */
.pipeline-section {
  margin-bottom: 32px;
}

.pipeline-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rule);
}

.pipeline-section-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pipeline-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg-page);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pipeline-section-title {
  font-size: 15px;
  font-weight: 600;
}

.pipeline-section-sub {
  font-size: 12px;
  color: var(--ink-50);
}

/* ── Taxonomy grid ── */
.pipeline-taxonomy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pipeline-entity-card-new {
  padding: 14px 16px;
}

.pipeline-instance-count-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--emerald-bg);
  color: var(--emerald);
}

.pipeline-field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-50);
  font-weight: 500;
  margin-bottom: 4px;
}

.pipeline-auto-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--violet-bg);
  color: var(--purple);
  border: 1px solid rgba(124,58,237,0.2);
}

/* ── Conventions table header ── */
.pipeline-table-th {
  text-align: left;
  padding: 10px 20px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-50);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-page);
}

/* ── JSON import block ── */
.pipeline-json-import-block {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pipeline-json-import-block textarea {
  font-size: 11.5px;
  font-family: var(--mono, monospace);
  padding: 8px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  min-height: 90px;
  resize: vertical;
  line-height: 1.6;
  width: 100%;
}

.pipeline-json-import-actions {
  display: flex;
  gap: 6px;
}

/* ── Allow move-to-op dropdown to escape the tool-table overflow clip ─────── */
.pipeline-page .tool-table {
  overflow: visible;
}

/* ── New-operation inline input (Section 1 header) ─────────────────────── */
.new-op-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.new-op-input {
  font-size: 12px;
  font-family: var(--mono, monospace);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  width: 130px;
  box-shadow: 0 0 0 3px var(--accent-border);
}

/* ── Move-to-op button and popover ───────────────────────────────────────── */
.tool-move-wrap {
  display: none; /* shown on row hover */
}

.tool-name-cell:hover .tool-move-wrap,
.tool-move-btn.open ~ * {
  display: block;
}

.tool-name-cell {
  position: relative;
}

.tool-move-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-40);
  cursor: pointer;
  padding: 0;
  transition: background .1s, color .1s, border-color .1s;
  flex-shrink: 0;
}

.tool-move-btn:hover,
.tool-move-btn.open {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--rule-2);
}

.tool-move-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: 0 8px 20px var(--ink-10);
  min-width: 160px;
  max-width: 220px;
  max-height: 260px;
  overflow-y: auto;
}

.tool-move-menu-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  padding: 9px 12px 6px;
  border-bottom: 1px solid var(--rule);
}

.tool-move-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--f-sans);
  color: var(--ink-70);
  text-align: left;
  transition: background .1s;
}

.tool-move-option:hover:not(:disabled) { background: var(--surface-2); }
.tool-move-option:disabled { cursor: default; }
.tool-move-option.current { color: var(--ink-40); }

.tool-move-current-marker {
  font-size: 9px;
  color: var(--ink-20);
  margin-left: auto;
}

.op-tag-xs {
  font-size: 10px !important;
  padding: 1px 5px !important;
}

/* ── Modifier chip with inline clear button ──────────────────────────────── */
.chip-part-clearable {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding-right: 4px !important;
}

.chip-clear-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--ink-20);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  border-radius: 2px;
  transition: color .1s, background .1s;
  flex-shrink: 0;
}

.chip-clear-x:hover {
  color: var(--rose, #e11d48);
  background: color-mix(in srgb, var(--rose, #e11d48) 10%, transparent);
}

/* ── Editable classification chips (Section 1) ──────────────────────────── */

/* Wrapper — keeps parts on one line alongside the existing tool-classification look */
.chip-display-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Each clickable field part inside the chip — base matches .chip in PromptTester */
.chip-part {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.12s;
}

.chip-part:hover { opacity: 0.7; }

/* entity_type */
.chip-part.chip-part-entity_type { background: var(--entity-bg); color: var(--entity-text); border: 1px solid var(--entity-border); }

/* modifier */
.chip-part.chip-part-modifier { background: var(--modifier-bg); color: var(--modifier-text); border: 1px solid var(--modifier-border); font-style: italic; }

/* op_tag — translucent pill */
.chip-part.chip-part-op_tag                       { border: 1px solid transparent; }
.chip-part.chip-part-op_tag.chip-op-get           { background: var(--op-get-bg);        color: var(--op-get-text);        border-color: var(--op-get-border); }
.chip-part.chip-part-op_tag.chip-op-list          { background: var(--op-list-bg);       color: var(--op-list-text);       border-color: var(--op-list-border); }
.chip-part.chip-part-op_tag.chip-op-create        { background: var(--op-create-bg);     color: var(--op-create-text);     border-color: var(--op-create-border); }
.chip-part.chip-part-op_tag.chip-op-update        { background: var(--op-update-bg);     color: var(--op-update-text);     border-color: var(--op-update-border); }
.chip-part.chip-part-op_tag.chip-op-delete        { background: var(--op-delete-bg);     color: var(--op-delete-text);     border-color: var(--op-delete-border); }
.chip-part.chip-part-op_tag.chip-op-search        { background: var(--op-search-bg);     color: var(--op-search-text);     border-color: var(--op-search-border); }
.chip-part.chip-part-op_tag.chip-op-aggregate     { background: var(--op-aggregate-bg);  color: var(--op-aggregate-text);  border-color: var(--op-aggregate-border); }
.chip-part.chip-part-op_tag.chip-op-merge         { background: var(--op-merge-bg);      color: var(--op-merge-text);      border-color: var(--op-merge-border); }
.chip-part.chip-part-op_tag.chip-op-fork          { background: var(--op-fork-bg);       color: var(--op-fork-text);       border-color: var(--op-fork-border); }
.chip-part.chip-part-op_tag.chip-op-push          { background: var(--op-push-bg);       color: var(--op-push-text);       border-color: var(--op-push-border); }
.chip-part.chip-part-op_tag.chip-op-set           { background: var(--op-set-bg);        color: var(--op-set-text);        border-color: var(--op-set-border); }
.chip-part.chip-part-op_tag.chip-op-configure     { background: var(--op-configure-bg);  color: var(--op-configure-text);  border-color: var(--op-configure-border); }
.chip-part.chip-part-op_tag.chip-op-execute       { background: var(--op-execute-bg);    color: var(--op-execute-text);    border-color: var(--op-execute-border); }
.chip-part.chip-part-op_tag.chip-op-propose       { background: var(--op-propose-bg);    color: var(--op-propose-text);    border-color: var(--op-propose-border); }
.chip-part.chip-part-op_tag.chip-op-analyse       { background: var(--op-analyse-bg);    color: var(--op-analyse-text);    border-color: var(--op-analyse-border); }
.chip-part.chip-part-op_tag.chip-op-synthesise    { background: var(--op-synthesise-bg); color: var(--op-synthesise-text); border-color: var(--op-synthesise-border); }

/* Overridden field — amber border to signal it was hand-edited */
.chip-part-overridden {
  border-color: var(--amber, #D97706) !important;
  color: var(--amber, #D97706) !important;
}

/* separator between chips */
.chip-sep {
  color: var(--ink-40);
  font-size: 11px;
  pointer-events: none;
}

/* Inline edit input — replaces the clicked part in-place, sized to word length */
.chip-edit-input {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--mono, monospace);
  border: none;
  border-bottom: 1.5px solid var(--accent, #5B6BF8);
  background: transparent;
  color: inherit;
  outline: none;
  padding: 0;
  line-height: 1;
}

/* Hide the datalist dropdown chevron Chrome injects — typeahead still works */
.chip-edit-input::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* Ghost + button to add a modifier when none exists — fades in on row hover */
.chip-add-modifier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px dashed var(--ink-20, rgba(0,0,0,0.15));
  border-radius: 4px;
  background: transparent;
  color: var(--ink-30, rgba(0,0,0,0.25));
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

tr:hover .chip-add-modifier {
  opacity: 1;
}

.chip-add-modifier:hover {
  color: var(--accent, #5B6BF8);
  border-color: var(--accent, #5B6BF8);
  border-style: solid;
}

/* ── NEW badge on taxonomy entries (Section 2) ──────────────────────────── */
.pdr-new-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #5B6BF8) 12%, transparent);
  color: var(--accent, #5B6BF8);
  border: 1px solid color-mix(in srgb, var(--accent, #5B6BF8) 35%, transparent);
  flex-shrink: 0;
}

/* ── No-synonyms warning (Section 2) ────────────────────────────────────── */
.pdr-no-synonyms-warn {
  font-size: 11px;
  color: var(--amber, #D97706);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.pdr-no-synonyms-warn::before {
  content: '⚠';
  font-size: 10px;
  flex-shrink: 0;
}

/* ── New-taxonomy confirmation modal ────────────────────────────────────── */
.pdr-taxonomy-confirm-card {
  width: 420px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 90vh;
}

.pdr-taxonomy-confirm-card .modal-head {
  padding: 24px 24px 16px;
}

.pdr-taxonomy-confirm-card .modal-foot {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.07));
}

/* ── Prerequisite notice cards ──────────────────────────────────────────── */
.prereq-card {
  background: color-mix(in srgb, var(--purple, #7C3AED) 6%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--purple, #7C3AED) 20%, transparent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.prereq-card-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple, #7C3AED);
  margin-bottom: 8px;
}

.prereq-card-body {
  font-size: 12px;
  color: var(--ink-70);
  line-height: 1.5;
  margin-bottom: 10px;
}

.prereq-consumer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.prereq-tool {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  color: var(--ink-70);
  background: var(--surface);
}

.prereq-tool-producer {
  border-color: color-mix(in srgb, var(--purple, #7C3AED) 40%, transparent);
  color: var(--purple, #7C3AED);
  background: color-mix(in srgb, var(--purple, #7C3AED) 8%, var(--surface, #fff));
}

.prereq-card-note {
  font-size: 11px;
  color: var(--ink-50);
  font-style: italic;
}

/* ── Synonym and instance chips (Section 2) ─────────────────────────────── */
.synonym-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-70);
  border: 1px solid var(--rule-2);
}

.instance-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-family: var(--f-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.instance-chip-toggle {
  cursor: pointer;
}

/* ── Taxonomy card inline synonym editor ────────────────────────────────── */
.taxonomy-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
  padding: 0;
}

.card.pipeline-entity-card-new:hover .taxonomy-edit-btn {
  opacity: 1;
}

.taxonomy-edit-btn.active {
  opacity: 1;
  color: var(--accent);
}

.taxonomy-edit-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.taxonomy-edit-btn.active:hover {
  background: color-mix(in srgb, var(--accent, #5b7fb5) 10%, transparent);
  color: var(--accent);
}

.taxonomy-edit-btn:disabled {
  cursor: default;
}

.synonym-chip-editable {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 4px 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-70);
  border: 1px solid var(--rule);
}

.synonym-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--ink-50);
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.1s;
  flex-shrink: 0;
}

.synonym-chip-remove:hover {
  color: var(--rose);
}

.synonym-add-input {
  font-size: 11px;
  border: none;
  border-bottom: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink-70);
  outline: none;
  padding: 2px 4px;
  width: 120px;
  transition: border-color 0.15s;
  font-family: inherit;
}

.synonym-add-input:focus {
  border-color: var(--accent);
}

.synonym-add-input::placeholder {
  color: var(--ink-50);
}

.taxonomy-edit-error {
  font-size: 11px;
  color: var(--rose);
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 4px;
}

@keyframes taxonomy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.taxonomy-saving-spinner {
  animation: taxonomy-spin 0.8s linear infinite;
  transform-origin: 50% 50%;
  display: block;
}

.taxonomy-name-input {
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--rule);
  color: var(--ink);
  outline: none;
  padding: 0 2px 1px;
  min-width: 80px;
  max-width: 180px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.taxonomy-name-input:focus {
  border-color: var(--accent);
}

.taxonomy-delete-btn {
  position: absolute;
  top: 10px;
  right: 38px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--rose, #e05252);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s;
}

.taxonomy-delete-btn:hover {
  background: var(--rose-bg, #fef2f2);
}

.taxonomy-delete-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

/* ── Tool controls column (summary + type + expand) ─────────────────────── */
.pdr-tool-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* ── Tool-type segmented control ─────────────────────────────────────────── */
.tool-type-seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.tts-btn {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--mono, monospace);
  padding: 2px 7px;
  border: none;
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}

.tts-btn + .tts-btn {
  border-left: 1px solid var(--rule);
}

.tts-btn.active {
  background: var(--surface-2);
  color: var(--ink);
}

.tts-btn.active.discovery {
  background: color-mix(in srgb, var(--accent, #5B6BF8) 12%, transparent);
  color: var(--accent, #5B6BF8);
  border-color: color-mix(in srgb, var(--accent, #5B6BF8) 30%, transparent);
}

/* ── Tool editor expand/collapse button ──────────────────────────────────── */
.tool-editor-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  padding: 0;
  transition: background 0.1s, color 0.1s, transform 0.2s;
  flex-shrink: 0;
  margin-top: 4px;
}

.tool-editor-expand-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.tool-editor-expand-btn.open svg {
  transform: rotate(180deg);
}

/* ── Expanded tool editor row ────────────────────────────────────────────── */
.tool-editor-row > td {
  border-top: none !important;
}

.tool-editor-panel {
  background: var(--bg-page);
  border-top: 1px solid var(--rule-2);
  padding: 0;
}

.tool-editor-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-2);
}

.tool-editor-section:last-child {
  border-bottom: none;
}

.tool-editor-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.tool-editor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tool-editor-empty {
  font-size: 11px;
  color: var(--ink-50);
  font-style: italic;
  padding: 4px 0;
}

/* ── Parameters table ────────────────────────────────────────────────────── */
.pdr-params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pdr-params-th {
  text-align: left;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-50);
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}

.pdr-param-row {
  border-bottom: 1px solid var(--rule-2);
}

.pdr-param-row:last-child {
  border-bottom: none;
}

.pdr-param-cell {
  padding: 6px 8px;
  vertical-align: middle;
}

.pdr-param-name {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.pdr-param-type {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--ink-70);
  white-space: nowrap;
}

.pdr-param-enum {
  max-width: 260px;
}

.pdr-enum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.pdr-enum-chip {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #3B6FD4) 10%, transparent);
  color: var(--accent, #3B6FD4);
  border: 1px solid color-mix(in srgb, var(--accent, #3B6FD4) 25%, transparent);
  line-height: 1.4;
}

.pdr-default-val {
  font-size: 10.5px;
  color: var(--ink-50);
  font-family: var(--mono, monospace);
}

.pdr-param-cell-empty {
  color: var(--ink-50);
  font-size: 11px;
}

.pdr-req-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--amber, #D97706) 12%, transparent);
  color: var(--amber, #D97706);
  border: 1px solid color-mix(in srgb, var(--amber, #D97706) 30%, transparent);
}

.pdr-param-select {
  font-size: 11px;
  font-family: var(--f-sans, inherit);
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  max-width: 180px;
}

.pdr-param-select:focus {
  outline: none;
  border-color: var(--accent, #5B6BF8);
}

/* ── Schema source editor ────────────────────────────────────────────────── */
.pdr-schema-source-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pdr-schema-req-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdr-schema-req-input {
  font-size: 11px;
  font-family: var(--mono, monospace);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  width: 80px;
  outline: none;
}

.pdr-schema-req-input:focus {
  border-color: var(--accent, #5B6BF8);
}

.pdr-schema-req-arrow {
  font-size: 11px;
  color: var(--ink-50);
  flex-shrink: 0;
}

.pdr-schema-req-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--ink-50);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.1s;
}

.pdr-schema-req-remove:hover {
  color: var(--rose, #e11d48);
}

.pdr-schema-source-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdr-schema-add-req {
  font-size: 10px;
  border: 1px dashed var(--rule);
  background: transparent;
  color: var(--ink-50);
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 4px;
  transition: color 0.1s, border-color 0.1s;
}

.pdr-schema-add-req:hover {
  color: var(--accent, #5B6BF8);
  border-color: var(--accent, #5B6BF8);
}

.pdr-schema-remove-source {
  font-size: 10px;
  border: none;
  background: none;
  color: var(--rose, #e11d48);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdr-schema-ttl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.pdr-schema-ttl-label {
  font-size: 10px;
  color: var(--ink-70);
  white-space: nowrap;
}

/* ── Producer dependency cards ───────────────────────────────────────────── */
.pdr-producer-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
}

.pdr-producer-card:last-child {
  margin-bottom: 0;
}

.pdr-producer-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 5px 8px;
  align-items: center;
  margin-bottom: 8px;
}

.pdr-producer-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}

.pdr-producer-input {
  font-size: 11px;
  font-family: var(--mono, monospace);
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.pdr-producer-input:focus {
  border-color: var(--accent, #5B6BF8);
}

.pdr-producer-remove {
  font-size: 10px;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--rose, #e11d48);
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.1s;
}

.pdr-producer-remove:hover {
  opacity: 1;
}

/* ── Source type badge (runtime/parameterised/static) ────────────────────── */
.pdr-source-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-50);
  border: 1px solid var(--rule-2);
}

.pdr-source-type-badge.runtime {
  background: color-mix(in srgb, var(--accent, #5B6BF8) 10%, transparent);
  color: var(--accent, #5B6BF8);
}

.pdr-source-type-badge.parameterised {
  background: color-mix(in srgb, var(--purple, #7C3AED) 10%, transparent);
  color: var(--purple, #7C3AED);
}

.pdr-source-requires {
  font-size: 10px;
  color: var(--ink-50);
  font-family: var(--mono, monospace);
  margin-bottom: 6px;
}

.pdr-source-requires-row {
  line-height: 1.6;
}

.pdr-source-refreshed {
  font-size: 10px;
  color: var(--ink-50);
  margin-top: 4px;
  font-style: italic;
}

/* ── Taxonomy source editing ── */

.pdr-source-edit {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdr-source-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdr-source-edit-label {
  font-size: 10px;
  color: var(--ink-50);
  min-width: 90px;
  flex-shrink: 0;
}

/* ── Operations section editable rows ── */

.pdr-op-edit-row {
  padding: 12px 20px;
}

/* ── Section 5: Op Entity Bindings ── */

.pdr-binding-new-row {
  padding: 10px 20px;
}


/* ── Tool table rows ──────────────────────────────────────── */
.infrastructure-page .tool-row-wrap {
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #f2eee8;
}

.infrastructure-page .tool-row-wrap:hover { background: #faf9f7; }

.infrastructure-page .tool-row-wrap.open { background: inherit; }

.infrastructure-page .tool-row-wrap:last-child { border-bottom: none; }

/* 2-column grid: name | chips */
.infrastructure-page .tool-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 24px;
}

.infrastructure-page .tool-cell {
  padding: 0;
  font-size: 13px;
}

/* Health dot */
.infrastructure-page .tool-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

/* Tool name cell */
.infrastructure-page .tool-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infrastructure-page .tool-fn-name {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.infrastructure-page .tool-desc {
  font-size: 11.5px;
  color: var(--ink-50);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

/* Classification chip column */
.infrastructure-page .tool-class-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 250px;
}

.infrastructure-page .tool-classification {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 264px;
  overflow: hidden;
}

/* Pipeline draft overrides — chip-display-wrap resets box to plain flex */
.infrastructure-page .tool-classification.chip-display-wrap {
  background: none;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: none;
  overflow: visible;
}

/* Count column — centered */
.infrastructure-page .tool-stat-col {
  display: flex;
  justify-content: center;
}

.infrastructure-page .tool-stat {
  font-size: 11px;
  color: var(--ink-50);
}

/* Toggle column — centered */
.infrastructure-page .tool-toggle-col {
  display: flex;
  justify-content: center;
}

/* Summary toggle (shared: ServerDetail tool rows + PipelineDraftReview) */
.summary-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}

.summary-toggle.on  { background: var(--emerald); }
.summary-toggle.off { background: var(--rule); }

.summary-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  transition: left 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.summary-toggle.on::after  { left: 16px; }
.summary-toggle.off::after { left: 2px; }

/* Read-only summary badge (ServerDetail tool rows + SchemaDrawer) */
.summary-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--emerald) 15%, transparent);
  color: var(--emerald);
  line-height: 1.4;
}

/* Policy column — right-aligned */
.infrastructure-page .tool-policy-col {
  display: flex;
  justify-content: flex-end;
}

.infrastructure-page .tool-policy {
  font-size: 11px;
  color: var(--ink-50);
  font-family: var(--f-mono);
}

/* Schema drawer row */
.infrastructure-page .tool-schema-row {
  border-bottom: 1px solid var(--rule-2);
}

/* ── Tool-type badge (execution / discovery) ── */
.infrastructure-page .tool-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1.4;
  flex-shrink: 0;
}

.infrastructure-page .tool-type-badge.execution {
  background: var(--rule-2);
  color: var(--ink-50);
}

.infrastructure-page .tool-type-badge.discovery {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}


/* SchemaDrawer styles are defined in ServerDetail.css */


/* ── SkeletonWizard ─────────────────────────────────────────── */

/* ── Progress tabs ── */
.skeleton-wizard .sw-progress {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.skeleton-wizard .sw-pstep {
  flex: 1;
  text-align: center;
  padding: 10px 8px 12px;
  font-size: 12px;
  color: var(--ink-40);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--f-sans);
}

.skeleton-wizard .sw-pstep:hover {
  color: var(--ink-70);
}

.skeleton-wizard .sw-pstep.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.skeleton-wizard .sw-pstep.done {
  color: var(--emerald);
  border-bottom-color: var(--emerald);
}

.skeleton-wizard .sw-pnum {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rule);
  color: var(--ink-50);
  flex-shrink: 0;
}

.skeleton-wizard .sw-pstep.active .sw-pnum {
  background: var(--accent);
  color: #fff;
}

.skeleton-wizard .sw-pstep.done .sw-pnum {
  background: var(--emerald);
  color: #fff;
}

/* ── Step visibility ── */
.skeleton-wizard .sw-step {
  display: none;
}

.skeleton-wizard .sw-step.active {
  display: block;
}

/* ── Step intro text ── */
.skeleton-wizard .sw-intro {
  font-size: 13px;
  color: var(--ink-50);
  margin-bottom: 18px;
}

/* ── Section headers ── */
.skeleton-wizard .sw-sec-hd {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 20px 0 10px;
  padding-left: 2px;
}

/* ── Cards ── */
.skeleton-wizard .sw-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 8px;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-card.selectable {
  cursor: pointer;
}

.skeleton-wizard .sw-card.selectable:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.skeleton-wizard .sw-card.selected {
  border-color: var(--accent);
  background: rgba(91, 106, 208, 0.03);
}

.skeleton-wizard .sw-card.excluded {
  opacity: 0.4;
}

.skeleton-wizard .sw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skeleton-wizard .sw-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-wizard .sw-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-wizard .sw-card-body {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-card.open .sw-card-body {
  display: block;
}

/* ── Op chips ── */
.skeleton-wizard .sw-oc {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.3px;
  color: #fff;
  flex-shrink: 0;
}

.skeleton-wizard .sw-oc.get       { background: var(--op-get-bg); }
.skeleton-wizard .sw-oc.list      { background: var(--op-list-bg); }
.skeleton-wizard .sw-oc.search    { background: var(--op-search-bg); }
.skeleton-wizard .sw-oc.create    { background: var(--op-create-bg); }
.skeleton-wizard .sw-oc.update    { background: var(--op-update-bg); }
.skeleton-wizard .sw-oc.delete    { background: var(--op-delete-bg); }
.skeleton-wizard .sw-oc.aggregate { background: var(--op-aggregate-bg); }

/* ── Tool name ── */
.skeleton-wizard .sw-tool-nm {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

/* ── Field count ── */
.skeleton-wizard .sw-field-count {
  font-size: 11px;
  color: var(--ink-50);
}

/* ── Tag variants ── */
.skeleton-wizard .sw-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.skeleton-wizard .sw-tag-auto {
  background: #d1fae5;
  color: #065f46;
}

.skeleton-wizard .sw-tag-pending {
  background: #fef3c7;
  color: #92400e;
}

.skeleton-wizard .sw-tag-skip {
  background: var(--ink-10);
  color: var(--ink-40);
}

.skeleton-wizard .sw-tag-tier {
  background: var(--accent-bg);
  color: var(--accent);
}

.skeleton-wizard .sw-tag-req {
  font-family: var(--f-mono);
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #ffe4e6;
  color: var(--rose);
  margin-left: 4px;
}

/* ── Checkbox ── */
.skeleton-wizard .sw-check {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.12s;
}

.skeleton-wizard .sw-check.on {
  background: var(--accent);
  border-color: var(--accent);
}

.skeleton-wizard .sw-check.on::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* ── Status dot ── */
.skeleton-wizard .sw-sdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-wizard .sw-sdot.done {
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.3);
}

.skeleton-wizard .sw-sdot.pending {
  background: var(--amber);
  box-shadow: 0 0 5px rgba(217, 119, 6, 0.3);
}

/* ── Arg rows ── */
.skeleton-wizard .sw-arg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}

.skeleton-wizard .sw-arg-name {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-50);
  min-width: 110px;
}

.skeleton-wizard .sw-arg-val {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  flex: 1;
  max-width: 280px;
  outline: none;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-arg-val:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.skeleton-wizard .sw-arg-source {
  font-size: 10px;
  color: var(--ink-40);
}

.skeleton-wizard .sw-arg-source .sw-from {
  color: var(--accent);
  font-family: var(--f-mono);
}

/* ── Field tags ── */
.skeleton-wizard .sw-fields-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.skeleton-wizard .sw-field-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--entity-text);
  background: var(--entity-bg);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
}

.skeleton-wizard .sw-field-tag.fk {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

/* ── Sample output block ── */
.skeleton-wizard .sw-sample-block {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-3);
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--entity-text);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--rule-2);
}

/* ── Sub-label inside card body ── */
.skeleton-wizard .sw-sub-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* ── Called-with line ── */
.skeleton-wizard .sw-called-with {
  font-size: 11px;
  color: var(--ink-50);
  margin-bottom: 8px;
}

.skeleton-wizard .sw-called-with span {
  font-family: var(--f-mono);
  color: var(--ink);
}

/* ── Edge rows ── */
.skeleton-wizard .sw-edge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-edge-row:last-child {
  border-bottom: none;
}

.skeleton-wizard .sw-edge-row:hover {
  background: var(--surface-hover);
}

.skeleton-wizard .sw-edge-field {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.skeleton-wizard .sw-edge-arrow {
  color: var(--ink-40);
  font-size: 11px;
}

.skeleton-wizard .sw-edge-tool {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}

.skeleton-wizard .sw-edge-param {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--emerald);
}

/* ── Explore tool cards ── */
.skeleton-wizard .sw-explore-tool {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}

.skeleton-wizard .sw-explore-tool:hover {
  box-shadow: var(--shadow);
}

.skeleton-wizard .sw-explore-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.1s;
}

.skeleton-wizard .sw-explore-head:hover {
  background: var(--surface-hover);
}

.skeleton-wizard .sw-explore-chevron {
  width: 14px;
  height: 14px;
  color: var(--ink-40);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.skeleton-wizard .sw-explore-tool.open .sw-explore-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.skeleton-wizard .sw-explore-body {
  display: none;
  padding: 0 20px 16px;
  border-top: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-explore-tool.open .sw-explore-body {
  display: block;
}

/* ── Explore mode toggle ── */
.skeleton-wizard .sw-explore-modes {
  display: flex;
  gap: 4px;
  margin: 14px 0;
}

.skeleton-wizard .sw-explore-mode {
  padding: 6px 15px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-50);
  transition: all 0.15s;
  font-family: var(--f-sans);
}

.skeleton-wizard .sw-explore-mode.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 4px var(--accent-glow);
}

.skeleton-wizard .sw-explore-mode:hover:not(.active) {
  border-color: var(--border-hover);
  color: var(--ink-70);
}

/* ── Fan-out description row ── */
.skeleton-wizard .sw-fanout-desc {
  font-size: 12px;
  color: var(--ink-70);
  margin-bottom: 10px;
}

.skeleton-wizard .sw-fanout-desc .sw-fanout-producer {
  font-family: var(--f-mono);
  font-weight: 500;
}

.skeleton-wizard .sw-fanout-desc .sw-fanout-source {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--accent);
}

.skeleton-wizard .sw-fanout-param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.skeleton-wizard .sw-fanout-param-row .sw-fp-name {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-50);
}

.skeleton-wizard .sw-fanout-param-row .sw-fp-arrow {
  font-size: 10px;
  color: var(--ink-40);
}

.skeleton-wizard .sw-fanout-param-row .sw-fp-source {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--accent);
}

.skeleton-wizard .sw-fanout-param-row .sw-fp-count {
  font-size: 10px;
  color: var(--ink-40);
  margin-left: auto;
}

/* ── Fan-out progress ── */
.skeleton-wizard .sw-fanout-progress {
  margin-top: 12px;
  background: var(--surface-3);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-fanout-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.skeleton-wizard .sw-fanout-status-complete {
  color: var(--emerald);
  font-weight: 600;
}

.skeleton-wizard .sw-fanout-status-remaining {
  color: var(--ink-40);
}

.skeleton-wizard .sw-fanout-bar {
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.skeleton-wizard .sw-fanout-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

.skeleton-wizard .sw-fanout-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 10px;
}

.skeleton-wizard .sw-fanout-val {
  font-family: var(--f-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--entity-text);
  border: 1px solid var(--rule);
}

.skeleton-wizard .sw-fanout-val.done {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.skeleton-wizard .sw-fanout-val.running {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

/* ── Probe inputs ── */
.skeleton-wizard .sw-probe-section {
  margin-top: 12px;
}

.skeleton-wizard .sw-probe-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.skeleton-wizard .sw-probe-param {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
  min-width: 110px;
}

.skeleton-wizard .sw-probe-or {
  font-size: 10px;
  color: var(--ink-40);
  margin: 0 4px;
}

.skeleton-wizard .sw-probe-select {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
  min-width: 160px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-probe-select:focus {
  border-color: var(--accent);
}

.skeleton-wizard .sw-probe-custom {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  outline: none;
  max-width: 160px;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-probe-custom:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.skeleton-wizard .sw-probe-run {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.skeleton-wizard .sw-probe-hint {
  font-size: 10px;
  color: var(--ink-40);
}

/* ── Run button ── */
.skeleton-wizard .sw-btn-run {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: 11px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all 0.12s;
}

.skeleton-wizard .sw-btn-run:hover {
  background: rgba(91, 106, 208, 0.12);
}

.skeleton-wizard .sw-btn-run:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Ghost button override for wizard ── */
.skeleton-wizard .sw-btn-ghost {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-70);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-btn-ghost:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}

/* ── Response panel ── */
.skeleton-wizard .sw-response-panel {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-wizard .sw-response-panel + .sw-response-panel {
  margin-top: 6px;
}

.skeleton-wizard .sw-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-response-title {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.3px;
}

.skeleton-wizard .sw-response-meta {
  font-size: 10px;
  color: var(--ink-40);
}

.skeleton-wizard .sw-response-body {
  padding: 12px 16px;
}

.skeleton-wizard .sw-response-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.skeleton-wizard .sw-response-more {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-40);
  padding: 3px 4px;
}

.skeleton-wizard .sw-response-required {
  font-size: 10px;
  color: var(--ink-50);
}

.skeleton-wizard .sw-response-required span {
  font-family: var(--f-mono);
  color: var(--ink);
}

/* ── Schema cards (step 5) ── */
.skeleton-wizard .sw-schema-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.skeleton-wizard .sw-schema-card:hover {
  border-color: var(--border-hover);
}

.skeleton-wizard .sw-schema-card.open .sw-schema-body {
  display: block;
}

.skeleton-wizard .sw-schema-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skeleton-wizard .sw-schema-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-wizard .sw-schema-name {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.skeleton-wizard .sw-schema-meta {
  font-size: 11px;
  color: var(--ink-50);
  display: flex;
  gap: 12px;
}

.skeleton-wizard .sw-schema-body {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
}

/* ── Summary stats bar ── */
.skeleton-wizard .sw-summary-stats {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

.skeleton-wizard .sw-summary-stat {
  background: var(--surface);
  padding: 16px 18px;
  flex: 1;
  text-align: center;
}

.skeleton-wizard .sw-summary-stat-val {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
}

.skeleton-wizard .sw-summary-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── Actions bar ── */
.skeleton-wizard .sw-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: space-between;
  align-items: center;
}

.skeleton-wizard .sw-actions-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.skeleton-wizard .sw-actions-right {
  display: flex;
  gap: 8px;
}

.skeleton-wizard .sw-actions-hint {
  font-size: 11px;
  color: var(--ink-50);
}

/* ── Producer rows (step 3) ── */
.skeleton-wizard .sw-producer-row {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}

.skeleton-wizard .sw-producer-row.on {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
}

.skeleton-wizard .sw-producer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
}

.skeleton-wizard .sw-producer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-wizard .sw-producer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-wizard .sw-producer-toggle {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-40);
  min-width: 64px;
  text-align: center;
  transition: all 0.15s;
  font-family: var(--f-sans);
}

.skeleton-wizard .sw-producer-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.skeleton-wizard .sw-producer-toggle:hover:not(.on) {
  border-color: var(--border-hover);
  color: var(--ink-70);
}

.skeleton-wizard .sw-producer-fields {
  padding: 10px 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--rule-2);
  background: var(--bg);
}

.skeleton-wizard .sw-field-check {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 12px;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}

.skeleton-wizard .sw-field-check.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}

.skeleton-wizard .sw-field-check input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.skeleton-wizard .sw-field-check-name {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
}

.skeleton-wizard .sw-field-check-count {
  font-size: 10px;
  color: var(--ink-40);
  margin-left: 2px;
}

.skeleton-wizard .sw-field-check-count.no-match {
  color: var(--ink-25, var(--ink-30));
}

/* ── Explore card: called-with + sample output ─────────────────────────────── */
.skeleton-wizard .sw-called-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--rule-2);
  background: var(--surface-2);
}

.skeleton-wizard .sw-called-with-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

.skeleton-wizard .sw-called-with-arg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-3);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 1px 7px;
  font-family: var(--f-mono);
  font-size: 10px;
}

.skeleton-wizard .sw-called-with-key  { color: var(--ink-60); }
.skeleton-wizard .sw-called-with-eq   { color: var(--ink-30); padding: 0 1px; }
.skeleton-wizard .sw-called-with-val  { color: var(--accent); }

.skeleton-wizard .sw-sample-output {
  border-top: 1px solid var(--rule-2);
}

.skeleton-wizard .sw-sample-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  display: block;
  width: 100%;
  text-align: left;
}

.skeleton-wizard .sw-sample-toggle:hover { color: var(--ink); }

.skeleton-wizard .sw-sample-pre {
  margin: 0;
  padding: 10px 16px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-70, var(--ink));
  background: var(--surface-3);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow-y: auto;
}

.skeleton-wizard .sw-schema-source {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-40);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.skeleton-wizard .sw-schema-src-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skeleton-wizard .sw-schema-src-fan-out {
  background: color-mix(in srgb, var(--emerald) 12%, transparent);
  color: var(--emerald);
}

.skeleton-wizard .sw-schema-src-manual-probe {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.skeleton-wizard .sw-schema-src-auto-discovery {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-50);
}


.infrastructure-page .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, .45);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.infrastructure-page .modal-backdrop.show {
  opacity: 1;
  pointer-events: all;
}

.infrastructure-page .modal-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--rule-2);
  width: 560px;
  height: 580px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(14, 14, 16, .18);
  transform: translateY(12px);
  transition: transform .28s var(--ease);
  overflow: hidden;
}

.infrastructure-page .modal-backdrop.show .modal-card {
  transform: translateY(0);
}

.infrastructure-page .modal-head {
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}

.infrastructure-page .mh-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 3px;
}

.infrastructure-page .mh-sub {
  font-size: 13px;
  color: var(--ink-40);
  line-height: 1.4;
}

.infrastructure-page .mh-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  transition: all .12s;
  flex-shrink: 0;
}

.infrastructure-page .mh-close:hover {
  background: var(--ink-06);
  color: var(--ink-70);
}

.infrastructure-page .method-tabs {
  display: flex;
  gap: 6px;
  padding: 16px 24px 0;
  flex-shrink: 0;
  overflow-x: auto;
}

.infrastructure-page .method-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--rule-2);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
  font-family: var(--f-sans);
}

.infrastructure-page .method-tab:hover {
  color: var(--ink-70);
  border-color: var(--accent-solid);
}

.infrastructure-page .method-tab.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.infrastructure-page .method-tab-ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.infrastructure-page .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.infrastructure-page .modal-body::-webkit-scrollbar {
  width: 4px;
}

.infrastructure-page .modal-body::-webkit-scrollbar-thumb {
  background: var(--rule-2);
}

.infrastructure-page .method-panel {
  display: none;
  animation: fadeIn .2s var(--ease) both;
}

.infrastructure-page .method-panel.show {
  display: block;
}

.infrastructure-page .method-note {
  font-size: 12.5px;
  color: var(--ink-40);
  margin-bottom: 12px;
}

.infrastructure-page .form-field {
  margin-bottom: 14px;
}

.infrastructure-page .ff-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.infrastructure-page .ff-hint {
  font-size: 11.5px;
  color: var(--ink-40);
  margin-bottom: 5px;
}

.infrastructure-page .ff-opt {
  font-size: 11px;
  color: var(--ink-20);
  font-weight: 400;
}

.infrastructure-page .ff-code {
  font-family: var(--f-mono);
  font-size: 11px;
  background: var(--ink-06);
  padding: 1px 5px;
  border-radius: 3px;
}

.infrastructure-page .ff-input {
  width: 100%;
  padding: 10px 13px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all .14s;
}

.infrastructure-page .ff-input:focus {
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.infrastructure-page .ff-input::placeholder {
  color: var(--ink-20);
}

.infrastructure-page .ff-textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 120px;
  line-height: 1.65;
  transition: all .14s;
}

.infrastructure-page .ff-textarea:focus {
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.infrastructure-page .ff-textarea-sm {
  min-height: 80px;
}

.infrastructure-page .env-kv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.infrastructure-page .env-kv-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.infrastructure-page .env-kv-key,
.infrastructure-page .env-kv-value {
  min-width: 0;
}

.infrastructure-page .env-kv-add,
.infrastructure-page .env-kv-remove {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-60);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}

.infrastructure-page .env-kv-add {
  margin-top: 8px;
}

.infrastructure-page .env-kv-add:hover,
.infrastructure-page .env-kv-remove:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.infrastructure-page .registry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.infrastructure-page .registry-card {
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--rule-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .14s;
  position: relative;
  text-align: left;
}

.infrastructure-page .registry-card:hover {
  background: var(--surface);
  border-color: var(--rule-2);
  box-shadow: 0 3px 10px var(--ink-06);
}

.infrastructure-page .registry-card.sel {
  background: var(--surface);
  border-color: var(--ink);
}

.infrastructure-page .registry-card.sel::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.infrastructure-page .rc-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infrastructure-page .rc-postgres { background: var(--rose-bg); }
.infrastructure-page .rc-brave   { background: rgba(59,130,246,0.08); }
.infrastructure-page .rc-slack   { background: var(--violet-bg); }
.infrastructure-page .rc-github  { background: var(--elevated); }
.infrastructure-page .rc-notion  { background: var(--amber-bg); }
.infrastructure-page .rc-sheets  { background: var(--emerald-bg); }

.infrastructure-page .rc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

.infrastructure-page .rc-desc {
  font-size: 11.5px;
  color: var(--ink-40);
  line-height: 1.4;
}

.infrastructure-page .oauth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.infrastructure-page .oauth-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--rule-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .14s;
  font-family: var(--f-sans);
  text-align: left;
}

.infrastructure-page .oauth-btn:hover {
  background: var(--surface);
  border-color: var(--rule-2);
  box-shadow: 0 3px 10px var(--ink-06);
}

.infrastructure-page .oauth-btn.connected {
  border-color: var(--emerald-rule);
  background: var(--emerald-bg);
}

.infrastructure-page .ob-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infrastructure-page .ob-github { background: #f4f4f5; }
.infrastructure-page .ob-slack { background: #fdf4ff; }
.infrastructure-page .ob-notion { background: #fff7ed; }
.infrastructure-page .ob-workspace { background: #f0fdf4; }
.infrastructure-page .ob-linear { background: #eff6ff; }
.infrastructure-page .ob-jira { background: #fef2f2; }

.infrastructure-page .ob-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.infrastructure-page .ob-status {
  font-size: 11.5px;
  color: var(--ink-40);
}

.infrastructure-page .ob-connected {
  font-size: 11.5px;
  color: var(--emerald);
  font-weight: 500;
}

.infrastructure-page .ob-arrow {
  margin-left: auto;
  color: var(--ink-20);
}

.infrastructure-page .test-connection {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.infrastructure-page .tc-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--rule-2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
  display: none;
}

.infrastructure-page .tc-spinner.show {
  display: block;
}

.infrastructure-page .tc-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.infrastructure-page .tc-icon.show {
  display: flex;
}

.infrastructure-page .tc-icon.success {
  background: var(--emerald-bg);
}

.infrastructure-page .tc-msg {
  font-size: 13px;
  color: var(--ink-70);
  flex: 1;
}

.infrastructure-page .tc-sub {
  font-size: 11.5px;
  color: var(--ink-40);
  margin-top: 2px;
}

.infrastructure-page .test-btn {
  width: 100%;
  margin-top: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  flex-shrink: 0;
}

.infrastructure-page .test-btn:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.infrastructure-page .modal-foot {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.infrastructure-page .mf-cancel {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--f-sans);
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  transition: all .13s;
}

.infrastructure-page .mf-cancel:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.infrastructure-page .mf-connect {
  height: 38px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  border: none;
  background: var(--ink);
  color: #fff;
  transition: all .13s;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.infrastructure-page .mf-connect:hover {
  background: #1c1c22;
  box-shadow: 0 4px 14px rgba(14, 14, 16, .2);
}

.infrastructure-page .mf-connect.success {
  background: var(--emerald);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ══════════════════════════════════════════════════════════════════
   AddServerPage — full-page add-server form
   Prefix: asp-  (Add Server Page)
   ══════════════════════════════════════════════════════════════════ */

/* ── Universal reset for #app-main when this page is active ──── */
#app-main:has(.add-server-page) {
  padding: 0 !important;
  border: none !important;
  display: block;
}

/* ── Scoped reset ─────────────────────────────────────────────── */
.add-server-page,
.add-server-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.add-server-page {
  padding: 32px 40px 120px;
  min-height: 100%;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--bg-page);
}

.asp-main-inner {
  max-width: 880px;
  margin: 0 auto;
  animation: fadeUp 0.25s ease-out both;
}

/* ── Page header ──────────────────────────────────────────────── */
.asp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 20px;
}

.asp-page-header-left {
  flex: 1;
  min-width: 0;
}

.asp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-40);
  text-decoration: none;
  margin-bottom: 10px;
  font-family: var(--f-sans);
  transition: color 0.13s;
}

.asp-back-link:hover { color: var(--accent); }

.asp-page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  color: var(--ink);
}

.asp-page-subtitle {
  font-size: 13px;
  color: var(--ink-70);
}

/* ── Connection tabs ──────────────────────────────────────────── */
.asp-conn-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

.asp-conn-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px 12px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-40);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.13s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.asp-conn-tab:focus { outline: none; }

.asp-conn-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.asp-conn-tab:hover { color: var(--ink-70); }

.asp-conn-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Pane header ──────────────────────────────────────────────── */
.asp-conn-pane {
  /* no extra styles needed — content flows naturally */
}

.asp-conn-pane-header {
  margin-bottom: 18px;
}

.asp-conn-pane-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
  color: var(--ink);
}

.asp-conn-pane-desc {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.5;
  max-width: 640px;
}

.asp-conn-pane-desc code {
  font-family: var(--f-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Form fields ──────────────────────────────────────────────── */
.asp-field {
  margin-bottom: 14px;
}

.asp-field:last-child { margin-bottom: 0; }

.asp-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-70);
  margin-bottom: 6px;
}

.asp-field-hint {
  font-size: 11px;
  color: var(--ink-40);
  font-weight: 400;
  margin-left: 6px;
}

.asp-field-helptext {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.45;
}

.asp-field-helptext code {
  font-family: var(--f-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Text inputs ──────────────────────────────────────────────── */
.asp-text-input,
.asp-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius, 8px);
  font-family: var(--f-sans);
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.asp-text-input:focus,
.asp-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border);
}

.asp-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.asp-textarea-code {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.55;
  min-height: 200px;
  background: var(--surface-2);
}

/* ── Environment variables ────────────────────────────────────── */
.asp-env-vars-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.asp-env-var-row {
  display: grid;
  grid-template-columns: 200px 1fr 32px;
  gap: 8px;
  align-items: center;
}

.asp-env-var-key,
.asp-env-var-val {
  font-family: var(--f-mono);
  font-size: 11.5px;
}

.asp-env-var-remove {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.13s;
  flex-shrink: 0;
}

.asp-env-var-remove:hover {
  border-color: var(--rose, #e11d48);
  color: var(--rose, #e11d48);
  background: var(--rose-bg, #fff1f2);
}

.asp-env-var-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: all 0.13s;
}

.asp-env-var-add:hover {
  background: var(--accent-bg);
  border-style: solid;
}

/* ── Validation result ────────────────────────────────────────── */
.asp-validation-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius, 8px);
  border: 1px solid;
  margin-top: 18px;
}

.asp-validation-success {
  background: var(--emerald-bg, #ecfdf5);
  border-color: var(--emerald-rule, rgba(5, 150, 105, 0.18));
}

.asp-validation-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--emerald, #059669);
  color: white;
}

.asp-validation-body { flex: 1; }

.asp-validation-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emerald, #059669);
  margin-bottom: 2px;
}

.asp-validation-detail {
  font-size: 11.5px;
  color: var(--ink-70);
  line-height: 1.5;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.asp-btn {
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius, 8px);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.asp-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.asp-btn-primary {
  background: var(--accent);
  color: white;
}

.asp-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.asp-btn-ghost {
  background: var(--surface);
  color: var(--ink-70);
  border: 1px solid var(--rule);
}

.asp-btn-ghost:hover:not(:disabled) {
  border-color: var(--rule-2);
  color: var(--ink);
}

/* ── Sticky footer ────────────────────────────────────────────── */
.asp-sticky-footer {
  position: fixed;
  bottom: 0;
  left: var(--rail-w, 56px);
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
  z-index: 50;
}

.asp-sticky-footer-left {
  margin-right: auto;
  font-size: 12px;
  color: var(--ink-40);
}

.asp-sticky-footer-left.asp-footer-error {
  color: var(--rose, #e11d48);
}


/* ── Server Health page ── */

.infrastructure-page .server-health-page {
  width: 100%;
}

.infrastructure-page .sh-page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;
}

.infrastructure-page .server-health-loading,
.infrastructure-page .server-health-error {
  font-size: 13px;
  color: var(--ink-70);
  padding: 20px 0;
}

.infrastructure-page .server-health-error {
  color: var(--rose);
}

/* ── No-audit state ── */

.infrastructure-page .server-health-empty {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.infrastructure-page .server-health-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.infrastructure-page .server-health-empty-sub {
  font-size: 12px;
  color: var(--ink-70);
  margin-bottom: 4px;
}

/* ── No-findings state ── */

.infrastructure-page .sh-no-findings {
  font-size: 13px;
  color: var(--ink-70);
  padding: 20px 0;
}

/* ── Page header actions ── */

.infrastructure-page .server-health-page .sh-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Hero card ── */

.infrastructure-page .sh-hero-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg, 12px);
  padding: 24px 28px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.infrastructure-page .sh-hero-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
  flex-shrink: 0;
}

.infrastructure-page .sh-hero-number {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.infrastructure-page .sh-hero-number.red   { color: var(--rose); }
.infrastructure-page .sh-hero-number.amber { color: var(--amber, #d97706); }
.infrastructure-page .sh-hero-number.green { color: var(--green, #22a55b); }

.infrastructure-page .sh-hero-denom {
  font-size: 16px;
  color: var(--ink-50);
  font-weight: 500;
}

.infrastructure-page .sh-hero-summary {
  flex: 1;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.infrastructure-page .sh-hero-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.infrastructure-page .sh-hero-label-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infrastructure-page .sh-hero-label-icon.red,
.infrastructure-page .sh-hero-label-icon.amber {
  background: var(--amber-bg, #fffbeb);
  color: var(--amber, #d97706);
}

.infrastructure-page .sh-hero-label-icon.green {
  background: var(--green-bg, #ecfdf3);
  color: var(--green, #22a55b);
}

.infrastructure-page .sh-hero-label-icon svg { width: 9px; height: 9px; }

.infrastructure-page .sh-hero-label-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.infrastructure-page .sh-hero-label-text.red   { color: var(--rose); }
.infrastructure-page .sh-hero-label-text.amber { color: var(--amber, #d97706); }
.infrastructure-page .sh-hero-label-text.green { color: var(--green, #22a55b); }

.infrastructure-page .sh-hero-description {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.55;
}

/* ── Scores by job ── */

.infrastructure-page .sh-subjobs-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.infrastructure-page .sh-subjobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.infrastructure-page .sh-subjob-card {
  background: var(--color-background-primary, var(--surface));
  border: 0.5px solid var(--color-border-tertiary, var(--rule));
  border-radius: var(--border-radius-lg, var(--radius-lg, 12px));
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infrastructure-page .sh-subjob-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.infrastructure-page .sh-subjob-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.infrastructure-page .sh-subjob-count {
  font-size: 11px;
  color: var(--color-text-tertiary, var(--ink-50));
  white-space: nowrap;
}

.infrastructure-page .sh-subjob-score-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.infrastructure-page .sh-subjob-score {
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.infrastructure-page .sh-subjob-score.green { color: var(--green, #22a55b); }
.infrastructure-page .sh-subjob-score.amber { color: var(--amber, #d97706); }
.infrastructure-page .sh-subjob-score.red   { color: var(--rose); }

.infrastructure-page .sh-subjob-denom {
  font-size: 12px;
  color: var(--color-text-tertiary, var(--ink-50));
}

.infrastructure-page .sh-subjob-bar-track {
  height: 4px;
  background: var(--color-background-tertiary, rgba(14,14,16,0.08));
  border-radius: 2px;
  overflow: hidden;
}

.infrastructure-page .sh-subjob-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.infrastructure-page .sh-subjob-bar-fill.green { background: var(--green, #22a55b); }
.infrastructure-page .sh-subjob-bar-fill.amber { background: var(--amber, #d97706); }
.infrastructure-page .sh-subjob-bar-fill.red   { background: var(--rose); }

.infrastructure-page .sh-subjob-subtitle {
  font-size: 12px;
  color: var(--color-text-secondary, var(--ink-70));
  line-height: 1.4;
}

/* ── Findings section header ── */

.infrastructure-page .sh-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.infrastructure-page .sh-section-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.infrastructure-page .sh-section-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.infrastructure-page .sh-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.infrastructure-page .sh-section-sub {
  font-size: 11.5px;
  color: var(--ink-70);
  margin-top: 2px;
}

/* ── Filter pills ── */

.infrastructure-page .sh-filter-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.infrastructure-page .sh-pill {
  padding: 5px 11px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.infrastructure-page .sh-pill:hover {
  background: var(--surface-2, var(--bg-page));
  color: var(--ink);
}

.infrastructure-page .sh-pill.active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* ── Severity divider ── */

.infrastructure-page .sh-severity-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
}

.infrastructure-page .sh-severity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.infrastructure-page .sh-severity-dot.critical { background: var(--rose); }
.infrastructure-page .sh-severity-dot.warning  { background: var(--amber, #d97706); }
.infrastructure-page .sh-severity-dot.info     { background: var(--ink-50); }

.infrastructure-page .sh-severity-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.infrastructure-page .sh-severity-label.critical { color: var(--rose); }
.infrastructure-page .sh-severity-label.warning  { color: var(--amber, #d97706); }
.infrastructure-page .sh-severity-label.info     { color: var(--ink-70); }

.infrastructure-page .sh-severity-rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── Finding card ── */

.infrastructure-page .sh-finding {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.infrastructure-page .sh-finding:hover {
  border-color: var(--ink-20, rgba(14,14,16,0.2));
}

.infrastructure-page .sh-finding.expanded {
  cursor: default;
}

.infrastructure-page .sh-finding-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.infrastructure-page .sh-finding-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infrastructure-page .sh-finding-icon svg { width: 9px; height: 9px; display: block; }

.infrastructure-page .sh-finding-icon.critical {
  background: var(--red-bg, #fef2f2);
  color: var(--rose);
}

.infrastructure-page .sh-finding-icon.warning {
  background: var(--amber-bg, #fffbeb);
  color: var(--amber, #d97706);
}

.infrastructure-page .sh-finding-icon.info {
  background: rgba(14,14,16,0.06);
  color: var(--ink-70);
}

.infrastructure-page .sh-severity-text {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.infrastructure-page .sh-severity-text.critical { color: var(--rose); }
.infrastructure-page .sh-severity-text.warning  { color: var(--amber, #d97706); }
.infrastructure-page .sh-severity-text.info     { color: var(--ink-70); }

.infrastructure-page .sh-category-pill {
  padding: 2px 7px;
  background: var(--surface-2, var(--bg-page));
  color: var(--ink-70);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.infrastructure-page .sh-dot-sep {
  font-size: 10px;
  color: var(--ink-50);
  flex-shrink: 0;
}

.infrastructure-page .sh-sub-detection {
  font-size: 11px;
  color: var(--ink-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.infrastructure-page .sh-rollup-badge {
  padding: 2px 8px;
  background: var(--accent-bg, #edf2f9);
  color: var(--accent, #5b7fb5);
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.infrastructure-page .sh-chevron {
  margin-left: auto;
  color: var(--ink-50);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.infrastructure-page .sh-chevron svg { width: 13px; height: 13px; display: block; }

.infrastructure-page .sh-chevron.open {
  transform: rotate(180deg);
}

.infrastructure-page .sh-finding-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}

.infrastructure-page .sh-finding-title code {
  font-family: var(--f-mono);
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  padding: 0.5px 5px;
  border-radius: 3px;
  font-size: 11.5px;
  color: var(--ink);
}

.infrastructure-page .sh-finding-body {
  margin-bottom: 14px;
}

.infrastructure-page .sh-finding-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, var(--rule));
  font-size: 11.5px;
  color: var(--ink-50);
}

.infrastructure-page .sh-finding-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.infrastructure-page .sh-finding-footer-spacer { flex: 1; }

.infrastructure-page .sh-finding-hint {
  font-size: 11px;
  color: var(--ink-50);
}

/* ── Evidence blocks ── */

.infrastructure-page .sh-evidence-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  margin-top: 14px;
}

.infrastructure-page .sh-finding-body > div > .sh-evidence-label:first-child {
  margin-top: 0;
}

.infrastructure-page .sh-evidence-inline {
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 2px;
}

.infrastructure-page .sh-recommendation {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 2px;
}

.infrastructure-page .sh-recommendation code,
.infrastructure-page .sh-finding-body code {
  font-family: var(--f-mono);
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  padding: 0.5px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--ink);
}

/* Rollup stats line */
.infrastructure-page .sh-rollup-stats {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  flex-wrap: wrap;
}

.infrastructure-page .sh-rollup-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.infrastructure-page .sh-rollup-stat-of {
  font-size: 11px;
  color: var(--ink-50);
}

.infrastructure-page .sh-rollup-stat-lbl {
  font-size: 12px;
  color: var(--ink-70);
}

.infrastructure-page .sh-rollup-avg {
  font-size: 11.5px;
  color: var(--ink-50);
}

/* Tool list */
.infrastructure-page .sh-tool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.infrastructure-page .sh-tool-row {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}

.infrastructure-page .sh-tool-overflow {
  font-size: 11.5px;
  color: var(--ink-50);
  margin-top: 2px;
  font-style: italic;
}

/* Marker chips */
.infrastructure-page .sh-marker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.infrastructure-page .sh-marker-chip {
  font-size: 11.5px;
  color: var(--ink-70);
}

/* Similarity rows */
.infrastructure-page .sh-similarity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light, var(--rule));
}

.infrastructure-page .sh-similarity-row:last-child { border-bottom: none; }

.infrastructure-page .sh-similarity-row-name {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infrastructure-page .sh-similarity-bar {
  width: 120px;
  height: 4px;
  background: rgba(14,14,16,0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.infrastructure-page .sh-similarity-bar-fill {
  height: 100%;
  background: var(--amber, #d97706);
  border-radius: 2px;
}

.infrastructure-page .sh-similarity-value {
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-70);
  font-size: 10.5px;
  font-family: var(--f-mono);
  flex-shrink: 0;
}

.infrastructure-page .sh-schema-sim {
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-50);
  font-size: 10.5px;
  font-family: var(--f-mono);
  flex-shrink: 0;
}

.infrastructure-page .sh-grouped-detail {
  font-size: 11px;
  color: var(--ink-50);
  font-family: var(--f-mono);
  flex: 1;
  min-width: 0;
  white-space: normal;
  text-align: left;
  line-height: 1.6;
}

/* Grouped evidence rows: tool name pinned left, detail wraps freely */
.infrastructure-page .sh-similarity-row.sh-grouped-row {
  align-items: flex-start;
}

.infrastructure-page .sh-similarity-row.sh-grouped-row .sh-similarity-row-name {
  flex: 0 0 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 1px; /* optical alignment with first chip line */
}

/* Param grid */
.infrastructure-page .sh-param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 2px;
}

.infrastructure-page .sh-param-col {
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.infrastructure-page .sh-param-col-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-50);
  margin-bottom: 6px;
}

.infrastructure-page .sh-param-name {
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 4px;
  font-family: var(--f-mono);
}

.infrastructure-page .sh-param-tools {
  font-size: 10.5px;
  color: var(--ink-50);
  line-height: 1.5;
}

/* Description text */
.infrastructure-page .sh-description-text {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-70);
  padding: 12px 16px;
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: 2px;
}

/* Desc stat row */
.infrastructure-page .sh-desc-stat-row {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-70);
}

.infrastructure-page .sh-desc-stat-row strong {
  color: var(--ink);
  font-weight: 600;
}

/* Code block */
.infrastructure-page .sh-code-block {
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 2px;
}

/* ── Collapsed-rest ── */

.infrastructure-page .sh-collapsed-rest {
  text-align: center;
  padding: 9px;
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-md);
  font-size: 11.5px;
  color: var(--ink-50);
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, color 0.12s;
}

.infrastructure-page .sh-collapsed-rest:hover {
  background: var(--surface-2, var(--bg-page));
  color: var(--ink-70);
}

/* ── Fix-class badges ── */
/* Base shape copies .sh-category-pill exactly */
.infrastructure-page .sh-fix-badge {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}

.infrastructure-page .sh-fix-badge--auto {
  background: var(--emerald-bg);
  color: var(--emerald);
  border-color: var(--emerald-rule);
}

.infrastructure-page .sh-fix-badge--advisory {
  background: var(--surface-2, var(--bg-page));
  color: var(--ink-40);
  border-color: var(--rule);
}

.infrastructure-page .sh-fix-badge--assisted {
  background: var(--accent-bg, #edf2f9);
  color: var(--accent, #5b7fb5);
  border-color: rgba(91, 127, 181, 0.2);
}

.infrastructure-page .sh-fix-badge--generated {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-rule);
}

.infrastructure-page .sh-fix-badge--fixed {
  background: var(--emerald-bg);
  color: var(--emerald);
  border-color: var(--emerald-rule);
}

/* ── Apply fix button ── */
/* Compact pill matching the .sh-pill filter buttons, emerald-tinted */
.infrastructure-page .sh-apply-btn {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius, 6px);
  background: var(--emerald-bg);
  color: var(--emerald);
  border: 1px solid var(--emerald-rule);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  letter-spacing: 0.2px;
}

.infrastructure-page .sh-apply-btn:hover:not(:disabled) {
  background: var(--emerald);
  color: #fff;
  border-color: var(--emerald);
}

.infrastructure-page .sh-apply-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Bulk apply button ── */
/* Sits in the section-header row; styled like .sh-pill but filled emerald */
.infrastructure-page .sh-bulk-apply-btn {
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--radius, 6px);
  background: var(--emerald);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s;
  flex-shrink: 0;
}

.infrastructure-page .sh-bulk-apply-btn:hover:not(:disabled) {
  background: #047857;
}

.infrastructure-page .sh-bulk-apply-btn:disabled,
.infrastructure-page .sh-bulk-apply-btn.loading {
  opacity: 0.6;
  cursor: default;
}

/* ── Applied finding state ── */
.infrastructure-page .sh-finding.sh-applied {
  border-color: var(--emerald-rule);
  background: var(--emerald-bg);
  opacity: 0.8;
}

.infrastructure-page .sh-finding.sh-applied:hover {
  border-color: var(--emerald-rule);
}

.infrastructure-page .sh-finding-icon--fixed {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.infrastructure-page .sh-finding-title--applied {
  text-decoration: line-through;
  color: var(--ink-50);
}

/* ── Projected score in hero card ── */
.infrastructure-page .sh-hero-projected {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 8px;
}

.infrastructure-page .sh-hero-projected-arrow {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-50);
  line-height: 1;
}

.infrastructure-page .sh-hero-projected-num {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--emerald);
  transition: all 0.3s ease-out;
}

.infrastructure-page .sh-hero-projected-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--emerald);
  white-space: nowrap;
}

/* ── Re-audit / Reset buttons ── */
.infrastructure-page .sh-reaudit-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.infrastructure-page .sh-reset-btn {
  color: var(--ink-50);
}

.infrastructure-page .sh-reset-btn:hover {
  color: var(--rose);
  border-color: var(--rose);
  background: var(--red-bg, #fef2f2);
}

/* ── Change diff (shown in expanded applied card) ── */
.infrastructure-page .sh-diff-wrap {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light, var(--rule));
}

.infrastructure-page .sh-diff-block {
  margin-bottom: 8px;
}

.infrastructure-page .sh-diff-block:last-child {
  margin-bottom: 0;
}

.infrastructure-page .sh-diff-tool-name {
  font-size: 10.5px;
  font-family: var(--f-mono);
  color: var(--ink-50);
  margin-bottom: 4px;
}

.infrastructure-page .sh-diff-before,
.infrastructure-page .sh-diff-after {
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  position: relative;
}

.infrastructure-page .sh-diff-before {
  background: var(--surface-2, var(--bg-page));
  color: var(--ink-70);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.infrastructure-page .sh-diff-after {
  background: var(--emerald-bg);
  color: var(--ink);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-color: var(--emerald-rule);
}

.infrastructure-page .sh-diff-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 8px;
  opacity: 0.5;
}

.infrastructure-page .sh-diff-schema-note {
  font-size: 12px;
  color: var(--ink-70);
  padding: 8px 12px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-rule);
  border-radius: var(--radius-md);
}


/* ── Audit modals — scoped under .infrastructure-page ── */

/* Narrow card shared by both modals */
.infrastructure-page .audit-modal-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--rule);
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 32px 28px;
  gap: 0;
  box-shadow: 0 32px 80px rgba(14, 14, 16, .22);
  transform: translateY(12px);
  transition: transform .28s var(--ease);
}

.infrastructure-page .modal-backdrop.show .audit-modal-card {
  transform: translateY(0);
}

/* Icon row */
.infrastructure-page .audit-modal-icon-row {
  margin-bottom: 18px;
}

.infrastructure-page .audit-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2, var(--bg-page));
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-70);
}

.infrastructure-page .audit-modal-icon.error {
  color: var(--rose);
  border-color: var(--rose);
  background: rgba(var(--red-rgb, 220, 53, 53), 0.08);
}

/* Spinning arc animation */
@keyframes audit-spin {
  to { transform: rotate(360deg); }
}

.infrastructure-page .audit-modal-icon.spinning svg {
  animation: audit-spin 0.9s linear infinite;
}

/* Text */
.infrastructure-page .audit-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.infrastructure-page .audit-modal-body {
  font-size: 12px;
  color: var(--ink-70);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 300px;
}

.infrastructure-page .audit-modal-error-msg {
  color: var(--rose);
}

/* Footer buttons */
.infrastructure-page .audit-modal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* Stage list (progress modal) */
.infrastructure-page .audit-stage-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}

.infrastructure-page .audit-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.infrastructure-page .audit-stage-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infrastructure-page .audit-stage-label {
  font-size: 12px;
  color: var(--ink-50);
  transition: color 0.15s;
}

.infrastructure-page .audit-stage-row.done .audit-stage-label {
  color: var(--ink-70);
}

.infrastructure-page .audit-stage-row.done .audit-stage-icon {
  color: var(--green, #3dba6f);
}

.infrastructure-page .audit-stage-row.active .audit-stage-label {
  color: var(--ink);
}

.infrastructure-page .audit-stage-dot-active {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--blue, #5b8cf5));
  animation: audit-pulse 1s ease-in-out infinite;
}

.infrastructure-page .audit-stage-dot-pending {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
}

@keyframes audit-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Progress bar */
.infrastructure-page .audit-progress-bar-track {
  width: 100%;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.infrastructure-page .audit-progress-bar-fill {
  height: 100%;
  background: var(--accent, var(--blue, #5b8cf5));
  border-radius: 2px;
  transition: width 0.7s var(--ease);
}


.knowledge-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height));
}

@keyframes expandDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.knowledge-page .page-header {
  align-items: center;
}

.knowledge-page .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  padding: 7px 13px;
  width: 220px;
  transition: all .14px;
  color: var(--ink-40);
}

.knowledge-page .search-box:focus-within {
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.knowledge-page .search-box input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}

.knowledge-page .search-box input::placeholder { color: var(--ink-20); }

.knowledge-page .btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .13s;
  appearance: none;
  -webkit-appearance: none;
}

.knowledge-page .btn:hover {
  background: var(--bg-page);
  border-color: var(--accent-solid);
  color: var(--ink);
}

.knowledge-page .btn.prime {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
}

.knowledge-page .btn.prime:hover {
  background: #1c1c22;
  box-shadow: 0 4px 14px rgba(14, 14, 16, .2);
}

.knowledge-page .stats-row {
  display: flex;
  gap: 8px;
  padding: 12px 28px 0;
  flex-shrink: 0;
  animation: fadeUp .4s var(--ease) .05s both;
}

.knowledge-page .stat-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-70);
  font-weight: 500;
}

.knowledge-page .scv {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}

.knowledge-page .scv-good { color: var(--emerald); }

.knowledge-page .filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px 0;
  flex-shrink: 0;
}

.knowledge-page .filter-row {
  --seg-inset: 2px;
  display: grid;
  align-items: center;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: var(--seg-inset);
  overflow: hidden;
  height: 34px;
}

.knowledge-page .filter-row:first-child {
  --seg-count: 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-page .filter-row:last-child {
  --seg-count: 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.knowledge-page .filter-row .fp {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: color 0.16s var(--ease);
}

.knowledge-page .filter-row .slide-indicator {
  position: absolute;
  top: var(--seg-inset);
  bottom: var(--seg-inset);
  left: var(--seg-inset);
  width: calc((100% - (var(--seg-inset) * 2)) / var(--seg-count));
  border-radius: 6px;
  background: var(--ink);
  transform: translateX(calc(var(--slide-index, 0) * 100%));
  transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
  pointer-events: none;
}

.knowledge-page .filter-row.no-active .slide-indicator {
  opacity: 0;
}

.knowledge-page .filter-row .fp.on {
  background: transparent;
  color: #fff;
}

.knowledge-page .filter-row .fp:focus-visible {
  outline: none;
  box-shadow: none;
}


.knowledge-page .filter-sep {
  width: 1px;
  height: 16px;
  background: var(--rule-2);
  margin: 0 2px;
}

.knowledge-page .body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.knowledge-page .body-scroll::-webkit-scrollbar { width: 4px; }
.knowledge-page .body-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); }

.new-coll-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--surface);
  border: 1.5px dashed var(--rule-2);
  border-radius: 12px;
  cursor: pointer;
  transition: all .14s;
  color: var(--ink-40);
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.new-coll-row:hover {
  border-color: var(--ink-40);
  background: var(--ink-03);
  color: var(--ink-70);
}

.ncr-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px dashed var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .14s;
}

.new-coll-row:hover .ncr-icon { border-color: var(--ink-40); }
.ncr-label { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.ncr-sub { font-size: 12px; color: var(--ink-20); }

.upload-modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, .4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.upload-modal.show {
  opacity: 1;
  pointer-events: all;
}

.um-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--rule-2);
  width: 480px;
  box-shadow: 0 24px 80px rgba(14, 14, 16, .16);
  transform: translateY(10px);
  transition: transform .25s var(--ease);
  overflow: hidden;
}

.upload-modal.show .um-card { transform: translateY(0); }
.um-head {
  padding: 20px 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.um-title { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 3px; }
.um-sub { font-size: 12.5px; color: var(--ink-40); }

.um-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  transition: all .12s;
  flex-shrink: 0;
}

.um-close:hover { background: var(--ink-06); color: var(--ink-70); }

.um-drop {
  margin: 16px 22px;
  padding: 28px 20px;
  border: 2px dashed var(--rule-2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .16s;
  text-align: center;
}

.um-drop:hover, .um-drop.drag {
  border-color: var(--accent-solid);
  background: var(--ink-03);
}

.um-drop-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
}

.um-drop-label { font-size: 13.5px; font-weight: 600; color: var(--ink-70); letter-spacing: -0.01em; }
.um-drop-sub { font-size: 12px; color: var(--ink-40); }

.um-types { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.um-type {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--f-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ink-06);
  color: var(--ink-40);
}

.um-body {
  padding: 0 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.um-body-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
  margin-bottom: 2px;
}

.um-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}

.um-footer {
  padding: 14px 22px 18px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

.um-btn {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  transition: all .13s;
}

.um-btn:hover { background: var(--bg-page); color: var(--ink); }
.um-btn.prime {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.um-btn.prime:hover { background: #1c1c22; }


.knowledge-page .coll-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeUp .4s var(--ease) both;
}

.knowledge-page .coll-group:nth-child(1) { animation-delay: .04s; }
.knowledge-page .coll-group:nth-child(2) { animation-delay: .08s; }
.knowledge-page .coll-group:nth-child(3) { animation-delay: .12s; }
.knowledge-page .coll-group:nth-child(4) { animation-delay: .16s; }

.knowledge-page .coll-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
  transition: all .14s var(--ease);
  user-select: none;
}

.knowledge-page .coll-head:hover {
  border-color: var(--rule-2);
  box-shadow: 0 2px 8px var(--ink-06);
}

.knowledge-page .coll-head.open {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}

.knowledge-page .ch-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .18s var(--ease);
}

.knowledge-page .coll-head:hover .ch-icon { transform: scale(1.04); }

.knowledge-page .ch-info { flex: 1; min-width: 0; }
.knowledge-page .ch-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 2px;
}

.knowledge-page .ch-meta {
  font-size: 11.5px;
  color: var(--ink-40);
}

.knowledge-page .ch-embed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
  flex-shrink: 0;
}

.knowledge-page .ch-embed-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.knowledge-page .ch-embed-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.knowledge-page .ch-embed-pct { font-size: 11px; font-weight: 600; }
.knowledge-page .ch-embed-pct.full { color: var(--emerald); }
.knowledge-page .ch-embed-pct.partial { color: var(--amber); }

.knowledge-page .ch-embed-track {
  height: 4px;
  background: var(--ink-06);
  border-radius: 2px;
  overflow: hidden;
}

.knowledge-page .ch-embed-fill {
  height: 100%;
  border-radius: 2px;
  transform-origin: left center;
  animation: barGrow .8s var(--ease) .3s both;
}

.knowledge-page .cef-full { background: var(--emerald); }
.knowledge-page .cef-partial { background: var(--amber); }
.knowledge-page .ce-w100 { width: 100%; }
.knowledge-page .ce-w64 { width: 64%; }

.knowledge-page .ch-agents {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.knowledge-page .agent-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ink-06);
  color: var(--ink-70);
  border: 1px solid var(--rule);
}

.knowledge-page .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}

.knowledge-page .sb-ready { background: var(--emerald-bg); color: var(--emerald); }
.knowledge-page .sb-indexing { background: var(--amber-bg); color: var(--amber); }
.knowledge-page .sb-error { background: var(--rose-bg); color: var(--rose); }

.knowledge-page .sb-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.knowledge-page .sb-indexing .sb-dot { animation: pulse 1.2s ease infinite; }

.knowledge-page .ch-chevron {
  color: var(--ink-20);
  flex-shrink: 0;
  transition: transform .22s var(--ease);
}

.knowledge-page .coll-head.open .ch-chevron { transform: rotate(180deg); }

.knowledge-page .ch-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .14s;
  flex-shrink: 0;
}

.knowledge-page .coll-head:hover .ch-actions { opacity: 1; }

.knowledge-page .ch-act-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}

.knowledge-page .ch-act-btn:hover {
  background: var(--bg-page);
  color: var(--ink);
}


.knowledge-page .doc-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule-2);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  display: none;
  animation: expandDown .22s var(--ease) both;
}

.knowledge-page .doc-list.open { display: block; }

.knowledge-page .upload-zone {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: background .12s;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.knowledge-page .upload-zone:hover { background: var(--ink-03); }

.knowledge-page .uz-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink-06);
  border: 1.5px dashed var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  flex-shrink: 0;
  transition: all .12s;
}

.knowledge-page .upload-zone:hover .uz-icon {
  border-color: var(--accent-solid);
  color: var(--ink-70);
}

.knowledge-page .uz-text { font-size: 12.5px; color: var(--ink-40); }
.knowledge-page .uz-text strong { color: var(--ink-70); font-weight: 500; }

.knowledge-page .uz-btn {
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.knowledge-page .uz-btn:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.knowledge-page .doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .1s;
  position: relative;
  animation: fadeUp .3s var(--ease) both;
}

.knowledge-page .doc-row:hover { background: var(--surface-2); }
.knowledge-page .doc-row:last-child { border-bottom: none; }
.knowledge-page .doc-row:nth-child(2) { animation-delay: .04s; }
.knowledge-page .doc-row:nth-child(3) { animation-delay: .07s; }
.knowledge-page .doc-row:nth-child(4) { animation-delay: .10s; }
.knowledge-page .doc-row:nth-child(5) { animation-delay: .13s; }
.knowledge-page .doc-row:nth-child(6) { animation-delay: .16s; }

.knowledge-page .file-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.knowledge-page .fp-pdf { background: var(--rose-bg); color: var(--rose); }
.knowledge-page .fp-md { background: var(--emerald-bg); color: var(--emerald); }
.knowledge-page .fp-txt { background: var(--surface-2); color: var(--ink-40); border: 1px solid var(--rule); }
.knowledge-page .fp-csv { background: var(--blue-bg); color: var(--blue); }
.knowledge-page .fp-json { background: var(--violet-bg); color: var(--violet); }

.knowledge-page .doc-info { flex: 1; min-width: 0; }
.knowledge-page .doc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.knowledge-page .doc-meta { font-size: 11px; color: var(--ink-40); }

.knowledge-page .doc-embed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 70px;
  flex-shrink: 0;
}

.knowledge-page .de-top { display: flex; align-items: center; justify-content: space-between; }
.knowledge-page .de-pct { font-size: 10.5px; font-weight: 600; }
.knowledge-page .de-pct.full { color: var(--emerald); }
.knowledge-page .de-pct.partial { color: var(--amber); }

.knowledge-page .de-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--ink-06);
  overflow: hidden;
}

.knowledge-page .de-fill {
  height: 100%;
  border-radius: 2px;
  transform-origin: left center;
  animation: barGrow .7s var(--ease) .2s both;
}

.knowledge-page .def-full { background: var(--emerald); }
.knowledge-page .def-partial { background: var(--amber); }
.knowledge-page .de-w100 { width: 100%; }
.knowledge-page .de-w38 { width: 38%; }
.knowledge-page .de-w0 { width: 0%; }

.knowledge-page .doc-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s;
  flex-shrink: 0;
}

.knowledge-page .doc-row:hover .doc-actions { opacity: 1; }

.knowledge-page .da-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  cursor: pointer;
  transition: all .12s;
  appearance: none;
  -webkit-appearance: none;
}

.knowledge-page .da-btn:hover {
  background: var(--bg-page);
  border-color: var(--accent-solid);
  color: var(--ink);
}

.knowledge-page .da-btn.del:hover {
  background: var(--rose-bg);
  border-color: var(--rose-rule);
  color: var(--rose);
}


.artifact-page {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: calc(100vh - var(--topbar-height));
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.artifact-page .page-header {
  align-items: flex-start;
  margin-bottom: 16px;
}

.artifact-page .stat-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-70);
}

.artifact-page .stat-chip strong { color: var(--ink); font-weight: 600; }

.artifact-page .btn-new {
  height: 36px;
  padding: 0 18px;
  border-radius: 9px;
  background: var(--ink);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .13s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.artifact-page .btn-new:hover { background: #1c1c22; }

.artifact-page .toolbar {
  padding: 0 28px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.artifact-page .search-wrap { position: relative; flex: 1; max-width: 360px; }
.artifact-page .search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-20);
}

.artifact-page .search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all .13s;
}

.artifact-page .search-input:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow); }
.artifact-page .search-input::placeholder { color: var(--ink-20); }

.artifact-page .toolbar .filter-row {
  --seg-count: 5;
  --seg-inset: 2px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: var(--seg-inset);
  overflow: hidden;
  height: 34px;
}

.artifact-page .toolbar .filter-row .fp {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: color 0.16s var(--ease);
}

.artifact-page .toolbar .filter-row .slide-indicator {
  position: absolute;
  top: var(--seg-inset);
  bottom: var(--seg-inset);
  left: var(--seg-inset);
  width: calc((100% - (var(--seg-inset) * 2)) / var(--seg-count));
  border-radius: 6px;
  background: var(--ink);
  transform: translateX(calc(var(--slide-index, 0) * 100%));
  transition: transform 0.24s var(--ease);
  pointer-events: none;
}

.artifact-page .toolbar .filter-row .fp.on {
  background: transparent;
  color: #fff;
}

.artifact-page .toolbar .filter-row .fp:focus-visible {
  outline: none;
  box-shadow: none;
}

.artifact-page .result-count { font-size: 12px; color: var(--ink-40); margin-left: auto; }

.artifact-page .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 28px 20px;
}

.artifact-page .table-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.artifact-page .table-head {
  display: grid;
  grid-template-columns: 2.2fr 80px 110px 1.4fr 110px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.artifact-page .th {
  padding: 9px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-20);
}

.artifact-page .table-scroll { flex: 1; overflow-y: auto; }
.artifact-page .table-scroll::-webkit-scrollbar { width: 4px; }
.artifact-page .table-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); }

.artifact-page.drawer-open .table-wrap {
  pointer-events: none;
}

.artifact-page .empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-20);
}

.artifact-page .es-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.artifact-page .es-label { font-size: 13px; color: var(--ink-40); }
.artifact-page .es-sub { font-size: 12px; color: var(--ink-20); }

.artifact-page .artifact-fields-editor { display: flex; flex-direction: column; gap: 8px; }
.artifact-page .artifact-field-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-2);
}

.artifact-page .artifact-field-grid { display: grid; grid-template-columns: 1.5fr 110px; gap: 8px; }
.artifact-page .artifact-field-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.artifact-page .artifact-field-required { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-70); }
.artifact-page .artifact-field-remove {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-40);
  font-size: 12px;
}

.artifact-page .modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, .4);
  backdrop-filter: blur(5px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.artifact-page .modal-bg.show { opacity: 1; pointer-events: all; }

.artifact-page .modal {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--rule-2);
  width: 460px;
  box-shadow: 0 24px 64px rgba(14, 14, 16, .15);
  transform: translateY(10px);
  transition: transform .25s var(--ease);
}

.artifact-page .modal-bg.show .modal { transform: translateY(0); }

.artifact-page .mh {
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.artifact-page .mh-title { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 3px; }
.artifact-page .mh-sub { font-size: 13px; color: var(--ink-40); }

.artifact-page .mx {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  transition: all .12s;
  flex-shrink: 0;
}

.artifact-page .mx:hover { background: var(--ink-06); }
.artifact-page .mb { padding: 16px 24px; }
.artifact-page .mf { margin-bottom: 13px; }
.artifact-page .ml { font-size: 12.5px; font-weight: 500; color: var(--ink-70); margin-bottom: 5px; }

.artifact-page .mi {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all .13s;
}

.artifact-page .mi:focus { border-color: var(--accent-solid); }
.artifact-page .mi::placeholder { color: var(--ink-20); }
.artifact-page .mi.sans { font-family: var(--f-sans); }

.artifact-page .mfoot { padding: 12px 24px 18px; display: flex; gap: 8px; justify-content: flex-end; }

.artifact-page .mc {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: all .12s;
}

.artifact-page .mc:hover { background: var(--bg-page); }

.artifact-page .mk {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .13s;
}

.artifact-page .mk:hover { background: #1c1c22; }

#app-main.artifact-main-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}


.artifact-page .ar {
  display: grid;
  grid-template-columns: 2.2fr 80px 110px 1.4fr 110px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .1s;
  position: relative;
  animation: fadeUp .3s var(--ease) both;
  align-items: start;
}

.artifact-page .ar:hover { background: var(--surface-2); }
.artifact-page .ar.sel { background: var(--surface-2); }
.artifact-page .ar:last-child { border-bottom: none; }
.artifact-page .ar:nth-child(1) { animation-delay: .02s; }
.artifact-page .ar:nth-child(2) { animation-delay: .04s; }
.artifact-page .ar:nth-child(3) { animation-delay: .06s; }
.artifact-page .ar:nth-child(4) { animation-delay: .08s; }
.artifact-page .ar:nth-child(5) { animation-delay: .10s; }
.artifact-page .ar:nth-child(6) { animation-delay: .12s; }
.artifact-page .ar:nth-child(7) { animation-delay: .14s; }
.artifact-page .ar:nth-child(8) { animation-delay: .16s; }
.artifact-page .ar:nth-child(9) { animation-delay: .18s; }
.artifact-page .ar:nth-child(10) { animation-delay: .20s; }
.artifact-page .arc { padding: 13px 8px; display: flex; align-items: flex-start; }
.artifact-page .ar .arc:not(:first-child) {
  align-self: start;
  align-items: center;
  padding-top: 13px;
  padding-bottom: 13px;
}

.artifact-page .ar-name-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.artifact-page .ar-name-row { display: flex; align-items: center; gap: 8px; }
.artifact-page .ar-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }

.artifact-page .ar-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 4px;
}

.artifact-page .cat-fs { background: var(--amber-bg); color: var(--amber); }
.artifact-page .cat-db { background: var(--blue-bg); color: var(--blue); }
.artifact-page .cat-br { background: var(--emerald-bg); color: var(--emerald); }
.artifact-page .cat-co { background: var(--violet-bg); color: var(--violet); }
.artifact-page .cat-cu { background: var(--ink-06); color: var(--ink-70); }

.artifact-page .ar-desc {
  font-size: 11.5px;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.artifact-page .chain-hint {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.artifact-page .ar.expanded .chain-hint {
  display: flex;
}
.artifact-page .ch-node { font-size: 11px; color: var(--ink-40); padding: 3px 7px; background: var(--ink-06); border-radius: 5px; }
.artifact-page .ch-node.me { color: var(--ink); background: var(--ink-10); font-weight: 600; }
.artifact-page .ch-node-empty { color: var(--ink-20); }
.artifact-page .ch-arr { font-size: 11px; color: var(--ink-20); }
.artifact-page .ch-artifact { font-size: 10.5px; color: var(--emerald); }

.artifact-page .chain-hint-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-20);
  margin-right: 4px;
}

.artifact-page .vtype { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 5px; }
.artifact-page .vt-string { background: var(--blue-bg); color: var(--blue); }
.artifact-page .vt-object { background: var(--violet-bg); color: var(--violet); }
.artifact-page .vt-array { background: var(--amber-bg); color: var(--amber); }
.artifact-page .vt-file { background: var(--ink-06); color: var(--ink-70); }

.artifact-page .conf-cell { display: flex; align-items: center; gap: 8px; }
.artifact-page .cf-track { width: 44px; height: 4px; background: var(--ink-06); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.artifact-page .cf-fill { height: 100%; border-radius: 2px; }
.artifact-page .cf-fill-high { background: var(--emerald); }
.artifact-page .cf-fill-mid { background: var(--amber); }

.artifact-page .w70 { width: 70%; }
.artifact-page .w75 { width: 75%; }
.artifact-page .w85 { width: 85%; }
.artifact-page .w88 { width: 88%; }
.artifact-page .w90 { width: 90%; }
.artifact-page .w92 { width: 92%; }
.artifact-page .w95 { width: 95%; }
.artifact-page .w98 { width: 98%; }
.artifact-page .w100 { width: 100%; }

.artifact-page .cf-val { font-size: 11.5px; color: var(--ink-70); }

.artifact-page .conn-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.artifact-page .conn-row { display: flex; align-items: center; justify-content: flex-start; gap: 4px; flex-wrap: wrap; }
.artifact-page .conn-label { font-size: 9.5px; font-weight: 700; color: var(--ink-20); letter-spacing: .04em; min-width: 16px; }
.artifact-page .conn-tag {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-70);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.artifact-page .conn-tag.p { background: var(--emerald-bg); border-color: var(--emerald-rule); color: var(--emerald); }
.artifact-page .conn-tag.r { background: var(--blue-bg); border-color: var(--blue-rule); color: var(--blue); }
.artifact-page .conn-more { font-size: 10.5px; color: var(--ink-20); }

.artifact-page .usage { font-size: 12px; color: var(--ink-70); }
.artifact-page .usage.hi { color: var(--emerald); }
.artifact-page .ar .arc:last-of-type {
  justify-content: flex-start;
  padding-right: 64px;
}

.artifact-page .row-acts {
  position: absolute;
  right: 16px;
  top: 20px;
  transform: none;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}

.artifact-page .ar:hover .row-acts { opacity: 1; pointer-events: all; }

.artifact-page .ra-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  cursor: pointer;
  transition: all .12s;
}

.artifact-page .ra-btn:hover { background: var(--bg-page); color: var(--ink); }
.artifact-page .ra-btn.del:hover { background: var(--rose-bg); color: var(--rose); border-color: var(--rose-rule); }


.detail-drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  z-index: 100;
  box-shadow: -8px 0 24px rgba(14, 14, 16, .06);
}

.detail-drawer.open { transform: translateX(0); animation: slideRight .25s var(--ease) both; }
.dd-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.dd-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }

.dd-name-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  padding: 0;
}

.dd-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  transition: all .12s;
  flex-shrink: 0;
}

.dd-close:hover { background: var(--ink-06); }
.dd-cat-row { display: flex; align-items: center; gap: 7px; }

.dd-desc-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--ink-70);
  resize: none;
  line-height: 1.5;
  padding: 0;
  margin-top: 6px;
}

.dd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dd-body::-webkit-scrollbar { width: 4px; }
.dd-body::-webkit-scrollbar-thumb { background: var(--rule-2); }
.dd-sec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dd-sec-dot { width: 5px; height: 5px; border-radius: 50%; }
.dot-violet { background: var(--violet); }
.dot-emerald { background: var(--emerald); }
.dot-blue { background: var(--blue); }
.dot-amber { background: var(--amber); }

.vtype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.vtc {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--rule-2);
  cursor: pointer;
  transition: all .13s;
  background: var(--surface-2);
  text-align: left;
}

.vtc:hover { border-color: var(--accent-solid); }
.vtc.on { background: var(--surface); }
.vtc.vtc-string { border-color: var(--blue-rule); }
.vtc.vtc-object { border-color: var(--violet-rule); }
.vtc.vtc-array { border-color: var(--amber-rule); }
.vtc.vtc-file { border-color: var(--ink-10); }

.vtc.vtc-string.on { border-color: var(--blue); }
.vtc.vtc-object.on { border-color: var(--violet); }
.vtc.vtc-array.on { border-color: var(--amber); }
.vtc.vtc-file.on { border-color: var(--ink-40); }

.vtc.vtc-string.on .vtc-name { color: var(--blue); }
.vtc.vtc-object.on .vtc-name { color: var(--violet); }
.vtc.vtc-array.on .vtc-name { color: var(--amber); }
.vtc.vtc-file.on .vtc-name { color: var(--ink-70); }
.vtc-name { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.vtc-hint { font-size: 11px; color: var(--ink-40); }

.conf-slider-row { display: flex; align-items: center; gap: 10px; }

.conf-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--ink-06);
  border-radius: 2px;
  outline: none;
}

.conf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--ink);
}

.conf-display { font-size: 15px; font-weight: 600; color: var(--emerald); min-width: 36px; text-align: right; }
.conf-hint { font-size: 11.5px; color: var(--ink-40); line-height: 1.5; margin-top: 6px; }

.dd-inline-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dd-inline-label { font-size: 11px; color: var(--ink-40); margin-bottom: 6px; }

.dd-fields { display: flex; flex-direction: column; gap: 8px; }
.dd-field-card {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dd-field-grid { display: grid; grid-template-columns: 1.5fr 110px; gap: 8px; }
.dd-field-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-70); }
.dd-field-remove {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-40);
  font-size: 12px;
}

.tc-list { display: flex; flex-direction: column; gap: 5px; }

.tc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.tci-name { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; }
.tci-server { font-size: 11px; color: var(--ink-40); }

.tci-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.tb-p { background: var(--emerald-bg); color: var(--emerald); }
.tb-r { background: var(--blue-bg); color: var(--blue); }

.spark-row { display: flex; align-items: flex-end; gap: 3px; height: 32px; }

.sp-b {
  width: 10px;
  border-radius: 2px 2px 0 0;
  background: var(--emerald);
  opacity: .35;
  transition: opacity .1s;
}

.sp-b:hover { opacity: .9; }
.sp-b.pk { opacity: .8; }
.h12 { height: 12%; }.h16 { height: 16%; }.h17 { height: 17%; }.h18 { height: 18%; }.h19 { height: 19%; }.h21 { height: 21%; }.h22 { height: 22%; }.h24 { height: 24%; }.h25 { height: 25%; }.h28 { height: 28%; }.h29 { height: 29%; }.h30 { height: 30%; }.h31 { height: 31%; }.h33 { height: 33%; }.h34 { height: 34%; }.h35 { height: 35%; }.h36 { height: 36%; }.h37 { height: 37%; }.h38 { height: 38%; }.h39 { height: 39%; }.h40 { height: 40%; }.h41 { height: 41%; }.h42 { height: 42%; }.h43 { height: 43%; }.h44 { height: 44%; }.h45 { height: 45%; }.h46 { height: 46%; }.h48 { height: 48%; }.h49 { height: 49%; }.h50 { height: 50%; }.h52 { height: 52%; }.h54 { height: 54%; }.h55 { height: 55%; }.h57 { height: 57%; }.h58 { height: 58%; }.h59 { height: 59%; }.h60 { height: 60%; }.h61 { height: 61%; }.h62 { height: 62%; }.h63 { height: 63%; }.h64 { height: 64%; }.h65 { height: 65%; }.h66 { height: 66%; }.h67 { height: 67%; }.h68 { height: 68%; }.h69 { height: 69%; }.h70 { height: 70%; }.h72 { height: 72%; }.h74 { height: 74%; }.h75 { height: 75%; }.h76 { height: 76%; }.h77 { height: 77%; }.h78 { height: 78%; }.h79 { height: 79%; }.h80 { height: 80%; }.h82 { height: 82%; }.h84 { height: 84%; }.h86 { height: 86%; }.h88 { height: 88%; }.h89 { height: 89%; }.h92 { height: 92%; }.h96 { height: 96%; }.h100 { height: 100%; }

.spark-meta { display: flex; justify-content: space-between; margin-top: 6px; }
.sm-val { font-size: 12px; color: var(--ink-70); }
.sm-rate { font-size: 12px; color: var(--emerald); }

.dd-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.dd-save {
  flex: 1;
  height: 36px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .13s;
}

.dd-save:hover { background: #1c1c22; }
.dd-save.ok { background: var(--emerald); }

.dd-del {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--rose-rule);
  background: none;
  color: var(--rose);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .13s;
}

.dd-del:hover { background: var(--rose-bg); }


.tool-policies-page {
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tool-policies-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  padding: 12px 28px 12px;
  flex: 1;
  min-height: 0;
  animation: fadeUp 0.35s var(--ease) .1s both;
}

.tp-autofill-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.tp-autofill-btn:hover { background: var(--surface-2); }
.tp-autofill-btn:disabled { opacity: .55; cursor: default; }

.tool-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tl-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--rule); }
.tl-title { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tl-sub { font-size: 11px; color: var(--ink-40); }

.tl-scroll { flex: 1; overflow-y: auto; }
.tl-scroll::-webkit-scrollbar { width: 3px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); }

.tl-server {
  padding: 8px 16px 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.tl-server-dot { width: 6px; height: 6px; border-radius: 50%; }
.tl-dot-go { background: var(--emerald); }
.tl-dot-warn { background: var(--amber); }
.tl-dot-off { background: var(--ink-20); }
.tl-server-name { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40); }
.tl-server-count { font-size: 10px; color: var(--ink-20); margin-left: auto; }

.tool-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.tool-row:hover,
.tool-row.sel { background: var(--surface-2); }

.tool-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  background: var(--ink-06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  flex-shrink: 0;
  transition: all .13s;
}

.tool-row.sel .tool-row-icon { background: var(--ink); border-color: var(--ink); color: #fff; }

.tool-row-info { flex: 1; min-width: 0; }
.tool-row-name { font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-row-desc { font-size: 11px; color: var(--ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tr-pill { width: 7px; height: 7px; border-radius: 50%; }
.trp-allow { background: var(--emerald); }
.trp-confirm { background: var(--amber); }
.trp-block { background: var(--rose); }
.trp-none { background: var(--ink-10); }

.policy-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pc-head { padding: 14px 22px 12px; }
.pch-row { display: flex; align-items: center; gap: 10px; }
.pch-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.pch-server { font-size: 11.5px; color: var(--ink-40); }

.trace-signal {
  margin: 0;
  padding: 9px 22px;
  background: var(--amber-bg);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ts-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ts-desc { font-size: 12px; color: var(--ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ts-actions { display: flex; gap: 5px; }
.ts-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--amber-rule);
  background: var(--surface);
  color: var(--amber);
  cursor: pointer;
}
.ts-btn.prime { background: var(--amber); color: #fff; }
.ts-dismiss { width: 20px; height: 20px; border: none; border-radius: 4px; background: none; color: var(--ink-20); cursor: pointer; }
.ts-dismiss:hover { background: var(--amber-rule); color: var(--amber); }


.stepper-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.stepper-nav {
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 52px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
}
.step-item:first-child { padding-left: 0; }
.step-arrow { color: var(--ink-20); font-size: 13px; }

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-40);
}

.step-item.active .step-circle { background: var(--ink); border-color: var(--ink); color: #fff; }
.done-circle { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.step-label { font-size: 12.5px; font-weight: 500; color: var(--ink-40); }
.step-item.active .step-label { color: var(--ink); }
.step-item.done-step .step-label { color: var(--emerald); }

.step-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.step-body::-webkit-scrollbar { width: 4px; }
.step-body::-webkit-scrollbar-thumb { background: var(--rule-2); }

.step-content { animation: fadeUp .25s var(--ease) both; }
.step-heading { margin-bottom: 14px; }

.step-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 7px;
}
.smb-guard { background: var(--rose-bg); color: var(--rose); }
.smb-contract { background: var(--emerald-bg); color: var(--emerald); }
.smb-score { background: var(--violet-bg); color: var(--violet); }
.smb-trigger { background: var(--blue-bg); color: var(--blue); }
.smb-test { background: var(--ink-06); color: var(--ink-70); }

.step-title { font-size: 15px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 3px; }
.step-sub { font-size: 12.5px; color: var(--ink-40); line-height: 1.55; }

.beh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.beh-grid.guard-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beh-grid.guard-inline .beh-card { padding: 10px 10px; }
.beh-grid.guard-inline .beh-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
}
.beh-grid.guard-inline .beh-label { font-size: 12px; }
.beh-grid.guard-inline .beh-desc {
  font-size: 10.5px;
  line-height: 1.3;
}
.beh-card {
  padding: 13px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--rule-2);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  transition: all .14s var(--ease);
}

.beh-card:hover {
  background: var(--surface);
  border-color: var(--rule-2);
}
.beh-card.sel {
  background: var(--surface);
  border-color: var(--ink);
}
.beh-card.sel::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.beh-allow.sel { border-color: var(--emerald); }
.beh-allow.sel::after { background: var(--emerald); }
.beh-block.sel { border-color: var(--rose); }
.beh-block.sel::after { background: var(--rose); }
.beh-confirm.sel { border-color: var(--amber); }
.beh-confirm.sel::after { background: var(--amber); }
.beh-force.sel { border-color: var(--violet); }
.beh-force.sel::after { background: var(--violet); }

.beh-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beh-icon svg {
  display: block;
}
.bi-allow { background: var(--emerald-bg); }
.bi-block { background: var(--rose-bg); }
.bi-confirm { background: var(--amber-bg); }
.bi-force { background: var(--violet-bg); }
.beh-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.beh-desc { font-size: 11.5px; color: var(--ink-40); line-height: 1.4; }

.beh-grid .beh-card {
  pointer-events: auto;
}

.cfc-box {
  padding: 12px 13px;
  background: var(--violet-bg);
  border: 1px solid var(--violet-rule);
  border-radius: 9px;
  margin-top: 8px;
}

.cfc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 6px;
}

.cfc-select {
  width: 100%;
  padding: 8px 11px;
  background: var(--surface);
  border: 1.5px solid var(--violet-rule);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}

.guard-extra {
  margin-top: 14px;
}

.guard-extra-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 8px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 6px;
}

.tr-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.tr-desc { font-size: 11.5px; color: var(--ink-40); }

.stepper-root .toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--ink-10);
  border: none;
  padding: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}

.stepper-root .toggle-switch.on {
  background: var(--ink);
}

.stepper-root .toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.stepper-root .toggle-switch.on .toggle-knob {
  transform: translateX(16px);
}

.trigger-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.trigger-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 8px; }
.trigger-tag { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; }
.trigger-type { font-size: 10.5px; padding: 2px 7px; border-radius: 4px; }
.tt-phrase { background: var(--violet-bg); color: var(--violet); }
.tt-intent { background: var(--blue-bg); color: var(--blue); }
.tt-regex { background: var(--amber-bg); color: var(--amber); }
.trigger-del { width: 18px; height: 18px; border: none; background: none; color: var(--ink-20); cursor: pointer; }

.add-row { display: flex; gap: 6px; }
.add-input { flex: 1; padding: 9px 12px; background: var(--surface); border: 1.5px solid var(--rule-2); border-radius: 8px; font-size: 12.5px; }
.add-type-sel { padding: 0 11px; border-radius: 8px; border: 1.5px solid var(--rule-2); background: var(--surface); height: 38px; }
.add-btn { height: 38px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--rule-2); background: var(--surface); font-size: 12.5px; cursor: pointer; }

.desc-hint { margin-top: 14px; }
.dh-label { font-size: 12px; font-weight: 500; color: var(--ink-70); margin-bottom: 5px; }
.dh-sub { font-size: 11.5px; color: var(--ink-40); margin-bottom: 7px; }
.dh-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 72px;
  line-height: 1.65;
}

.test-row { display: flex; gap: 8px; margin-bottom: 14px; }
.test-input { flex: 1; padding: 10px 13px; background: var(--surface); border: 1.5px solid var(--rule-2); border-radius: 9px; font-size: 13px; }
.test-run { height: 40px; padding: 0 18px; border-radius: 9px; background: var(--ink); color: white; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }

.test-result { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.tr-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.trh-q { font-size: 12px; color: var(--ink-70); flex: 1; font-style: italic; }
.trh-verdict { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.tv-call { background: var(--emerald-bg); color: var(--emerald); }
.tv-block { background: var(--rose-bg); color: var(--rose); }
.tv-confirm { background: var(--amber-bg); color: var(--amber); }

.tr-scores { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.trs-row { display: flex; align-items: center; gap: 10px; }
.trs-rank { font-size: 10px; color: var(--ink-20); width: 14px; }
.trs-name { font-size: 12px; font-weight: 500; color: var(--ink-70); min-width: 120px; }
.trs-track { flex: 1; height: 5px; border-radius: 3px; background: var(--ink-06); overflow: hidden; }
.trs-fill { height: 100%; border-radius: 3px; transform-origin: left center; animation: barGrow .7s var(--ease) .1s both; }
.tf-1 { background: var(--emerald); }
.tf-2 { background: var(--amber); }
.tf-3, .tf-4 { background: var(--ink-20); }
.w91 { width: 91%; }
.w64 { width: 64%; }
.w48 { width: 48%; }
.w32 { width: 32%; }

.trs-score { font-size: 12px; font-weight: 600; color: var(--ink); min-width: 28px; text-align: right; }
.trs-row.win .trs-name, .trs-row.win .trs-score { color: var(--emerald); }
.tr-explain { margin: 0 14px 12px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-70); }
.texp-call { background: var(--emerald-bg); border: 1px solid var(--emerald-rule); }
.texp-block { background: var(--rose-bg); border: 1px solid var(--rose-rule); }
.texp-confirm { background: var(--amber-bg); border: 1px solid var(--amber-rule); }

.policy-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.policy-compare-title {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.pc-col { padding: 12px 14px; border-radius: 9px; border: 1px solid var(--rule); background: var(--surface-2); }
.pcc-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 8px; }
.pcc-outcome { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.pcc-reason { font-size: 11.5px; color: var(--ink-40); line-height: 1.4; }

.step-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}

.sf-left { display: flex; gap: 6px; align-items: center; }
.footer-btn {
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
}

.footer-btn:disabled { opacity: .3; cursor: default; }
.footer-btn.prime { background: var(--ink); color: white; border-color: var(--ink); font-weight: 600; }
.footer-btn.save-done { background: var(--emerald); border-color: var(--emerald); }

.step-dots { display: flex; gap: 5px; }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-10); }
.sp-dot.active { background: var(--ink); transform: scale(1.2); }
.sp-dot.done { background: var(--emerald); }


.contract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.cf-card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 13px 14px;
}

.cf-card.full {
  grid-column: 1 / -1;
}

.cf-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-label-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-label-dot.produces { background: var(--emerald); }
.cf-label-dot.requires { background: var(--blue); }
.cf-label-dot.effect { background: var(--rose); }
.cf-label-dot.det { background: var(--violet); }
.cf-label-dot.lat { background: var(--amber); }
.cf-label-dot.fallback { background: var(--ink-40); }

.artifact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.artifact-edit-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.artifact-edit-row .add-input {
  flex: 1;
  min-width: 0;
}

.binding-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.binding-card {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.binding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 6px;
}

.binding-grid-output {
  grid-template-columns: 1fr 1.6fr 32px;
  align-items: center;
}

.binding-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.binding-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-40);
  white-space: nowrap;
}

.artifact-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.at-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.at-produces {
  background: var(--emerald-bg);
  border-color: var(--emerald-rule);
  color: var(--emerald);
}

.at-requires {
  background: var(--blue-bg);
  border-color: var(--blue-rule);
  color: var(--blue);
}

.at-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink-20);
  border: 1.5px dashed var(--rule-2);
  background: none;
  cursor: pointer;
  transition: all .12s;
}

.at-add:hover {
  border-color: var(--accent-solid);
  color: var(--ink-40);
}

.sel-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.sel-chip {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--rule-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-40);
  background: var(--surface);
  cursor: pointer;
  transition: all .13s;
}

.sel-chip:hover {
  color: var(--ink-70);
}

.sel-chip.sc-read.on { border-color: var(--emerald-rule); background: var(--emerald-bg); color: var(--emerald); }
.sel-chip.sc-write.on { border-color: var(--amber-rule); background: var(--amber-bg); color: var(--amber); }
.sel-chip.sc-dest.on { border-color: var(--rose-rule); background: var(--rose-bg); color: var(--rose); }
.sel-chip.sc-high.on { border-color: var(--emerald-rule); background: var(--emerald-bg); color: var(--emerald); }
.sel-chip.sc-med.on { border-color: var(--amber-rule); background: var(--amber-bg); color: var(--amber); }
.sel-chip.sc-low.on { border-color: var(--rose-rule); background: var(--rose-bg); color: var(--rose); }
.sel-chip.sc-fast.on { border-color: var(--emerald-rule); background: var(--emerald-bg); color: var(--emerald); }
.sel-chip.sc-slow.on { border-color: var(--rose-rule); background: var(--rose-bg); color: var(--rose); }

.contract-select {
  width: 100%;
  padding: 8px 11px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}

.contract-select:focus {
  border-color: var(--accent-solid);
}

.chain-preview {
  margin-top: 4px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.chain-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 10px;
}

.chain-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chain-node {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-70);
}

.chain-node.current {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.chain-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.chain-artifact-label {
  font-size: 10px;
  color: var(--emerald);
  white-space: nowrap;
}

.chain-line {
  width: 22px;
  height: 1.5px;
  background: var(--emerald);
}

.chain-arr {
  color: var(--emerald);
  font-size: 11px;
  margin-top: -3px;
  line-height: 1;
}

.chain-copy {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-40);
  line-height: 1.55;
}

.chain-copy strong {
  color: var(--ink-70);
  font-weight: 600;
}

.chain-copy code {
  font-family: var(--f-mono);
  font-size: 11px;
  background: var(--ink-06);
  padding: 1px 5px;
  border-radius: 3px;
}


.score-vis { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 9px; margin-bottom: 14px; }
.sv-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 8px; }
.sv-track { height: 8px; background: var(--ink-06); border-radius: 4px; overflow: hidden; position: relative; margin-bottom: 6px; }
.sv-bad { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rose); opacity: .25; border-radius: 4px 0 0 4px; }
.sv-good { position: absolute; top: 0; bottom: 0; background: var(--emerald); opacity: .2; }
.sv-line { position: absolute; top: -3px; bottom: -3px; width: 2.5px; background: var(--ink); border-radius: 2px; }
.sv-track.sv-threshold-50 .sv-bad { width: 50%; }
.sv-track.sv-threshold-50 .sv-good { width: 50%; left: 50%; }
.sv-track.sv-threshold-50 .sv-line { left: 50%; }
.sv-track.sv-threshold-55 .sv-bad { width: 55%; }
.sv-track.sv-threshold-55 .sv-good { width: 45%; left: 55%; }
.sv-track.sv-threshold-55 .sv-line { left: 55%; }
.sv-track.sv-threshold-60 .sv-bad { width: 60%; }
.sv-track.sv-threshold-60 .sv-good { width: 40%; left: 60%; }
.sv-track.sv-threshold-60 .sv-line { left: 60%; }
.sv-track.sv-threshold-65 .sv-bad { width: 65%; }
.sv-track.sv-threshold-65 .sv-good { width: 35%; left: 65%; }
.sv-track.sv-threshold-65 .sv-line { left: 65%; }
.sv-track.sv-threshold-70 .sv-bad { width: 70%; }
.sv-track.sv-threshold-70 .sv-good { width: 30%; left: 70%; }
.sv-track.sv-threshold-70 .sv-line { left: 70%; }
.sv-track.sv-threshold-75 .sv-bad { width: 75%; }
.sv-track.sv-threshold-75 .sv-good { width: 25%; left: 75%; }
.sv-track.sv-threshold-75 .sv-line { left: 75%; }
.sv-track.sv-threshold-80 .sv-bad { width: 80%; }
.sv-track.sv-threshold-80 .sv-good { width: 20%; left: 80%; }
.sv-track.sv-threshold-80 .sv-line { left: 80%; }
.sv-track.sv-threshold-85 .sv-bad { width: 85%; }
.sv-track.sv-threshold-85 .sv-good { width: 15%; left: 85%; }
.sv-track.sv-threshold-85 .sv-line { left: 85%; }
.sv-track.sv-threshold-90 .sv-bad { width: 90%; }
.sv-track.sv-threshold-90 .sv-good { width: 10%; left: 90%; }
.sv-track.sv-threshold-90 .sv-line { left: 90%; }
.sv-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-40); }
.sv-rose { color: var(--rose); }
.sv-go { color: var(--emerald); }

.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sf { display: flex; flex-direction: column; gap: 5px; }
.sf-label { font-size: 12.5px; font-weight: 500; color: var(--ink-70); }
.sf-hint { font-size: 11px; color: var(--ink-40); }
.sf-row { display: flex; align-items: center; gap: 8px; }
.sf-input { width: 76px; padding: 9px 10px; background: var(--surface); border: 1.5px solid var(--rule-2); border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; }
.sf-unit { font-size: 12px; color: var(--ink-40); }

.below-action { margin-top: 10px; }
.ba-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 7px; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.ba-grid .beh-card {
  pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════
   Sandbox — two-column left-sidebar layout
   Tokens used: --surface, --surface-2, --rule, --rule-2,
                --ink, --ink-70, --ink-40, --ink-20, --ink-10, --ink-06,
                --emerald, --amber, --accent, --accent-hover,
                --accent-bg, --accent-border
   ══════════════════════════════════════════════════════════════════ */

/* ── No monospace anywhere inside Sandbox ─────────────────────────────── */
.sandbox-page .mono,
.sandbox-page [class*="mono"] { font-family: inherit; }

/* ── Page wrapper ─────────────────────────────────────────────────────── */
.sandbox-page {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  opacity: 0;
}

.sandbox-page.ready {
  animation: rise 0.25s ease-out both;
}

/* ── Two-column layout ────────────────────────────────────────────────── */
.sandbox-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Left sidebar ─────────────────────────────────────────────────────── */
.sb-sidebar {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--surface-2);
  overflow: hidden;
}

.sb-header {
  padding: 20px 20px 0;
  flex-shrink: 0;
}

.sb-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

/* ── Agent card ───────────────────────────────────────────────────────── */
.sb-agent-card {
  position: relative;
  margin-bottom: 2px;
}

.sb-agent-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .13s, background .13s;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 1px 2px var(--ink-06);
}

.sb-agent-trigger:hover {
  border-color: var(--rule-2);
  background: var(--surface);
}

.sb-agent-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.sb-agent-card.open .sb-agent-trigger {
  border-color: var(--accent-solid);
}

.sb-agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  animation: ripple-go 5s ease infinite;
}

.sb-agent-info {
  flex: 1;
  min-width: 0;
}

.sb-agent-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-agent-meta {
  font-size: 10.5px;
  color: var(--ink-40);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-agent-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 10px 24px var(--ink-10);
  overflow: hidden;
}

.sb-agent-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 9px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .1s;
}

.sb-agent-option:hover { background: var(--surface-2); }
.sb-agent-option.active { background: var(--ink-06); }

/* ── Routing config link ──────────────────────────────────────────────── */
.sb-routing-link {
  display: block;
  margin: 6px 1px 12px;
  font-size: 11px;
  color: var(--ink-40);
  text-decoration: none;
  transition: color .13s;
}
.sb-routing-link:hover { color: var(--accent); }
.sb-routing-arrow { display: inline-block; transition: transform .13s; }
.sb-routing-link:hover .sb-routing-arrow { transform: translateX(2px); }

/* ── Mode tabs ────────────────────────────────────────────────────────── */
.sb-mode-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  margin: 0 -20px;
  padding: 0 20px;
}

.sb-mode-tab {
  flex: 1;
  padding: 8px 8px 10px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--ink-40);
  cursor: pointer;
  transition: color .13s;
  font-family: var(--f-sans);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.sb-mode-tab:hover:not(:disabled) { color: var(--ink-70); }

.sb-mode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sb-mode-tab-soon {
  color: var(--ink-20) !important;
  cursor: default !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sb-soon-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1.5px 5px;
  border-radius: 4px;
  background: var(--ink-06);
  color: var(--ink-20);
}

/* ── Prompt area (inside sidebar, prompt tab) ─────────────────────────── */
.sb-prompt-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sb-prompt-box {
  margin: 14px 20px 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .13s, box-shadow .13s;
  box-shadow: 0 1px 2px var(--ink-06);
}

.sb-prompt-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-border);
}

.sb-prompt-textarea {
  width: 100%;
  min-height: 72px;
  max-height: 130px;
  padding: 11px 14px;
  border: none;
  outline: none;
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  background: transparent;
  color: var(--ink);
}

.sb-prompt-textarea::placeholder { color: var(--ink-20); }

.sb-prompt-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-top: 1px solid var(--rule);
}

/* ── Mode toggle (segmented control) ─────────────────────────────────── */
.sb-mode-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
.sb-mode-toggle-opt {
  border: none;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-40);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.13s;
}
.sb-mode-toggle-opt:hover:not(:disabled):not(.active) {
  color: var(--ink-70);
}
.sb-mode-toggle-opt.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sb-mode-toggle-opt:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Run button ───────────────────────────────────────────────────────── */
.sb-run-btn {
  margin-left: auto;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: background .13s;
  flex-shrink: 0;
}

.sb-run-btn:hover:not(:disabled) { background: var(--accent-hover, color-mix(in srgb, var(--accent) 85%, #000)); }
.sb-run-btn.running  { background: var(--ink-40); cursor: default; }
.sb-run-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.sb-run-btn-execute  { background: var(--emerald, #059669); }
.sb-run-btn-execute:hover:not(:disabled) { background: #047857; }

.sb-play-icon {
  flex-shrink: 0;
}

.sb-run-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: sandboxSpin .7s linear infinite;
  display: none;
  flex-shrink: 0;
}

.sb-run-btn.running .sb-play-icon  { display: none; }
.sb-run-btn.running .sb-run-spinner { display: block; }

/* ── Agent defaults row (third line inside the agent card trigger) ──────── */
.sb-agent-defaults-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  cursor: pointer;
}

.sb-adr-link {
  font-size: 11px;
  color: var(--ink-40);
  transition: color 0.12s;
  white-space: nowrap;
  margin-right: 1px;
}
.sb-agent-defaults-row:hover .sb-adr-link {
  color: var(--accent);
}

.sb-adr-pill {
  font-family: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  background: var(--ink-06);
  color: var(--ink-70);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.sb-adr-pill:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

/* ── History ──────────────────────────────────────────────────────────── */
.sb-history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}

.sb-history-hd {
  display: flex;
  align-items: center;
  padding: 11px 20px 8px;
  gap: 6px;
  flex-shrink: 0;
}

.sb-history-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  flex: 1;
}

.sb-history-loading {
  font-size: 11px;
  color: var(--ink-20);
}

.sb-history-clear {
  font-size: 11px;
  color: var(--ink-40);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--f-sans);
  padding: 2px 6px;
  border-radius: 4px;
}

.sb-history-clear:hover { color: var(--ink-70); background: var(--ink-06); }

.sb-history-scroll {
  flex: 1;
  overflow-y: auto;
  animation: rise 0.25s ease-out both;
}

.sb-history-empty {
  font-size: 12px;
  color: var(--ink-20);
  padding: 16px 20px;
}

.sb-history-item {
  width: 100%;
  text-align: left;
  padding: 9px 20px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: background .1s;
}

.sb-history-item:hover  { background: var(--ink-06); }
.sb-history-item.active { background: var(--surface); }

.sb-hist-query {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.4;
}

.sb-hist-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--ink-40);
  flex-wrap: wrap;
}

.sb-hist-tool {
  color: var(--emerald);
}

.sb-hist-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1.5px 5px;
  border-radius: 3px;
}

.sb-hist-badge.db {
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,0.18);
}

.sb-hist-badge.plan {
  background: var(--ink-06);
  color: var(--ink-40);
}

.sb-hist-badge.parallel {
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
}

.sb-hist-badge.aggregate {
  background: rgba(14,165,233,0.10);
  color: #0369a1;
}

.sb-hist-badge.seq {
  background: rgba(124,58,237,0.10);
  color: #6d28d9;
}

/* ── Right content panel ──────────────────────────────────────────────── */
.sb-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sb-tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sb-tab-panel.show {
  display: flex;
  flex-direction: column;
}

/* ── Animations (kept from original) ─────────────────────────────────── */
@keyframes sandboxSpin {
  to { transform: rotate(360deg); }
}

/* ── Full-height lock (mirrors artifact-main-lock pattern) ───────────────── */
#app-main.sandbox-main-lock {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1180px) {
  .sb-sidebar { width: 320px; }
}


/* ── Agent Defaults page ─────────────────────────────────────────────── */

.ad-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.ad-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 12px;
  color: var(--ink-40);
}

.ad-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--f-sans);
  color: var(--accent);
  padding: 0;
  transition: color 0.12s;
}
.ad-back-btn:hover { color: var(--accent-hover); }

.ad-bc-sep { color: var(--ink-20); }

.ad-bc-seg { color: var(--ink-40); }

.ad-bc-current { color: var(--ink-70); font-weight: 500; }

/* ── Page header ─────────────────────────────────────────────────────── */
.ad-header {
  margin-bottom: 24px;
}

.ad-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 8px;
}

.ad-desc {
  font-size: 13px;
  color: var(--ink-40);
  line-height: 1.6;
  max-width: 600px;
  margin: 0;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.ad-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ad-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}

.ad-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ad-card-agent {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.ad-card-dot {
  color: var(--ink-20);
  font-size: 13px;
}

.ad-card-label {
  font-size: 12px;
  color: var(--ink-40);
}

.ad-count-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  color: var(--ink-40);
}

.ad-saving-indicator {
  font-size: 11px;
  color: var(--ink-20);
  font-style: italic;
  margin-left: 4px;
}

/* ── + Add default button ────────────────────────────────────────────── */
.ad-add-btn {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f-sans);
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ad-add-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.ad-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Table ───────────────────────────────────────────────────────────── */
.ad-table {
  display: flex;
  flex-direction: column;
}

.ad-thead {
  display: grid;
  grid-template-columns: 160px 1fr 100px 48px;
  padding: 0 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-2);
}

.ad-th {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}

.ad-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--rule-2);
  align-items: center;
  transition: background 0.1s;
}
.ad-row:last-child { border-bottom: none; }
.ad-row:hover { background: var(--surface-2); }
.ad-add-row { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ad-add-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.ad-cell {
  padding: 11px 10px;
  font-size: 13px;
  color: var(--ink-70);
}

.ad-cell-slot {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

/* ── Value button (click to edit) ────────────────────────────────────── */
.ad-value-btn {
  background: none;
  border: none;
  cursor: text;
  font-size: 13px;
  font-family: var(--f-sans);
  color: var(--ink-70);
  padding: 0;
  text-align: left;
  width: 100%;
  transition: color 0.1s;
}
.ad-value-btn:hover { color: var(--ink); }

.ad-value-empty {
  color: var(--ink-20);
  font-style: italic;
  font-size: 12px;
}

/* ── Inline input ────────────────────────────────────────────────────── */
.ad-inline-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 13px;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 5px;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-border);
  box-sizing: border-box;
}

/* ── Source chip ─────────────────────────────────────────────────────── */
.ad-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
}

.ad-chip-manual {
  background: var(--surface-2);
  color: var(--ink-40);
  border-color: var(--rule-2);
}

.ad-chip-fixed {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

.ad-chip-pending {
  background: var(--amber-bg, color-mix(in srgb, #f59e0b 12%, transparent));
  color: var(--amber, #d97706);
  border-color: var(--amber-rule, color-mix(in srgb, #f59e0b 25%, transparent));
}

/* ── Delete / action buttons ─────────────────────────────────────────── */
.ad-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-20);
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.ad-del-btn:hover {
  color: var(--rose, #e11d48);
  background: color-mix(in srgb, var(--rose, #e11d48) 10%, transparent);
}

.ad-add-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ad-confirm-btn {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--f-sans);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.ad-confirm-btn:hover { background: var(--accent-hover); }

.ad-cancel-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-20);
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.12s;
}
.ad-cancel-btn:hover { color: var(--ink-40); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.ad-empty {
  padding: 28px 18px;
  font-size: 13px;
  color: var(--ink-40);
  text-align: center;
}
.ad-empty strong { color: var(--ink-70); }

/* ── Save error ──────────────────────────────────────────────────────── */
.ad-save-error {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--rose, #e11d48);
  background: color-mix(in srgb, var(--rose, #e11d48) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--rose, #e11d48) 20%, transparent);
}


/* ══════════════════════════════════════════════════════════════════
   PromptTester — full replacement
   Mockup-derived styling, targeting the class names actually rendered
   by the current PromptTester.jsx.

   Token mapping (mockup → existing global):
     --text             → --ink
     --text-secondary   → --ink-70
     --text-tertiary    → --ink-40
     --right-bg         → --surface-2
     --right-surface    → --surface
     --right-border     → --rule
     --right-border-light → --rule-2
     --green            → --emerald
     --green-bg         → --emerald-bg
     --font             → --f-sans
     --mono             → --mono

   Local additions (defined in :root scope below):
     --pt-blue, --pt-blue-bg, --pt-blue-border
     --pt-amber-border, --pt-green-border
     --pt-op-create
     --pt-shadow-sm, --pt-shadow, --pt-shadow-lg
     --pt-radius, --pt-radius-sm, --pt-radius-lg
   ══════════════════════════════════════════════════════════════════ */

.pt-outer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pt-plan-view {
  --pt-blue: #3678d7;
  --pt-blue-bg: #eff5ff;
  --pt-blue-border: #b8d4f8;
  --ink-06: rgba(28,25,23,0.06);
  --pt-amber-border: #e8d374;
  --pt-green-border: #bbf0d0;
  --pt-op-create: #16a34a;
  --pt-shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
  --pt-shadow: 0 2px 8px rgba(28,25,23,0.06);
  --pt-shadow-lg: 0 8px 24px rgba(28,25,23,0.1);
  --pt-radius: 8px;
  --pt-radius-sm: 5px;
  --pt-radius-lg: 12px;

  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 32px;
  background: var(--surface-2);
  font-family: var(--f-sans);
  color: var(--ink);
}

.pt-error-bar {
  background: var(--rose-bg);
  border: 1px solid var(--rose);
  color: var(--rose);
  padding: 10px 14px;
  border-radius: var(--pt-radius);
  font-size: 12px;
  margin-bottom: 16px;
}

/* ── Trace header (query + badges + timing) ───────────────────────────── */
.pt-trace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--rule);
}
.pt-trace-left {
  flex: 1;
  min-width: 0;
}
.pt-trace-query {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  max-width: 560px;
  color: var(--ink);
}
.pt-trace-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pt-trace-badges .trace-badge,
.planning-mode-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-family: var(--f-sans);
}
.planning-mode-badge { color: var(--ink-70); background: var(--surface); border-color: var(--rule); }
.planning-mode-execute { background: var(--emerald-bg); color: var(--emerald); border-color: var(--pt-green-border); }
.trace-badge.parallel,
.pt-trace-badges .parallel { background: var(--pt-blue-bg); color: var(--pt-blue); border-color: var(--pt-blue-border); }
.trace-badge.sequential,
.pt-trace-badges .sequential { background: #f3e8ff; color: #6d28d9; border-color: #ddd6fe; }
.trace-badge.aggregate,
.pt-trace-badges .aggregate { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.trace-badge.tool,
.pt-trace-badges .tool { background: var(--surface); color: var(--ink-70); border-color: var(--rule); }

.pt-trace-timing {
  font-size: 12px;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 4px;
}
.pt-trace-timing::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
}

.planning-live-badge {
  font-size: 10px;
  color: var(--amber);
  background: #fffbeb;
  border: 1px solid var(--pt-amber-border);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
}

/* ── Source legend (Deterministic / Embedding / LLM + subtitle) ──────── */
.pt-source-legend {
  margin-bottom: 24px;
}
.pt-legend-items {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--ink-40);
}
.pt-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pt-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.pt-legend-dot.det { background: var(--emerald); }
.pt-legend-dot.emb { background: var(--pt-blue); }
.pt-legend-dot.llm { background: var(--amber); }
.pt-legend-subtitle {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-70);
  line-height: 1.4;
  max-width: 560px;
}

/* ── Intent / sub-task header ─────────────────────────────────────────── */
.pp2-intent-section {
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.pp2-intent-status {
  font-size: 10px;
  color: var(--ink-40);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pp2-intent-status.ready { color: var(--emerald); }
/* Pending: not yet started */
.pp2-intent-section.pending {
  opacity: .55;
}
.pp2-intent-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pp2-intent-num,
.intent-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--f-sans);
  position: relative;
}
.pp2-intent-num.done,
.intent-num.done {
  background: var(--emerald);
}
.pp2-intent-num.running,
.intent-num.running {
  overflow: visible;
  z-index: 0;
}
.pp2-intent-num.running::after,
.intent-num.running::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: ringpulse 1.4s ease-out infinite;
  z-index: 1;
  pointer-events: none;
}
.pp2-intent-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.pp2-intent-absorbed { opacity: 0.4; pointer-events: none; }
.pp2-intent-num.absorbed { background: var(--ink-20) !important; }
.pp2-intent-absorbed-note { font-size: 11px; color: var(--ink-40); font-style: italic; margin-left: auto; padding-right: 4px; white-space: nowrap; }

/* ── Extraction bar (op · entity · value · time) ──────────────────────── */
.pp2-extraction-label,
.extraction {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  margin-bottom: 14px;
  box-shadow: var(--pt-shadow-sm);
  flex-wrap: wrap;
}
.pp2-extraction-label > span:first-child,
.extraction-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-40);
  font-weight: 600;
  margin-right: 4px;
}
.chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
}
.chip-op { background: var(--pt-op-create); color: white; }
.chip-entity { background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule); }
.chip-modifier { background: rgba(124,58,237,0.08); color: #6d28d9; border: 1px solid rgba(124,58,237,0.18); font-style: italic; }
.chip-value { background: #edf2f9; color: var(--accent); border: 1px solid var(--accent-border, rgba(91,127,181,0.25)); }
.chip-sep { color: var(--ink-40); font-size: 11px; }

/* ── Pipeline steps — TL classes (the JSX still uses these heavily) ──── */
.tl,
.tl-bar-list {
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  margin-left: 11px;
  margin-bottom: 14px;
}
.tl-step {
  position: relative;
  padding: 11px 0 11px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
}
.tl-step + .tl-step { border-top: 1px dashed transparent; }
.tl-step::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--surface-2);
  background: var(--ink-40);
}
/* Source-coloured dots — the JSX adds tl-dot-green/blue/amber/gray modifiers */
.tl-step.tl-dot-green::before,
.tl-step.det::before { background: var(--emerald); box-shadow: 0 0 0 1px var(--pt-green-border); }
.tl-step.tl-dot-blue::before,
.tl-step.emb::before { background: var(--pt-blue); box-shadow: 0 0 0 1px var(--pt-blue-border); }
.tl-step.tl-dot-amber::before,
.tl-step.llm::before { background: var(--amber); box-shadow: 0 0 0 1px var(--pt-amber-border); }
.tl-step.tl-dot-gray::before { background: var(--ink-20); box-shadow: 0 0 0 1px var(--rule); }
.tl-step.running::before { background: var(--amber); animation: dotpulse 1.3s ease-in-out infinite; }
.tl-step-muted::before { background: var(--ink-20); box-shadow: 0 0 0 1px var(--rule); }
.tl-step-last { padding-bottom: 0; }

/* Spine + line are positioning leftovers from older structure — neutralise */
.tl-spine { display: none; }
.tl-line { display: none; }
.tl-dot { display: none; }
.tl-dot-sm { display: none; }

/* Card body of each step */
.tl-body { display: flex; flex-direction: column; gap: 4px; }
.tl-card {
  background: transparent;
  border: none;
  padding: 0;
}
.tl-card-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-card-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-70);
}
.tl-card-summary {
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.tl-card-meta {
  font-size: 10px;
  color: var(--ink-40);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  margin-left: 8px;
  align-self: flex-start;
}
.tl-card-meta.slow {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--pt-amber-border);
}
.tl-card-tool {
  font-size: 10.5px;
  color: var(--emerald);
  font-weight: 600;
}

/* Expand-on-click row layout: name + meta on one row, summary below */
.tl-step .tl-body .tl-card .tl-card-text { justify-content: flex-start; }

/* Inline expanded card body (key-value grid, score bars, tip, etc.) */
.tl-card-body {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow-sm);
}
.tl-kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 11px;
}
.tl-kv-key { color: var(--ink-40); }
.tl-kv-val { color: var(--ink); }

.tl-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  gap: 8px;
  align-items: center;
  font-size: 10.5px;
  padding: 3px 0;
}
.tl-bar-row.winner .tl-bar-label { color: var(--emerald); font-weight: 600; }
.tl-bar-label { color: var(--ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-bar-bg {
  height: 6px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.tl-bar-fill {
  height: 100%;
  background: var(--ink-20);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.tl-bar-row.winner .tl-bar-fill { background: var(--emerald); }
.tl-bar-val { color: var(--ink-40); text-align: right; }

.tl-tip {
  margin-top: 10px;
  padding: 8px 11px;
  background: #fffbeb;
  border: 1px solid var(--pt-amber-border);
  border-radius: var(--pt-radius-sm);
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}
.tl-note {
  font-size: 11px;
  color: var(--ink-40);
  font-style: italic;
  padding: 6px 0;
}
.tl-respond-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
}
.tl-respond-explain {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 4px;
}
.tl-muted-label { font-size: 10.5px; color: var(--ink-40); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Sub-query rows under P1 */
.tl-sub-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tl-sub-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.tl-sub-text { color: var(--ink-70); }

/* Tool grid inside expanded P4 / P5 / P6 */
.tl-tool-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.tl-tool-primary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.tl-runners-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}
.tl-runners-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.tl-runners-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-expand-blue {
  font-size: 10.5px;
  color: var(--pt-blue);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  padding: 4px 0;
}
.tl-expand-blue:hover { text-decoration: underline; }

/* ── pp2 (per-pass / per-tool) classes used inside the JSX ───────────── */
.pp2-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-70);
}
.pp2-pill-op { background: var(--pt-op-create); color: white; border-color: transparent; }
.pp2-pill-type { background: var(--surface-2); color: var(--ink); }
.pp2-pill-val { background: #edf2f9; color: var(--accent); border-color: var(--accent-border, rgba(91,127,181,0.25)); }
.pp2-pill-time { background: #fffbeb; color: #92400e; border-color: var(--pt-amber-border); }

.pp2-chip-arg,
.pp2-slot-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 2.5px 7px;
  border-radius: 4px;
  background: var(--pt-blue-bg);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}
.pp2-chip-filled { background: var(--emerald-bg); color: var(--emerald); border-color: var(--pt-green-border); }
.pp2-chip-inferred { background: #fffbeb; color: #92400e; border-color: var(--pt-amber-border); }
.pp2-chip-missing { background: var(--rose-bg); color: var(--rose); border-color: rgba(220,53,69,0.3); }

.pp2-score-bar-bg {
  height: 5px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.pp2-score-bar-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.pp2-tc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pp2-tc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pp2-tc-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--emerald);
}
.pp2-tc-desc {
  font-size: 11.5px;
  color: var(--ink-40);
  margin-bottom: 10px;
  line-height: 1.4;
}
.pp2-tc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pp2-tool-expand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
/* Each tool card */
.pp2-tool-expand > .tl-card,
.pp2-tool-expand > .tool-card,
.tool-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  padding: 14px 16px;
  box-shadow: var(--pt-shadow-sm);
  transition: box-shadow 0.15s;
}
.pp2-tool-expand > .tl-card:hover,
.tool-card:hover {
  box-shadow: var(--pt-shadow);
}
.tool-card.needs-input {
  border-color: var(--pt-amber-border);
  background: #fffef7;
}

.pp2-expand-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}
.pp2-expand-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  font-weight: 600;
  margin-bottom: 6px;
}
.pp2-expand-args {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pp2-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  margin-top: 6px;
}
.pp2-schema-hdr {
  text-align: left;
  padding: 4px 6px;
  color: var(--ink-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px;
  border-bottom: 1px solid var(--rule);
}
.pp2-schema-row td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--rule-2);
}
.pp2-sf-type {
  color: var(--ink-40);
}

.pp2-why-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  margin-top: 4px;
}
.pp2-why-meta {
  color: var(--ink-40);
  font-size: 10px;
}

.pp2-interp-loading {
  font-size: 11px;
  color: var(--ink-40);
  font-style: italic;
}
.pp2-interp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-70);
  margin-top: 6px;
}
.pp2-interp-arrow { color: var(--ink-40); }

.pp2-timing-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0 4px 0;
  font-size: 10px;
  color: var(--ink-40);
}
.pp2-timing-strip > span { display: inline-flex; align-items: center; gap: 3px; }
.pp2-timing-strip > span.fast { opacity: 0.45; }
.pp2-timing-strip > span.slow { color: var(--amber); font-weight: 600; }

/* Slot chip groups (per-tool slot states) */
.slot-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.slot-lbl {
  color: var(--ink-40);
  font-size: 10px;
  min-width: 88px;
}
.slot-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.slot-chip {
  font-size: 10px;
  padding: 2.5px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-70);
  border: 1px solid var(--rule);
  transition: all .35s var(--ease);
}
.slot-chip.filled { background: var(--emerald-bg); color: var(--emerald); border-color: var(--pt-green-border); }
.slot-chip.inferred { background: #fffbeb; color: #92400e; border-color: var(--pt-amber-border); }
.slot-chip.missing { background: var(--rose-bg); color: var(--rose); border-color: rgba(220,53,69,0.3); cursor: pointer; }
.slot-chip.ambiguous { background: #f3e8ff; color: #6d28d9; border-color: #ddd6fe; }
.slot-chip.shared {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.slot-chip.shared::before {
  content: '↳';
  flex-shrink: 0;
  opacity: 0.7;
  margin-right: 1px;
}
.slot-chip.flash { animation: chipflash .7s var(--ease); }

/* ── Pass timings strip (P2 1260ms · P3 823ms · ...) ─────────────────── */
.timings,
.pp-timings {
  display: flex;
  gap: 14px;
  padding: 14px 0 4px 36px;
  font-size: 10.5px;
  color: var(--ink-40);
}
.t {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.t.fast { opacity: 0.45; }
.t.slow .val,
.t.slow .lbl { color: var(--amber); font-weight: 600; }

/* ── Full timing breakdown (collapsible details) ─────────────────────── */
.timing-details {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow-sm);
}
.timing-details > summary {
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-70);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.timing-details > summary::-webkit-details-marker { display: none; }
.timing-details > summary::before {
  content: '›';
  font-size: 14px;
  color: var(--ink-40);
  transition: transform 0.15s;
}
.timing-details[open] > summary::before { transform: rotate(90deg); }
.timing-body {
  padding: 4px 16px 12px;
  font-size: 10.5px;
}
.timing-body-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-70);
}
.timing-body-row:last-child { border-bottom: none; }

/* ── Config in effect (collapsible details) ──────────────────────────── */
.config-inspector {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow-sm);
}
.config-inspector > summary {
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-70);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.config-inspector > summary::-webkit-details-marker { display: none; }
.config-inspector > summary::before {
  content: '›';
  font-size: 14px;
  color: var(--ink-40);
  transition: transform 0.15s;
}
.config-inspector[open] > summary::before { transform: rotate(90deg); }
.ci-body { padding: 4px 16px 14px; }
.ci-section { padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.ci-section:last-child { border-bottom: none; }
.ci-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.ci-kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  font-size: 10.5px;
}
.ci-key { color: var(--ink-40); }
.ci-val { color: var(--ink); }
.ci-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ci-op-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-70);
}
.ci-drift-row {
  font-size: 10.5px;
  color: var(--amber);
  padding: 2px 0;
}

/* ── Execute bar (sticky bottom call-to-action) ──────────────────────── */
.pt-execute-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--pt-shadow-lg);
  margin-top: 28px;
  z-index: 5;
}
.pt-execute-bar-text {
  font-size: 13px;
  color: var(--ink-70);
}
.pt-execute-bar-text strong {
  color: var(--ink);
  font-weight: 700;
}
.pt-execute-btn {
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  border: none;
  background: var(--emerald);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: background 0.15s;
}
.pt-execute-btn:hover { background: #1a9250; }
.pt-execute-btn::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  display: inline-block;
}

/* ── Synthesis panel ──────────────────────────────────────────────────── */
.synthesis-panel {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow-sm);
}
.synthesis-label {
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-40);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.synthesis-body {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.synthesis-pending {
  padding: 14px 18px;
  font-size: 12px;
  color: var(--ink-40);
  font-style: italic;
}

/* ── Exec response panel (tool results) ──────────────────────────────── */
.exec-response-panel {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow-sm);
}
.exec-response-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.exec-response-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  gap: 8px;
}
.exec-response-title::before {
  content: 'EXECUTE';
  font-family: var(--f-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: var(--emerald-bg);
  color: var(--emerald);
  padding: 2px 7px;
  border-radius: 4px;
}
.exec-raw-toggle {
  font-size: 10px;
  color: var(--ink-40);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.exec-response-body {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  max-height: 320px;
  overflow-y: auto;
}
.exec-response-empty {
  padding: 14px 16px;
  font-size: 11.5px;
  color: var(--ink-40);
}
.exec-response-err {
  background: var(--rose-bg);
  color: var(--rose);
}
.exec-response-raw {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
}
.exec-tool-result {
  border-top: 1px solid var(--rule-2);
  padding: 10px 16px;
}
.exec-tool-result:first-child { border-top: none; }
.exec-tool-result-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
}
.exec-tool-call-name {
  font-weight: 600;
  color: var(--ink);
}
.exec-tool-call-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.exec-tool-call-status.ok { background: var(--emerald-bg); color: var(--emerald); }
.exec-tool-call-status.err { background: var(--rose-bg); color: var(--rose); }
.exec-inline-running {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--ink-40);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}
.exec-inline-results {
  padding: 0;
}

/* ── Pass running indicator (live spinner during stream) ─────────────── */
.pass-running {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--amber);
  margin-left: 8px;
}
.pass-running-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  animation: pt-pulse 1.2s ease-in-out infinite;
}
@keyframes pt-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Slide-over (tool detail inspector) ──────────────────────────────── */
.slideover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28,25,23,0.35);
  z-index: 200;
  animation: pt-fade 0.15s ease-out;
}
@keyframes pt-fade { from { opacity: 0; } to { opacity: 1; } }
.slideover-body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--pt-shadow-lg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  animation: pt-slide 0.18s ease-out;
}
@keyframes pt-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.slideover-title {
  font-size: 13px;
  font-weight: 700;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slideover-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-40);
  padding: 0 4px;
  line-height: 1;
}
.slideover-close:hover { color: var(--ink); }
.slideover-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-2);
}
.slideover-section:last-child { border-bottom: none; }
.slideover-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.slideover-desc {
  font-size: 12px;
  color: var(--ink-70);
  line-height: 1.5;
}
.so-kv-key {
  color: var(--ink-40);
  font-size: 10.5px;
}
.so-kv-val {
  color: var(--ink);
  font-size: 10.5px;
}
.so-field-type {
  font-size: 10px;
  color: var(--ink-40);
}
.so-field-desc {
  font-size: 11px;
  color: var(--ink-70);
}

/* ── Result empty state ──────────────────────────────────────────────── */
.result-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-40);
}
.re-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: var(--pt-shadow-sm);
  color: var(--ink-40);
}
.re-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-70);
  margin-bottom: 4px;
}
.re-sub {
  font-size: 12px;
  color: var(--ink-40);
  max-width: 280px;
}

/* ── Mono utility ────────────────────────────────────────────────────── */

/* ── Scrollbars inside the plan view ─────────────────────────────────── */
.pt-plan-view::-webkit-scrollbar { width: 6px; }
.pt-plan-view::-webkit-scrollbar-track { background: transparent; }
.pt-plan-view::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.pt-plan-view::-webkit-scrollbar-thumb:hover { background: var(--ink-40); }

/* ══════════════════════════════════════════════════════════════════
   Mockup-aligned class names (V12 design system)
   Mirrors sandbox-v6_final.html — same structure, mapped to app tokens
   ══════════════════════════════════════════════════════════════════ */

/* ── Trace header ─────────────────────────────────────────────────────── */
.trace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--rule);
}
.trace-left { flex: 1; min-width: 0; }
.trace-query {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  max-width: 560px;
  color: var(--ink);
}
.trace-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
/* .trace-badge base — color variants already in .trace-badge.parallel etc. above */
.trace-badges .trace-badge,
.trace-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-family: var(--f-sans);
}
.trace-timing {
  font-size: 12px;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 4px;
}
.timing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
}

/* ── Source legend ────────────────────────────────────────────────────── */
.source-legend-wrap { margin-bottom: 24px; }
.source-legend {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--ink-40);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot.det { background: var(--emerald); }
.legend-dot.emb { background: var(--pt-blue); }
.legend-dot.llm { background: var(--amber); }
.legend-subtitle {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-70);
  line-height: 1.4;
  max-width: 560px;
}

/* ── qhead card ──────────────────────────────────────────────────────── */
.qhead {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--pt-shadow-sm);
}
.qhead-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qhead-top:has(+ .qhead-timing) { margin-bottom: 6px; }
.qhead-query {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 200px;
  line-height: 1.35;
}
.qhead-timing {
  font-size: 11px;
  color: var(--ink-40);
}
.qhead-timing.running { color: var(--amber); }

/* ── badge variants (used in qhead) ─────────────────────────────────── */
.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge.forward   { background: #f3edff; color: #6d28d9; border-color: #d9c9ff; }
.badge.parallel  { background: var(--pt-blue-bg); color: var(--pt-blue); border-color: var(--pt-blue-border); }
.badge.clarify   { background: var(--amber-bg); color: var(--amber); border-color: var(--pt-amber-border); }
.badge.ready     { background: var(--emerald-bg); color: var(--emerald); border-color: var(--pt-green-border); }
.badge.live {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--pt-amber-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  animation: dotpulse 1.2s ease-in-out infinite;
}

/* ── Sub-task (intent) ────────────────────────────────────────────────── */
.subtask { margin-bottom: 32px; }
.subtask-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.subtask-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--f-sans);
}
.subtask-label { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Pipeline steps (flat, no expand) ────────────────────────────────── */
.steps {
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  margin-left: 11px;
  margin-bottom: 14px;
}
.step {
  position: relative;
  padding: 9px 0 9px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  animation: stepfadein .18s ease-out both;
}
.step::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--surface-2);
}
.step.src-det::before { background: var(--emerald); box-shadow: 0 0 0 1px var(--pt-green-border); }
.step.src-emb::before { background: var(--pt-blue);  box-shadow: 0 0 0 1px var(--pt-blue-border); }
.step.src-llm::before { background: var(--amber);    box-shadow: 0 0 0 1px var(--pt-amber-border); }
.step-name { font-size: 11.5px; font-weight: 600; color: var(--ink-70); margin-bottom: 1px; }
.step-desc { font-size: 11px; color: var(--ink-40); line-height: 1.4; }
.src-tag { padding: 2px 7px; background: var(--surface); border-radius: 4px; border: 1px solid var(--rule); }

/* ── Tool card elements (header/name/score/desc/args/arg) ─────────────── */
.tool-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tool-card-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tool-name  { font-size: 13px; font-weight: 600; color: var(--ink); }
.tool-score { font-size: 14px; font-weight: 700; color: var(--emerald); }
.tool-decomp { display: flex; align-items: center; gap: 4px; margin: 4px 0 8px; }
.tool-decomp-chip { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.2px; }
.tool-decomp-chip.op     { background: rgba(37,99,235,0.07); color: var(--op-get); border: 1px solid rgba(37,99,235,0.15); }
.tool-decomp-chip.entity { background: rgba(15,118,110,0.07); color: #0f766e; border: 1px solid rgba(15,118,110,0.15); }
.tool-decomp-chip.modifier { background: rgba(124,58,237,0.07); color: #6d28d9; border: 1px solid rgba(124,58,237,0.15); font-style: italic; }
.sandbox-page .tool-desc { font-size: 11.5px; color: var(--ink-40); margin-bottom: 10px; line-height: 1.4; }
.tool-args { display: flex; flex-wrap: wrap; gap: 4px; }
/* Clarification inputs embedded inside tool card */
.tool-card.tool-card-clarify {
  border-color: #f59e0b;
  cursor: default;
}
.tool-card.tool-card-clarify:hover { box-shadow: none; }
.clarification-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.arg {
  font-size: 10px;
  padding: 2.5px 7px;
  border-radius: 4px;
  background: var(--pt-blue-bg);
  color: var(--pt-blue);
  border: 1px solid var(--pt-blue-border);
}

/* ── Execute bar (mockup-aligned class names) ─────────────────────────── */
.execute-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--pt-radius-lg);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--pt-shadow-lg);
  margin-top: 28px;
  z-index: 5;
}
.execute-bar-text { font-size: 13px; color: var(--ink-70); }
.execute-bar-text strong { color: var(--ink); font-weight: 700; }

/* ── Fixed footer (replaces sticky execute-bar / clarification-bar) ──── */
.footer {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -2px 8px rgba(28,25,23,0.03);
}
.footer-stats { display: flex; gap: 14px; font-size: 12px; color: var(--ink-70); }
.footer-stats b { color: var(--ink); font-weight: 700; }
.footer-stats .sep { color: var(--ink-20); }
.footer-btn {
  margin-left: auto;
  border: 0;
  padding: 10px 22px;
  border-radius: 7px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 0.2s, color 0.2s;
}
.footer-btn.exec { background: var(--emerald); color: #fff; }
.footer-btn.exec:hover:not(:disabled) { background: #1a9250; }
.footer-btn.clar { background: var(--amber); color: #fff; }
.footer-btn.clar:hover:not(:disabled) { background: #b45309; }
.footer-btn.dis,
.footer-btn:disabled { background: var(--ink-06, rgba(28,25,23,0.06)); color: var(--ink-40); cursor: not-allowed; }

/* Shared button base + execute-bar variants */
.btn {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-ghost { background: transparent; color: var(--ink-70); border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--ink-40); color: var(--ink); }
.btn-execute { background: var(--emerald); color: white; }
.btn-execute:hover { background: #1a9250; }
.play-icon {
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  display: inline-block;
}

/* ── Shared inputs block (rendered above per-intent clarification cards) ── */
.shared-block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--pt-shadow-sm);
}
.shared-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.shared-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.shared-sub {
  font-size: 11px;
  color: var(--ink-40);
  margin-bottom: 14px;
}
.shared-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.shared-note {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 12px;
  font-style: italic;
}

/* ── .sf field — used inside .shared-grid ────────────────────────────── */
.sf { display: flex; flex-direction: column; gap: 4px; }
.sf-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-label .req { color: var(--rose); }
.sf-help { font-size: 10.5px; color: var(--ink-40); }
.df-grid { display: flex; flex-direction: column; gap: 8px; }
.df-field { display: flex; flex-direction: column; gap: 3px; }
.df-label { font-size: 10px; font-weight: 600; color: var(--ink-50); display: flex; align-items: center; gap: 4px; }
.df-label .req { color: var(--rose); }
.sf-input {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  background: var(--surface-2);
  width: 100%;
  box-sizing: border-box;
}
.sf-input:focus {
  outline: 0;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.sf-filled {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--emerald-bg);
  border: 1px solid var(--pt-green-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--emerald);
  font-weight: 500;
}
.sf-filled .from-query-tag {
  margin-left: auto;
  font-size: 10px;
  color: var(--emerald);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pin-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--ink-40);
  cursor: pointer;
  margin-top: 2px;
  user-select: none;
}
.pin-check input { margin: 0; accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; }
.pin-check:hover { color: var(--accent); }
.pin-check input:checked + span { color: var(--accent); font-weight: 600; }

/* ── Clarification card ───────────────────────────────────────────────── */
.clarification-card {
  margin-top: 16px;
  background: var(--surface);
  border: 1.5px solid #f59e0b;
  border-radius: var(--pt-radius);
  padding: 14px 16px;
}
.clarification-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.clarification-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  font-family: var(--f-sans);
}
.clarification-ttl {
  font-size: 11px;
  color: var(--ink-40);
}
.clarification-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.clarification-arg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clarification-arg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.clarification-arg-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.clarification-shared-tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.clarification-tool-tag {
  font-size: 10px;
  color: var(--ink-40);
}
.clarification-reason {
  font-size: 11px;
  color: var(--ink-50);
  line-height: 1.4;
}
.clarification-input {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 6px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.clarification-input:focus {
  border-color: #f59e0b;
  background: var(--surface);
}
.clarification-bool-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
.clarification-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ── Clarification bar (sticky footer) ───────────────────────────────── */
.clarification-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1.5px solid #f59e0b;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 16px rgba(245,158,11,0.12);
  margin-top: 28px;
  z-index: 5;
  border-radius: 0 0 var(--pt-radius) var(--pt-radius);
}
.clarification-bar-incomplete .clarification-bar-text { color: var(--ink-40); }
.clarification-bar-text { font-size: 13px; color: var(--ink-70); }

/* ── Chip op variants — translucent pills ──────────────────────────── */
.chip-op-get        { background: var(--op-get-bg);        color: var(--op-get-text);        border-color: var(--op-get-border); }
.chip-op-list       { background: var(--op-list-bg);       color: var(--op-list-text);       border-color: var(--op-list-border); }
.chip-op-create     { background: var(--op-create-bg);     color: var(--op-create-text);     border-color: var(--op-create-border); }
.chip-op-update     { background: var(--op-update-bg);     color: var(--op-update-text);     border-color: var(--op-update-border); }
.chip-op-delete     { background: var(--op-delete-bg);     color: var(--op-delete-text);     border-color: var(--op-delete-border); }
.chip-op-search     { background: var(--op-search-bg);     color: var(--op-search-text);     border-color: var(--op-search-border); }
.chip-op-aggregate  { background: var(--op-aggregate-bg);  color: var(--op-aggregate-text);  border-color: var(--op-aggregate-border); }
.chip-op-merge      { background: var(--op-merge-bg);      color: var(--op-merge-text);      border-color: var(--op-merge-border); }
.chip-op-fork       { background: var(--op-fork-bg);       color: var(--op-fork-text);       border-color: var(--op-fork-border); }
.chip-op-push       { background: var(--op-push-bg);       color: var(--op-push-text);       border-color: var(--op-push-border); }
.chip-op-set        { background: var(--op-set-bg);        color: var(--op-set-text);        border-color: var(--op-set-border); }
.chip-op-configure  { background: var(--op-configure-bg);  color: var(--op-configure-text);  border-color: var(--op-configure-border); }
.chip-op-summarise  { background: var(--op-summarise-bg);  color: var(--op-summarise-text);  border-color: var(--op-summarise-border); }
.chip-op-execute    { background: var(--op-execute-bg);    color: var(--op-execute-text);    border-color: var(--op-execute-border); }
.chip-op-propose    { background: var(--op-propose-bg);    color: var(--op-propose-text);    border-color: var(--op-propose-border); }
.chip-op-analyse    { background: var(--op-analyse-bg);    color: var(--op-analyse-text);    border-color: var(--op-analyse-border); }
.chip-op-synthesise { background: var(--op-synthesise-bg); color: var(--op-synthesise-text); border-color: var(--op-synthesise-border); }

/* ── Keyframes ────────────────────────────────────────────────────────── */
/* Pass row entrance — fade + slide up */
@keyframes stepfadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Intent number running ring — scales out and fades */
@keyframes ringpulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* Timeline dot + intent ring pulsing amber glow */
@keyframes dotpulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--pt-amber-border), 0 0 0 2.5px var(--surface-2); }
  50%       { box-shadow: 0 0 0 4px rgba(217,119,6,.25), 0 0 0 2.5px var(--surface-2); }
}
/* Chip state-change flash */
@keyframes chipflash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(5,150,105,.2); }
  100% { transform: scale(1); }
}


.sandbox-page .sandbox-dag-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.sandbox-page .sandbox-dag-back {
  align-self: flex-start;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-60);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}

.sandbox-page .sandbox-dag-back:hover {
  border-color: var(--accent-solid);
  background: var(--surface-2);
  color: var(--ink);
}

.sandbox-page .sandbox-dag-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.sandbox-page .sandbox-dag-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sandbox-page .sandbox-dag-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sandbox-page .sandbox-dag-subtitle {
  font-size: 12px;
  color: var(--ink-40);
}

.sandbox-page .sandbox-dag-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-50);
  flex-wrap: wrap;
}

.sandbox-page .sandbox-dag-error {
  border: 1px solid rgba(185, 28, 28, 0.25);
  background: rgba(185, 28, 28, 0.08);
  color: var(--error-text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}

.sandbox-page .sandbox-dag-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 10px;
  align-items: stretch;
}

.sandbox-page .sandbox-dag-panel {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
  height: clamp(600px, 74vh, 980px);
  position: relative;
  background:
    radial-gradient(circle at 12% 12%, rgba(20, 184, 166, 0.08), transparent 36%),
    radial-gradient(circle at 84% 18%, rgba(249, 115, 22, 0.09), transparent 34%),
    var(--bg-page);
}

.sandbox-page .sandbox-dag-zoom-controls {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  gap: 6px;
}

.sandbox-page .sandbox-dag-zoom-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  background: var(--elevated);
  backdrop-filter: blur(4px);
  color: var(--ink-70);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.13s;
}

.sandbox-page .sandbox-dag-zoom-btn.wide {
  min-width: 60px;
  font-size: 11px;
  font-weight: 600;
}

.sandbox-page .sandbox-dag-zoom-btn:hover {
  border-color: var(--accent-solid);
  background: var(--surface-hover);
  color: var(--ink);
}

.sandbox-page .sandbox-dag-canvas {
  width: 100%;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  cursor: grab;
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.sandbox-page .sandbox-dag-canvas.dragging {
  cursor: grabbing;
}

.sandbox-page .sandbox-dag-viewport {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.sandbox-page .capg-stage {
  position: relative;
  min-width: 1200px;
  min-height: 720px;
}

.sandbox-page .capg-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sandbox-page .capg-edge {
  fill: none;
  stroke: rgba(100, 116, 139, 0.42);
  stroke-width: 1.8;
  transition: stroke 0.16s, stroke-width 0.16s, opacity 0.16s;
  opacity: 0.36;
  pointer-events: auto;
  cursor: pointer;
}

.sandbox-page .capg-edge.active {
  stroke: #0f766e;
  stroke-width: 2.6;
  opacity: 0.95;
}

.sandbox-page .capg-edge-badge {
  position: absolute;
  width: 32px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-50);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.13s;
  z-index: 2;
}

.sandbox-page .capg-edge-badge:hover {
  border-color: var(--accent-solid);
  color: var(--ink-70);
}

.sandbox-page .capg-edge-badge.active {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.sandbox-page .capg-node {
  position: absolute;
  border-radius: 12px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.13s, box-shadow 0.13s, border-color 0.13s;
}

.sandbox-page .capg-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  border-color: var(--accent-solid);
}

.sandbox-page .capg-node.inferred {
  background: var(--surface-hover);
  border-style: dashed;
}

.sandbox-page .capg-node.selected {
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

.sandbox-page .capg-node-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-page .capg-node-meta {
  margin-top: 5px;
  font-size: 10px;
  color: var(--ink-40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-page .sandbox-dag-inspector {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  min-height: 0;
  height: clamp(600px, 74vh, 980px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sandbox-page .sdi-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  font-weight: 700;
}

.sandbox-page .sdi-subtitle {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sandbox-page .sdi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-50);
}

.sandbox-page .sdi-row code {
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 11px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-page .sdi-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.sandbox-page .sdi-tool-item {
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--surface-2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sandbox-page .sdi-tool-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.sandbox-page .sdi-tool-params {
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-40);
}

.sandbox-page .sdi-empty {
  font-size: 12px;
  color: var(--ink-40);
  margin-top: 4px;
}

.sandbox-page .sandbox-dag-loading-overlay {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.84);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
}

.sandbox-page .sandbox-dag-foot {
  font-size: 11px;
  color: var(--ink-50);
}

.sandbox-page .sandbox-dag-empty,
.sandbox-page .sandbox-dag-loading {
  flex: 1;
  border: 1px dashed var(--rule-2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-40);
  background: var(--surface);
}

.sandbox-page .sandbox-dag-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.sandbox-page .sandbox-dag-empty-sub {
  font-size: 12px;
  color: var(--ink-40);
}

@media (max-width: 1280px) {
  .sandbox-page .sandbox-dag-main {
    grid-template-columns: 1fr;
  }

  .sandbox-page .sandbox-dag-inspector {
    max-height: 240px;
  }
}

@media (max-width: 980px) {
  .sandbox-page .sandbox-dag-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


.batch-layout {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.batch-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  flex-shrink: 0;
}

.batch-right {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.batch-prompts {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bph {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bph-title {
  font-size: 12px;
  font-weight: 600;
}

.bph-count {
  font-size: 11px;
  color: var(--ink-40);
  font-weight: 400;
}

.bph-actions {
  display: flex;
  gap: 6px;
}

.small-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
}

.bp-scroll {
  flex: 1;
  overflow-y: auto;
}

.bp-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
}

.bp-num {
  font-size: 10.5px;
  color: var(--ink-20);
  margin-top: 2px;
  min-width: 16px;
}

.bp-text {
  font-size: 12.5px;
  color: var(--ink-70);
  flex: 1;
  line-height: 1.5;
}

.bp-del {
  width: 18px;
  height: 18px;
  border: 0;
  background: none;
  color: var(--ink-20);
  border-radius: 4px;
  cursor: pointer;
}

.bp-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  color: var(--ink-40);
}

.bp-add-label {
  font-size: 12.5px;
}

.batch-run-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-run-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.batch-progress {
  flex: 1;
  height: 5px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
  display: none;
}

.batch-progress.show {
  display: block;
}

.batch-progress-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: 3px;
  transition: width 0.3s var(--ease);
}

.bp-fill-0 { width: 0%; }
.bp-fill-1 { width: 16.66%; }
.bp-fill-2 { width: 33.33%; }
.bp-fill-3 { width: 50%; }
.bp-fill-4 { width: 66.66%; }
.bp-fill-5 { width: 83.33%; }
.bp-fill-6 { width: 100%; }

.batch-count {
  font-size: 12px;
  color: var(--ink-40);
}

.batch-summary {
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  display: none;
  gap: 16px;
  background: var(--surface-2);
}

.batch-summary.show {
  display: flex;
}

.bs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bs-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.bs-val.go { color: var(--emerald); }
.bs-val.warn { color: var(--amber); }
.bs-val.bad { color: var(--rose); }

.bs-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.batch-results-head,
.batch-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 80px;
  padding: 0 20px;
}

.batch-results-head {
  border-bottom: 1px solid var(--rule);
}

.brh {
  padding: 8px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-20);
}

.batch-results-scroll {
  flex: 1;
  overflow-y: auto;
}

.batch-row {
  border-bottom: 1px solid var(--rule);
  animation: fadeUp 0.3s var(--ease) both;
}

.brc {
  padding: 10px 6px;
  display: flex;
  align-items: center;
}

.br-query {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-tool,
.br-score {
  font-size: 12px;
}

.br-score {
  font-weight: 600;
}

.brs-high { color: var(--emerald); }
.brs-mid { color: var(--amber); }
.brs-low { color: var(--rose); }

.br-verdict {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.brv-called { background: var(--emerald-bg); color: var(--emerald); }
.brv-skipped { background: var(--ink-06); color: var(--ink-40); }
.brv-blocked { background: var(--rose-bg); color: var(--rose); }

.batch-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-20);
  padding: 40px;
}

.be-label {
  font-size: 13px;
  color: var(--ink-40);
}

.be-sub {
  font-size: 12px;
  color: var(--ink-20);
}


.ab-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.ab-prompt-panel,
.ab-config-card,
.ab-result-col {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.ab-prompt-inner {
  padding: 12px 16px 0;
}

.ab-prompt-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.ab-input {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  resize: none;
  line-height: 1.6;
  min-height: 64px;
  font-size: 13px;
  font-family: var(--f-sans);
}

.ab-prompt-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ab-prompt-sub {
  font-size: 12px;
  color: var(--ink-40);
}

.ab-run-all {
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.ab-run-all.running {
  opacity: 0.6;
}

.ab-configs {
  display: flex;
  gap: 10px;
}

.ab-config-card {
  flex: 1;
}

.acc-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}

.acc-label-a { background: var(--blue-bg); color: var(--blue); }
.acc-label-b { background: var(--violet-bg); color: var(--violet); }

.acc-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.acc-edit {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-40);
  cursor: pointer;
}

.acc-body {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acc-key {
  font-size: 11.5px;
  color: var(--ink-40);
}

.acc-val {
  font-size: 12px;
  font-weight: 500;
}

.acc-diff {
  color: var(--amber);
  font-weight: 600;
}

.ab-results {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 0;
}

.ab-result-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.arc-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}

.arc-sub {
  font-size: 12px;
  color: var(--ink-40);
  margin-left: 4px;
}

.arc-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ab-result-item {
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
}

.ab-ri-tool {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ab-ri-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ab-ri-score-val {
  font-size: 13px;
  font-weight: 700;
}

.ab-ri-go { color: var(--emerald); }
.ab-ri-muted { color: var(--ink-40); }
.ab-ri-warn { color: var(--amber); }

.ab-ri-verdict {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.ab-ri-confirm {
  background: var(--amber-bg);
  color: var(--amber);
}

.ab-ri-bar {
  height: 4px;
  background: var(--ink-06);
  border-radius: 2px;
  overflow: hidden;
}

.ab-ri-fill {
  height: 100%;
  border-radius: 2px;
  animation: sandboxBarGrow 0.7s var(--ease) 0.1s both;
}

.ab-fill-go { background: var(--emerald); }
.ab-fill-muted { background: var(--ink-20); }
.ab-fill-warn { background: var(--amber); }
.ab-w91 { --w: 91%; width: var(--w); }
.ab-w88 { --w: 88%; width: var(--w); }
.ab-w71 { --w: 71%; width: var(--w); }
.ab-w0 { --w: 0%; width: var(--w); }

.ab-result-col.winner .ab-result-item {
  border-color: var(--emerald-rule);
  background: var(--emerald-bg);
}

.ab-winner-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--emerald);
  color: white;
  margin-left: auto;
}

.ab-delta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px;
}

.delta-better { background: var(--emerald-bg); color: var(--emerald); }
.delta-worse { background: var(--rose-bg); color: var(--rose); }
.delta-same { background: var(--ink-06); color: var(--ink-40); }


.sandbox-page .goal-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.sandbox-page .goal-input-strip {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-shrink: 0;
}

.sandbox-page .gis-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sandbox-page .gis-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sandbox-page .gis-main-input {
  flex: 1;
  min-width: 260px;
}

.sandbox-page .gis-select-block {
  min-width: 200px;
}

.sandbox-page .gis-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.sandbox-page .gis-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sandbox-page .gis-input {
  flex: 1;
  padding: 9px 13px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all 0.13s;
}

.sandbox-page .gis-input:focus {
  border-color: var(--accent-solid);
  background: var(--surface);
}

.sandbox-page .gis-input.parsed {
  border-color: var(--emerald);
}

.sandbox-page .gis-input::placeholder {
  color: var(--ink-20);
}

.sandbox-page .gis-parse {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: all 0.13s;
  flex-shrink: 0;
}

.sandbox-page .gis-parse:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.sandbox-page .gis-or {
  font-size: 11.5px;
  color: var(--ink-20);
}

.sandbox-page .gis-select {
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  min-width: 200px;
}

.sandbox-page .gis-artifacts-line {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sandbox-page .terminal-artifacts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sandbox-page .ta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-40);
  white-space: nowrap;
}

.sandbox-page .ta-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-rule);
  color: var(--emerald);
}

.sandbox-page .ta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sandbox-page .ta-remove {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--emerald);
  opacity: 0.6;
  transition: opacity 0.12s;
  border: 0;
  background: transparent;
}

.sandbox-page .ta-remove:hover {
  opacity: 1;
}

.sandbox-page .gis-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.sandbox-page .ctrl-speed-label {
  font-size: 11px;
  color: var(--ink-40);
}

.sandbox-page .ctrl-speed {
  font-size: 11px;
  color: var(--ink-40);
  padding: 0 4px;
}

.sandbox-page .ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-70);
  cursor: pointer;
  transition: all 0.13s;
}

.sandbox-page .ctrl-btn:hover {
  background: var(--bg-page);
  color: var(--ink);
}

.sandbox-page .ctrl-btn.primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.sandbox-page .ctrl-btn.primary:hover {
  background: #1c1c22;
}

.sandbox-page .ctrl-btn.active {
  background: var(--rose-bg);
  border-color: var(--rose-rule);
  color: var(--rose);
}

.sandbox-page .goal-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 10px;
  min-height: 0;
}

@media (max-width: 1280px) {
  .sandbox-page .goal-main {
    grid-template-columns: 1fr;
  }
}


.sandbox-page .graph-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sandbox-page .gp-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sandbox-page .gp-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.3s;
}

.sandbox-page .gp-legend {
  display: flex;
  gap: 14px;
}

.sandbox-page .gp-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-40);
}

.sandbox-page .gp-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sandbox-page .gp-leg-go { background: var(--emerald); }
.sandbox-page .gp-leg-warn { background: var(--amber); }
.sandbox-page .gp-leg-gap { background: transparent; border: 1.5px dashed var(--rose); }
.sandbox-page .gp-leg-done { background: var(--ink-10); }

.sandbox-page .graph-canvas {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 24px;
}

.sandbox-page .dag {
  position: relative;
  width: 100%;
  max-width: 520px;
  transform: translateY(-8px);
}

.sandbox-page .dag-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.sandbox-page .edge {
  fill: none !important;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: fadeUp 0.4s ease forwards;
}

.sandbox-page .edge-arrow {
  opacity: 0;
  animation: fadeUp 0.4s ease forwards;
  stroke: none !important;
  stroke-dasharray: none !important;
}

.sandbox-page .edge-go {
  stroke: #059669;
}

.sandbox-page .edge-gap {
  stroke: #e11d48;
  stroke-dasharray: 5 3;
}

.sandbox-page .edge-done {
  stroke: rgba(14, 14, 16, 0.15);
}

.sandbox-page .edge-arrow.edge-go {
  fill: #059669;
}

.sandbox-page .edge-arrow.edge-gap {
  fill: #e11d48;
}

.sandbox-page .edge-arrow.edge-done {
  fill: rgba(14, 14, 16, 0.15);
}

.sandbox-page .dag-rows {
  display: flex;
  flex-direction: column;
  gap: 52px;
  position: relative;
  z-index: 1;
}

.sandbox-page .dag-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.sandbox-page .dag-row-single {
  justify-content: center;
}

.sandbox-page .dag-node {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--rule-2);
  background: var(--surface-2);
  transition: all 0.28s var(--ease);
  min-width: 160px;
  max-width: 220px;
  flex: 1;
  opacity: 0;
  transform: translateY(6px);
  text-align: center;
}

.sandbox-page .dag-node.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.sandbox-page .dag-label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-70);
  text-align: center;
}

.sandbox-page .dag-sub {
  font-size: 9.5px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-40);
  text-align: center;
}

.sandbox-page .dag-go {
  background: var(--emerald-bg);
  border-color: var(--emerald);
}

.sandbox-page .dag-go .dag-label {
  color: var(--emerald);
}

.sandbox-page .dag-go .dag-sub {
  color: var(--emerald);
  opacity: 0.65;
}

.sandbox-page .dag-wait {
  background: var(--amber-bg);
  border-color: var(--amber-rule);
  max-width: 260px;
}

.sandbox-page .dag-wait .dag-label {
  color: var(--amber);
}

.sandbox-page .dag-wait .dag-sub {
  color: var(--amber);
  opacity: 0.65;
}

.sandbox-page .dag-gap {
  background: white;
  border-color: var(--rose);
  border-style: dashed;
  max-width: 260px;
  position: relative;
}

.sandbox-page .dag-gap .dag-label {
  color: var(--rose);
}

.sandbox-page .dag-gap .dag-sub {
  color: var(--rose);
  opacity: 0.65;
}

.sandbox-page .dag-done {
  background: var(--surface-2) !important;
  border-color: var(--rule) !important;
  border-style: solid !important;
}

.sandbox-page .dag-done .dag-label {
  color: var(--ink-20) !important;
  text-decoration: none;
}

.sandbox-page .dag-done .dag-sub {
  color: var(--ink-20) !important;
}

.sandbox-page .dag-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  border-style: solid !important;
  box-shadow: 0 4px 14px rgba(14, 14, 16, 0.13);
}

.sandbox-page .dag-active .dag-label {
  color: white !important;
}

.sandbox-page .dag-active .dag-sub {
  color: rgba(255, 255, 255, 0.5) !important;
}

.sandbox-page .dag-pulse {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  animation: dagPulse 2s ease infinite;
}

@keyframes dagPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.5); }
}

.sandbox-page .dag-goal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 20px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.18);
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
}


.sim-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sp-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}

.sp-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

.sp-sub {
  font-size: 11.5px;
  color: var(--ink-40);
}

.sp-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-step {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
}

.sim-step.done {
  border-color: var(--emerald-rule);
  background: var(--emerald-bg);
}

.sim-step.active {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(14, 14, 16, 0.08);
}

.sim-step.gap {
  border-color: var(--rose-rule);
  background: var(--rose-bg);
}

.ss-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.ss-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-40);
  flex-shrink: 0;
}

.sim-step.done .ss-num {
  background: var(--emerald);
  border-color: var(--emerald);
  color: white;
}

.sim-step.active .ss-num {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.sim-step.gap .ss-num {
  background: var(--rose);
  border-color: var(--rose);
  color: white;
}

.ss-tool {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
}

.sim-step.done .ss-tool { color: var(--emerald); }
.sim-step.gap .ss-tool { color: var(--rose); }

.ss-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.ssb-done { background: var(--emerald-bg); color: var(--emerald); }
.ssb-active { background: var(--ink); color: white; }
.ssb-gap { background: var(--rose-bg); color: var(--rose); }
.ssb-pending { background: var(--ink-06); color: var(--ink-40); }

.ss-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ss-art {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
}

.ssa-p { background: var(--emerald-bg); color: var(--emerald); }
.ssa-r { background: var(--blue-bg); color: var(--blue); }

.ss-gap-msg {
  font-size: 11.5px;
  color: var(--rose);
  margin-top: 4px;
  line-height: 1.4;
}

.sim-inventory {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
  margin-top: 4px;
}

.sim-inv-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 8px;
}

.inventory {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inv-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}

.inv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inv-dot.present { background: var(--emerald); }
.inv-dot.missing { background: var(--ink-10); }

.inv-name {
  color: var(--ink-70);
  flex: 1;
}

.inv-conf {
  color: var(--ink-40);
  font-size: 11px;
}

.sim-verdict {
  padding: 12px 14px;
  border-radius: 9px;
  margin-top: 4px;
  text-align: center;
  display: none;
}

.sim-verdict.show {
  display: block;
}

.sv-partial {
  background: var(--amber-bg);
  border: 1px solid var(--amber-rule);
}

.sv-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  color: var(--amber);
}

.sv-sub {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--amber);
}

.sv-cta {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}


.settings-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.settings-page .page-header {
  margin-bottom: 0;
}

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 28px 20px;
  animation: fadeUp 0.3s var(--ease) .1s both;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav .sn-danger {
  margin-top: auto;
}

.settings-nav .sn-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink-70);
  cursor: pointer;
  transition: all 0.12s var(--ease);
  letter-spacing: -0.015em;
}

.settings-nav .sn-item:hover {
  background: var(--ink-06);
  color: var(--ink);
}

.settings-nav .sn-item.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.settings-nav .sn-item.active .sn-ic {
  opacity: 0.85;
  color: var(--accent);
}

.settings-nav .sn-ic {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.55;
}

.settings-nav .sn-danger.active {
  background: var(--rose);
}

.settings-nav .sn-danger:hover {
  background: var(--rose-bg);
  color: var(--rose);
}

.settings-panel {
  display: none;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  min-height: 0;
}

.settings-panel.show {
  display: flex;
}

.s-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

.s-card:last-child {
  margin-bottom: 0;
}

.s-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}

.s-card-head.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.s-card-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 2px;
}

.s-card-sub {
  font-size: 12px;
  color: var(--ink-40);
}

.s-card-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s-card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 8px;
  background: var(--surface-2);
}

.s-card-foot.start {
  justify-content: flex-start;
}

.s-card-foot.end {
  justify-content: flex-end;
}

.s-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.13s;
  letter-spacing: -0.01em;
}

.s-btn:hover {
  background: var(--bg-page);
  border-color: var(--accent-solid);
  color: var(--ink);
}

.s-btn.prime {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}

.s-btn.prime:hover {
  background: var(--accent-hover);
}

.s-btn.danger {
  color: var(--rose);
  border-color: var(--rose-rule);
}

.s-btn.danger:hover {
  background: var(--rose-bg);
}

.s-btn.disabled {
  opacity: 0.45;
  cursor: default;
}

.s-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.s-btn-xs {
  height: 28px;
  font-size: 11.5px;
}

.s-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.s-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.s-field-row.single {
  grid-template-columns: 1fr;
}

.s-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-70);
  letter-spacing: -0.01em;
}

.s-hint {
  font-size: 11px;
  color: var(--ink-40);
}

.s-input {
  padding: 9px 13px;
  background: var(--surface);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all 0.14s;
  width: 100%;
}

.s-input:focus {
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.s-input::placeholder {
  color: var(--ink-20);
}

.s-input.mono,
.mono {
  font-family: var(--f-mono);
}

.del-modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, 0.45);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.del-modal.show {
  opacity: 1;
  pointer-events: all;
}

.del-card {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--rule-2);
  width: 440px;
  padding: 28px;
  box-shadow: 0 32px 80px rgba(14, 14, 16, 0.18);
  transform: translateY(10px);
  transition: transform 0.25s var(--ease);
}

.del-modal.show .del-card {
  transform: translateY(0);
}

.del-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 6px;
}

.del-sub {
  font-size: 13px;
  color: var(--ink-40);
  line-height: 1.5;
  margin-bottom: 18px;
}

.del-confirm-label {
  font-size: 12.5px;
  color: var(--ink-70);
  margin-bottom: 6px;
}

.del-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  margin-bottom: 18px;
}

.del-input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-rule);
}

.del-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .s-field-row {
    grid-template-columns: 1fr;
  }
}


.workspace-section .logo-upload {
  display: flex;
  align-items: center;
  gap: 14px;
}

.workspace-section .logo-preview {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-gradient);
  box-shadow: 0 0 20px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-section .logo-preview .brand-mark {
  width: 24px;
  height: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.workspace-section .logo-preview .brand-mark span {
  border-radius: 2px;
  background: rgba(255,255,255,0.9);
}

.workspace-section .logo-preview .brand-mark span:nth-child(2),
.workspace-section .logo-preview .brand-mark span:nth-child(3) {
  opacity: 0.55;
}

.workspace-section .logo-preview .brand-mark span:nth-child(4) {
  opacity: 0.22;
}

.workspace-section .logo-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-section .logo-hint {
  font-size: 11px;
  color: var(--ink-40);
}

.workspace-section .workspace-save-note {
  font-size: 11px;
  color: var(--emerald);
}


.team-section .team-body {
  padding-bottom: 0;
  gap: 0;
}

.team-section .mt-head,
.team-section .member-row {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(280px, 0.9fr) 110px 36px;
  align-items: center;
  column-gap: 12px;
}

.team-section .mt-head {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2px;
}

.team-section .mt-th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-20);
  font-family: var(--f-mono);
}

.team-section .member-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.team-section .member-row:last-child {
  border-bottom: none;
}

.team-section .member-id {
  display: flex;
  align-items: center;
  gap: 9px;
}

.team-section .member-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.team-section .av-jd { background: var(--accent-bg); color: var(--accent-text); }
.team-section .av-sr { background: var(--blue-bg); color: var(--blue); }
.team-section .av-pl { background: var(--emerald-bg); color: var(--emerald); }
.team-section .av-mk { background: var(--violet-bg); color: var(--violet); }

.team-section .member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.team-section .member-self {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team-section .member-name-input {
  width: 180px;
  max-width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}

.team-section .member-name-input:focus {
  border-color: var(--accent-solid); box-shadow: 0 0 0 2px var(--accent-glow);
}

.team-section .member-name-action {
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-70);
  font-size: 11px;
  font-weight: 500;
  height: 26px;
  padding: 0 8px;
  cursor: pointer;
}

.team-section .member-name-action:hover {
  border-color: var(--accent-solid);
  color: var(--ink);
  background: var(--bg-page);
}

.team-section .member-name-edit-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}

.team-section .member-name-edit-btn:hover {
  color: var(--ink);
  background: var(--ink-06);
}

.team-section .member-email {
  font-size: 11.5px;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.team-section .member-you {
  font-size: 10px;
  color: var(--ink-40);
  margin-left: 6px;
}

.team-section .role-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--f-mono);
}

.team-section .role-admin { background: var(--accent-gradient); color: white; box-shadow: var(--shadow-glow); }
.team-section .role-editor { background: var(--blue-bg); color: var(--blue); }
.team-section .role-viewer { background: var(--ink-06); color: var(--ink-40); }

.team-section .remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.team-section .remove-btn:hover {
  background: var(--rose-bg);
  border-color: var(--rose-rule);
  color: var(--rose);
}

.team-section .invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

.team-section .invite-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}

.team-section .invite-pass {
  max-width: 180px;
}

.team-section .role-select {
  padding: 8px 10px;
  border: 1.5px solid var(--rule-2);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-70);
  background: var(--surface);
}

.team-section .team-empty {
  padding: 14px 0;
  font-size: 12px;
  color: var(--ink-40);
}

.team-section .team-error {
  margin: 10px 20px 0;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--rose-rule);
  background: var(--rose-bg);
  color: var(--rose);
}

/* ── Generated password modal ── */
.team-pw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, 0.45);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-pw-modal {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  width: 420px;
  padding: 28px;
  box-shadow: 0 32px 80px rgba(14, 14, 16, 0.18);
  animation: fadeUp 0.22s var(--ease);
}

.team-pw-modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 8px;
}

.team-pw-modal-sub {
  font-size: 13px;
  color: var(--ink-40);
  line-height: 1.55;
  margin-bottom: 20px;
}

.team-pw-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1.5px solid var(--rule-2);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 20px;
}

.team-pw-value {
  flex: 1;
  font-size: 13.5px;
  color: var(--ink);
  word-break: break-all;
  letter-spacing: 0.04em;
}

.team-pw-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--rule-2);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-70);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s;
}

.team-pw-copy:hover {
  border-color: var(--accent-solid);
  color: var(--accent);
}

.team-pw-copy.copied {
  border-color: var(--accent-solid);
  color: var(--accent);
  background: var(--accent-bg);
}

.team-pw-actions {
  display: flex;
  justify-content: flex-end;
}


.apikeys-section .key-body {
  gap: 12px;
}

.apikeys-section .provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.apikeys-section .provider-meta {
  min-width: 0;
}

.apikeys-section .provider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.apikeys-section .provider-sub {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 2px;
}

.apikeys-section .key-status-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--surface-2);
  color: var(--ink-40);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.apikeys-section .key-status-chip.ok {
  border-color: var(--emerald-rule);
  color: var(--emerald);
  background: var(--emerald-bg);
}

.apikeys-section .provider-actions {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}

.apikeys-section .provider-key-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
  font-size: 12px;
}

.apikeys-section .provider-key-input:focus {
  border-color: var(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-06);
}

.apikeys-section .provider-msg {
  font-size: 12px;
  line-height: 1.45;
  border-radius: 8px;
  padding: 8px 10px;
}

.apikeys-section .provider-msg.ok {
  color: var(--emerald);
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-rule);
}

.apikeys-section .provider-msg.error {
  color: var(--rose);
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
}

@media (max-width: 1100px) {
  .apikeys-section .provider-actions {
    grid-template-columns: 1fr 1fr;
  }
}


.billing-section .billing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-section .billing-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.billing-section .plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--violet-bg);
  border: 1px solid var(--violet-rule);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet);
  font-family: var(--f-mono);
}

.billing-section .billing-plan-sub {
  font-size: 13px;
  color: var(--ink-40);
}

.billing-section .billing-date {
  color: var(--ink);
}

.billing-section .section-sep {
  height: 1px;
  background: var(--rule);
}

.billing-section .usage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.billing-section .usage-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.billing-section .usage-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.billing-section .usage-val {
  font-size: 12px;
  color: var(--ink-40);
}

.billing-section .usage-bar {
  height: 6px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
}

.billing-section .usage-fill {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: barGrow 0.9s var(--ease) 0.2s both;
}

.billing-section .usage-blue { background: var(--blue); }
.billing-section .usage-emerald { background: var(--emerald); }
.billing-section .usage-violet { background: var(--violet); }
.billing-section .usage-w73 { width: 73%; }
.billing-section .usage-w70 { width: 70%; }
.billing-section .usage-w44 { width: 44%; }

.billing-section .billing-details {
  gap: 0;
}

.billing-section .billing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.billing-section .billing-row:last-child {
  border-bottom: none;
}

.billing-section .billing-key {
  font-size: 12.5px;
  color: var(--ink-40);
}

.billing-section .billing-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}


.sec-form {
  gap: 14px;
}

.sec-checklist {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 9px;
}

.sec-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-40);
  transition: color 0.15s;
}

.sec-check.ok {
  color: var(--accent);
}

.sec-check-dot {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sec-error {
  font-size: 12px;
  color: var(--rose);
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 8px;
  padding: 8px 10px;
}

.sec-success {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
}


.danger-section .danger-card {
  border-color: var(--rose-rule);
}

.danger-section .danger-card .s-card-head {
  background: var(--rose-bg);
  border-bottom-color: var(--rose-rule);
}

.danger-section .danger-card .s-card-title {
  color: var(--rose);
}

.danger-section .danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.danger-section .danger-item.no-border {
  border-bottom: none;
}

.danger-section .danger-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.danger-section .danger-item-sub {
  font-size: 12px;
  color: var(--ink-40);
  margin-top: 2px;
}


.placeholder-page {
  padding: 16px;
}

.placeholder-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  padding: 20px;
}

.placeholder-title {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.placeholder-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-40);
}