/* ── Self-hosted 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 {
  --ink: #0e0e10;
  --ink-70: rgba(14, 14, 16, 0.7);
  --ink-40: rgba(14, 14, 16, 0.4);
  --ink-20: rgba(14, 14, 16, 0.2);
  --ink-12: rgba(14, 14, 16, 0.12);
  --ink-10: rgba(14, 14, 16, 0.1);
  --ink-08: rgba(14, 14, 16, 0.08);
  --ink-06: rgba(14, 14, 16, 0.06);
  --ink-04: rgba(14, 14, 16, 0.04);

  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --rule: rgba(0, 0, 0, 0.07);
  --rule-2: rgba(0, 0, 0, 0.13);

  --emerald: #059669;
  --emerald-bg: #ecfdf5;
  --emerald-rule: rgba(5, 150, 105, 0.18);

  --rose: #e11d48;
  --rose-bg: #fff1f2;
  --rose-rule: rgba(225, 29, 72, 0.18);

  --amber: #d97706;
  --amber-bg: #fffbeb;
  --amber-rule: rgba(217, 119, 6, 0.18);

  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --blue-rule: rgba(37, 99, 235, 0.18);

  --violet: #7c3aed;
  --violet-bg: #f5f3ff;
  --violet-rule: rgba(124, 58, 237, 0.18);

  --f-sans: 'Outfit', 'Sora', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;

  --nav-width: 220px;
  --topbar-height: 54px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Rail nav ─────────────────────────────────────────── */
  --rail-bg: #1c1917;
  --rail-text: #a8a29e;
  --rail-text-active: #fafaf9;
  --rail-hover: rgba(255,255,255,0.06);
  --rail-w: 56px;

  /* ── Page surfaces ────────────────────────────────────── */
  --page-bg: #f5f4f2;
  --border: #e5e2dd;
  --border-light: #f0ede8;

  /* ── Semantic text ────────────────────────────────────── */
  --text: #1c1917;
  --text-secondary: #57534e;
  --text-tertiary: #a8a29e;
  --text-inverse: #fafaf9;

  /* ── Accent ───────────────────────────────────────────── */
  --accent: #5b7fb5;
  --accent-hover: #4e6fa3;
  --accent-bg: #edf2f9;
  --accent-border: rgba(91,127,181,0.25);
  --accent-glow: rgba(91,127,181,0.3);

  /* ── Semantic colors ──────────────────────────────────── */
  --green: #22a55b;
  --green-bg: #ecfdf3;
  --green-border: #bbf0d0;
  --yellow: #ca8a04;
  --yellow-bg: #fefce8;
  --yellow-border: #e8d374;
  --blue-border: #b8d4f8;
  --red: #dc3545;
  --red-bg: #fef2f2;
  --purple: #7c3aed;
  --purple-bg: #f5f3ff;

  /* ── Operation colors ─────────────────────────────────── */
  --op-configure: #6d28d9;
  --op-get: #2563eb;
  --op-list: #7c3aed;
  --op-set: #0891b2;
  --op-search: #0891b2;
  --op-create: #16a34a;
  --op-update: #ca8a04;
  --op-delete: #dc2626;
  --op-summarise: #b45309;

  /* ── Geometry & shadows ───────────────────────────────── */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
  --shadow: 0 2px 8px rgba(28,25,23,0.06);
  --shadow-lg: 0 8px 24px rgba(28,25,23,0.1);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

.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(5, 150, 105, 0.6);
  }
  40% {
    box-shadow: 0 0 0 5px rgba(5, 150, 105, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

@keyframes ripple-warn {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
  }
  40% {
    box-shadow: 0 0 0 5px rgba(217, 119, 6, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 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);
  }
}

.pip-connected,
.npip-go {
  background: var(--emerald);
  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-end;
  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-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}

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

.page-title-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  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: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  font-family: var(--f-sans);
}

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

.fp.on {
  background: var(--ink);
  color: white;
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Button primitives ────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--text-tertiary); color: var(--text); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--border); }
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Rise animation ───────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise   { animation: rise 0.25s ease-out both; }
.rise-1 { animation-delay: 0.03s; }
.rise-2 { animation-delay: 0.06s; }


.app-shell,
.shell {
  display: grid;
  grid-template-columns: 56px 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;
  background: var(--page-bg);
  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);
  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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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(--ink-20); }
.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(--ink-20); background: var(--bg); }

.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: linear-gradient(135deg, #f0e6d6, #d4b896);
  color: #8b6040;
  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(--ink-20);
  color: var(--ink);
  background: var(--bg);
}

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

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


/* ══════ RAIL NAV ══════ */
.rail {
  background: var(--rail-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  z-index: 10;
  overflow: hidden;
}

.rail-logo {
  width: 36px;
  height: 36px;
  margin: 6px 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5px;
  padding: 7px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  border: none;
  background: none;
}

.rail-logo:hover { background: var(--rail-hover); }

.rail-logo span {
  background: var(--rail-text);
  border-radius: 2px;
  transition: background 0.15s;
}

.rail-logo:hover span { background: var(--rail-text-active); }

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.rail-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--rail-text);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  border: none;
  background: none;
}

.rail-item:hover {
  background: var(--rail-hover);
  color: var(--rail-text-active);
}

.rail-item.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.rail-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Tooltip */
.rail-item .tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 200;
  font-family: var(--font);
}

.rail-item .tip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: var(--text);
}

.rail-item:hover .tip { opacity: 1; }
.rail-item.active .tip { display: none; }

/* Badge */
.rail-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: var(--accent);
  color: white;
  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: white;
  color: var(--accent);
}

/* Divider */
.rail-divider {
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px 0;
}

/* Bottom section */
.rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
}

.rail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #44403c;
  color: var(--rail-text-active);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: var(--font);
}

.rail-avatar:hover { border-color: rgba(255,255,255,0.15); }


.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 700px at 10% -5%, rgba(37, 99, 235, 0.08), transparent 55%),
    radial-gradient(900px 600px at 95% 110%, rgba(5, 150, 105, 0.08), transparent 52%),
    var(--bg);
}

.login-card {
  width: min(420px, 100%);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(14, 14, 16, .08);
  padding: 24px;
}

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

.login-logo {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 12px;
}

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

.login-logo span:nth-child(2),
.login-logo span:nth-child(3) {
  opacity: .55;
}

.login-logo span:nth-child(4) {
  opacity: .22;
}

.login-title {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.login-sub {
  font-size: 13px;
  color: var(--ink-40);
}

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

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

.login-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-70);
}

.login-input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  padding: 0 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.login-input:focus {
  border-color: var(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.login-error {
  font-size: 12px;
  color: var(--rose);
  background: var(--rose-bg);
  border: 1px solid var(--rose-rule);
  border-radius: 8px;
  padding: 8px 10px;
}

.login-submit {
  margin-top: 4px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .05s;
}

.login-submit:hover {
  background: #1b1b22;
}

.login-submit:active {
  transform: translateY(1px);
}

.login-submit:disabled {
  opacity: .65;
  cursor: default;
  transform: none;
}


.dashboard-page .page-header {
  margin-bottom: 0;
}

.dashboard-page .page-title-group {}

.dashboard-page .page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dashboard-page .page-actions .filter-row {
  --seg-count: 3;
  --seg-inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: var(--seg-inset);
  position: relative;
  overflow: hidden;
  height: 34px;
}

.dashboard-page .page-actions .filter-row .fp {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-40);
  position: relative;
  z-index: 1;
  transition: color 0.16s var(--ease);
  outline: none;
}

.dashboard-page .page-actions .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;
}

.dashboard-page .page-actions .filter-row .fp:hover {
  color: var(--ink-40);
  background: transparent;
}

.dashboard-page .page-actions .filter-row .fp.on {
  background: transparent;
  color: #fff;
}

.dashboard-page .page-actions .filter-row .fp:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── Buttons ── */
.dashboard-page .btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: var(--f-sans);
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.13s var(--ease);
}

.dashboard-page .btn:hover {
  background: var(--bg);
  border-color: var(--ink-20);
  color: var(--ink);
}

.dashboard-page .btn.prime {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
}

.dashboard-page .btn.prime:hover {
  background: #1c1c22;
  box-shadow: 0 4px 14px rgba(14, 14, 16, 0.22);
  transform: translateY(-1px);
}

.dashboard-page .btn.prime:active {
  transform: translateY(0);
}


/* ── Dashboard grid ── */
.dashboard-page .dash {
  padding: 20px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-page .row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dashboard-page .row-3-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

/* ── Card base ── */
.dashboard-page .card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  animation: fadeUp 0.45s var(--ease) both;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.dashboard-page .card:hover {
  border-color: var(--rule-2);
  box-shadow: 0 4px 20px rgba(14, 14, 16, 0.06);
}

.dashboard-page .row-4 .card:nth-child(1) { animation-delay: 0.05s; }
.dashboard-page .row-4 .card:nth-child(2) { animation-delay: 0.10s; }
.dashboard-page .row-4 .card:nth-child(3) { animation-delay: 0.15s; }
.dashboard-page .row-4 .card:nth-child(4) { animation-delay: 0.20s; }

.dashboard-page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--rule);
}

.dashboard-page .card-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dashboard-page .card-sub {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 1px;
  font-family: var(--f-mono);
  font-weight: 300;
}

.dashboard-page .card-action {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.12s;
  border: none;
  background: none;
  font-family: var(--f-sans);
}

.dashboard-page .card-action:hover {
  color: var(--ink);
  background: var(--ink-04);
}

/* ── KPI cards ── */
.dashboard-page .kpi {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
}

.dashboard-page .kpi-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-page .kpi-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-40);
  flex-shrink: 0;
}

.dashboard-page .kpi-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 1;
  font-family: var(--f-mono);
}

.dashboard-page .kpi-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-page .kpi-delta {
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--f-mono);
  padding: 2px 6px;
  border-radius: 4px;
}

.dashboard-page .delta-up   { background: var(--emerald-bg); color: var(--emerald); }
.dashboard-page .delta-down { background: var(--rose-bg);    color: var(--rose); }

.dashboard-page .kpi-comp {
  font-size: 11px;
  color: var(--ink-40);
}

/* ── Sparkline ── */
.dashboard-page .spark {
  height: 32px;
  margin-top: 4px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.dashboard-page .spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--ink-08);
  transition: background 0.2s;
  min-height: 3px;
}

.dashboard-page .spark-bar.hi { background: var(--ink-20); }
.dashboard-page .kpi:hover .spark-bar { background: var(--ink-12); }
.dashboard-page .kpi:hover .spark-bar.hi { background: var(--ink-40); }

/* ── Live feed ── */
.dashboard-page .feed-list {
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.dashboard-page .feed-list::-webkit-scrollbar { width: 3px; }
.dashboard-page .feed-list::-webkit-scrollbar-thumb { background: var(--rule-2); }

.dashboard-page .feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  animation: feedIn 0.3s var(--ease) both;
  transition: background 0.1s;
  cursor: pointer;
}

.dashboard-page .feed-item:hover { background: var(--ink-04); }
.dashboard-page .feed-item:last-child { border-bottom: none; }

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

.dashboard-page .feed-status-col { padding-top: 2px; flex-shrink: 0; }

.dashboard-page .feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-page .fd-called  { background: var(--emerald); }
.dashboard-page .fd-skipped { background: var(--ink-20); }
.dashboard-page .fd-failed  { background: var(--rose); }

.dashboard-page .feed-body { flex: 1; min-width: 0; }

.dashboard-page .feed-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.dashboard-page .feed-fn {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .feed-agent {
  font-size: 11px;
  color: var(--ink-40);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.dashboard-page .feed-arg {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 300;
}

.dashboard-page .feed-time {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-20);
  margin-top: 2px;
}

.dashboard-page .feed-badge {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.dashboard-page .fb-called  { background: var(--emerald-bg); color: var(--emerald); }
.dashboard-page .fb-skipped { background: var(--ink-04);     color: var(--ink-40); }
.dashboard-page .fb-failed  { background: var(--rose-bg);    color: var(--rose); }

/* ── MCP servers ── */
.dashboard-page .servers-list {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-page .server-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.12s;
}

.dashboard-page .server-row:hover {
  border-color: var(--rule-2);
  background: var(--surface);
}

.dashboard-page .server-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--f-mono);
  color: white;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.dashboard-page .server-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dashboard-page .server-meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-40);
}

.dashboard-page .server-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dashboard-page .server-tools {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-40);
}

.dashboard-page .server-status-badge {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.dashboard-page .ssb-live    { background: var(--emerald-bg); color: var(--emerald); }
.dashboard-page .ssb-warn    { background: var(--amber-bg);   color: var(--amber); }
.dashboard-page .ssb-offline { background: var(--ink-04);     color: var(--ink-40); }

/* ── Agent health ── */
.dashboard-page .agents-grid {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-page .agent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.13s var(--ease);
  background: var(--surface-2);
}

.dashboard-page .agent-row:hover {
  border-color: var(--rule-2);
  background: var(--surface);
  box-shadow: 0 2px 10px var(--ink-04);
  transform: translateY(-1px);
}

.dashboard-page .agent-emo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--f-mono);
  color: var(--ink-40);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.dashboard-page .agent-info { flex: 1; min-width: 0; }

.dashboard-page .agent-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 2px;
}

.dashboard-page .agent-desc {
  font-size: 11px;
  color: var(--ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-page .agent-stats {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.dashboard-page .agent-stat { text-align: right; }

.dashboard-page .agent-stat-val {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.dashboard-page .agent-stat-key {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-40);
}

.dashboard-page .agent-health-bar {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-08);
  overflow: hidden;
  flex-shrink: 0;
}

.dashboard-page .agent-health-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--emerald);
  transition: width 0.4s var(--ease);
}

.dashboard-page .agent-health-fill.warn { background: var(--amber); }

.dashboard-page .agent-status-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Tool usage chart ── */
.dashboard-page .tools-chart {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-page .tool-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.dashboard-page .tool-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-page .tool-bar-name {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.dashboard-page .tool-bar-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-40);
}

.dashboard-page .tool-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-06);
  overflow: hidden;
}

.dashboard-page .tool-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
  transition: width 0.6s var(--ease);
  position: relative;
}

.dashboard-page .tool-bar-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0 3px 3px 0;
}

.dashboard-page .tool-bar-row:hover .tool-bar-fill { opacity: 0.7; }
.dashboard-page .tools-chart .skipped .tool-bar-fill { background: var(--amber); }


/* ── Recent sessions ── */
.dashboard-page .sessions-table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard-page .sessions-table th {
  text-align: left;
  padding: 10px 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-20);
  border-bottom: 1px solid var(--rule);
}

.dashboard-page .sessions-table td {
  padding: 12px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-70);
}

.dashboard-page .sessions-table tr:last-child td { border-bottom: none; }
.dashboard-page .sessions-table tr:hover td { background: var(--ink-04); cursor: pointer; }

.dashboard-page .sess-agent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-page .sess-emo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--f-mono);
  color: var(--ink-40);
  flex-shrink: 0;
}

.dashboard-page .sess-name {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.dashboard-page .sess-model {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-40);
}

.dashboard-page .sess-badge {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.dashboard-page .sb-done   { background: var(--emerald-bg); color: var(--emerald); }
.dashboard-page .sb-active { background: var(--blue-bg);    color: var(--blue); }
.dashboard-page .sb-error  { background: var(--rose-bg);    color: var(--rose); }

.dashboard-page .sess-calls {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

.dashboard-page .sess-time {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-40);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .dashboard-page .row-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .dashboard-page .dash { padding: 12px 14px 20px; }
  .dashboard-page .row-3-1 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dashboard-page .row-4 { grid-template-columns: 1fr; }
}


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

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

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

.ag-page-inner {
  max-width: 1280px;
  margin: 0 auto;
}

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

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

/* ── 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(--ink-20);
  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(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.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: #ffecef; }

.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); border-color: var(--ink-20); color: var(--ink); }
.agents-page .ra-btn.run,
.agents-page .ra-btn.deploy { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.agents-page .ra-btn.run:hover,
.agents-page .ra-btn.deploy:hover { background: #1c1c22; color: #fff; }

.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); border-color: var(--ink-20); color: var(--ink); }
.agents-page .agents-list-btn.run,
.agents-page .agents-list-btn.deploy { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.agents-page .agents-list-btn.run:hover,
.agents-page .agents-list-btn.deploy:hover { background: #1c1c22; color: #fff; }
.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: #ffecef; 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 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height));
}

.sessions-list-page .page-header {
  align-items: flex-end;
}

.sessions-list-page .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  width: 220px;
  color: var(--ink-40);
}

.sessions-list-page .search-box input {
  border: 0;
  outline: none;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink);
  background: none;
  width: 100%;
}

.sessions-list-page .search-box input::placeholder {
  color: var(--ink-20);
}

.sessions-list-page .filter-row {
  --seg-count: 4;
  --seg-inset: 2px;
  display: grid;
  grid-template-columns: repeat(4, 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;
}

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

.sessions-list-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);
  pointer-events: none;
}

.sessions-list-page .filter-row .fp.on {
  background: transparent;
  color: #fff;
}

.sessions-list-page .filter-row .fp:focus-visible {
  outline: none;
  box-shadow: none;
}


.sessions-list-page .btn {
  height: 34px;
  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: flex;
  align-items: center;
  gap: 6px;
}

.sessions-list-page .btn:hover {
  background: var(--bg);
  border-color: var(--ink-20);
  color: var(--ink);
}

.sessions-list-page .stats-row {
  display: flex;
  gap: 8px;
  padding: 14px 28px 0;
  flex-shrink: 0;
}

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

.sessions-list-page .stat-pip {
  width: 7px;
  height: 7px;
}

.sessions-list-page .scv {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  margin-left: 4px;
}

.sessions-list-page .scv-emerald {
  color: var(--emerald);
}

.sessions-list-page .body {
  flex: 1;
  overflow: hidden;
  padding: 14px 28px 24px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sessions-list-page .session-table {
  --sessions-cols: minmax(340px, 1fr) 130px 90px 90px 90px 30px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  animation: fadeUp .35s var(--ease) .08s both;
}

.sessions-list-page .st-head {
  display: grid;
  grid-template-columns: var(--sessions-cols);
  padding: 0 20px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.sessions-list-page .sth {
  padding: 9px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-20);
}

.sessions-list-page .st-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.sessions-list-page .st-scroll::-webkit-scrollbar {
  width: 3px;
}

.sessions-list-page .st-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-2);
}

.sessions-list-page .st-row {
  display: grid;
  grid-template-columns: var(--sessions-cols);
  padding: 0 20px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  align-items: center;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.sessions-list-page .st-row:hover {
  background: var(--surface-2);
}

.sessions-list-page .st-row:last-child {
  border-bottom: none;
}

.sessions-list-page .stc {
  padding: 12px 8px;
  display: flex;
  align-items: center;
}

.sessions-list-page .stc-end {
  justify-content: flex-end;
}

.sessions-list-page .str-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sessions-list-page .str-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink-06);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  flex-shrink: 0;
}

.sessions-list-page .str-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sessions-list-page .str-id {
  font-size: 10.5px;
  color: var(--ink-40);
  margin-top: 1px;
}

.sessions-list-page .str-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.sessions-list-page .str-bar {
  display: flex;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-06);
}

.sessions-list-page .slb-c { background: var(--emerald); }
.sessions-list-page .slb-s { background: var(--amber); }
.sessions-list-page .slb-f { background: var(--rose); }

.sessions-list-page .w80 { width: 80%; }
.sessions-list-page .w10 { width: 10%; }
.sessions-list-page .w72 { width: 72%; }
.sessions-list-page .w16 { width: 16%; }
.sessions-list-page .w4 { width: 4%; }
.sessions-list-page .w88 { width: 88%; }
.sessions-list-page .w8 { width: 8%; }
.sessions-list-page .w33 { width: 33%; }
.sessions-list-page .w65 { width: 65%; }
.sessions-list-page .w24 { width: 24%; }
.sessions-list-page .w78 { width: 78%; }
.sessions-list-page .w11 { width: 11%; }
.sessions-list-page .w83 { width: 83%; }
.sessions-list-page .w17 { width: 17%; }

.sessions-list-page .str-bar-meta {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--ink-40);
}

.sessions-list-page .s-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.sessions-list-page .sb-done { background: var(--emerald-bg); color: var(--emerald); }
.sessions-list-page .sb-run { background: var(--ink-06); color: var(--ink-40); }
.sessions-list-page .sb-err { background: var(--rose-bg); color: var(--rose); }

.sessions-list-page .sb-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: ripple-go 5s ease infinite;
}

.sessions-list-page .str-mono {
  font-size: 12px;
  color: var(--ink-70);
}

.sessions-list-page .str-chevron {
  color: var(--ink-20);
}

.sessions-list-page .st-row:hover .str-chevron {
  color: var(--ink-40);
}


@keyframes session-expand-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes session-bar-grow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

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

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

.session-detail-page .convo-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.session-detail-page .convo-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.session-detail-page .sd-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

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

.session-detail-page .sdh-back {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 7px;
  transition: all 0.12s;
  border: 1px solid var(--rule-2);
  margin-right: 4px;
  background: var(--surface);
  font-family: var(--f-sans);
}

.session-detail-page .sdh-back:hover {
  background: var(--bg);
  color: var(--ink);
}

.session-detail-page .sdh-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink-06);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-40);
  flex-shrink: 0;
}

.session-detail-page .sdh-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.session-detail-page .sdh-meta {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 1px;
}

.session-detail-page .sdh-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.session-detail-page .sdh-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  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: 5px;
  transition: all 0.12s;
}

.session-detail-page .sdh-btn:hover {
  background: var(--bg);
  border-color: var(--ink-20);
  color: var(--ink);
}

.session-detail-page .convo-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.session-detail-page .convo-scroll::-webkit-scrollbar {
  width: 4px;
}

.session-detail-page .convo-scroll::-webkit-scrollbar-thumb {
  background: var(--rule-2);
}

.session-detail-page .msg {
  display: flex;
  gap: 10px;
  animation: fadeUp 0.35s var(--ease) both;
}

.session-detail-page .msg.u {
  flex-direction: row-reverse;
}

.session-detail-page .msg-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.session-detail-page .msg-av.ai {
  background: var(--ink);
  color: white;
}

.session-detail-page .msg-av.u {
  background: linear-gradient(135deg, #f0e6d6, #d4b896);
  color: #8b6040;
}

.session-detail-page .msg-col {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-detail-page .msg.u .msg-col {
  align-items: flex-end;
}

.session-detail-page .bubble {
  padding: 11px 15px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px var(--ink-06);
}

.session-detail-page .msg.u .bubble {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

.session-detail-page .msg-time {
  font-size: 10.5px;
  color: var(--ink-20);
  padding: 0 2px;
}

.session-detail-page .tc-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.session-detail-page .tc-chip {
  border: 1px solid var(--rule);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
  transition: border-color 0.13s, box-shadow 0.13s;
  cursor: pointer;
}

.session-detail-page .tc-chip:hover {
  border-color: var(--rule-2);
  box-shadow: 0 2px 8px var(--ink-06);
}

.session-detail-page .tc-chip.expanded {
  border-color: var(--rule-2);
  background: var(--surface);
  box-shadow: 0 2px 10px var(--ink-06);
}

.session-detail-page .tc-chip-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
}

.session-detail-page .tc-chip .tc-strip {
  width: 3px;
  height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
}

.session-detail-page .strip-called {
  background: var(--emerald);
}

.session-detail-page .strip-skipped {
  background: var(--ink-20);
}

.session-detail-page .tc-chip-fn {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}

.session-detail-page .tc-chip-score {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-40);
}

.session-detail-page .tc-chip-score.high,
.session-detail-page .tone-high {
  color: var(--emerald);
}

.session-detail-page .tc-chip-score.na,
.session-detail-page .tone-neutral {
  color: var(--ink-40);
}

.session-detail-page .tc-chip-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.session-detail-page .tcb-called {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.session-detail-page .tcb-skipped {
  background: var(--ink-06);
  color: var(--ink-40);
}

.session-detail-page .tc-chip-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-20);
  transition: transform 0.2s var(--ease);
}

.session-detail-page .tc-chip.expanded .tc-chip-chevron {
  transform: rotate(180deg);
}

.session-detail-page .tc-chip-body {
  border-top: 1px solid var(--rule);
  padding: 12px 12px 12px 24px;
  animation: session-expand-in 0.2s var(--ease) both;
}

.session-detail-page .tc-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.session-detail-page .tc-body-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-detail-page .tc-bs-key {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.session-detail-page .tc-bs-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.session-detail-page .tc-body-score-bar {
  margin-bottom: 10px;
}

.session-detail-page .tc-bsb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.session-detail-page .tc-bsb-key {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.session-detail-page .tc-bsb-val {
  font-size: 12px;
  font-weight: 600;
}

.session-detail-page .tc-bsb-track {
  height: 5px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
}

.session-detail-page .tc-bsb-fill {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: session-bar-grow 0.7s var(--ease) 0.1s both;
}

.session-detail-page .fill-high {
  background: var(--emerald);
}

.session-detail-page .fill-low {
  background: var(--rose);
}

.session-detail-page .w34 {
  width: 34%;
}

.session-detail-page .w88 {
  width: 88%;
}

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

.session-detail-page .w94 {
  width: 94%;
}

.session-detail-page .w4 {
  width: 4%;
}

.session-detail-page .w25 {
  width: 25%;
}

.session-detail-page .w72 {
  width: 72%;
}

.session-detail-page .w875 {
  width: 87.5%;
}

.session-detail-page .tc-reasoning {
  background: var(--amber-bg);
  border: 1px solid var(--amber-rule);
  border-radius: 7px;
  padding: 9px 12px;
}

.session-detail-page .tc-r-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 4px;
}

.session-detail-page .tc-r-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-70);
}

.session-detail-page .tc-trace-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-40);
  cursor: pointer;
  transition: color 0.12s;
  text-decoration: none;
}

.session-detail-page .tc-trace-link:hover {
  color: var(--ink);
}

.session-detail-page .session-summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

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

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

.session-detail-page .s-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.session-detail-page .sb-done {
  background: var(--emerald-bg);
  color: var(--emerald);
}

.session-detail-page .ss-hero {
  padding: 20px 20px 18px;
}

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

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

.session-detail-page .ss-dur-big {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}

.session-detail-page .ss-dur-sub {
  font-size: 12px;
  color: var(--ink-40);
  margin-bottom: 14px;
}

.session-detail-page .ss-rate-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.session-detail-page .ss-rate-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.session-detail-page .ss-rate-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
}

.session-detail-page .ss-rate-track {
  height: 5px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
}

.session-detail-page .ss-rate-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--emerald);
  transform-origin: left center;
  animation: session-bar-grow 0.9s var(--ease) 0.3s both;
}

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

.session-detail-page .ss-stat {
  padding: 12px 16px;
}

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

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

.session-detail-page .ss-stat-val.amber {
  color: var(--amber);
}

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

.session-detail-page .ss-stat-sub {
  font-size: 10.5px;
  color: var(--ink-20);
  margin-top: 2px;
}

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

.session-detail-page .ss-sec-pad0 {
  padding: 0 0 10px;
}

.session-detail-page .ss-breakdown {
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

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

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

.session-detail-page .ssb-dot-c {
  background: var(--emerald);
}

.session-detail-page .ssb-dot-s {
  background: var(--amber);
}

.session-detail-page .ssb-dot-f {
  background: var(--rose);
}

.session-detail-page .ssb-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-70);
  min-width: 52px;
}

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

.session-detail-page .ssb-fill {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  animation: session-bar-grow 0.8s var(--ease) 0.5s both;
}

.session-detail-page .ssb-fill-c {
  background: var(--emerald);
}

.session-detail-page .ssb-fill-s {
  background: var(--amber);
}

.session-detail-page .ssb-fill-f {
  background: var(--rose);
}

.session-detail-page .ssb-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 20px;
  text-align: right;
}

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

.session-detail-page .sssc-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

.session-detail-page .sssc-desc {
  font-size: 12px;
  color: var(--emerald);
  opacity: 0.8;
  line-height: 1.4;
}

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

.session-detail-page .ss-lat-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.session-detail-page .ss-lat-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: white;
}

.session-detail-page .slw12 {
  width: 12%;
}

.session-detail-page .slw18 {
  width: 18%;
}

.session-detail-page .slw70 {
  width: 70%;
}

.session-detail-page .sls-embed {
  background: #6366f1;
}

.session-detail-page .sls-score {
  background: #0891b2;
}

.session-detail-page .sls-exec {
  background: #059669;
}

.session-detail-page .ss-lat-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 7px;
  overflow: hidden;
}

.session-detail-page .ss-lat-leg {
  background: var(--surface-2);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.session-detail-page .ss-lat-leg:nth-child(odd) {
  border-right: 1px solid var(--rule);
}

.session-detail-page .ss-lat-leg:nth-child(1),
.session-detail-page .ss-lat-leg:nth-child(2) {
  border-bottom: 1px solid var(--rule);
}

.session-detail-page .sll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.session-detail-page .sll-embed {
  background: #6366f1;
}

.session-detail-page .sll-score {
  background: #0891b2;
}

.session-detail-page .sll-exec {
  background: #059669;
}

.session-detail-page .sll-total {
  background: var(--ink-20);
}

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

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


.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);
  border-color: var(--ink-20);
  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;
  padding-top: 0 !important;
  background: var(--page-bg) !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(--ink);
  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-2);
  border-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;
  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-w, 56px);
  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(--ink-20);
}

.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(--ink-20);
  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(--font);
}

.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(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}

.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: var(--surface-2);
  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(--font);
}

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

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

/* ── Server list table ───────────────────────────────────── */
.infrastructure-page .server-list-table {
  width: 100%;
  border-collapse: collapse;
}

.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(--text-tertiary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
  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(--border-light);
  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(--page-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

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

.infrastructure-page .server-url {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--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(--green-bg);
  color: var(--green);
}

.infrastructure-page .status-badge.connected .sdot {
  background: var(--green);
}

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

.infrastructure-page .status-badge.degraded .sdot {
  background: var(--yellow);
}

.infrastructure-page .status-badge.disconnected {
  background: var(--border-light);
  color: var(--text-tertiary);
}

.infrastructure-page .status-badge.disconnected .sdot {
  background: var(--text-tertiary);
}

.infrastructure-page .config-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-tertiary);
}

.infrastructure-page .config-badge.live {
  background: var(--green-bg);
  color: var(--green);
  animation: config-badge-in 0.35s ease both;
}

.infrastructure-page .config-badge.draft {
  background: var(--yellow-bg);
  color: var(--yellow);
  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-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.infrastructure-page .uptime-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
}

.infrastructure-page .last-activity {
  font-size: 12px;
  color: var(--text-tertiary);
}

.infrastructure-page .server-list-empty {
  text-align: center;
  padding: 48px 20px;
  font-size: 13px;
  color: var(--text-tertiary);
}


/* ══════════════════════════════════════
   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: var(--text-tertiary);
  cursor: pointer;
  margin-bottom: 16px;
  font-weight: 500;
  border: none;
  background: none;
  font-family: var(--font);
  white-space: nowrap;
  padding: 0;
}

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

.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(--page-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.infrastructure-page .detail-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}

.infrastructure-page .detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.infrastructure-page .detail-meta .sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.infrastructure-page .detail-actions {
  display: flex;
  gap: 6px;
}

/* Overflow button */
.infrastructure-page .detail-actions .btn-danger {
  border: 1px solid var(--red);
}

.infrastructure-page .overflow-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all 0.15s;
}

.infrastructure-page .overflow-btn:hover {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}

/* ── Reconnect feedback ── */
.infrastructure-page .reconnect-toast {
  padding: 9px 14px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 12px;
}

.infrastructure-page .reconnect-error {
  padding: 9px 14px;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--red);
  margin-bottom: 12px;
}

/* ── Health strip ── */
.infrastructure-page .health-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  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(--text);
}

.infrastructure-page .health-value.health-warn { color: var(--red); }

.infrastructure-page .health-label {
  font-size: 10px;
  color: var(--text-tertiary);
  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(--border);
  border-radius: var(--radius);
  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(--green-bg);
  color: var(--green);
}

.infrastructure-page .draft-banner-icon.pending {
  background: var(--yellow-bg);
  color: var(--yellow);
}

.infrastructure-page .draft-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.infrastructure-page .draft-banner-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.infrastructure-page .draft-banner-icon.empty {
  background: var(--border-light);
  color: var(--text-tertiary);
}

.infrastructure-page .draft-banner-error {
  font-size: 11px;
  color: var(--red);
  flex: 1;
  padding: 0 12px;
}

/* ── Tabs ── */
.infrastructure-page .detail-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.infrastructure-page .detail-tab {
  padding: 9px 16px 11px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font);
  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(--text-secondary); }

.infrastructure-page .detail-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.infrastructure-page .error-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--red-bg);
  color: var(--red);
  font-weight: 500;
}

/* ── 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;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.infrastructure-page .tool-search-input::placeholder { color: var(--text-tertiary); }
.infrastructure-page .tool-search-input:focus { border-color: var(--accent); }

.infrastructure-page .filter-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  white-space: nowrap;
}

.infrastructure-page .filter-btn:hover {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}

.infrastructure-page .filter-btn.active {
  background: var(--text);
  color: var(--text-inverse);
  border-color: var(--text);
}

.infrastructure-page .sd-empty {
  padding: 3rem;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ── Op groups ── */
.infrastructure-page .op-group {
  margin-bottom: 16px;
}

.infrastructure-page .op-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  user-select: none;
}

.infrastructure-page .op-group:not(:has(.tool-table)) .op-group-header {
  border-radius: var(--radius);
  border-bottom: 1px solid var(--border);
}

.infrastructure-page .op-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  color: white;
}

.infrastructure-page .op-tag.configure { background: var(--op-configure); }
.infrastructure-page .op-tag.get       { background: var(--op-get); }
.infrastructure-page .op-tag.list      { background: var(--op-list); }
.infrastructure-page .op-tag.set       { background: var(--op-set); }
.infrastructure-page .op-tag.search    { background: var(--op-search); }
.infrastructure-page .op-tag.create    { background: var(--op-create); }
.infrastructure-page .op-tag.update    { background: var(--op-update); }
.infrastructure-page .op-tag.delete    { background: var(--op-delete); }
.infrastructure-page .op-tag.merge     { background: #16a085; }
.infrastructure-page .op-tag.fork      { background: #b45309; }
.infrastructure-page .op-tag.push      { background: #4b5563; }
.infrastructure-page .op-tag.summarise { background: var(--op-summarise); }
.infrastructure-page .op-tag.unknown   { background: var(--text-tertiary); }

.infrastructure-page .op-count {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Tool table ── */
.infrastructure-page .tool-table {
  width: 100%;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* 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(--border-light);
  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(--page-bg);
  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(--text-tertiary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.infrastructure-page .sd-close {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 5px;
  transition: all .12s;
  border: 0;
  background: none;
  font-family: var(--font);
}

.infrastructure-page .sd-close:hover {
  background: var(--border-light);
  color: var(--text-secondary);
}

.infrastructure-page .schema-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  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(--border);
}

.infrastructure-page .sd-summary-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.infrastructure-page .sd-summary-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}

.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(--border);
  transition: background .15s;
  cursor: pointer;
}

.infrastructure-page .sd-toggle input:checked + .sd-toggle-track {
  background: var(--green);
}

.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(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.infrastructure-page .sc-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.infrastructure-page .sc-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.infrastructure-page .sc-val.go { color: var(--green); }

.infrastructure-page .sc-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.infrastructure-page .sc-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.infrastructure-page .sc-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.infrastructure-page .scbf-go { background: var(--green); }

/* ── Latency chart ── */
.infrastructure-page .latency-chart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
}

.infrastructure-page .lc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  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(--border);
  min-height: 3px;
}

.infrastructure-page .lc-bar.peak { background: var(--red); }
.infrastructure-page .lc-bar-label { font-size: 9px; color: var(--text-tertiary); }

.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(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
}

.infrastructure-page .error-item.is-error { border-color: var(--red); }

.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(--border-light);
  color: var(--text-tertiary);
}

.infrastructure-page .et-error { background: var(--red-bg); color: var(--red); }
.infrastructure-page .et-info  { background: var(--blue-bg); color: var(--blue); }
.infrastructure-page .et-warn  { background: var(--yellow-bg); color: var(--yellow); }

.infrastructure-page .ei-tool {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.infrastructure-page .ei-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.infrastructure-page .ei-msg {
  font-size: 12px;
  color: var(--text-tertiary);
}


/* ════════════════════════════════════════
   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: #FCEBEB;
  margin-bottom: 10px;
}

.pipeline-success-banner {
  font-size: 12px;
  color: var(--emerald);
  padding: 8px 12px;
  border: 1px solid var(--emerald);
  border-radius: 7px;
  background: #EAF3DE;
  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: #EAF3DE;
  color: #27500A;
  border-color: #C0DD97;
}

.pipeline-flag-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #FAEEDA;
  color: #633806;
  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(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}

.pdr-tab-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #FAEEDA;
  color: #633806;
  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: var(--surface-2);
  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(--surface-2); color: var(--ink-40); border: 1px solid var(--rule); }
.pdr-tool-row .et-tenant   { background: #EAF3DE; color: #27500A; }
.pdr-tool-row .et-platform { background: #EEEDFE; color: #3C3489; }
.pdr-tool-row .et-session  { background: #E6F1FB; color: #0C447C; }
.pdr-tool-row .et-location { background: #FAEEDA; color: #633806; }
.pdr-tool-row .et-endpoint { background: #FBEAF0; color: #72243E; }

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

.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(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border, #bbf0d0);
}

.pipeline-status-pill.draft {
  background: var(--yellow-bg);
  color: var(--yellow);
  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(--yellow-bg);
  border: 1px solid var(--yellow-border, #e8d374);
  border-radius: var(--radius);
  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(--border);
}

.pipeline-section-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pipeline-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  color: var(--text-inverse);
  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(--text-tertiary);
}

/* ── 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(--green-bg);
  color: var(--green);
}

.pipeline-field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
  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(--purple-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(--text-tertiary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
}

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

/* ── 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;
  cursor: default;
  overflow: hidden;
  max-width: 100%;
}

/* Each clickable field part inside the chip */
.chip-part {
  cursor: pointer;
  transition: opacity 0.12s;
}

.chip-part:hover {
  opacity: 0.6;
}

/* Overridden field — amber text to signal it was hand-edited */
.chip-part-overridden {
  color: var(--amber, #D97706);
}

/* · separator between parts */
.chip-sep {
  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;
}

/* ── 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(--text-secondary);
  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(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  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(--text-tertiary);
  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(--text-secondary);
  border: 1px solid var(--border-light);
}

.instance-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-family: var(--mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

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

.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(--text-secondary);
  border: 1px solid var(--border);
}

.synonym-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  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(--border);
  background: transparent;
  color: var(--text-secondary);
  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(--text-tertiary);
}

.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(--border);
  color: var(--text);
  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 table rows ──────────────────────────────────────── */
.infrastructure-page .tool-row-wrap {
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-light);
}

.infrastructure-page .tool-row-wrap:hover { background: rgba(0,0,0,0.012); }

.infrastructure-page .tool-row-wrap.open { background: inherit; }

.infrastructure-page .tool-row-wrap:last-child { border-bottom: none; }

/* Fixed-column grid: name | chip | count | toggle | policy */
.infrastructure-page .tool-row-grid {
  display: grid;
  grid-template-columns: 1fr 280px 60px 60px 80px;
  align-items: center;
}

.infrastructure-page .tool-cell {
  padding: 10px 16px;
  font-size: 13px;
}

/* Health dot */
.infrastructure-page .tool-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  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(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* TEMP: full descriptions for demo, restore truncation later */
.infrastructure-page .tool-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* max-width: 560px; */
}

/* Classification chip column — right-aligned, chip truncates */
.infrastructure-page .tool-class-col {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.infrastructure-page .tool-classification {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  background: var(--page-bg);
  border-radius: 3px;
  max-width: 264px; /* 280px column minus 2×8px padding */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count column — centered */
.infrastructure-page .tool-stat-col {
  display: flex;
  justify-content: center;
}

.infrastructure-page .tool-stat {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 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(--green); }
.summary-toggle.off { background: var(--border); }

.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(--green) 15%, transparent);
  color: var(--green);
  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(--text-tertiary);
  font-family: var(--mono);
}

/* Schema drawer row */
.infrastructure-page .tool-schema-row {
  border-bottom: 1px solid var(--border-light);
}


/* SchemaDrawer styles are defined in ServerDetail.css */


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

.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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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);
  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: #fef2f2; }
.infrastructure-page .rc-brave { background: #f0f9ff; }
.infrastructure-page .rc-slack { background: #fdf4ff; }
.infrastructure-page .rc-github { background: #f4f4f5; }
.infrastructure-page .rc-notion { background: #fff7ed; }
.infrastructure-page .rc-sheets { background: #f0fdf4; }

.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);
  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);
  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;
  background: var(--page-bg) !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(--page-bg);
}

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


.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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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);
  border-color: var(--ink-20);
  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(--ink-20);
  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); 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);
  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(--ink-20);
  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);
  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: #fef2f2; color: #dc2626; }
.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: #fdf4ff; color: #9333ea; }

.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);
  border-color: var(--ink-20);
  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(--ink-20); box-shadow: 0 0 0 3px var(--ink-04); }
.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(--ink-20); }
.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); }

.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); 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(--ink-20); }
.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); font-weight: 600; }
.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: #fff;
  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(--ink-20);
  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(--ink-20);
}

.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
   ══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────── */
.sandbox-page {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.sandbox-page.ready {
  opacity: 1;
}

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

.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); font-weight: 600; }

/* ── 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);
  font-weight: 600;
  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; }

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

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


/* ══════════════════════════════════════════════════════════════════
   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-plan-view {
  --pt-blue: #3678d7;
  --pt-blue-bg: #eff5ff;
  --pt-blue-border: #b8d4f8;
  --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;
  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-family: var(--mono);
  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-family: var(--mono);
  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);
  font-family: var(--mono);
}
.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: 32px;
}
.pp2-intent-section + .pp2-intent-section {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.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);
}
.pp2-intent-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ── 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-family: var(--mono);
  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-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;
  gap: 4px;
}
.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-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-family: var(--mono);
  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-tool {
  font-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  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-num { font-family: var(--mono); color: var(--ink-40); min-width: 16px; }
.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-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pp2-tc-score {
  font-family: var(--mono);
  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);
}

.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-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  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 {
  font-family: var(--mono);
  color: var(--ink-40);
  font-size: 10px;
  min-width: 88px;
}
.slot-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.slot-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--ink-70);
  border: 1px solid var(--rule);
}
.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); }
.slot-chip.ambiguous { background: #f3e8ff; color: #6d28d9; border-color: #ddd6fe; }

/* ── Pass timings strip (P2 1260ms · P3 823ms · ...) ─────────────────── */
.timings,
.pp-timings {
  display: flex;
  gap: 14px;
  padding: 14px 0 4px 36px;
  font-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  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;
  font-family: var(--mono);
}
.exec-response-body {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
  font-family: var(--mono);
  max-height: 320px;
  overflow-y: auto;
}
.exec-response-empty {
  padding: 14px 16px;
  font-size: 11.5px;
  color: var(--ink-40);
  font-family: var(--mono);
}
.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-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}
.exec-tool-call-status {
  font-family: var(--mono);
  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-family: var(--mono);
  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-family: var(--mono);
  font-size: 10.5px;
}
.so-kv-val {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
}
.so-field-type {
  font-family: var(--mono);
  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 ────────────────────────────────────────────────────── */
.mono { font-family: var(--mono); }

/* ── 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-family: var(--mono);
  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);
  font-family: var(--mono);
}
.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;
}

/* ── 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;
}
.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; }
.step-source { font-family: var(--mono); font-size: 10px; color: var(--ink-40); text-align: right; white-space: nowrap; padding-top: 1px; }
.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-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.tool-score { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--emerald); }
.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; }
.arg {
  font-family: var(--mono);
  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; }

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

/* ── Chip op variants (per-operation colours) ─────────────────────────── */
.chip-op-create   { background: #16a34a; color: white; border-color: transparent; }
.chip-op-search   { background: rgba(245,158,11,0.16); color: #b45309; }
.chip-op-get      { background: rgba(5,150,105,0.10);  color: #065f46; }
.chip-op-update   { background: rgba(124,58,237,0.10); color: #6d28d9; }
.chip-op-merge    { background: rgba(124,58,237,0.10); color: #6d28d9; }
.chip-op-delete   { background: rgba(220,38,38,0.10);  color: #b91c1c; }
.chip-op-list     { background: var(--surface-2); color: var(--ink-40); border: 1px solid var(--rule); }
.chip-op-summarise { background: rgba(14,165,233,0.12); color: #0369a1; }
.chip-op-analyse  { background: rgba(249,115,22,0.12); color: #c2410c; }

.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(--ink-20);
  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: #7f1d1d;
  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%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.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: rgba(255, 255, 255, 0.9);
  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(--ink-20);
  background: #fff;
  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(--ink-20);
  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(--ink-20);
}

.sandbox-page .capg-node.inferred {
  background: #f8fafc;
  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(--ink-20);
  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);
  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-family: var(--f-mono);
  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;
  font-family: var(--f-mono);
  color: var(--ink-40);
}

.sandbox-page .ctrl-speed {
  font-size: 11px;
  font-family: var(--f-mono);
  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);
  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-family: var(--f-mono);
  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-family: var(--f-mono);
  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-family: var(--f-mono);
  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(--ink);
  color: white;
  font-weight: 500;
}

.settings-nav .sn-item.active .sn-ic {
  opacity: 1;
}

.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);
  border-color: var(--ink-20);
  color: var(--ink);
}

.s-btn.prime {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  font-weight: 600;
}

.s-btn.prime:hover {
  background: #1c1c22;
}

.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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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(--ink);
  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: white;
}

.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: linear-gradient(135deg, #f0e6d6, #d4b896); color: #8b6040; }
.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(--ink-20);
  box-shadow: 0 0 0 3px var(--ink-04);
}

.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(--ink-20);
  color: var(--ink);
  background: var(--bg);
}

.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(--ink); color: white; }
.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);
}


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


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