/* ============================================================ AGENT DASHBOARD— Agent Dashboard dark theme Deep near-black bg · red-orange accent · purple glow ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* Backgrounds— near-black with warm dark tint */
  --bg:            #0f0d0d;
  --bg-elevated:   #141212;
  --surface-0:     rgba(18, 14, 14, 0.78);
  --surface-1:     rgba(22, 17, 17, 0.9);
  --surface-2:     rgba(28, 22, 22, 0.95);
  --surface-3:     rgba(36, 28, 28, 0.98);
  --surface-canvas: rgba(15, 12, 12, 0.88);

  /* Red-orange accent */
  --accent:        #ea4b35;
  --accent-hover:  #ff5a43;
  --accent-soft:   rgba(234, 75, 53, 0.14);
  --accent-border: rgba(234, 75, 53, 0.3);

  /* Purple secondary glow (Canvas purple) */
  --purple:        #9b4dca;
  --purple-soft:   rgba(155, 77, 202, 0.14);

  /* Text */
  --ink:           #f0ecec;
  --ink-soft:      #c0b4b4;
  --muted:         #8a7676;

  /* Borders / dividers */
  --line:          rgba(180, 140, 140, 0.12);
  --line-strong:   rgba(200, 160, 160, 0.2);

  /* Status */
  --ok:            #3ecf8e;
  --warn:          #f5a623;
  --error:         #f56565;
  --pending:       #6b6070;

  /* Wire / canvas */
  --wire:          #ea4b35;
  --wire-soft:     rgba(234, 75, 53, 0.25);

  /* Focus ring */
  --focus:         rgba(234, 75, 53, 0.28);

  /* Shadows */
  --shadow:        0 18px 44px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.52);

  /* Dot grid for canvas */
  --dot-grid:
    radial-gradient(circle at center, rgba(180, 140, 140, 0.15) 1px, transparent 1.3px)
      0 0 / 28px 28px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  font-family: 'General Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 80% 50% at 0% -10%, rgba(180, 30, 20, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(120, 20, 160, 0.16) 0%, transparent 50%),
    linear-gradient(180deg, #110d0d 0%, #0a0808 60%, #090707 100%);
  overflow-x: hidden;
}

/* subtle grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 80px 80px;
  z-index: 0;
}

/* ambient glows */
.ambient { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.ambient-one   { top: -120px; left: -60px;  width: 420px; height: 420px; background: rgba(180, 30, 20, 0.18); opacity: 0.7; }
.ambient-two   { top: 60px;  right: -80px; width: 380px; height: 380px; background: rgba(120, 20, 160, 0.14); opacity: 0.6; }
.ambient-three { bottom: -80px; left: 38%;  width: 280px; height: 280px; background: rgba(234, 75, 53, 0.10); opacity: 0.5; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, p { margin: 0; }

h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h2 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

h3 { font-weight: 600; font-size: 0.96rem; }

/* ── Base form elements ──────────────────────────────────── */
button, input, textarea, pre, select { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; background: none; }

input, textarea, select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}

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

input:hover, textarea:hover, select:hover {
  border-color: var(--line-strong);
}

input:focus-visible, textarea:focus-visible, select:focus-visible,
.ghost-btn:focus-visible, .accent-btn:focus-visible,
.run-item:focus-visible, .agent-item:focus-visible, .team-item:focus-visible,
.event-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

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

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a7676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── Shell / App layout ───────────────────────────────────── */
.shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 11, 11, 0.92);
  backdrop-filter: blur(12px);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #c0392b);
  flex-shrink: 0;
}

.topbar-title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.topbar-eyebrow {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pending);
  transition: background 300ms;
}
.status-dot.ok    { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.status-dot.error { background: var(--error); }

.status-label {
  font-size: 0.76rem;
  color: var(--muted);
}

.status-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}

/* ── Tab navigation ──────────────────────────────────────── */
.tab-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
  height: 44px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 9, 9, 0.7);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}

.tab-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.tab-btn:hover { color: var(--ink-soft); background: rgba(255,255,255,0.04); }

.tab-btn.is-active {
  color: var(--ink);
  background: rgba(234, 75, 53, 0.12);
  border-bottom: 2px solid var(--accent);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ── Main layout: sidebar + content + inspector ──────────── */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  flex: 1;
  overflow: hidden;
}

.sidebar, .inspector {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inspector { border-right: 0; border-left: 1px solid var(--line); }

.main-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Tab pages ───────────────────────────────────────────── */
.tab-page { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.tab-page.is-active { display: flex; }

/* ── Panel sections ──────────────────────────────────────── */
.panel-section {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.panel-section:last-child { border-bottom: 0; }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.accent-btn, .ghost-btn, .danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-xl);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 130ms ease, background 130ms ease, box-shadow 130ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.accent-btn {
  background: linear-gradient(135deg, #ea4b35, #c0392b);
  color: #fff;
  border: 1px solid rgba(234, 75, 53, 0.5);
  box-shadow: 0 8px 24px rgba(234, 75, 53, 0.28);
}
.accent-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(234, 75, 53, 0.36); }

.ghost-btn {
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.ghost-btn:hover { color: var(--ink); background: var(--surface-3); transform: translateY(-1px); }

.danger-btn {
  background: rgba(245, 101, 101, 0.12);
  color: var(--error);
  border: 1px solid rgba(245, 101, 101, 0.25);
}
.danger-btn:hover { background: rgba(245, 101, 101, 0.2); }

.accent-btn:disabled, .ghost-btn:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-xs { padding: 4px 10px; font-size: 0.76rem; border-radius: var(--r-sm); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ── Form fields ─────────────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.builder-form { display: grid; gap: 14px; }
.builder-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Agent / Run / Team list items ───────────────────────── */
.agent-item, .run-item, .team-item {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 150ms;
  display: grid;
  gap: 4px;
}

.agent-item:hover, .run-item:hover, .team-item:hover,
.agent-item.is-active, .run-item.is-active, .team-item.is-active {
  border-color: var(--accent-border);
  background: var(--surface-2);
  transform: translateX(2px);
}

.item-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.item-meta { font-size: 0.78rem; color: var(--muted); }

.item-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-ready    { background: rgba(62,207,142,0.12); color: var(--ok); }
.badge-running  { background: rgba(245,166,35,0.14); color: var(--warn); }
.badge-failed   { background: rgba(245,101,101,0.12); color: var(--error); }
.badge-completed{ background: rgba(62,207,142,0.12); color: var(--ok); }
.badge-planned  { background: rgba(107,96,112,0.2);  color: var(--pending); }

.items-list { display: grid; gap: 8px; }

/* Agent icon stack */
.agent-icon-stack { display: inline-flex; align-items: center; gap: 0; }
.agent-icon-stack .mini-icon {
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(12, 9, 9, 0.9);
  margin-right: -5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  overflow: hidden;
}
.agent-icon-stack .mini-icon img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

/* ── Connector grid ──────────────────────────────────────── */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.connector-card {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 140ms, transform 140ms;
  overflow: hidden;
}

.connector-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--connector-accent, var(--accent));
  border-radius: 3px 0 0 3px;
}

.connector-card:hover,
.connector-card:has(.connector-checkbox:checked) {
  border-color: var(--accent-border);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.connector-checkbox {
  width: auto;
  margin-bottom: 8px;
  accent-color: var(--accent);
}

.connector-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.connector-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 3px;
  object-fit: contain;
}

.connector-name  { font-weight: 600; font-size: 0.84rem; display: block; }
.connector-cat   { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.connector-desc  { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }

.pill-note {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.73rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

/* ── Blueprint canvas ─────────────────────────────────────── */
.canvas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 0;
  flex-shrink: 0;
}

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

.blueprint-viewport {
  position: relative;
  flex: 1;
  margin: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 10% 20%, rgba(234, 75, 53, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 90% 80%, rgba(155, 77, 202, 0.07) 0%, transparent 50%),
    var(--dot-grid),
    #0c0909;
  cursor: grab;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.canvas-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* large enough that panning never hits a hard edge */
  width: 4000px;
  height: 4000px;
}

.blueprint-viewport::after {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(180, 140, 140, 0.1);
  border-radius: var(--r-lg);
  pointer-events: none;
}

.blueprint-viewport.is-panning { cursor: grabbing; }

.wire-layer, .lane-layer, .card-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wire-layer     { overflow: visible; pointer-events: none; z-index: 1; }  /* static wires: BEHIND cards */
.lane-layer     { pointer-events: none; z-index: 1; }
.card-layer     { z-index: 2; }  /* cards: in front of wires */
.drag-wire-layer { overflow: visible; pointer-events: none; z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  /* live drag wire: always on top */

.lane-guide {
  position: absolute;
  left: 20px; right: 20px;
  height: 1px;
  border-top: 1px dashed rgba(180, 140, 140, 0.1);
}

.lane-label {
  position: absolute;
  left: 24px;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Wire paths ──────────────────────────────────────────── */
.wire-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wire-path.is-pending  { stroke: rgba(130, 110, 110, 0.45); }
.wire-path.is-complete { stroke: #3ecf8e; filter: drop-shadow(0 0 4px rgba(62,207,142,0.6)); }
.wire-path.is-failed   { stroke: var(--error); filter: drop-shadow(0 0 4px rgba(234,75,53,0.6)); }
.wire-path.is-active {
  stroke: #46e2c1;
  stroke-dasharray: 8 6;
  animation: wire-flow 1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(70,226,193,0.7));
}

.wire-joint { stroke-width: 2.5; }
.wire-joint.is-pending  { fill: #1a1212; stroke: rgba(130, 110, 110, 0.5); }
.wire-joint.is-complete { fill: #0f0d0d; stroke: #3ecf8e; filter: drop-shadow(0 0 3px rgba(62,207,142,0.8)); }
.wire-joint.is-failed   { fill: #0f0d0d; stroke: var(--error); }
.wire-joint.is-active   { fill: #0f0d0d; stroke: #46e2c1; filter: drop-shadow(0 0 3px rgba(70,226,193,0.8)); }

/* ── Event cards on canvas ────────────────────────────────── */
.event-card {
  position: absolute;
  width: 230px;
  min-height: 136px;
  padding: 13px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(30, 22, 22, 0.98), rgba(18, 13, 13, 0.98));
  box-shadow: 0 14px 30px rgba(0,0,0,0.32);
  text-align: left;
  cursor: grab;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  animation: card-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: border-color 150ms, box-shadow 150ms;
}

.event-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--connector-accent, var(--accent));
  border-radius: 3px 0 0 3px;
}

.event-card:hover, .event-card.is-selected {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px var(--accent-border), 0 18px 36px rgba(0,0,0,0.4);
}

.event-card.is-dragging {
  cursor: grabbing;
  z-index: 5;
  transform: scale(1.03);
  box-shadow: 0 0 0 2px var(--accent), 0 24px 44px rgba(0,0,0,0.45);
}

.event-card[data-status="pending"] { border-style: dashed; opacity: 0.85; }
.event-card[data-status="running"] {
  box-shadow: 0 0 0 1px rgba(234, 75, 53, 0.3), 0 14px 30px rgba(0,0,0,0.32);
}
.event-card[data-status="failed"]  { border-color: rgba(245, 101, 101, 0.4); }

.event-head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.event-badges { display: flex; align-items: center; gap: 6px; }

.event-order, .event-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
}
.event-order { background: linear-gradient(135deg, var(--accent), #c0392b); color: #fff; }
.event-type  { background: var(--accent-soft); color: var(--accent); text-transform: uppercase; letter-spacing: 0.07em; }

.event-connector-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.95);
  padding: 4px;
  object-fit: contain;
}

.event-title   { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.event-summary { margin-top: 6px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }

.event-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.76rem;
}
.event-status[data-status="completed"] { color: var(--ok); }
.event-status[data-status="running"]   { color: var(--warn); }
.event-status[data-status="failed"]    { color: var(--error); }
.event-status[data-status="pending"]   { color: var(--pending); }

.canvas-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 16px 14px;
  flex-shrink: 0;
}

.canvas-legend-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 0.76rem;
  color: var(--muted);
}

.canvas-zoom-controls {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}

.zoom-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.zoom-reset {
  font-size: 0.85rem;
  font-weight: 400;
}

/* ── Inspector panel ─────────────────────────────────────── */
.inspector-content { display: grid; gap: 0; }

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.overview-card {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.overview-label { display: block; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.overview-value { font-size: 0.96rem; font-weight: 700; color: var(--ink); }

.context-item {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  margin-bottom: 8px;
}
.context-type { display: block; font-size: 0.68rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.context-body { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }

/* ── Optimization panel ───────────────────────────────────── */
.optimization-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.optimization-score-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  text-align: center;
}

.optimization-score {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 6px;
}

.optimization-copy {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.optimization-list { display: grid; gap: 8px; }

.optimization-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.optimization-card[data-severity="high"]   { border-color: rgba(245, 101, 101, 0.28); }
.optimization-card[data-severity="medium"] { border-color: rgba(245, 166, 35, 0.22); }
.optimization-card[data-severity="low"]    { border-color: rgba(62, 207, 142, 0.18); }

.optimization-card-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.optimization-label, .optimization-scope, .optimization-severity {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.optimization-label, .optimization-scope { color: var(--accent); background: var(--accent-soft); }
.optimization-severity { color: #fff; }
.optimization-card[data-severity="high"]   .optimization-severity { background: var(--error); }
.optimization-card[data-severity="medium"] .optimization-severity { background: var(--warn); color: #1a0f00; }
.optimization-card[data-severity="low"]    .optimization-severity { background: var(--ok); color: #071a0f; }

.optimization-title  { font-weight: 600; font-size: 0.88rem; }
.optimization-detail { font-size: 0.8rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; }
.optimization-meta   { font-size: 0.76rem; color: var(--muted); margin-top: 6px; }

/* ── Selected event / raw details ────────────────────────── */
.selected-event-meta { display: grid; gap: 8px; margin-bottom: 12px; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--accent);
  font-size: 0.8rem;
  width: fit-content;
}

.event-details {
  min-height: 180px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-0);
  color: #d6c8c8;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.output-box { min-height: 110px; }

.empty-state {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 0.84rem;
  background: var(--surface-0);
  text-align: center;
}

/* ── Teams page ──────────────────────────────────────────── */
.teams-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  overflow: hidden;
}

.teams-sidebar {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.teams-main {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Team card on the right */
.team-detail-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  overflow: hidden;
}

.team-detail-header {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(234, 75, 53, 0.06), rgba(155, 77, 202, 0.04));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.team-goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-soft);
  border: 1px solid rgba(155, 77, 202, 0.28);
  margin-top: 8px;
}

.team-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 16px;
}

.team-member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-0);
}

.team-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #c0392b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.team-member-name { font-weight: 600; font-size: 0.88rem; }
.team-member-role { font-size: 0.76rem; color: var(--muted); }

.team-runs-section { padding: 16px; border-top: 1px solid var(--line); }

.progress-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Context menu ────────────────────────────────────────── */
.context-menu {
  position: absolute;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 30;
}
.context-menu[hidden] { display: none; }

.context-menu-item {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 0.84rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.context-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.context-menu-note { padding: 6px 10px; font-size: 0.78rem; color: var(--muted); }

/* ── Config popover ──────────────────────────────────────── */
.config-popover {
  position: absolute;
  z-index: 900;
  width: 300px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  animation: popover-in 0.16s ease-out;
}

.config-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.config-popover-title-row { display: flex; align-items: center; gap: 8px; }
.config-popover-icon { width: 20px; height: 20px; border-radius: 5px; }
.config-popover-title { font-size: 0.88rem; font-weight: 700; margin: 0; }
.config-popover-close {
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 0 4px; border-radius: 4px;
}
.config-popover-close:hover { color: var(--ink); background: var(--surface-3); }

.config-popover-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.config-field { display: flex; flex-direction: column; gap: 4px; }
.config-field-label {
  font-size: 0.7rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em;
}
.config-field-input {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  font-size: 0.84rem;
  outline: none;
}
.config-field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }

.config-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a7676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.config-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--line);
  gap: 8px;
}
.config-popover-status {
  font-size: 0.72rem; color: var(--muted);
  transition: color 0.2s;
}
.config-popover-status.config-saved { color: var(--ok); }
.config-popover-status.config-error { color: var(--error); }

.config-badge {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.config-badge:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.config-badge.has-config { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-strong);
  animation: modal-in 0.2s ease-out;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; border-radius: 6px; padding: 0 4px; }
.modal-close:hover { color: var(--ink); }

.modal-body {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  /* R114 — Drew flagged the bottom of the cred modal getting cut off
     when a long Google-OAuth section pushed content past the viewport.
     Cap body height to the viewport minus the header + footer chrome
     and overflow-scroll inside the body so the footer stays anchored. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.modal-footer { padding: 12px 20px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line); }

/* ── Login page ──────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-strong);
}
.login-logo { margin: 0 auto 24px; }
.login-title { text-align: center; margin-bottom: 24px; font-size: 1.2rem; }
.login-error { color: var(--error); font-size: 0.84rem; margin-top: 8px; min-height: 20px; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wire-flow {
  to { stroke-dashoffset: -28; }
}

@keyframes popover-in {
  from { opacity: 0; transform: translateX(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin { animation: spin 1s linear infinite; }

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(180, 140, 140, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(180, 140, 140, 0.35); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  .layout { grid-template-columns: 280px 1fr 290px; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); max-height: 45vh; }
}
@media (max-width: 760px) {
  .connector-grid { grid-template-columns: 1fr; }
  .overview-grid  { grid-template-columns: 1fr 1fr; }
  .teams-layout   { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════ NEW FEATURES: Drag-to-canvas · Free nodes · Learning connectors · Teams canvas ══════════════════════════════════════════════════════════ */

/* ── Connector card: draggable state ──────────────────────── */
.connector-card[draggable="true"] {
  cursor: grab;
}
.connector-card[draggable="true"]:active,
.connector-card.is-dragging-out {
  cursor: grabbing;
  opacity: 0.6;
  transform: scale(0.97);
}

/* ── Canvas drop feedback ─────────────────────────────────── */
.blueprint-viewport.drop-active {
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 2px rgba(234,75,53,0.35), inset 0 0 40px rgba(234,75,53,0.08);
}

/* Drop hint: ONLY shows when viewport has.drop-active. The hidden attr is a secondary guard;.drop-active is the primary CSS-driven gate. */
.canvas-drop-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  /* Hidden by default via CSS— only shown when viewport has.drop-active */
  display: none !important;
  background: rgba(234,75,53,0.12);
  border: 1.5px dashed rgba(234,75,53,0.6);
  border-radius: 14px;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(234,75,53,0.9);
  font-size: 0.84rem;
  font-weight: 600;
  pointer-events: none;
  letter-spacing: 0.04em;
}

/* ── Canvas empty hint ────────────────────────────────────── */
.canvas-empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 260px;
  line-height: 1.55;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── Free node ports ──────────────────────────────────────── */
.node-port-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.node-port {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.6rem;
  cursor: crosshair;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.node-port:hover {
  border-color: var(--accent);
  background: rgba(234,75,53,0.15);
  color: var(--accent);
}
.node-port-out { cursor: crosshair; }

.node-btn-learn {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid rgba(155,77,202,0.4);
  background: rgba(155,77,202,0.1);
  color: #b878e8;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.node-btn-learn:hover { background: rgba(155,77,202,0.22); }

.node-btn-delete {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,80,80,0.3);
  background: transparent;
  color: rgba(255,100,100,0.6);
  font-size: 0.68rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.node-btn-delete:hover { background: rgba(255,80,80,0.15); color: #ff6060; }

/* ── Wire dragging (live) ─────────────────────────────────── */
.wire-dragging {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 4;
  opacity: 0.75;
  pointer-events: none;
}

/* ── Learning connector nodes ────────────────────────────── */
.wire-learner {
  stroke: rgba(155,77,202,0.5) !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 5 4 !important;
  fill: none;
}

.learner-node {
  position: absolute;
  width: 160px;
  background: rgba(155,77,202,0.08);
  border: 1.5px solid rgba(155,77,202,0.35);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.75rem;
  z-index: 5;
}

.learner-node-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b878e8;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.learner-node-label {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink);
  margin-bottom: 2px;
}

.learner-node-source {
  font-size: 0.7rem;
  color: var(--muted);
}

.learner-node-del {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: rgba(255,100,100,0.5);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.learner-node-del:hover { color: #ff6060; }

/* ── Team coordination canvas ────────────────────────────── */
.team-canvas-section {
  border-top: 1px solid var(--line);
}

.team-coord-canvas {
  padding: 16px;
  overflow-x: auto;
}
.team-coord-canvas svg text {
  pointer-events: none;
  user-select: none;
}


/* ── Context menu additions ──────────────────────────────── */
.context-menu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.context-menu-danger {
  color: rgba(255, 90, 90, 0.85) !important;
}
.context-menu-danger:hover {
  background: rgba(255, 60, 60, 0.12) !important;
  color: #ff6060 !important;
}

/* ── Trash icon button upgrade ───────────────────────────── */
.node-btn-delete {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 80, 80, 0.25) !important;
  background: transparent !important;
  color: rgba(255, 100, 100, 0.5) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  padding: 0 !important;
}
.node-btn-delete:hover {
  background: rgba(255, 60, 60, 0.18) !important;
  color: #ff6060 !important;
  border-color: rgba(255, 60, 60, 0.5) !important;
}

/* ── Canvas Launch button state feedback ─────────────────── */
#launchSelectedAgentButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* Drop hint only shows when actively dragging a connector over the viewport */
.blueprint-viewport.drop-active .canvas-drop-hint {
  display: flex !important;
}

/* ── Wire drag interaction states ───────────────────────── */

/* Source port— pulses orange while wire is being dragged */
.node-port-out.port-dragging {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(234, 75, 53, 0.3), 0 0 12px rgba(234, 75, 53, 0.5) !important;
  animation: port-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes port-pulse {
  from { box-shadow: 0 0 0 3px rgba(234, 75, 53, 0.25), 0 0 8px rgba(234, 75, 53, 0.3); }
  to   { box-shadow: 0 0 0 6px rgba(234, 75, 53, 0.4), 0 0 18px rgba(234, 75, 53, 0.6); }
}

/* Input ports— highlighted as targets while dragging a wire */
.node-port-in.port-target {
  border-color: rgba(155, 77, 202, 0.7) !important;
  background: rgba(155, 77, 202, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(155, 77, 202, 0.2) !important;
  transition: all 0.15s ease;
}

/* Input port in snap zone— pops green to confirm connection */
.node-port-in.port-snap {
  border-color: #3ecf8e !important;
  background: rgba(62, 207, 142, 0.2) !important;
  box-shadow: 0 0 0 5px rgba(62, 207, 142, 0.25), 0 0 14px rgba(62, 207, 142, 0.45) !important;
  transform: scale(1.3) !important;
  transition: all 0.1s ease;
}

/* Live wire path— animates while dragging */
.wire-path.wire-dragging {
  stroke: var(--accent);
  stroke-opacity: 0.7;
  stroke-dasharray: 6 4;
  animation: wire-march 0.5s linear infinite;
}
@keyframes wire-march {
  to { stroke-dashoffset: -10; }
}

/* Wire snapping— turns green when close to a port */
.wire-path.wire-snap {
  stroke: #3ecf8e !important;
  stroke-opacity: 1 !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 4px rgba(62, 207, 142, 0.7));
  animation: none !important;
}

/* ── Wire connection toast ──────────────────────────────── */
#wireToast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: rgba(18, 14, 14, 0.96);
  border: 1px solid rgba(62, 207, 142, 0.4);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #3ecf8e;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(62,207,142,0.15);
  backdrop-filter: blur(12px);
  pointer-events: none;
  animation: toast-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#wireToast::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 6px rgba(62, 207, 142, 0.8);
  flex-shrink: 0;
}
#wireToast[hidden] { display: none !important; }
#wireToast.toast-exit {
  animation: toast-out 0.3s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.95); }
}

/* ── Modals— learner + confirm ─────────────────────────── */

/* Modal backdrop */
#learnerModal,
#confirmModal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(6, 4, 4, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-backdrop-in 0.18s ease both;
}
#learnerModal[hidden],
#confirmModal[hidden] { display: none !important; }

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal box */
.modal-box {
  background: #1a1414;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  width: 420px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  animation: modal-box-in 0.22s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}
@keyframes modal-box-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.modal-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.modal-close-btn:hover { background: var(--surface-3); color: var(--ink); }

.modal-body {
  padding: 20px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.modal-field:last-child { margin-bottom: 0; }

.modal-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.modal-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-input::placeholder { color: var(--muted); }
.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.modal-input.input-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.25);
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

.modal-hint {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.4;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}

/* Confirm modal message */
.modal-message {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ── Danger button ───────────────────────────────────────── */
.danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 101, 101, 0.4);
  background: rgba(245, 101, 101, 0.1);
  color: #f56565;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.danger-btn:hover {
  background: rgba(245, 101, 101, 0.2);
  border-color: rgba(245, 101, 101, 0.65);
  color: #ff7070;
}
.danger-btn:active { transform: scale(0.97); }

/* ── Sidebar agent delete button ─────────────────────────── */
.agent-item {
  position: relative;
}
.agent-item-del {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 100, 100, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  opacity: 0;
  z-index: 2;
}
.agent-item:hover .agent-item-del {
  opacity: 1;
  color: rgba(255, 100, 100, 0.5);
}
.agent-item-del:hover {
  background: rgba(255, 60, 60, 0.18) !important;
  color: #ff6060 !important;
  border-color: rgba(255, 60, 60, 0.4) !important;
}

/* ── Input error shake (standalone use) ─────────────────── */
.input-error {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.25) !important;
  animation: shake 0.3s ease;
}

/* ── modal-card alias (used by learner + confirm modals) ─── */
.modal-card {
  width: 100%;
  max-width: 460px;
  background: #1c1616;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Agent Library card trash button (icon-only, far right) ── */
.agent-card-del {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 101, 101, 0.25);
  background: transparent;
  color: rgba(245, 101, 101, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.agent-card-del:hover {
  background: rgba(245, 101, 101, 0.15);
  color: #f56565;
  border-color: rgba(245, 101, 101, 0.55);
}
.agent-card-del:active { transform: scale(0.92); }

/* ════════════════════════════════════════════════════════════ POST-RUN FEEDBACK MODAL ════════════════════════════════════════════════════════════ */

/* wider card for feedback */
.feedback-modal-card {
  width: 100%;
  max-width: 500px;
  background: #1c1616;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* ── Modal sections ─────────────────────────────────────── */
.feedback-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.feedback-section:last-of-type {
  border-bottom: none;
}
.feedback-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Star rating row ────────────────────────────────────── */
.star-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.12s, transform 0.1s;
  user-select: none;
}
.star-btn:hover,
.star-btn.is-hover {
  color: #f5a623;
  transform: scale(1.18);
}
.star-btn.is-active {
  color: #f5a623;
}
.feedback-rating-label {
  font-size: 12px;
  color: #f5a623;
  font-weight: 500;
  margin-left: 8px;
  min-width: 80px;
}

/* ── Per-learner thumbs ─────────────────────────────────── */
.learner-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.learner-score-row:last-child {
  border-bottom: none;
}
.learner-score-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learner-score-source {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
  flex-shrink: 0;
}
.thumbs-row {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.thumb-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}
.thumb-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
  transform: scale(1.12);
}
.thumb-btn.is-active[data-score="1"] {
  background: rgba(62, 207, 142, 0.18);
  border-color: #3ecf8e;
  color: #3ecf8e;
}
.thumb-btn.is-active[data-score="0"] {
  background: rgba(180, 180, 180, 0.14);
  border-color: rgba(180,180,180,0.4);
  color: #aaa;
}
.thumb-btn.is-active[data-score="-1"] {
  background: rgba(245, 101, 101, 0.18);
  border-color: #f56565;
  color: #f56565;
}

/* ── Comment textarea ───────────────────────────────────── */
.feedback-comment-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.feedback-comment-input::placeholder {
  color: var(--muted);
}
.feedback-comment-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Modal footer buttons ───────────────────────────────── */
.feedback-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════ LEARNING PAUSE BAR (in inspector) ════════════════════════════════════════════════════════════ */
.learning-pause-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(155, 77, 202, 0.1);
  border: 1px solid rgba(155, 77, 202, 0.28);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  grid-column: 1 / -1;
}
.learning-pause-info {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #b878e8;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.learning-pause-info svg {
  flex-shrink: 0;
}
.pause-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  border: 1px solid rgba(62, 207, 142, 0.5);
  background: rgba(62, 207, 142, 0.12);
  color: #3ecf8e;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.pause-toggle-btn:hover {
  background: rgba(62, 207, 142, 0.22);
  border-color: #3ecf8e;
  transform: scale(1.03);
}
.pause-toggle-btn.is-paused {
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.12);
  color: #f5a623;
}
.pause-toggle-btn.is-paused:hover {
  background: rgba(245, 166, 35, 0.22);
  border-color: #f5a623;
}

/* ════════════════════════════════════════════════════════════ FEEDBACK HISTORY STRIP (in inspector) ════════════════════════════════════════════════════════════ */
.feedback-history-bar {
  background: rgba(62, 207, 142, 0.07);
  border: 1px solid rgba(62, 207, 142, 0.22);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  grid-column: 1 / -1;
}
.feedback-history-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #3ecf8e;
  font-weight: 600;
  margin-bottom: 8px;
}
.feedback-avg {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: #f5a623;
}
.feedback-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(62, 207, 142, 0.12);
}
.feedback-stars {
  font-size: 11px;
  color: #f5a623;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.feedback-comment {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════ LEARNING PAUSE TOAST ════════════════════════════════════════════════════════════ */
#learningPauseToast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #1c1616;
  border: 1px solid #f5a623;
  border-radius: var(--r-md);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #f5a623;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  animation: toast-in 0.25s cubic-bezier(0.34, 1.36, 0.64, 1);
}
#learningPauseToast[hidden] { display: none !important; }
#learningPauseToast.toast-exit {
  animation: toast-out 0.3s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px)  scale(0.97); }
}

/* ── Credentials Page ──────────────────────────────────── */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.cred-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.cred-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.cred-card.cred-active {
  border-color: rgba(62,207,142,0.35);
}
.cred-card.cred-active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(62,207,142,0.04), transparent 60%);
  pointer-events: none;
}

.cred-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cred-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 4px;
}
.cred-card-name {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}
.cred-card-cat {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cred-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 550;
}
.cred-has-key {
  color: #3ecf8e;
}
.cred-no-key {
  color: var(--muted);
}

.cred-card-auth {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.cred-card-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ── Credential Modal ──────────────────────────────────── */
.cred-modal-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-2);
  padding: 3px;
}

.cred-modal-status {
  font-size: 0.78rem;
  font-weight: 550;
  min-height: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cred-modal-status.cred-saved { color: var(--ok); }
.cred-modal-status.cred-error { color: var(--error); }

/* Multi-account picker— sits at top of cred modal body */
.cred-account-picker {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.cred-account-picker .modal-label {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cred-eye-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cred-eye-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* Make API key input fill remaining space */
.cred-eye-btn + .modal-input,
[data-cred-key="apiKey"] {
  flex: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════ AGENT ARCHITECTURE OVERHAUL— New styles ═══════════════════════════════════════════════════════════════ */

/* ── Agents Tab Layout ──────────────────────────────────────── */
.agents-tab-layout {
  /* display is controlled by.tab-page /.tab-page.is-active— do NOT set it here */
  flex-direction: row;
  overflow: hidden;
  height: 100%;
}
.agents-grid-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agents-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.agents-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-chip.is-active,
.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(234,75,53,0.08);
}
.agents-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── Agent Card (tile) ──────────────────────────────────────── */
.agent-card-v2 {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
}
.agent-card-v2:hover {
  border-color: rgba(234,75,53,0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
.agent-card-v2[draggable="true"]:active {
  opacity: 0.7;
  transform: scale(0.97);
}
.agent-card-v2.env-workflow { border-left: 3px solid #f5a623; }
.agent-card-v2.env-team     { border-left: 3px solid #b878e8; }
.agent-card-v2.env-base     { border-left: 3px solid var(--accent); }

.ac-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ac-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.ac-role {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}
.ac-badges {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.maturity-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mb-untrained  { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--line); }
.mb-conditioned{ background: rgba(245,162,35,0.12);  color: #f5a623; border: 1px solid rgba(245,162,35,0.3); }
.mb-active     { background: rgba(62,207,142,0.12);  color: #3ecf8e; border: 1px solid rgba(62,207,142,0.3); }
.mb-learning   { background: rgba(184,120,232,0.15); color: #b878e8; border: 1px solid rgba(184,120,232,0.3); }
.mb-mature     { background: rgba(234,75,53,0.12);   color: var(--accent); border: 1px solid rgba(234,75,53,0.3); }

.version-chip {
  font-size: 0.65rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  display: inline-block;
}
.ac-domain {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.ac-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.ac-connectors {
  display: flex;
  gap: 3px;
}
.ac-conn-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  opacity: 0.7;
}
.ac-drag-hint {
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
}
.agent-card-v2:hover .ac-drag-hint { opacity: 1; }

/* ── Maturity dot (in profile panel) ───────────────────────── */
.maturity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.maturity-dot.untrained   { background: #555; }
.maturity-dot.conditioned { background: #f5a623; }
.maturity-dot.active      { background: #3ecf8e; }
.maturity-dot.learning    { background: #b878e8; box-shadow: 0 0 6px rgba(184,120,232,0.6); }
.maturity-dot.mature      { background: var(--accent); box-shadow: 0 0 6px rgba(234,75,53,0.5); }

/* ── Agent Profile Panel ────────────────────────────────────── */
.agents-profile-panel {
  width: 440px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.profile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.profile-stage-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
}
.profile-stage-tab {
  padding: 9px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.profile-stage-tab:hover { color: var(--ink); }
.profile-stage-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.profile-stage-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}

/* Profile field sections */
.profile-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
  margin-top: 4px;
}

/* Lineage view */
.lineage-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lineage-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 0.82rem;
}
.lineage-node.is-base { border-color: rgba(234,75,53,0.3); }
.lineage-node.is-current { border-color: #3ecf8e; }
.lineage-node-label { flex: 1; }
.lineage-node-env {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
}
.lineage-indent { padding-left: 20px; border-left: 2px solid var(--line); margin-left: 10px; }

.upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #9b4dca, #7b2fa8);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.upgrade-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════ 4-STAGE NEW AGENT MODAL ═══════════════════════════════════════════════════════════════ */
.new-agent-modal {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 640px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.na-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.na-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.na-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 3px;
}

/* Stage progress bar */
.na-stage-bar {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);
}
.na-stage-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.na-stage-step.is-active  { opacity: 1; }
.na-stage-step.is-done    { opacity: 0.85; }
.na-stage-step span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}
.na-stage-step.is-active span { color: var(--accent); }
.na-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.2s;
}
.na-stage-step.is-active .na-step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px rgba(234,75,53,0.4);
}
.na-stage-step.is-done .na-step-circle {
  background: #3ecf8e;
  border-color: #3ecf8e;
  color: #fff;
}
.na-stage-connector {
  height: 2px;
  flex: 1;
  background: var(--line);
  margin-bottom: 18px;
  max-width: 40px;
}

/* Stage panels */
.na-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.na-stage-panel { display: none; }
.na-stage-panel.is-active { display: block; }
.na-stage-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.na-stage-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.na-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field-required { color: var(--accent); }

/* Knowledge base */
.na-knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.na-knowledge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--ink);
}
.na-knowledge-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(234,75,53,0.1);
  color: var(--accent);
  flex-shrink: 0;
}
.na-knowledge-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-knowledge-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.na-knowledge-del:hover { color: var(--accent); }
.na-add-knowledge-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.na-knowledge-select {
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.na-knowledge-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.82rem;
  outline: none;
}
.na-knowledge-input:focus { border-color: var(--accent); }

/* Chat test interface */
.na-chat-window {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-0);
}
.na-chat-messages {
  min-height: 140px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.na-chat-system {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 8px;
}
.na-chat-msg {
  max-width: 90%;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.na-chat-msg.user {
  align-self: flex-end;
  background: rgba(234,75,53,0.15);
  border: 1px solid rgba(234,75,53,0.2);
  color: var(--ink);
}
.na-chat-msg.agent {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.na-chat-msg.thinking {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-style: italic;
}
.na-chat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
}

/* Connector grid in modal */
.na-connector-grid {
  max-height: 260px;
  overflow-y: auto;
}

/* Toggle switch */
.na-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.na-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.na-toggle input { opacity: 0; width: 0; height: 0; }
.na-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-3, #333);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.na-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.na-toggle input:checked + .na-toggle-slider { background: #3ecf8e; }
.na-toggle input:checked + .na-toggle-slider::before { transform: translateX(16px); }

.na-info-box {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(184,120,232,0.07);
  border: 1px solid rgba(184,120,232,0.2);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
}
.na-info-box p { margin: 0; }

/* Footer */
.na-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-0);
}
.na-step-label {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════ ROUND 2— NEW CSS ═══════════════════════════════════════════════════════════════ */

/* ── Modal: wider (double the 640px = 1200px, capped at 96vw) ── */
.new-agent-modal {
  width: 1100px !important;
  max-width: 96vw !important;
}
/* Two-column brain layout on wide modal */
.na-stage-panel[data-panel="2"] .na-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Full-width items inside the 2-col brain grid */
.na-stage-panel[data-panel="2"] .na-model-selector-wrap,
.na-stage-panel[data-panel="2"] .field:has(#na-knowledge-paste),
.na-stage-panel[data-panel="2"] .field:has(#na-chat-window),
.na-stage-panel[data-panel="2"] .field:has(#na-knowledge-list) { grid-column: 1 / -1; }

/* ── AI Model Selector ─────────────────────────────────────── */
.na-model-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.na-model-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 140px;
  flex: 1;
  text-align: left;
}
.na-model-btn:hover { border-color: rgba(234,75,53,0.4); }
.na-model-btn.is-selected {
  border-color: var(--accent);
  background: rgba(234,75,53,0.1);
  box-shadow: 0 0 0 2px rgba(234,75,53,0.18);
}
.na-model-icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--accent);
}
.na-model-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.na-model-desc {
  font-size: 0.68rem;
  color: var(--muted);
}
.na-model-api-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(245,166,35,0.07);
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 6px;
  font-size: 0.77rem;
  color: #f5a623;
  margin-top: 8px;
  line-height: 1.5;
}
.na-model-api-hint strong { color: #f5a623; }

/* ── Knowledge Base— large paste field ────────────────────── */
.na-paste-kb-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.na-knowledge-paste-field {
  width: 100%;
  min-height: 110px;
  max-height: 260px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  overflow-y: auto;
  transition: border-color 0.15s;
}
.na-knowledge-paste-field:focus { border-color: var(--accent); }
.na-train-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Canvas sidebar: collapsible sections ─────────────────── */
.sidebar-section-toggle {
  cursor: pointer;
  user-select: none;
}
.sidebar-section-toggle:hover { background: rgba(255,255,255,0.02); border-radius: 6px; }
.sidebar-chevron { transition: transform 0.2s; }
.sidebar-collapsible.is-collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-collapsible.is-collapsed .sidebar-section-body { display: none; }
.sidebar-section-body { overflow: hidden; }
.sidebar-refresh-btn { padding: 4px 6px !important; }
.sidebar-refresh-btn.is-active svg { color: var(--accent); }
.sidebar-refresh-btn.is-spinning svg {
  animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Connector tiles in sidebar */
.sidebar-connector-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 280px;
  overflow-y: auto;
}
.sidebar-connector-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: grab;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.sidebar-connector-tile:hover { border-color: var(--accent-border); background: var(--surface-2); }
.sidebar-connector-tile:active { cursor: grabbing; }
.sidebar-connector-tile.is-dragging-out { opacity: 0.4; }
.sidebar-connector-tile img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.sidebar-conn-name { font-size: 0.8rem; color: var(--ink); font-weight: 500; }
.sidebar-conn-cat { font-size: 0.68rem; color: var(--muted); }

/* ── Workflow controls (Start / Pause / Stop) ──────────────── */
.workflow-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.wf-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  color: var(--ink-soft);
}
.wf-ctrl-btn:hover { background: var(--surface-3); color: var(--ink); }
.wf-start  { color: #3ecf8e; }
.wf-start:hover { background: rgba(62,207,142,0.12); }
.wf-pause  { color: #f5a623; }
.wf-pause:hover { background: rgba(245,166,35,0.12); }
.wf-stop   { color: var(--error); }
.wf-stop:hover  { background: rgba(245,101,101,0.12); }
.wf-ctrl-btn.is-active { background: rgba(255,255,255,0.06); color: var(--ink); }

/* ── Back to canvas breadcrumb ─────────────────────────────── */
.back-to-canvas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

/* ── Modal: unsaved changes protection ─────────────────────── */
/* (uses existing modal-card styles, no new CSS needed) */

/* ── Remove profile panel bleeding into canvas ──────────────── */
/* Profile panel only renders inside agents-tab-layout */
#tab-canvas .agents-profile-panel { display: none !important; }

/* ── Node delete btn visibility fix ───────────────────────── */
.node-btn-delete {
  background: none !important;
  border: none;
  color: var(--muted) !important;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.node-btn-delete:hover { color: var(--error) !important; background: rgba(245,101,101,0.12) !important; }
.free-node .node-port-row {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════ ROUND 3— Canvas/Agent Tab Separation ══════════════════════════════════════════════════════════════ */

/* ── Sidebar dropdown (agent lib + connector lib) ─────────── */
.sidebar-dropdown {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-family: inherit;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpolyline points='2,3 5,7 8,3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.sidebar-dropdown:hover  { border-color: var(--accent-border); }
.sidebar-dropdown:focus  { outline: none; border-color: var(--accent); }

/* ── Tile area below dropdown ─────────────────────────────── */
.sidebar-tile-area {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Spawned draggable tile ───────────────────────────────── */
.sidebar-spawned-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--ink);
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-spawned-tile:hover { border-color: var(--accent-border); background: var(--surface-3); }
.sidebar-spawned-tile:active { cursor: grabbing; opacity: 0.7; }
.sidebar-spawned-tile .tile-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.sidebar-spawned-tile .tile-label { flex: 1; font-weight: 500; }
.sidebar-spawned-tile .tile-hint { font-size: 0.68rem; color: var(--muted); }
.sidebar-spawned-tile .tile-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1;
  transition: color 0.12s;
}
.sidebar-spawned-tile .tile-dismiss:hover { color: var(--error); }

/* ── WIP maturity badge (gear+hammer) ─────────────────────── */
.mb-wip {
  background: rgba(155,77,202,0.12);
  color: #b878e8;
  border: 1px solid rgba(155,77,202,0.3);
}
.wip-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82em;
}

/* ── Agent card: hide drag hint, remove draggable cursor ──── */
.agents-page-grid .agent-card-v2 { cursor: default; }
.agents-page-grid .agent-card-v2 .ac-drag-hint { display: none !important; }

/* ── Delete button in agents tab card ─────────────────────── */
.ac-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.74rem;
  background: rgba(234,75,53,0.08);
  border: 1px solid rgba(234,75,53,0.25);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.ac-delete-btn:hover { background: rgba(234,75,53,0.18); border-color: rgba(234,75,53,0.5); }

/* ── Canvas: inspector hidden when layout=canvas ──────────── */
#tab-canvas .inspector[hidden] { display: none !important; }

/* ── Unsaved modal: Save button ──────────────────────────── */
#unsavedChangesModal .modal-footer { justify-content: center; gap: 8px; flex-wrap: nowrap; align-items: center; }


/* ══════════════════════════════════════════════════════════════ WORKFLOW CANVAS— New visual node + wire system (demo-4 style) ══════════════════════════════════════════════════════════════ */

/* ── Override: wire bezier paths ─────────────────────────────── */
.wire-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wire-path.is-pending  { stroke: rgba(130,110,110,0.45); }
.wire-path.is-complete { stroke: #3ecf8e; filter: drop-shadow(0 0 4px rgba(62,207,142,0.6)); }
.wire-path.is-failed   { stroke: #ea4b35; filter: drop-shadow(0 0 4px rgba(234,75,53,0.6)); }
.wire-path.is-active {
  stroke: #46e2c1;
  stroke-dasharray: 10 6;
  animation: wire-flow 0.9s linear infinite;
  filter: drop-shadow(0 0 5px rgba(70,226,193,0.7));
}
.wire-path.wire-dragging {
  stroke: rgba(70,226,193,0.9);
  stroke-dasharray: 7 7;
  animation: wire-flow 0.7s linear infinite;
}
.wire-path.wire-snap   { stroke: #46e2c1; }

.wire-joint { stroke-width: 2.5; }
.wire-joint.is-pending  { fill: #1a1212; stroke: rgba(130,110,110,0.5); }
.wire-joint.is-complete { fill: #0f0d0d; stroke: #3ecf8e; filter: drop-shadow(0 0 3px rgba(62,207,142,0.8)); }
.wire-joint.is-failed   { fill: #0f0d0d; stroke: #ea4b35; }
.wire-joint.is-active   { fill: #0f0d0d; stroke: #46e2c1; filter: drop-shadow(0 0 3px rgba(70,226,193,0.8)); }

/* ── New node card: wf-node-card ─────────────────────────────── */
.wf-node-card {
  width: 220px !important;
  min-height: unset !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgb(42,27,24), rgb(24,18,17)) !important;  /* fully opaque so wires never bleed through */
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  overflow: visible !important;
  transition: border-color 0.2s, box-shadow 0.2s, left 0.18s cubic-bezier(0.34,1.56,0.64,1), top 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.wf-node-card.is-dragging {
  transition: none !important; /* no spring while dragging— follow cursor exactly */
}
.wf-node-card:hover {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.wf-node-card.is-running {
  border-color: rgba(70,226,193,0.35) !important;
  box-shadow: 0 0 0 1px rgba(70,226,193,0.18), 0 12px 32px rgba(0,0,0,0.38) !important;
}

/* ── Node header ─────────────────────────────────────────────── */
.wf-node-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
  cursor: move;
}

.wf-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

.wf-node-title {
  flex: 1;
  min-width: 0;
}
.wf-node-title strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink, #f5ede7);
}
.wf-node-title span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #7e6f66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Delete button top-right ─────────────────────────────────── */
.wf-node-delete {
  background: none;
  border: none;
  color: var(--muted, #7e6f66);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 5px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  margin-top: -2px;
}
.wf-node-delete:hover { color: #ea4b35; background: rgba(234,75,53,0.1); }

/* ── Meta row: status dot + learn button ─────────────────────── */
.wf-node-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 10px;
  font-size: 11px;
}

.wf-node-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 11px;
}
.wf-node-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: none;
}
/* Pulse when running */
.wf-node-card.is-running .wf-node-status::before {
  animation: status-pulse 1.1s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50%       { opacity: 0.5; box-shadow: 0 0 12px currentColor; }
}

.wf-node-actions { display: flex; gap: 5px; }
.wf-learn-btn {
  font-size: 10px;
  font-family: inherit;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #7e6f66);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wf-learn-btn:hover { border-color: var(--accent, #ea4b35); color: var(--accent, #ea4b35); }

/* ── Port buttons ─────────────────────────────────────────────── */
.wf-node-ports {
  position: relative;
  height: 20px;
  margin-bottom: 10px;
}

.wf-port {
  position: absolute;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.22);
  background: #171212;
  cursor: crosshair;
  padding: 0;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  /* Invisible hit-area extension via pseudo-before so wires snap easily */
}
/* Enlarged invisible hit zone around each port */
.wf-port::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none; /* visual only; actual hitbox is the element itself */
}
.wf-port::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}
.wf-port-in  { left: 6px;  color: var(--muted, #7e6f66); }
.wf-port-out { right: 6px; color: var(--muted, #7e6f66); }
.wf-port:hover, .wf-port.port-target {
  border-color: #46e2c1;
  color: #46e2c1;
  box-shadow: 0 0 10px rgba(70,226,193,0.55);
  transform: scale(1.18);
}
.wf-port.port-snap {
  border-color: #46e2c1;
  color: #46e2c1;
  box-shadow: 0 0 16px rgba(70,226,193,0.85);
  transform: scale(1.35);
  animation: port-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes port-pulse {
  from { box-shadow: 0 0 10px rgba(70,226,193,0.6); }
  to   { box-shadow: 0 0 22px rgba(70,226,193,1.0); }
}

/* Multi-wire count badge on port-in */
.wf-port-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #46e2c1;
  color: #0f0d0d;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  pointer-events: none;
  min-width: 14px;
  text-align: center;
}



/* ── Runs auto-refresh ────────────────────────────────────────────────── */
.runs-auto-refresh-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
}
.runs-auto-refresh-label input { accent-color: var(--accent); cursor: pointer; }
.runs-auto-refresh-text { user-select: none; }

/* ── Clickable step indicators ────────────────────────────────────────── */
.na-step-clickable { cursor: pointer; transition: opacity 0.15s; }
.na-step-clickable:hover .na-step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}

/* ── Backup agent field ──────────────────────────────────────────────── */
#na-backup-agent-wrap { margin-top: 4px; }

/* ── Team Canvas Modal ─────────────────────────────────────────────── */
.team-canvas-modal {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: min(92vw, 860px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tc-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }
.tc-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.tc-canvas-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #0c0a0a;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.tc-orbital-canvas {
  width: 100%;
  height: 100%;
  min-height: 420px;
  position: relative;
}
.tc-goal-node {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(155,77,202,0.3), rgba(155,77,202,0.08));
  border: 2px solid rgba(155,77,202,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  z-index: 10;
  box-shadow: 0 0 24px rgba(155,77,202,0.25);
}
.tc-goal-node:hover {
  border-color: rgba(155,77,202,0.9);
  box-shadow: 0 0 36px rgba(155,77,202,0.45);
}
.tc-goal-icon { color: rgba(155,77,202,0.9); }
.tc-goal-label {
  font-size: 0.67rem;
  font-weight: 600;
  color: rgba(155,77,202,0.9);
  text-align: center;
  padding: 0 8px;
  line-height: 1.3;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-orbit-wires {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.tc-agent-node {
  position: absolute;
  width: 104px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px 8px;
  cursor: grab;
  transition: box-shadow 0.15s, border-color 0.15s;
  z-index: 5;
  user-select: none;
}
.tc-agent-node:hover {
  border-color: rgba(70,226,193,0.5);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 12px rgba(70,226,193,0.18);
}
.tc-agent-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-bottom: 6px;
}
.tc-agent-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-agent-role {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.tc-footer-hint {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Team sidebar tile ───────────────────────────────────────────────── */
.team-tile .tile-icon { color: rgba(155,77,202,0.85); }

/* ── Incomplete agent modal— always on top of new-agent modal ─────── */
#incompleteAgentModal { z-index: 350; }

/* ── Edit button in agents tab card ───────────────────────── */
.ac-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.74rem;
  background: rgba(70,226,193,0.08);
  border: 1px solid rgba(70,226,193,0.25);
  border-radius: 5px;
  color: #46e2c1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.ac-edit-btn:hover { background: rgba(70,226,193,0.18); border-color: rgba(70,226,193,0.5); }

/* ── Team Goal node on free canvas ──────────────────────────────────────── */
.wf-node-card[data-type="team-goal"],
.free-node.wf-node-card.team-goal-node {
  width: 140px !important;
  min-height: 72px !important;
  padding: 10px 14px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #9b4dca, #b878e8) !important;
  border: 2px solid rgba(184,120,232,0.6) !important;
  box-shadow: 0 0 28px rgba(155,77,202,0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: default !important;
}

/* Special goal node rendering handled inline via JS */
.wf-goal-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 72px;
  border-radius: 50px;
  background: linear-gradient(135deg, #9b4dca, #b878e8);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
  padding: 8px 14px;
  box-shadow: 0 0 24px rgba(155,77,202,0.4);
  border: 2px solid rgba(184,120,232,0.6);
  cursor: default;
}

/* EDIT button on node cards */
.node-btn-edit {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 3px 6px !important;
  color: var(--muted) !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-right: 4px !important;
  transition: color 0.15s, background 0.15s !important;
}
.node-btn-edit:hover {
  color: var(--accent) !important;
  background: rgba(234,75,53,0.08) !important;
}

/* Tile edit modal tab active state */
.tile-edit-tab.is-active {
  border-bottom-color: var(--accent) !important;
  color: var(--ink) !important;
}
.tile-edit-tab:hover:not(.is-active) {
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border-radius: 4px 4px 0 0;
}

/* ── Node snap-push animation ─────────────────────────────── */
@keyframes node-snap-push {
  0%   { transform: scale(1)    translate(0, 0); }
  18%  { transform: scale(1.04) translate(-6px, -4px); }
  36%  { transform: scale(1.03) translate(5px,  3px); }
  52%  { transform: scale(1.02) translate(-4px, -2px); }
  68%  { transform: scale(1.01) translate(3px,  1px); }
  84%  { transform: scale(1.01) translate(-1px, -1px); }
  100% { transform: scale(1)    translate(0, 0); }
}
.wf-node-card.snap-pushed {
  animation: node-snap-push 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ═══════════════════════════════════════════════════════════════ ROUND 11— UX OVERHAUL PATCHES ═══════════════════════════════════════════════════════════════ */

/* ── Fix 1: Sidebar grip tile list ─────────────────────────── */
.sidebar-tile-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}
.sidebar-grip-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--ink);
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-grip-tile:hover {
  border-color: var(--accent-border);
  background: var(--surface-3);
}
.sidebar-grip-tile:active { cursor: grabbing; opacity: 0.7; }
.sgt-grip {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.12s;
}
.sidebar-grip-tile:hover .sgt-grip { opacity: 0.7; }
.sgt-grip span {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-soft);
}
.sgt-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.sgt-icon-char {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sgt-label {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgt-sub {
  font-size: 0.66rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Fix 2: Toolbar— demote Start/Pause/Stop to icon-only ─── */
.wf-ctrl-btn {
  padding: 5px 8px !important;
  gap: 0 !important;
}
.wf-ctrl-btn .wf-btn-label { display: none; }

/* Demote Demo + Replay to ghost-xs */
#launchDemoButton,
#replayButton {
  font-size: 0.75rem !important;
  padding: 4px 9px !important;
  opacity: 0.7;
}
#launchDemoButton:hover,
#replayButton:hover { opacity: 1; }

/* ── Fix 3: Agent cards— fixed height, consistent structure ── */
.agent-card-v2 {
  min-height: 148px;
  max-height: 160px;
}
.ac-desc {
  -webkit-line-clamp: 1 !important;
  max-height: 1.4em;
  overflow: hidden;
}

/* ── Fix 4: Status badges— 3-state, no emoji ──────────────── */
.mb-wip {
  background: rgba(245,162,35,0.12) !important;
  color: #f5a623 !important;
  border: 1px solid rgba(245,162,35,0.3) !important;
}
.mb-untrained {
  background: rgba(100,80,80,0.18) !important;
  color: #a89090 !important;
  border: 1px solid rgba(140,100,100,0.25) !important;
}

/* ── Fix 7: Credentials— full-width grid + section dividers ─ */
.credentials-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 10px !important;
}
.cred-section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 2px;
}
.cred-section-divider span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}
.cred-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.cred-card {
  padding: 14px 16px !important;
  gap: 10px !important;
}

/* ── Fix 8: Nav tabs— strong active vs. inactive contrast ─── */
.tab-btn {
  color: rgba(192,180,180,0.5) !important;
  font-weight: 500;
}
.tab-btn svg { opacity: 0.5; }
.tab-btn:hover {
  color: var(--ink-soft) !important;
  background: rgba(255,255,255,0.04) !important;
}
.tab-btn:hover svg { opacity: 0.8; }
.tab-btn.is-active {
  color: #ffffff !important;
  background: rgba(234,75,53,0.15) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600;
}
.tab-btn.is-active svg { opacity: 1; }

/* ── Fix 9: Canvas footer— remove debug labels, group zoom ── */
.canvas-legend-chip { display: none !important; }

.canvas-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0 !important;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  margin-left: auto;
}
.zoom-btn {
  border: none !important;
  background: transparent !important;
  border-radius: 5px !important;
  color: var(--ink-soft) !important;
}
.zoom-btn:hover {
  background: var(--surface-3) !important;
  color: var(--ink) !important;
}

/* ── Fix 10: Breadcrumb— only show when fromCanvas set ────── */
/* (handled in JS; CSS just ensures it looks right when visible) */
#backToCanvasBreadcrumb {
  padding: 6px 0 8px;
}

/* ── Fix 11: Node title ellipsis ─────────────────────────────*/
.wf-node-title strong {
  max-width: 100%;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.wf-node-title span {
  max-width: 100%;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* ── Fix 5: Teams empty state ───────────────────────────────── */
.teams-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  padding: 40px 32px;
  text-align: center;
}
.teams-empty-state .tes-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(155,77,202,0.12);
  border: 1px solid rgba(155,77,202,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b878e8;
}
.teams-empty-state h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.teams-empty-state p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  max-width: 240px;
  line-height: 1.5;
}

/* ── Fix 6: Runs— date group headers, failed border ──────── */
.runs-date-group {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.run-row-failed {
  border-left: 3px solid var(--error) !important;
  border-left-color: #f56565 !important;
}
.runs-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.run-filter-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.run-filter-chip:hover { border-color: var(--accent-border); color: var(--ink-soft); }
.run-filter-chip.is-active {
  background: rgba(234,75,53,0.12);
  border-color: rgba(234,75,53,0.35);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════ ROUND 12— WINDOWS 11 FLUENT DESIGN SYSTEM Light / Dark dual-theme · Mica · Acrylic · Segoe UI Variable ═══════════════════════════════════════════════════════════════════════ */

/* ── Font stack: Segoe UI Variable first, General Sans fallback ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Segoe UI Variable is a system font on Windows 11— use it as priority */
:root {
  --font-ui: 'Segoe UI Variable', 'Segoe UI', 'General Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-display: 'Segoe UI Variable Display', 'Segoe UI', 'General Sans', Inter, system-ui, sans-serif;
}

/* ── DARK THEME (default)— Windows 11 Dark ─────────────────────── */
:root,
[data-theme="dark"] {

  /* ── Mica base— deep neutral with very subtle warm tint ── */
  --win-bg:          #1c1c1c;
  --win-bg-alt:      #202020;
  --win-titlebar:    #2b2b2b;
  --win-mica:        rgba(32, 32, 32, 0.85);
  --win-mica-noise:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* ── Acrylic surfaces— frosted glass for panels/overlays ── */
  --win-acrylic-bg:       rgba(44, 44, 44, 0.72);
  --win-acrylic-border:   rgba(255, 255, 255, 0.08);
  --win-acrylic-shadow:   0 8px 32px rgba(0, 0, 0, 0.45);

  /* ── Layer system ── */
  --layer-0:   #1c1c1c;          /* app base */
  --layer-1:   #282828;          /* sidebar, panels */
  --layer-2:   #323232;          /* cards, inputs */
  --layer-3:   #3c3c3c;          /* hover surfaces */
  --layer-4:   #484848;          /* active/pressed */

  /* ── Windows accent— keep brand red-orange ── */
  --accent:          #ea4b35;
  --accent-light:    #ff6b57;
  --accent-hover:    #ff5a43;
  --accent-soft:     rgba(234, 75, 53, 0.16);
  --accent-border:   rgba(234, 75, 53, 0.35);
  --accent-glow:     0 0 0 3px rgba(234, 75, 53, 0.22);

  /* ── Text hierarchy— reserve --ink (pure white) for the MOST important element on a given screen. Body text should use --ink-primary or --ink-soft; metadata uses --muted. Getting comfortable with gray instead of white is the single biggest lever on making this feel like a professional UI. ── */
  --ink:           #ffffff;                  /* headlines, single per screen */
  --ink-primary:   rgba(255, 255, 255, 0.96);/* body headings */
  --ink-soft:      rgba(255, 255, 255, 0.78);/* body text */
  --ink-secondary: rgba(255, 255, 255, 0.62);/* subtext, captions */
  --muted:         rgba(255, 255, 255, 0.45);/* metadata */
  --ink-disabled:  rgba(255, 255, 255, 0.36);/* disabled controls */

  /* ── Borders— Fluent subtle separators ── */
  --line:          rgba(255, 255, 255, 0.083);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --line-control:  rgba(255, 255, 255, 0.18);

  /* ── Surfaces (mapped to new layer system) ── */
  --surface-0:     var(--layer-0);
  --surface-1:     var(--layer-1);
  --surface-2:     var(--layer-2);
  --surface-3:     var(--layer-3);
  --surface-canvas: rgba(28, 28, 28, 0.95);

  /* ── Status colors— OKLCH-normalized in (L ~70, C ~0.17) so --ok/--warn/--error/--info read at equal perceived brightness. ── */
  --ok:     #52c76b;
  --warn:   #e8a43c;
  --error:  #ef5a5a;
  --info:   #4cc4f0;
  --purple: #9b4dca;

  /* ── Control fills— Fluent layered fills ── */
  --fill-control:         rgba(255, 255, 255, 0.06);
  --fill-control-hover:   rgba(255, 255, 255, 0.093);
  --fill-control-pressed: rgba(255, 255, 255, 0.04);
  --fill-subtle:          rgba(255, 255, 255, 0.04);
  --fill-subtle-hover:    rgba(255, 255, 255, 0.06);

  /* ── Shadows ── */
  --shadow-sm:     0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow:        0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-flyout: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* ── Radius— Fluent uses consistent 8px for most controls ── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-pill: 100px;

  /* ── Canvas dot grid ── */
  --dot-grid:
    radial-gradient(circle at center, rgba(255,255,255,0.07) 1px, transparent 1.3px)
    0 0 / 24px 24px;

  /* ── Wire ── */
  --wire:      #ea4b35;
  --wire-soft: rgba(234, 75, 53, 0.28);
  --focus:     rgba(234, 75, 53, 0.28);

  /* ── Theme-specific for body bg ── */
  --body-bg-1: rgba(40, 10, 5, 0.28);
  --body-bg-2: rgba(80, 20, 120, 0.12);
  --body-base: #181818;
}

/* ── LIGHT THEME— Windows 11 Light ─────────────────────────────── */
/* layer ordering fix— higher layer = more elevated (whiter in light mode, matching dark mode's brighter-is-higher pattern). Previous values had layer-1 brighter than layer-2 which broke elevation semantics and created patch-over-hardcode rules. Each step is ~2% lightness per the light-mode spacing rule. Sidebar uses layer-0 (warm gray), canvas uses layer-1 (whiter), cards/inputs use layer-2, hover/raised surfaces step up to layer-3 and layer-4 which are pure white + shadow. */
[data-theme="light"] {

  /* ── Mica base— near-white warm neutral ── */
  --win-bg:          #ededeb;
  --win-bg-alt:      #e6e4e2;
  --win-titlebar:    #f3f1ef;
  --win-mica:        rgba(243, 241, 239, 0.85);

  /* ── Acrylic ── */
  --win-acrylic-bg:       rgba(252, 252, 252, 0.72);
  --win-acrylic-border:   rgba(0, 0, 0, 0.08);
  --win-acrylic-shadow:   0 8px 32px rgba(0, 0, 0, 0.15);

  /* ── Layer system— ascending elevation ── */
  --layer-0:   #ededeb;          /* sidebar / frame (slight warm tint) */
  --layer-1:   #f5f3f1;          /* canvas / app base */
  --layer-2:   #fbfaf9;          /* cards / inputs */
  --layer-3:   #ffffff;          /* hover surfaces / popovers */
  --layer-4:   #ffffff;          /* active / modal (relies on shadow) */

  /* ── Accent— keep brand red-orange, darkened for AA on white ── */
  --accent:          #c0392b;
  --accent-light:    #ea4b35;
  --accent-hover:    #a93225;
  --accent-soft:     rgba(192, 57, 43, 0.10);
  --accent-border:   rgba(192, 57, 43, 0.30);
  --accent-glow:     0 0 0 3px rgba(192, 57, 43, 0.18);

  /* ── Text hierarchy— reserve --ink for most-important only ── */
  --ink:           #1a1a1a;                 /* headlines, single per screen */
  --ink-primary:   rgba(0, 0, 0, 0.89);     /* body headings */
  --ink-soft:      rgba(0, 0, 0, 0.72);     /* body text */
  --ink-secondary: rgba(0, 0, 0, 0.56);     /* subtext, captions */
  --muted:         rgba(0, 0, 0, 0.44);     /* metadata */
  --ink-disabled:  rgba(0, 0, 0, 0.32);     /* disabled controls */

  /* ── Borders ── */
  --line:          rgba(0, 0, 0, 0.08);
  --line-strong:   rgba(0, 0, 0, 0.14);
  --line-control:  rgba(0, 0, 0, 0.20);

  /* ── Surfaces ── */
  --surface-0:     var(--layer-0);
  --surface-1:     var(--layer-1);
  --surface-2:     var(--layer-2);
  --surface-3:     var(--layer-3);
  --surface-canvas: rgba(245, 243, 241, 0.96);

  /* ── Status colors— OKLCH-normalized in (L ~50, C ~0.15) ── */
  --ok:     #1a8f3a;
  --warn:   #b8650a;
  --error:  #c72a1c;
  --info:   #0e6fc7;
  --purple: #7d3ac1;

  /* ── Control fills ── */
  --fill-control:         rgba(0, 0, 0, 0.039);
  --fill-control-hover:   rgba(0, 0, 0, 0.065);
  --fill-control-pressed: rgba(0, 0, 0, 0.025);
  --fill-subtle:          rgba(0, 0, 0, 0.025);
  --fill-subtle-hover:    rgba(0, 0, 0, 0.04);

  /* ── Shadows ── */
  --shadow-sm:     0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-flyout: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* ── Canvas dot grid ── */
  --dot-grid:
    radial-gradient(circle at center, rgba(0,0,0,0.07) 1px, transparent 1.3px)
    0 0 / 24px 24px;

  /* ── Wire ── */
  --wire:      #c0392b;
  --wire-soft: rgba(192, 57, 43, 0.25);
  --focus:     rgba(192, 57, 43, 0.22);

  /* ── Theme-specific ── */
  --body-bg-1: rgba(234, 75, 53, 0.04);
  --body-bg-2: rgba(155, 77, 202, 0.04);
  --body-base: #f0f0f0;
}

/* ══════════════════════════════════════════════════════════════════ GLOBAL RESETS USING NEW TOKENS ══════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-ui) !important;
  background: var(--body-base) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 0% -10%, var(--body-bg-1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 110%, var(--body-bg-2) 0%, transparent 50%) !important;
  color: var(--ink) !important;
  transition: background-color 0.25s ease, color 0.2s ease;
}

/* Remove old warm-tinted ambient glows in light theme */
[data-theme="light"] .ambient { opacity: 0.15 !important; }
[data-theme="light"] body::before { opacity: 0.3 !important; }

/* ══════════════════════════════════════════════════════════════════ MICA— TITLEBAR & SIDEBAR ══════════════════════════════════════════════════════════════════ */

/* Topbar = Mica material */
.topbar {
  background: var(--win-titlebar) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  /* Subtle noise for Mica texture */
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.6;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.topbar-title { color: var(--ink) !important; font-weight: 600; }
.topbar-eyebrow { color: var(--muted) !important; }

/* Tab nav = slightly different Mica tint */
.tab-nav {
  background: var(--win-bg-alt) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Sidebar = Acrylic material */
.sidebar {
  background: var(--win-acrylic-bg) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-right: 1px solid var(--win-acrylic-border) !important;
}

/* Inspector = same Acrylic */
.inspector {
  background: var(--win-acrylic-bg) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-left: 1px solid var(--win-acrylic-border) !important;
}

/* Main content areas */
.main-content, .agents-grid-panel, .teams-main {
  background: var(--layer-0) !important;
}

/* Teams sidebar */
.teams-sidebar {
  background: var(--win-acrylic-bg) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-right: 1px solid var(--win-acrylic-border) !important;
}

/* ══════════════════════════════════════════════════════════════════ TABS— Fluent style (no pill, underline indicator) ══════════════════════════════════════════════════════════════════ */

.tab-btn {
  color: var(--ink-secondary) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  padding: 4px 16px 0 !important;
  height: 44px;
  border-bottom: 2px solid transparent !important;
  transition: color 0.12s, border-color 0.12s !important;
  opacity: 1 !important;
}
.tab-btn svg { opacity: 0.7 !important; }
.tab-btn:hover {
  color: var(--ink) !important;
  background: var(--fill-subtle-hover) !important;
}
.tab-btn:hover svg { opacity: 1 !important; }
.tab-btn.is-active {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
}
.tab-btn.is-active svg { opacity: 1 !important; color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════ BUTTONS— Fluent filled / ghost / danger ══════════════════════════════════════════════════════════════════ */

.accent-btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  transition: background 0.1s, transform 0.1s, box-shadow 0.1s !important;
}
.accent-btn:hover {
  background: var(--accent-hover) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.accent-btn:active { transform: scale(0.98) !important; }

.ghost-btn {
  background: var(--fill-control) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-control) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  transition: background 0.1s !important;
}
.ghost-btn:hover {
  background: var(--fill-control-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}
.ghost-btn:active {
  background: var(--fill-control-pressed) !important;
}

.danger-btn {
  background: var(--fill-control) !important;
  color: var(--error) !important;
  border: 1px solid var(--line-control) !important;
  border-radius: var(--r-md) !important;
}
.danger-btn:hover {
  background: rgba(245, 92, 92, 0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════ INPUTS, TEXTAREAS, SELECTS— Fluent control style ══════════════════════════════════════════════════════════════════ */

input, textarea, select, .modal-input {
  background: var(--fill-control) !important;
  border: 1px solid var(--line-control) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  transition: border-color 0.12s, box-shadow 0.12s !important;
}
input:hover, textarea:hover, select:hover {
  background: var(--fill-control-hover) !important;
  border-color: var(--line-strong) !important;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
.modal-input:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════ CARDS— Fluent elevated surface ══════════════════════════════════════════════════════════════════ */

.agent-card-v2 {
  background: var(--layer-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}
.agent-card-v2:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--line-strong) !important;
  transform: none !important;
}

.agent-card-v2 .ac-name { color: var(--ink-primary) !important; }
.agent-card-v2 .ac-role { color: var(--ink-secondary) !important; }
.agent-card-v2 .ac-desc { color: var(--ink-secondary) !important; }
.agent-card-v2 .ac-footer { border-top-color: var(--line) !important; }

/* ══════════════════════════════════════════════════════════════════ SIDEBAR LIST ITEMS— Fluent list item style ══════════════════════════════════════════════════════════════════ */

.agent-item, .run-item, .team-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  color: var(--ink-secondary) !important;
  transition: background 0.1s, color 0.1s !important;
}
.agent-item:hover, .run-item:hover, .team-item:hover {
  background: var(--fill-subtle-hover) !important;
  color: var(--ink) !important;
}
.agent-item.is-active, .run-item.is-active, .team-item.is-active {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border-color: var(--accent-border) !important;
}

/* ══════════════════════════════════════════════════════════════════ PANEL SECTIONS— clean Fluent separators ══════════════════════════════════════════════════════════════════ */

.panel-section {
  border-bottom: 1px solid var(--line) !important;
}

h2, .section-heading h2 {
  color: var(--muted) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════ MODALS— Fluent flyout / dialog ══════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  background: rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(4px) !important;
}
[data-theme="light"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.28) !important;
}

.confirm-modal,
.new-agent-modal,
.team-canvas-modal,
.connector-config-modal,
.cred-modal {
  background: var(--layer-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-flyout) !important;
  color: var(--ink) !important;
}

/* Modal headers */
.confirm-modal-header,
.na-header, .tc-header, .ccm-header, .cred-modal-header {
  border-bottom: 1px solid var(--line) !important;
  background: var(--layer-2) !important;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0 !important;
}
.confirm-modal-footer, .na-footer, .tc-footer, .ccm-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--layer-2) !important;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl) !important;
}

/* ══════════════════════════════════════════════════════════════════ CANVAS / BLUEPRINT— Fluent canvas surface ══════════════════════════════════════════════════════════════════ */

.blueprint-viewport {
  background:
    radial-gradient(ellipse 60% 40% at 10% 20%, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 90% 80%, rgba(155, 77, 202, 0.06) 0%, transparent 50%),
    var(--dot-grid),
    var(--surface-canvas) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
}

.canvas-header {
  background: var(--layer-1) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 16px !important;
}
#canvasTitle { color: var(--ink) !important; }
#canvasSubtitle { color: var(--muted) !important; }

/* Canvas nodes */
.free-node {
  background: var(--layer-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
.free-node:hover { box-shadow: var(--shadow) !important; }

/* Canvas footer */
.canvas-footer {
  background: transparent !important;
  padding: 8px 14px 10px !important;
}

/* Zoom controls */
.canvas-zoom-controls {
  background: var(--layer-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
}
.zoom-btn {
  color: var(--ink-secondary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
}
.zoom-btn:hover {
  background: var(--fill-control-hover) !important;
  color: var(--ink) !important;
}

/* ══════════════════════════════════════════════════════════════════ WORKFLOW CONTROLS— Fluent icon-only group ══════════════════════════════════════════════════════════════════ */

.workflow-controls {
  background: var(--layer-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
}
.wf-ctrl-btn {
  border-radius: var(--r-sm) !important;
  background: transparent !important;
}
.wf-ctrl-btn:hover { background: var(--fill-control-hover) !important; }

/* ══════════════════════════════════════════════════════════════════ STATUS BADGES— Fluent badge style ══════════════════════════════════════════════════════════════════ */

.maturity-badge {
  border-radius: var(--r-xs) !important;
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  letter-spacing: 0.06em !important;
}
.mb-active     { background: rgba(62,207,142,0.12) !important; color: var(--ok) !important; border-color: rgba(62,207,142,0.25) !important; }
.mb-wip        { background: rgba(248,184,78,0.12) !important; color: var(--warn) !important; border-color: rgba(248,184,78,0.28) !important; }
.mb-untrained  { background: var(--fill-subtle) !important; color: var(--ink-secondary) !important; border-color: var(--line) !important; }
.mb-conditioned{ background: rgba(96,205,255,0.10) !important; color: var(--info) !important; border-color: rgba(96,205,255,0.22) !important; }
.mb-learning   { background: rgba(155,77,202,0.12) !important; color: var(--purple) !important; border-color: rgba(155,77,202,0.25) !important; }
.mb-mature     { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent-border) !important; }

/* ══════════════════════════════════════════════════════════════════ FILTER CHIPS— Fluent pill chips ══════════════════════════════════════════════════════════════════ */

.filter-chip, .run-filter-chip {
  background: var(--fill-control) !important;
  border: 1px solid var(--line-control) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink-secondary) !important;
  font-weight: 400 !important;
  transition: background 0.1s, color 0.1s !important;
}
.filter-chip:hover, .run-filter-chip:hover {
  background: var(--fill-control-hover) !important;
  color: var(--ink) !important;
}
.filter-chip.is-active, .run-filter-chip.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════ CREDENTIALS PAGE— Fluent card style ══════════════════════════════════════════════════════════════════ */

.cred-card {
  background: var(--layer-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
.cred-card:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--line-strong) !important;
}
.cred-card-name { color: var(--ink) !important; }
.cred-card-cat  { color: var(--muted) !important; }
.cred-card-auth { color: var(--ink-secondary) !important; }

/* ══════════════════════════════════════════════════════════════════ SIDEBAR GRIP TILES— Fluent list item ══════════════════════════════════════════════════════════════════ */

.sidebar-grip-tile {
  background: var(--fill-control) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-secondary) !important;
}
.sidebar-grip-tile:hover {
  background: var(--fill-control-hover) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
}
.sidebar-spawned-tile {
  background: var(--layer-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
}

/* ══════════════════════════════════════════════════════════════════ RUNS PAGE— date groups + rows ══════════════════════════════════════════════════════════════════ */

.runs-date-group {
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}

/* ══════════════════════════════════════════════════════════════════ STATUS INDICATORS— topbar dots ══════════════════════════════════════════════════════════════════ */

.status-label { color: var(--muted) !important; }
#serverStatus, #streamStatus { color: var(--ink-secondary) !important; }

/* ══════════════════════════════════════════════════════════════════ TEAMS EMPTY STATE ══════════════════════════════════════════════════════════════════ */

.teams-empty-state h3 { color: var(--ink) !important; }
.teams-empty-state p  { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════ SCROLLBARS— thin Fluent style ══════════════════════════════════════════════════════════════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ══════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON— topbar ══════════════════════════════════════════════════════════════════ */

#themeToggleBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-control);
  background: var(--fill-control);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: 1rem;
  flex-shrink: 0;
}
#themeToggleBtn:hover {
  background: var(--fill-control-hover);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════ LIGHT THEME— SPECIFIC OVERRIDES ══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .topbar-logo {
  background: linear-gradient(135deg, var(--accent), #a02820) !important;
}

[data-theme="light"] .cred-section-divider span { color: var(--muted) !important; }
[data-theme="light"] .cred-section-divider::after { background: var(--line) !important; }

/* Fix: na-modal-title and modal headers in light mode */
[data-theme="light"] .na-title,
[data-theme="light"] .tc-title,
[data-theme="light"] .modal-label,
[data-theme="light"] h1,
[data-theme="light"] h3 {
  color: var(--ink) !important;
}
[data-theme="light"] .field-label,
[data-theme="light"] .na-subtitle,
[data-theme="light"] .tc-subtitle {
  color: var(--muted) !important;
}

/* Agent card border-left accents adapt */
[data-theme="light"] .agent-card-v2.env-workflow { border-left-color: #b55c00 !important; }
[data-theme="light"] .agent-card-v2.env-team     { border-left-color: #7d3ac1 !important; }
[data-theme="light"] .agent-card-v2.env-base     { border-left-color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════════ SECTION HEADINGS + PAGE HEADERS (BOTH THEMES) ══════════════════════════════════════════════════════════════════ */

.agents-tab-header h1,
.agents-tab-header p,
.tab-page > div > h1 {
  color: var(--ink) !important;
}
.tab-page > div > p { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════════ SMOOTH THEME TRANSITIONS ══════════════════════════════════════════════════════════════════ */

.topbar, .tab-nav, .sidebar, .inspector, .teams-sidebar,
.main-content, .agents-grid-panel, .teams-main,
.agent-card-v2, .cred-card, .ghost-btn, .accent-btn,
.modal-backdrop, .confirm-modal, .new-agent-modal,
.team-canvas-modal, input, textarea, select,
.blueprint-viewport, .canvas-header, .canvas-zoom-controls,
.sidebar-grip-tile, .filter-chip, .run-filter-chip {
  transition: background-color 0.22s ease, border-color 0.22s ease,
              color 0.18s ease, box-shadow 0.18s ease !important;
}

/* ══════════════════════════════════════════════════════════════════ ROUND 13— AGENT CARD ADAPTIVE HEIGHT + TAB ICON TUNING ══════════════════════════════════════════════════════════════════ */

/* ── Agent Cards— Remove rigid height, enable adaptive layout ─ */
/* Override min/max-height constraints that caused footer clipping */
.agent-card-v2 {
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Agent name: clamp to 2 lines max so long names don't blow the card */
.agent-card-v2 .ac-name,
.ac-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: 2.6em !important;
  word-break: break-word;
}

/* Description: 1-line clamp */
.agent-card-v2 .ac-desc,
.ac-desc {
  -webkit-line-clamp: 1 !important;
  max-height: 1.4em !important;
}

/* Footer: always pushed to the bottom of flex column */
.agent-card-v2 .ac-footer,
.ac-footer {
  margin-top: auto !important;
  padding-top: 10px !important;
}

/* Grid: let rows size naturally to the tallest card per row */
.agents-page-grid {
  align-items: stretch !important;
}

/* ── Tab Nav SVGs— ensure they render sharply at 18×18 viewport ─ */
.tab-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: block;
}

/* Active tab icon— full opacity accent fill on filled elements */
.tab-btn.is-active svg {
  filter: drop-shadow(0 0 2px rgba(234, 75, 53, 0.35));
}

/* Light theme icon adjustments */
[data-theme="light"] .tab-btn.is-active svg {
  filter: drop-shadow(0 0 2px rgba(192, 57, 43, 0.3));
}

/* ══════════════════════════════════════════════════════════════════ ROUND 14— ICON THEME ADAPTATION Icons that are dark (GitHub #24292f, Notion #000) are nearly invisible on dark backgrounds → invert them in dark mode. Icons that are light are already fixed at the SVG source level. ══════════════════════════════════════════════════════════════════ */

/* GitHub: dark icon → invert to white in dark mode */
[data-theme="dark"] img[src*="github.svg"] {
  filter: invert(1) brightness(1.2);
}

/* Notion: black icon → invert to white in dark mode */
[data-theme="dark"] img[src*="notion.svg"] {
  filter: invert(1) brightness(1.1);
}

/* Light mode: ensure GitHub and Notion use their natural dark color (no filter) */
[data-theme="light"] img[src*="github.svg"],
[data-theme="light"] img[src*="notion.svg"] {
  filter: none;
}

/* HTTP API: teal works on dark well, but on light bg it's very light— darken slightly */
[data-theme="light"] img[src*="http-api.svg"] {
  filter: brightness(0.7) saturate(1.2);
}

/* Webhook: orange works in both modes fine */
/* Slack: now uses official multicolor logo, no filter needed */

/* ── ROUND 14: Port button light-mode fix ─────────────────── */
[data-theme="light"] .wf-port {
  background: var(--layer-2, #e8e8e8);
  border-color: rgba(0,0,0,0.18);
  color: var(--muted, #6b6b6b);
}
[data-theme="light"] .wf-port:hover,
[data-theme="light"] .wf-port.port-target {
  border-color: var(--accent, #c0392b);
  color: var(--accent, #c0392b);
  box-shadow: 0 0 10px rgba(192,57,43,0.45);
}

/* ══════════════════════════════════════════════════════════════════ ROUND 15— CANVAS FULL WIDTH + FLOATING ZOOM CONTROLS ══════════════════════════════════════════════════════════════════ */

/* ── 1. Collapse the inspector column when hidden ─────────── */
/* The layout grid is 300px | 1fr | 320px. When inspector is hidden (display:none) the 320px column stays as dead space. Fix: use auto columns and let hidden inspector collapse to 0. */
.layout {
  grid-template-columns: 300px minmax(0, 1fr) auto !important;
}

/* Inspector hidden = 0 width, no border */
.inspector[hidden] {
  display: none !important;
  width: 0 !important;
}

/* ── 2. Viewport fills main-content edge-to-edge ─────────── */
/* Remove right margin so canvas extends fully to the page edge. Keep a small top/bottom/left gap for breathing room. */
.blueprint-viewport {
  margin: 12px 0 0 12px !important;
  border-radius: var(--r-xl) 0 0 var(--r-xl) !important;
  /* Right border removed so it bleeds into the edge */
  border-right: none !important;
}

/* Round only the left corners; right side is flush with the page edge */

/* ── 3. Zoom controls: float inside viewport bottom-right ─── */
.canvas-zoom-controls {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 3px !important;
  padding: 3px !important;
  /* Fluent acrylic pill */
  background: var(--layer-2, rgba(40,40,40,0.92)) !important;
  border: 1px solid var(--line, rgba(255,255,255,0.08)) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
  margin: 0 !important;
  pointer-events: all !important;
}

/* ── 4. Hide the now-empty canvas-footer ──────────────────── */
.canvas-footer {
  display: none !important;
}

/* ── 5. Remove the bottom margin gap below the viewport ───── */
/* Since we removed the footer, ensure main-content has no gap */
.main-content .blueprint-viewport {
  margin-bottom: 0 !important;
}

/* ── 6. Zoom button tweaks inside floating pill ───────────── */
.canvas-zoom-controls .zoom-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.canvas-zoom-controls .zoom-btn[id="clearCanvasBtn"] {
  width: auto !important;
  padding: 0 8px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Light theme adjustments */
[data-theme="light"] .canvas-zoom-controls {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

/* ══ Wire type toggle (decides new-wire style: purple sequence vs green goal) ══ */
.canvas-wire-type-toggle {
  position: absolute;
  bottom: 8px;
  right: 270px; /* sits left of the zoom controls */
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--layer-2, rgba(40, 40, 40, 0.92));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  pointer-events: all;
}
.canvas-wire-type-toggle .wire-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
}
.canvas-wire-type-toggle .wire-type-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.canvas-wire-type-toggle .wire-type-btn.is-active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.canvas-wire-type-toggle .wire-type-btn[data-wire-type="sequence"].is-active {
  box-shadow: inset 0 0 0 1px rgba(155, 77, 202, 0.55);
}
.canvas-wire-type-toggle .wire-type-btn[data-wire-type="goal"].is-active {
  box-shadow: inset 0 0 0 1px rgba(94, 210, 220, 0.55);
}
.wire-type-swatch {
  width: 14px;
  height: 2px;
  border-radius: 2px;
}
.wire-type-swatch-sequence { background: #9b4dca; box-shadow: 0 0 4px rgba(155, 77, 202, 0.55); }
.wire-type-swatch-goal     { background: #5ed2dc; box-shadow: 0 0 4px rgba(94, 210, 220, 0.55); }
[data-theme="light"] .canvas-wire-type-toggle {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .canvas-wire-type-toggle .wire-type-btn {
  color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .canvas-wire-type-toggle .wire-type-btn:hover,
[data-theme="light"] .canvas-wire-type-toggle .wire-type-btn.is-active {
  color: #000;
}

/* Goal wires— lighter, dashed, green; sequence wires stay purple (default) */
.wire-path.is-goal,
path.wire-path.is-goal {
  stroke: #5ed2dc !important;
  stroke-width: 1.4 !important;
  stroke-dasharray: 5 4 !important;
  opacity: 0.75;
  filter: none !important;
}
.wire-path.is-goal.is-active { stroke: #7ae5ee !important; opacity: 1; }
.wire-joint.is-goal { fill: #5ed2dc; }

/* ── Delegation Chain (Patent Claim 2) ──────────────────────── */
.dc-chain { display: flex; flex-direction: column; align-items: stretch; padding: 4px 0 8px; }
.dc-goal {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin: 0 16px;
  background: rgba(234,75,53,0.06); border: 1px solid rgba(234,75,53,0.18); border-radius: 8px;
  border-left: 3px solid rgba(234,75,53,0.5);
}
.dc-goal-icon { color: rgba(234,75,53,0.75); flex-shrink: 0; }
.dc-goal-body { flex: 1; min-width: 0; }
.dc-goal-lbl { font-size: 0.60rem; letter-spacing: 0.07em; font-weight: 700; text-transform: uppercase; color: rgba(234,75,53,0.55); margin-bottom: 1px; }
.dc-goal-title { font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-goal-stat { font-size: 0.70rem; color: var(--muted); white-space: nowrap; }
.dc-spine { width: 2px; height: 14px; background: var(--line); margin: 0 auto; }
.dc-subtasks { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.dc-subtask { display: flex; flex-direction: column; }
.dc-branch {
  width: 2px; height: 12px;
  background: linear-gradient(to bottom, var(--line), rgba(79,152,163,0.3));
  margin-left: 18px;
}
.dc-agent-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-1);
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.dc-agent-row:hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(79,152,163,0.25);
}
.dc-avatar {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.70rem; font-weight: 700; flex-shrink: 0;
}
.dc-agent-body { flex: 1; min-width: 0; }
.dc-agent-name { font-size: 0.81rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-agent-role { font-size: 0.68rem; color: var(--muted); }
.dc-run-info { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.dc-run-title { font-size: 0.67rem; color: var(--muted); text-align: right; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-no-run { font-size: 0.68rem; color: var(--muted); font-style: italic; flex-shrink: 0; }
.dc-result-line { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #6DAA45; padding: 3px 10px 0 38px; }
.dc-result-line svg {
  background: rgba(109,170,69,0.15);
  border-radius: 50%;
  padding: 1px;
  flex-shrink: 0;
}
.dc-agg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin: 0 16px;
  border: 1px solid rgba(79,152,163,0.22); border-radius: 8px;
  background: rgba(79,152,163,0.06);
  border-left: 3px solid rgba(79,152,163,0.5);
}
@keyframes dcSpinePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.dc-chain.has-running .dc-spine,
.dc-chain.has-running .dc-branch { animation: dcSpinePulse 1.8s ease-in-out infinite; }
.dc-agg-icon { color: rgba(79,152,163,0.75); flex-shrink: 0; }
.dc-agg-body { flex: 1; }
.dc-agg-lbl { font-size: 0.60rem; letter-spacing: 0.07em; font-weight: 700; text-transform: uppercase; color: rgba(79,152,163,0.55); margin-bottom: 1px; }
.dc-agg-summary { font-size: 0.80rem; color: var(--ink); }
.dc-agg-pill { font-size: 0.71rem; font-weight: 600; white-space: nowrap; }
.dc-agg-complete .dc-agg-pill { color: #6DAA45; }
.dc-agg-running .dc-agg-pill { color: #4F98A3; }
.dc-agg-pending .dc-agg-pill { color: var(--muted); }

/* ── Agent Ability Score (Patent Claim 13d) ─────────────────── */
.ac-ability {
  padding: 7px 14px 4px;
  border-top: 1px solid var(--line);
}
.ac-ability-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.ac-ability-label {
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.ac-ability-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.ac-ability-lvl {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(79,152,163,0.12);
  border: 1px solid rgba(79,152,163,0.25);
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #4F98A3;
  margin-left: 4px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.ac-bar-track {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.ac-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4F98A3 0%, #6DAA45 100%);
  border-radius: 2px;
  transition: width 0.4s ease, filter 0.2s ease;
  box-shadow: 0 0 6px rgba(79,152,163,0.4);
}
.agent-card-v2:hover .ac-bar-fill { filter: brightness(1.15); }

/* ══════════════════════════════════════════════════════════════════ ROUND 18— UX AUDIT POLISH (modals, buttons, spacing, focus states) Applied last so these rules win the cascade without resorting to !important unless overriding earlier !important declarations. ══════════════════════════════════════════════════════════════════ */

/* ── Global focus ring (accessibility) ──────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Buttons shouldn't double up: suppress default outline, keep ring only */
button:focus-visible,
.accent-btn:focus-visible,
.ghost-btn:focus-visible,
.danger-btn:focus-visible,
.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Inputs keep their earlier border-color + box-shadow treatment; suppress extra outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; }

/* ── Modal backdrop— consistent glass effect ───────────── */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Incomplete Agent Modal (confirm dialog) ────────────── */
.r18-confirm-modal {
  min-width: 480px;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-flyout, 0 24px 60px rgba(0, 0, 0, 0.55)) !important;
  font-family: 'General Sans', 'Segoe UI Variable', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: modal-in 0.2s ease-out;
}
.r18-confirm-header {
  padding: 20px 24px 16px;
}
.r18-confirm-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.r18-confirm-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  flex-wrap: nowrap;
}
.r18-confirm-footer .accent-btn,
.r18-confirm-footer .ghost-btn {
  min-height: 40px;
  padding: 9px 18px;
  font-size: 0.86rem;
}

.r18-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}
.r18-modal-subtitle {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.r18-fields-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.7;
  list-style: disc;
}
.r18-fields-list li { padding: 2px 0; }

/* Amber-tinted warning card— matches card radius token */
.r18-warn-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.32);
  color: var(--warn);
  font-size: 0.82rem;
  line-height: 1.5;
}
.r18-warn-banner .r18-warn-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warn);
  stroke: currentColor;
}
.r18-warn-banner span { color: var(--warn); }

/* ── Button standardization (overrides Round-12 Fluent where needed) */
.accent-btn,
.ghost-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.accent-btn {
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--accent);
  box-shadow: 0 6px 18px rgba(234, 75, 53, 0.22);
}
.accent-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(234, 75, 53, 0.32);
}
.accent-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(234, 75, 53, 0.22);
}

.ghost-btn {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.ghost-btn:hover {
  background: var(--fill-control-hover, rgba(255,255,255,0.06));
  border-color: var(--ink-soft);
  color: var(--ink);
  transform: none;
}
.ghost-btn:active {
  background: var(--fill-control-pressed, rgba(255,255,255,0.04));
}

.danger-btn {
  background: rgba(245, 101, 101, 0.15);
  color: var(--error);
  border: 1px solid rgba(245, 101, 101, 0.30);
  box-shadow: none;
}
.danger-btn:hover {
  background: rgba(245, 101, 101, 0.22);
  border-color: rgba(245, 101, 101, 0.45);
  color: var(--error);
}

.accent-btn:disabled,
.ghost-btn:disabled,
.danger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Size modifiers */
.btn-sm {
  padding: 7px 14px;
  font-size: 0.82rem;
}
.btn-xs {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: var(--r-sm);
}

/* ── Live status pulse in topbar ─────────────────────────── */
@keyframes r18-status-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(62, 207, 142, 0.55); }
  70%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(62, 207, 142, 0);    }
  100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(62, 207, 142, 0);    }
}
.status-dot.ok {
  animation: r18-status-pulse 2s ease-in-out infinite;
}

/* ── Credential card spacing ─────────────────────────────── */
.cred-card-auth {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cred-card-btn {
  margin-top: 12px;
}

/* ── Sidebar "No agents" empty state ─────────────────────── */
#agentsList .empty-state,
.empty-state.r18-sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  text-align: center;
}
#agentsList .empty-state .r18-empty-icon,
.empty-state .r18-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--muted);
  opacity: 0.65;
}
#agentsList .empty-state .r18-empty-text,
.empty-state .r18-empty-text {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
#agentsList .empty-state .r18-empty-cta,
.empty-state .r18-empty-cta {
  margin-top: 4px;
}

/* ── New Agent modal— stage progress polish ─────────────── */
.na-stage-step .na-step-circle {
  width: 28px;
  height: 28px;
  transition: transform 180ms ease, background 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease;
}
.na-stage-step.is-active .na-step-circle {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(234, 75, 53, 0.18),
              0 0 14px rgba(234, 75, 53, 0.45);
}
.na-stage-step.is-done .na-step-circle {
  background: var(--ok);
  border-color: var(--ok);
  color: #ffffff;
}
.na-stage-step span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.na-stage-step.is-active span {
  color: var(--accent);
  font-weight: 700;
}

/* Ensure "Create Agent" / primary submit in new-agent modal footer meets 48px minimum height target per accessibility guidance */
.na-footer .accent-btn,
.na-footer .ghost-btn {
  min-height: 44px;
  padding: 11px 20px;
  font-size: 0.88rem;
}

/* Modal headers for the full-screen new-agent modal */
.na-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── Typography hierarchy normalization ──────────────────── */
/* Page-level H1s inside content pages */
.tab-page h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Section labels (uppercase eyebrow) across sidebar + panel sections */
.panel-section > h2,
.section-heading > h2,
.section-heading .section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Card titles */
.agent-item .item-title,
.run-item .item-title,
.team-item .item-title,
.cred-card-name {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
}

/* Card meta text */
.agent-item .item-meta,
.run-item .item-meta,
.team-item .item-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Default section-heading spacing— 20px under a heading */
.section-heading { margin-bottom: 16px; }
.tab-page > div > h1 { margin-bottom: 6px; }

/* Primary CTAs in modal footers should feel clickable— min 40px tall */
.modal-footer .accent-btn,
.modal-footer .ghost-btn,
.na-footer .accent-btn,
.na-footer .ghost-btn,
.tc-footer .accent-btn,
.tc-footer .ghost-btn,
.ccm-footer .accent-btn,
.ccm-footer .ghost-btn {
  min-height: 40px;
}

/* R91 — dynamic_select picker (Trello boards/lists, Sheets tabs,
   ElevenLabs voices). Searchable popup with loading/error/retry/empty
   states so the user always knows WHY a list is empty. */
.ccm-dyn-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}
.ccm-dyn-trigger:hover {
  background: rgba(255,255,255,0.07);
}
.ccm-dyn-trigger .ccm-dyn-placeholder { color: rgba(255,255,255,0.45); }
.ccm-dyn-trigger .ccm-dyn-current-label { color: rgba(255,255,255,0.92); flex: 1 1 auto; }
.ccm-dyn-trigger .ccm-dyn-chevron { opacity: 0.5; flex-shrink: 0; }
[data-theme="light"] .ccm-dyn-trigger .ccm-dyn-placeholder { color: rgba(0,0,0,0.45); }
[data-theme="light"] .ccm-dyn-trigger .ccm-dyn-current-label { color: rgba(0,0,0,0.85); }

.ccm-dyn-popup {
  z-index: 9999;
  background: var(--surface, rgba(28,28,28,0.98));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ccm-dyn-search-wrap {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ccm-dyn-search {
  width: 100%;
}
.ccm-dyn-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 60px;
  max-height: 220px;
}
.ccm-dyn-state {
  padding: 14px 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.ccm-dyn-state.ccm-dyn-error {
  color: #f56565;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.ccm-dyn-retry {
  background: rgba(96,165,250,0.12);
  border: 1px solid rgba(96,165,250,0.4);
  color: #60a5fa;
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.ccm-dyn-retry:hover { background: rgba(96,165,250,0.22); }
.ccm-dyn-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  color: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ccm-dyn-option:hover {
  background: rgba(96,165,250,0.10);
}
.ccm-dyn-option-label { display: block; font-size: 0.85rem; }
.ccm-dyn-option-hint  { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
[data-theme="light"] .ccm-dyn-popup {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
[data-theme="light"] .ccm-dyn-option { color: rgba(0,0,0,0.85); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .ccm-dyn-option-hint { color: rgba(0,0,0,0.5); }
[data-theme="light"] .ccm-dyn-state { color: rgba(0,0,0,0.55); }

/* ── Incomplete modal textarea— ensure consistent styling */
#incompleteReasonInput {
  min-height: 64px;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ── Tab nav tab-btn— verified padding (6px 16px per spec) */
.tab-btn { padding: 6px 16px; }

/* ── Button overrides— win against Round-12 Fluent !important ── */
.accent-btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(234, 75, 53, 0.22) !important;
}
.accent-btn:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 10px 24px rgba(234, 75, 53, 0.32) !important;
  transform: translateY(-1px) !important;
}
.accent-btn:active { transform: translateY(0) !important; }

.ghost-btn {
  background: transparent !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.ghost-btn:hover {
  background: var(--fill-control-hover, rgba(255,255,255,0.06)) !important;
  color: var(--ink) !important;
  border-color: var(--ink-soft) !important;
}

.danger-btn {
  background: rgba(245, 101, 101, 0.15) !important;
  color: var(--error) !important;
  border: 1px solid rgba(245, 101, 101, 0.30) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.danger-btn:hover {
  background: rgba(245, 101, 101, 0.22) !important;
  border-color: rgba(245, 101, 101, 0.45) !important;
}

/* Size variants must win too */
.btn-sm  { padding: 7px 14px !important; font-size: 0.82rem !important; }
.btn-xs  { padding: 4px 10px !important; font-size: 0.75rem !important; border-radius: var(--r-sm) !important; }

/* Disabled state */
.accent-btn:disabled,
.ghost-btn:disabled,
.danger-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Incomplete-modal confirm footer— ensure buttons keep standard size (min-height beats the 40px rule for modals) */
.r18-confirm-footer .accent-btn,
.r18-confirm-footer .ghost-btn {
  min-height: 40px !important;
  padding: 10px 18px !important;
}

/* ── Confirm/new-agent/connector/cred modal min-width ──── */
.confirm-modal { min-width: 480px; }

/* ═══════════════════════════════════════════════════════════════════ ── BASE44-INSPIRED PREMIUM POLISH ── Appended-only block. Translates Base44's light-theme pill/atmospheric pattern language to our dark theme. Uses !important where needed to beat earlier R12-Fluent declarations. ═══════════════════════════════════════════════════════════════════ */

/* ── Pill / capsule shapes ─────────────────────────────── */
.status-badge,
.level-pill,
.tag,
.chip,
.badge,
.filter-chip,
.run-filter-chip,
.run-status-chip,
.cred-status-pill,
.model-version-badge,
.plan-pill,
.category-pill,
.ability-pill {
  border-radius: 999px !important;
}

/* Generic small "chip" elements inside cards pick up the capsule too */
.agent-card .tag,
.team-card .tag,
.run-row .chip,
.cred-card .chip {
  border-radius: 999px !important;
}

/* ── Atmospheric background gradients ──────────────────── */
.topbar {
  background:
    linear-gradient(
      135deg,
      rgba(234, 75, 53, 0.07) 0%,
      rgba(155, 77, 202, 0.05) 60%,
      rgba(15, 13, 13, 0) 100%
    ),
    var(--surface-1) !important;
  border-bottom: 1px solid rgba(200, 160, 160, 0.09) !important;
  position: relative;
}

/* Faint atmospheric glow behind each tab-page's header region */
.tab-page > div:first-child,
.agents-tab-header,
.panel-header,
.section-header {
  position: relative;
}
.agents-tab-header::before,
.panel-header::before,
.section-header::before {
  content: '';
  position: absolute;
  inset: -12px -12px -8px -12px;
  background: radial-gradient(
    ellipse 55% 110% at 0% 50%,
    rgba(234, 75, 53, 0.07) 0%,
    rgba(155, 77, 202, 0.04) 40%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 18px;
}
.agents-tab-header > *,
.panel-header > *,
.section-header > * {
  position: relative;
  z-index: 1;
}

/* ── Unified card elevation (razor-thin border + micro-lift) */
.agent-card,
.team-card,
.run-row,
.cred-card,
.agent-page-card,
.credential-card {
  border: 1px solid rgba(200, 160, 160, 0.13) !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.25),
    0 0 0 0.5px rgba(234, 75, 53, 0.04) !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}
.agent-card:hover,
.team-card:hover,
.cred-card:hover,
.agent-page-card:hover,
.credential-card:hover {
  border-color: rgba(234, 75, 53, 0.22) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(234, 75, 53, 0.10) !important;
  transform: translateY(-1px) !important;
}
.run-row:hover {
  border-color: rgba(234, 75, 53, 0.18) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(234, 75, 53, 0.08) !important;
}

/* ── Section eyebrow label ──────────────────────────────── */
.section-eyebrow,
.r19-eyebrow {
  display: inline-block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  opacity: 0.78;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

/* Existing eyebrow classes get the polish too */
.topbar-eyebrow {
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  opacity: 0.72;
}

/* ── Gradient text— dashboard brand + key headings ─────── */
.app-title,
.brand-name,
.topbar .logo-text,
.topbar-title,
.r19-gradient-title {
  background: linear-gradient(135deg, #ea4b35 0%, #c0392b 40%, #9b4dca 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ── Generous whitespace rhythm ─────────────────────────── */
.agent-card,
.team-card,
.cred-card,
.agent-page-card,
.credential-card {
  padding: 20px 22px !important;
}
.agents-grid,
.teams-grid,
.creds-grid,
.agents-page-grid,
.credentials-grid {
  gap: 16px !important;
}
.tab-page {
  padding-top: 24px;
}

/* ── Typography weight contrast ─────────────────────────── */
.panel-title,
.section-title,
.modal-title,
.tc-title,
.na-title,
.agents-tab-header h1,
.tab-page h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.card-description,
.agent-desc,
.run-desc,
.agent-card p,
.team-card p,
.cred-card p {
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  line-height: 1.55 !important;
}

/* ── Top tab bar— pill capsule style ───────────────────── */
.tab-nav {
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200, 160, 160, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
}
.tab-btn {
  border-radius: 999px !important;
  padding: 7px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease !important;
}
.tab-btn.is-active,
.tab-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 75, 53, 0.30) !important;
}
.tab-btn.is-active svg,
.tab-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.tab-btn:not(.is-active):not(.active):hover {
  background: rgba(234, 75, 53, 0.08) !important;
  color: var(--ink) !important;
}

/* Filter chips inside tabs— outline pill style */
.filter-chip,
.run-filter-chip {
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border: 1px solid rgba(200, 160, 160, 0.18) !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  transition: all 0.15s ease !important;
}
.filter-chip.is-active,
.run-filter-chip.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(234, 75, 53, 0.28) !important;
}
.filter-chip:not(.is-active):hover,
.run-filter-chip:not(.is-active):hover {
  border-color: rgba(234, 75, 53, 0.35) !important;
  color: var(--ink) !important;
  background: rgba(234, 75, 53, 0.06) !important;
}

/* ── Modal card refinement (hairline + soft depth) ──────── */
.modal-card {
  border: 1px solid rgba(200, 160, 160, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(234, 75, 53, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.48),
    0 2px 8px rgba(0, 0, 0, 0.32) !important;
}

/* ── Provider icon tiles (rounded-square peach tint) ───── */
.cred-icon-wrap,
.provider-icon-wrap,
.credential-icon,
.cred-card .provider-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: rgba(234, 75, 53, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Login page— split-screen atmospheric upgrade ─────── */
.login-shell {
  position: relative;
  overflow: hidden;
}
.login-shell::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 42vw;
  height: 100vh;
  background:
    radial-gradient(
      ellipse 70% 55% at 70% 35%,
      rgba(234, 75, 53, 0.18) 0%,
      rgba(234, 75, 53, 0.06) 35%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 60% at 80% 75%,
      rgba(155, 77, 202, 0.14) 0%,
      rgba(155, 77, 202, 0.04) 40%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 0;
  filter: blur(6px);
}
.login-card {
  z-index: 2 !important;
}
.login-input {
  border-radius: 12px !important;
  border-color: rgba(200, 160, 160, 0.18) !important;
}
.login-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(234, 75, 53, 0.15) !important;
}
.login-title.r19-gradient-title,
.r19-login-gradient {
  background: linear-gradient(135deg, #ea4b35 0%, #c0392b 40%, #9b4dca 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── END ──────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════ ── R19b: CANVAS TAB— FLUSH HEADER + MAXIMUM CANVAS SPACE ── Fixes the dead-zone gap between the tab bar and the canvas editor. Three-part fix: 1. Tab-nav row → keeps full-width, pill centered in compact bar 2. Canvas-header → collapses to a single tight toolbar row 3. Blueprint-viewport → top margin removed; fills edge-to-edge ═══════════════════════════════════════════════════════════════════ */

/* ── R19b.1: Tab nav row— restore full-width bar, pill inside ── */
/* made tab-nav inline-flex + fit-content which orphaned it. Restore it as a proper flex row; the pill group floats left. */
.tab-nav {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 16px !important;
  height: 44px !important;
  background: var(--win-bg-alt, rgba(12,9,9,0.70)) !important;
  border-bottom: 1px solid rgba(200,160,160,0.10) !important;
  /* Remove the pill-container treatment from */
  border-radius: 0 !important;
  gap: 0 !important;
}

/* The tab buttons themselves keep the pill capsule look, but sit in a row without extra container padding */
.tab-btn {
  border-radius: 999px !important;
  padding: 5px 16px !important;
  margin-right: 2px !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-soft) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}
.tab-btn.is-active,
.tab-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234,75,53,0.30) !important;
}
.tab-btn:not(.is-active):not(.active):hover {
  background: rgba(234,75,53,0.08) !important;
  color: var(--ink) !important;
}

/* ── R19b.2: Canvas header— compact single-row toolbar ──────── */
/* Collapse the header: no top padding, no stacked layout— title + subtitle inline left, actions right, border separates from canvas */
.canvas-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  background: var(--layer-1, rgba(20,18,18,0.92)) !important;
  border-bottom: 1px solid rgba(200,160,160,0.10) !important;
  gap: 12px !important;
}

/* Title + subtitle become a single inline pair */
.canvas-header > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

#canvasTitle {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  text-transform: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#canvasSubtitle {
  font-size: 0.75rem !important;
  color: var(--muted) !important;
  margin: 0 !important;          /* beats inline margin-top:3px */
  margin-top: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 380px !important;
}

/* Separator dot between title and subtitle when inline */
#canvasTitle::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  margin-left: 10px;
  opacity: 0.5;
  vertical-align: middle;
}

/* ── R19b.3: Blueprint viewport— flush to toolbar, max canvas ── */
.blueprint-viewport {
  margin: 8px 0 0 8px !important;
}

/* ── R19b END ─────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════ ── R19c: TAB GAP FIX + CANVAS TOOLBAR MERGE ── Fixes three related issues: 1. Canvas tab showed a double-bar (.tab-nav +.canvas-header). → Canvas action buttons now live inside.tab-nav as #canvasNavSlot. →.canvas-header is hidden whenever Canvas tab is active. 2. Agents/Teams/Runs/Credentials tabs showed a ~35px dead band between the tab bar and the first content row. Caused by R19's `.tab-page { padding-top: 24px }`. → Forced to 0 on all tab pages. 3. Works in BOTH dark and light themes— all rules are token-based or mirrored via [data-theme="light"] selectors. Driven by JS: app.js sets `document.body.dataset.activeTab = tab` on every tab switch. HTML initialises with data-active-tab="canvas". ═══════════════════════════════════════════════════════════════════ */

/* ── R19c.1: Tab-nav becomes the combined nav + canvas toolbar bar ── */
/* Keep the existing R19b.1 tab-nav layout (flex, 44px, full-width). The #canvasNavSlot floats to the right via margin-left: auto. */
.tab-nav {
  /* Ensure children can use margin-left:auto for right alignment */
  justify-content: flex-start !important;
}

/* ── R19c.2: Canvas nav slot— right-aligned action buttons ── */
.canvas-nav-slot {
  margin-left: auto !important;
  display: none;             /* hidden by default (non-canvas tabs) */
  align-items: center;
  gap: 8px;
  background: transparent;   /* inherit buttons' own theming */
  height: 32px;
}

/* Show the slot only when Canvas tab is active */
body[data-active-tab="canvas"] .canvas-nav-slot {
  display: inline-flex !important;
}

/* Inside the slot: preserve existing #workflowControls inline layout */
.canvas-nav-slot .workflow-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.canvas-nav-slot .workflow-controls[hidden] {
  display: none !important;
}

/* Buttons in the slot: keep R19b sizing tight to the 44px bar */
.canvas-nav-slot .ghost-btn,
.canvas-nav-slot .accent-btn {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.canvas-nav-slot .wf-ctrl-btn {
  height: 24px !important;
  width: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── R19c.3: Hide.canvas-header entirely when Canvas tab is active ── */
/* The actions moved into the tab-nav; the title/subtitle are no longer needed as a separate bar. Kill the row to give the canvas max space. */
body[data-active-tab="canvas"] .canvas-header {
  display: none !important;
}

/* ── R19c.4: Kill the ~35px gap under the tab bar on ALL tabs ── */
/* (line ~5636) set.tab-page { padding-top: 24px }. Undo for every tab— the gap was never intentional. */
.tab-page {
  padding-top: 0 !important;
}
.agents-tab-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* First child of any tab page should never add its own top spacing */
.tab-page > div:first-child {
  margin-top: 0 !important;
}
/* Teams sidebar + main— flush against tab-nav */
.teams-sidebar,
.teams-main {
  padding-top: 0 !important;
}

/* ── R19c.5: Blueprint viewport— flush when canvas-header is hidden ── */
/* R19b.3 gave it `margin: 8px 0 0 8px`. Keep that small breathing room now that canvas-header is gone (it becomes the gap between tab-nav and the canvas, which reads as an intentional inset). */
body[data-active-tab="canvas"] .blueprint-viewport {
  margin: 8px 0 0 8px !important;
}

/* ── R19c.6: LIGHT THEME parity ───────────────────────────────── */
/* All token-based rules above (var(--win-bg-alt), var(--layer-1)) already resolve correctly in light mode. These explicit overrides ensure the canvas-nav-slot, tab-nav, and blueprint-viewport behave identically in [data-theme="light"]. */

[data-theme="light"] .tab-nav {
  background: var(--win-bg-alt) !important;  /* #ebebeb */
  border-bottom: 1px solid var(--line) !important;
}

[data-theme="light"] .canvas-nav-slot {
  background: transparent !important;
}

/* Tab-page gap fix applies theme-agnostically; reassert for specificity against any Fluent/ light-theme rules that might have padding. */
[data-theme="light"] .tab-page {
  padding-top: 0 !important;
}
[data-theme="light"] .agents-tab-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
[data-theme="light"] .teams-sidebar,
[data-theme="light"] .teams-main {
  padding-top: 0 !important;
}

/* Canvas-header hide works via body attribute; reassert for light theme so no later Fluent rule can re-show it on the canvas tab. */
body[data-active-tab="canvas"][data-theme="light"] .canvas-header,
[data-theme="light"] body[data-active-tab="canvas"] .canvas-header {
  display: none !important;
}
/* Defensive: handle the case where [data-theme] lives on <html> rather than <body> (project uses both patterns across different rules). */
html[data-theme="light"] body[data-active-tab="canvas"] .canvas-header {
  display: none !important;
}

/* Blueprint viewport margin parity in light theme */
[data-theme="light"] body[data-active-tab="canvas"] .blueprint-viewport,
html[data-theme="light"] body[data-active-tab="canvas"] .blueprint-viewport {
  margin: 8px 0 0 8px !important;
}

/* ── R19c END ─────────────────────────────────────────────────── */

/* GAP 5— ROLE GAP */
.role-gap-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 10px;
  background: rgba(245,166,35,0.12);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: var(--r-md);
  color: var(--warn); font-size: 0.85rem;
}
.role-gap-banner strong { color: var(--ink); }
.role-gap-banner .btn-role-add {
  margin-left: auto; padding: 5px 14px;
  background: var(--warn); color: #000;
  border: none; border-radius: 999px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
}
.role-gap-banner .btn-role-dismiss {
  padding: 5px 10px; background: transparent;
  border: 1px solid rgba(245,166,35,0.4); color: var(--warn);
  border-radius: 999px; cursor: pointer; font-size: 0.75rem;
}

/* GAP 7— CYCLE DETECTION */
.cycle-error-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  max-width: 560px;
  background: rgba(245, 101, 101, 0.15);
  border: 1px solid rgba(245, 101, 101, 0.5);
  border-radius: var(--r-md);
  color: var(--error);
  font-size: 0.82rem;
  pointer-events: all;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.cycle-error-banner strong { color: var(--ink); font-weight: 600; }
.cycle-error-banner .cycle-msg { line-height: 1.35; }
.cycle-error-banner .cycle-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--error);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cycle-error-banner .cycle-dismiss:hover { color: var(--ink); }
.cycle-icon { font-size: 1rem; flex-shrink: 0; }
/* Node cycle highlight */
.canvas-node.has-cycle,
.free-node.has-cycle,
[data-node-id].has-cycle {
  outline: 2px solid var(--error);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(245, 101, 101, 0.5);
}
/* GAP 7 END */

/* ════════════════════════════════════════════════════════════════ GAP 10— ZERO MARKUP ════════════════════════════════════════════════════════════════ */
.zero-markup-card {
  background: linear-gradient(135deg, rgba(158,75,202,0.08) 0%, rgba(234,75,53,0.06) 100%);
  border: 1px solid rgba(234,75,53,0.2);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.zero-markup-card .section-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.zero-markup-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
}
.zero-markup-card p {
  color: var(--ink-soft);
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.live-cost-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-md);
  margin-top: 8px;
}
.live-cost-toggle-row label {
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.live-cost-toggle-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.token-explainer {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--purple);
}
.token-explainer strong {
  color: var(--ink-soft);
  font-size: 0.8rem;
  display: block;
  margin-bottom: 4px;
}
.token-explainer p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* Cost breakdown in run inspector */
.cost-breakdown-section {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px;
  grid-column: 1 / -1; /* span full width when inside overview-grid */
}
.cost-breakdown-section summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cost-breakdown-section summary::-webkit-details-marker { display: none; }
.cost-breakdown-section summary::before {
  content: '▸';
  color: var(--accent);
  font-size: 0.72rem;
  transition: transform 150ms ease;
}
.cost-breakdown-section[open] summary::before { content: '▾'; }
.cost-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.cost-table td {
  padding: 4px 0;
  color: var(--ink-soft);
}
.cost-table td:last-child {
  text-align: right;
  color: var(--ink);
  font-weight: 600;
}
/* GAP 10 END */

/* ═══════════════════════════════════════════════════════════════════════ */
/* GAP 11— HANDOFF PREDICATE */
/* ═══════════════════════════════════════════════════════════════════════ */
.wire-inspector-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 900; width: 280px;
  background: var(--surface, #1a1717); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.wire-inspector-panel h4 { margin: 0 0 14px; color: var(--ink); font-size: 0.95rem; }
.wire-inspector-panel .predicate-radio-row {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.wire-inspector-panel .predicate-radio-row label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.83rem; color: var(--ink-soft);
}
.wire-inspector-panel input[type="radio"] { accent-color: var(--accent); }
.wire-inspector-panel input[type="text"],
.wire-inspector-panel input[type="number"] {
  width: 100%; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: var(--ink); font-size: 0.83rem; margin-top: 6px; box-sizing: border-box;
}
.wire-inspector-actions { display: flex; gap: 8px; margin-top: 14px; }
.wire-inspector-actions button {
  flex: 1; padding: 7px; border-radius: 999px; font-size: 0.8rem;
  font-weight: 700; cursor: pointer; border: none;
}
.wire-inspector-actions .btn-save { background: var(--accent); color: #fff; }
.wire-inspector-actions .btn-clear { background: rgba(255,255,255,0.08); color: var(--ink-soft); }
.wire-inspector-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer;
}
/* Predicate badge on wire */
.wire-predicate-badge { cursor: pointer; }
.wire-predicate-badge:hover { filter: brightness(1.25); }

/*— wire inspector: data-handoff section, snapshot preview, dot */
.wire-inspector-panel { width: 360px; max-height: 80vh; overflow-y: auto; }
.wire-inspector-section {
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wire-inspector-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.wire-inspector-section-title {
  font-size: 0.78rem; color: var(--ink); font-weight: 700;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.wire-inspector-panel select {
  width: 100%; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: var(--ink); font-size: 0.83rem; margin-top: 6px; box-sizing: border-box;
}
.wire-inspector-panel textarea {
  width: 100%; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: var(--ink); font-size: 0.78rem; font-family: ui-monospace, monospace;
  margin-top: 6px; box-sizing: border-box; resize: vertical;
}
.wire-inspector-snapshot {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(70,226,193,0.06); border: 1px solid rgba(70,226,193,0.25);
  border-radius: var(--r-sm);
}
.wire-snapshot-label {
  font-size: 0.72rem; color: #46e2c1; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.wire-snapshot-row { margin-bottom: 8px; }
.wire-snapshot-row:last-child { margin-bottom: 0; }
.wire-snapshot-k {
  display: block; font-size: 0.7rem; color: var(--muted);
  margin-bottom: 3px;
}
.wire-snapshot-v {
  margin: 0; padding: 6px 8px; background: rgba(0,0,0,0.3);
  border-radius: var(--r-sm); font-size: 0.72rem; color: var(--ink-soft);
  font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word;
  max-height: 120px; overflow-y: auto;
}
/*— handoff dot on wire */
.wire-handoff-dot { transition: r 120ms ease, filter 120ms ease; }
.wire-handoff-dot:hover { filter: brightness(1.3) drop-shadow(0 0 4px rgba(70,226,193,0.6)); }
/* Skipped step in run inspector */
.step-skipped-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(138,118,118,0.15); color: var(--muted);
  font-size: 0.75rem; font-weight: 600;
}
.step-skip-reason { font-size: 0.75rem; color: var(--muted); margin-left: 6px; }
/* Skipped event card styling */
.event-card[data-status="skipped"],
.event-card.is-skipped {
  opacity: 0.55;
  border-style: dashed;
  border-color: rgba(138,118,118,0.5);
}
.event-status[data-status="skipped"] { color: var(--muted); }
/* Skipped wire path— dim and dashed */
.wire-path.is-skipped {
  stroke: rgba(138,118,118,0.5);
  stroke-dasharray: 6 6;
}
/* GAP 11 END */

/* DROPDOWN FIX— CUSTOM SELECT */
/* Hides native select; JS replaces with.custom-select wrapper */
select.cs-hidden { display: none !important; }

.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
  user-select: none;
}
.custom-select.cs-sm .cs-trigger { padding: 6px 28px 6px 8px; font-size: 0.78rem; border-radius: 6px; }
.cs-trigger {
  width: 100%;
  padding: 10px 32px 10px 13px;
  background: var(--fill-control, rgba(255,255,255,0.06));
  border: 1px solid var(--line-control, rgba(255,255,255,0.18));
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.12s, background 0.12s;
  box-sizing: border-box;
  position: relative;
}
.cs-trigger::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a7676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.custom-select.cs-open .cs-trigger::after { transform: translateY(-50%) rotate(180deg); }
.cs-trigger:hover {
  background: var(--fill-control-hover, rgba(255,255,255,0.093));
  border-color: var(--line-strong);
}
.custom-select.cs-open .cs-trigger,
.cs-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(234,75,53,0.14));
  outline: none;
}
.cs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface-2, rgba(28,22,22,0.98));
  border: 1px solid var(--line-strong, rgba(200,160,160,0.2));
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 9999;
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.custom-select.cs-open .cs-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.cs-option {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--ink-soft);
  transition: background 0.08s, color 0.08s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-option:hover { background: rgba(234,75,53,0.1); color: var(--ink); }
.cs-option.cs-selected {
  background: rgba(234,75,53,0.16);
  color: var(--ink);
  font-weight: 600;
}
.cs-option:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.cs-option:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
/* Scrollbar for long option lists */
.cs-dropdown::-webkit-scrollbar { width: 4px; }
.cs-dropdown::-webkit-scrollbar-track { background: transparent; }
.cs-dropdown::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }

/* Light theme overrides */
[data-theme="light"] .cs-trigger {
  background: var(--fill-control, rgba(0,0,0,0.039));
  border-color: var(--line-control, rgba(0,0,0,0.20));
  color: var(--ink);
}
[data-theme="light"] .cs-trigger:hover {
  background: var(--fill-control-hover, rgba(0,0,0,0.065));
}
[data-theme="light"] .cs-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
[data-theme="light"] .cs-option { color: #333; }
[data-theme="light"] .cs-option:hover { background: rgba(234,75,53,0.08); color: #111; }
[data-theme="light"] .cs-option.cs-selected { background: rgba(234,75,53,0.14); color: #111; }

/* LEARNING CONNECTOR FIX— pre-applied state */
.wf-learn-btn.is-learning {
  background: rgba(62, 207, 142, 0.12);
  border-color: rgba(62, 207, 142, 0.4);
  color: var(--ok, #3ecf8e);
  font-weight: 600;
}
.wf-learn-btn.is-learning:hover {
  background: rgba(62, 207, 142, 0.2);
  border-color: var(--ok, #3ecf8e);
}

/* WIRE ANIMATION + TOAST TYPES */

/* ── Toast type variants ── */
.wire-toast { /* base inherited */ }

.toast-type-success {
  border-color: rgba(62,207,142,0.45) !important;
  color: #3ecf8e !important;
}
.toast-type-success::before {
  background: #3ecf8e !important;
  box-shadow: 0 0 6px rgba(62,207,142,0.8) !important;
}

.toast-type-error {
  border-color: rgba(245,101,101,0.5) !important;
  color: #f56565 !important;
}
.toast-type-error::before {
  background: #f56565 !important;
  box-shadow: 0 0 6px rgba(245,101,101,0.8) !important;
}

.toast-type-warn {
  border-color: rgba(245,166,35,0.45) !important;
  color: #f5a623 !important;
}
.toast-type-warn::before {
  background: #f5a623 !important;
  box-shadow: 0 0 6px rgba(245,166,35,0.8) !important;
}

.toast-type-info {
  border-color: rgba(155,77,202,0.4) !important;
  color: #c084fc !important;
}
.toast-type-info::before {
  background: #9b4dca !important;
  box-shadow: 0 0 6px rgba(155,77,202,0.7) !important;
}

/* ── Wire states ── */
/* is-ready: wire connected, workflow not started— solid muted green */
.wire-path.is-ready {
  stroke: rgba(62, 207, 142, 0.55);
  filter: drop-shadow(0 0 2px rgba(62,207,142,0.2));
}
.wire-joint.is-ready {
  fill: #0f0d0d;
  stroke: rgba(62,207,142,0.55);
}

/* is-complete: both nodes done— bright solid green */
/* (already defined in base CSS— no change needed, just verify) */

/* is-active: flowing water animation— multi-shade green */
.wire-path.is-active {
  stroke: #46e2c1;
  stroke-dasharray: 10 5;
  filter: drop-shadow(0 0 6px rgba(70,226,193,0.6));
  animation: wire-flow-water 0.8s linear infinite !important;
}

/* Wire blink on connect */
@keyframes wire-blink-flash {
  0%   { stroke: #3ecf8e; stroke-opacity: 1; filter: drop-shadow(0 0 8px rgba(62,207,142,1)); }
  40%  { stroke: #46e2c1; stroke-opacity: 0.6; filter: drop-shadow(0 0 4px rgba(62,207,142,0.4)); }
  100% { stroke: rgba(62,207,142,0.55); stroke-opacity: 1; }
}
.wire-path.wire-blink {
  animation: wire-blink-flash 0.6s ease-out forwards !important;
}

/* Flowing water— multiple shades of green moving downstream */
@keyframes wire-flow-water {
  0%   { stroke: #3ecf8e; stroke-dashoffset: 0; }
  33%  { stroke: #46e2c1; stroke-dashoffset: -5; }
  66%  { stroke: #2dd4a4; stroke-dashoffset: -10; }
  100% { stroke: #3ecf8e; stroke-dashoffset: -15; }
}

/* is-failed: bright red */
/* (already defined— keep as is) */

/* Idle wire (no nodes connected)— grey */
.wire-path.is-pending {
  stroke: rgba(130, 110, 110, 0.35);
  filter: none;
}

/* ══════════════════════════════════════════════════════════════— Node Card Status States + Anti-Flicker ══════════════════════════════════════════════════════════════ */

/* Suppress the card-in entrance animation on wf-node-card so patchNodeCards updates don't cause opacity flicker mid-run. The card-in animation only runs on initial full renderFreeCanvas. */
.wf-node-card {
  animation: card-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

/* Running: teal border glow + pulsing status dot (already in CSS above via.is-running) */
.wf-node-card.is-running {
  border-color: rgba(70, 226, 193, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(70, 226, 193, 0.22),
    0 0 18px rgba(70, 226, 193, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.38) !important;
}

/* Done: soft green border— success confirmation */
.wf-node-card.is-done {
  border-color: rgba(62, 207, 142, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(62, 207, 142, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.30) !important;
}

/* Error: red border— clear failure signal */
.wf-node-card.is-error {
  border-color: rgba(245, 101, 101, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(245, 101, 101, 0.25),
    0 0 16px rgba(245, 101, 101, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Planned: dim/muted— not yet active */
.wf-node-card.is-planned {
  border-color: rgba(255, 255, 255, 0.06) !important;
  opacity: 0.75;
}

/* When workflow is running, restore opacity on non-planned cards */
.wf-node-card.is-running,
.wf-node-card.is-done,
.wf-node-card.is-error {
  opacity: 1 !important;
}

/* Running icon pulse— subtle breathing scale on the icon */
.wf-node-card.is-running .wf-node-icon {
  animation: icon-breathe 1.4s ease-in-out infinite;
}
@keyframes icon-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.85; }
}

/* is-ready wire— solid muted green when canvas is wired but not running */
.wire-path.is-ready {
  stroke: rgba(62, 207, 142, 0.45);
  stroke-dasharray: none;
  filter: none;
}


/* ═══════════════════════════════════════════════════════════════════ GAP 6— SCHEMA VERSION HISTORY Right-side drawer listing captured schema versions with restore. ═══════════════════════════════════════════════════════════════════ */

/* History button on agent cards— matches ac-edit-btn look */
.ac-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(155, 77, 202, 0.08);
  color: var(--purple);
  border: 1px solid rgba(155, 77, 202, 0.25);
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  margin-left: 6px;
}
.ac-history-btn:hover {
  background: rgba(155, 77, 202, 0.16);
  border-color: rgba(155, 77, 202, 0.45);
}
.ac-history-btn:disabled { opacity: 0.5; cursor: default; }

/* Backdrop behind drawer */
.schema-history-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 13, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 999;
  pointer-events: auto;
}
.schema-history-backdrop.is-visible { opacity: 1; }

/* Drawer shell */
.schema-history-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid rgba(240, 236, 236, 0.08);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: var(--ink);
}
.schema-history-drawer.is-open { transform: translateX(0); }

/* Header */
.schema-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(240, 236, 236, 0.06);
}
.schema-history-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.schema-history-subtitle {
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--muted);
}
.schema-history-close {
  background: transparent;
  border: 1px solid rgba(240, 236, 236, 0.1);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.schema-history-close:hover {
  background: rgba(240, 236, 236, 0.06);
  color: var(--ink);
}

/* Body */
.schema-history-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schema-history-loading,
.schema-history-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.schema-history-empty-sub {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
  opacity: 0.8;
}

/* Version row */
.schema-version-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
  border-radius: var(--r-md);
  transition: border-color 120ms ease, background 120ms ease;
}
.schema-version-row:hover {
  border-color: rgba(155, 77, 202, 0.35);
  background: rgba(155, 77, 202, 0.04);
}
.schema-version-main {
  flex: 1;
  min-width: 0;
}
.schema-version-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.schema-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: rgba(155, 77, 202, 0.15);
  color: var(--purple);
  border: 1px solid rgba(155, 77, 202, 0.4);
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.schema-version-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.schema-version-label {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.schema-version-label.is-auto {
  background: rgba(138, 118, 118, 0.15);
  color: var(--muted);
  border: 1px solid rgba(138, 118, 118, 0.3);
}
.schema-version-label.is-manual {
  background: rgba(245, 166, 35, 0.12);
  color: var(--warn);
  border: 1px solid rgba(245, 166, 35, 0.35);
  text-transform: none;
}
.schema-version-meta {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.schema-version-preview {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Restore button */
.schema-version-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(234, 75, 53, 0.4);
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}
.schema-version-restore-btn:hover {
  background: var(--accent);
  color: #fff;
}
.schema-version-restore-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  background: transparent;
  color: var(--muted);
  border-color: rgba(138, 118, 118, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════ * ══ Sprint B Gap 1— Goal Achievement Record ══════════════════════════════ * ══════════════════════════════════════════════════════════════════════════ */

.goal-ach-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--r-lg, 18px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goal-ach-card[data-band="strong"] { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.goal-ach-card[data-band="mixed"]  { border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.goal-ach-card[data-band="weak"]   { border-color: color-mix(in srgb, var(--error) 35%, transparent); }

.goal-ach-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.goal-ring-wrap {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  position: relative;
  display: grid;
  place-items: center;
}

.goal-ring {
  display: block;
}

.goal-ring-score {
  font-family: inherit;
}

.goal-ach-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goal-ach-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.goal-ach-goal {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.goal-ach-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.goal-band {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.goal-band-strong { background: color-mix(in srgb, var(--ok) 18%, transparent);    color: var(--ok); }
.goal-band-mixed  { background: color-mix(in srgb, var(--warn) 18%, transparent);  color: var(--warn); }
.goal-band-weak   { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }

.goal-ach-time {
  font-size: 0.74rem;
  color: var(--muted);
}

.goal-ach-refresh {
  flex: 0 0 auto;
}

.goal-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.goal-section {
  border-radius: var(--r-sm, 8px);
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.goal-section > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.goal-section > summary::-webkit-details-marker { display: none; }

.goal-section[open] > summary {
  color: var(--ink);
  margin-bottom: 6px;
}

.goal-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.goal-section-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 999px;
}

.goal-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goal-section-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
  padding: 3px 0;
}

.goal-icon {
  flex: 0 0 auto;
  font-weight: 700;
  width: 14px;
  text-align: center;
  font-size: 0.85rem;
}

.goal-section-list.strengths  .goal-icon { color: var(--ok); }
.goal-section-list.gaps       .goal-icon { color: var(--error); }
.goal-section-list.next-steps .goal-icon { color: var(--purple); }

.goal-subtask-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.goal-subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.goal-subtask-row:last-child { border-bottom: 0; }

.goal-subtask-status {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 62px;
  text-align: center;
}
.goal-subtask-status.status-completed { background: color-mix(in srgb, var(--ok) 16%, transparent);    color: var(--ok); }
.goal-subtask-status.status-failed    { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.goal-subtask-status.status-running   { background: color-mix(in srgb, var(--warn) 16%, transparent);  color: var(--warn); }
.goal-subtask-status.status-pending   { background: rgba(255, 255, 255, 0.04); color: var(--muted); }

.goal-subtask-title {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-report-pre {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-radius: var(--r-sm, 8px);
  overflow: auto;
  max-height: 260px;
  margin: 0;
}

.goal-ach-empty {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}

.goal-ach-empty-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sparkline (inline team history trend) */
.goal-sparkline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
}

.goal-sparkline-svg {
  display: inline-block;
  vertical-align: middle;
}

/* ───────────────────────────────────────────── GAP 4— APTITUDE (Sprint B · PPA1 C14) Model Aptitude Registry advisory panel + Fork/Talent modal. ───────────────────────────────────────────── */

.aptitude-panel {
  margin-top: 14px;
}
.aptitude-panel:empty { display: none; }

.aptitude-loading {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 12px 14px;
  background: rgba(240, 236, 236, 0.03);
  border: 1px dashed rgba(240, 236, 236, 0.12);
  border-radius: var(--r-md);
}

.aptitude-empty,
.apt-empty {
  padding: 12px 14px;
  background: rgba(240, 236, 236, 0.03);
  border: 1px dashed rgba(240, 236, 236, 0.12);
  border-radius: var(--r-md);
}
.aptitude-empty-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.aptitude-empty-sub {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--muted);
}

.apt-card {
  background: linear-gradient(180deg, rgba(155, 77, 202, 0.08), rgba(155, 77, 202, 0.02));
  border: 1px solid rgba(155, 77, 202, 0.28);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}

.apt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.apt-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 600;
}
.apt-title {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
  margin-top: 2px;
}
.apt-toggle {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(240, 236, 236, 0.15);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.apt-toggle:hover {
  background: rgba(240, 236, 236, 0.05);
  color: var(--ink);
}

.apt-body.is-collapsed { display: none; }

.apt-headline {
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 8px;
}
.apt-headline strong {
  color: var(--accent);
  font-weight: 700;
}

.apt-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.76rem;
  color: var(--muted);
}
.apt-roles-label {
  color: var(--muted);
  margin-right: 4px;
}
.apt-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(155, 77, 202, 0.14);
  color: #d5b3ee;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(155, 77, 202, 0.25);
}

.apt-desc {
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 10px;
}

.apt-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.apt-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
}
.apt-bar-label {
  color: var(--ink-soft);
  font-weight: 500;
}
.apt-bar-track {
  position: relative;
  height: 6px;
  background: rgba(240, 236, 236, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.apt-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
}
.apt-tone-strong { background: linear-gradient(90deg, var(--ok), #5fe0a8); }
.apt-tone-good   { background: linear-gradient(90deg, var(--accent), #f37b68); }
.apt-tone-ok     { background: linear-gradient(90deg, var(--warn), #f7c06a); }
.apt-tone-weak   { background: linear-gradient(90deg, var(--muted), #a89999); }

.apt-bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.76rem;
  min-width: 64px;
  text-align: right;
}
.apt-bar-suffix {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.68rem;
  margin-left: 2px;
}

.apt-attribution {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(240, 236, 236, 0.08);
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Fork modal + Talent Ranking ── */
.fork-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 13, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: forkFade 140ms ease;
}
@keyframes forkFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fork-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid rgba(155, 77, 202, 0.28);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.fork-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(240, 236, 236, 0.06);
}
.fork-modal-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 600;
}
.fork-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3px;
}
.fork-modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(240, 236, 236, 0.12);
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.fork-modal-close:hover {
  background: rgba(240, 236, 236, 0.05);
  color: var(--ink);
}
.fork-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.fork-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid rgba(240, 236, 236, 0.06);
  background: rgba(240, 236, 236, 0.02);
}
.fork-env-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}
.fork-env-select select {
  font-family: inherit;
  font-size: 0.78rem;
  background: rgba(240, 236, 236, 0.04);
  color: var(--ink);
  border: 1px solid rgba(240, 236, 236, 0.12);
  border-radius: var(--r-sm);
  padding: 5px 8px;
}
.fork-modal-actions {
  display: flex;
  gap: 8px;
}
.fork-btn-cancel,
.fork-btn-confirm {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.fork-btn-cancel {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(240, 236, 236, 0.14);
}
.fork-btn-cancel:hover {
  background: rgba(240, 236, 236, 0.05);
  color: var(--ink);
}
.fork-btn-confirm {
  background: var(--purple);
  color: #fff;
}
.fork-btn-confirm:hover {
  background: #b06fdd;
}

.talent-headline {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.5;
}
.talent-rank-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(62, 207, 142, 0.16);
  color: var(--ok);
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

.talent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.talent-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
}
.talent-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.talent-rank-1 { background: rgba(62, 207, 142, 0.18); color: var(--ok); }
.talent-rank-2 { background: rgba(245, 166, 35, 0.18); color: var(--warn); }
.talent-rank-3 { background: rgba(234, 75, 53, 0.18); color: var(--accent); }
.talent-rank-n { background: rgba(240, 236, 236, 0.06); color: var(--ink-soft); }
.talent-role-name {
  color: var(--ink);
  font-weight: 600;
}
.talent-role-score {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.talent-alt {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(155, 77, 202, 0.06);
  border: 1px solid rgba(155, 77, 202, 0.2);
  border-radius: var(--r-md);
}
.talent-alt-label {
  font-size: 0.74rem;
  color: var(--purple);
  font-weight: 600;
  margin-bottom: 6px;
}
.talent-alt-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.76rem;
  border-top: 1px dashed rgba(240, 236, 236, 0.06);
}
.talent-alt-row:first-of-type { border-top: none; }
.talent-alt-rank {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.72rem;
}
.talent-alt-name {
  color: var(--ink);
  font-weight: 600;
}
.talent-alt-provider {
  color: var(--muted);
  font-size: 0.7rem;
}
.talent-alt-score {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
}

/* Narrow screens— keep wizard Step 2 visible on 1440×900 */
@media (max-height: 900px) {
  .aptitude-panel .apt-card { padding: 10px 14px; }
  .aptitude-panel .apt-bars { gap: 4px; }
  .aptitude-panel .apt-desc { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════ GAP-D— WORKFLOWS TAB New first-class Workflows tab: Canvas drawer, workflow cards, detail view. ══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas Nav "Configure Workflow" pill ───────────────────────────────── */
.wf-config-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: 1px solid rgba(155, 77, 202, 0.35);
  color: var(--ink);
  font-size: 0.76rem;
}
.wf-config-pill:hover {
  background: rgba(155, 77, 202, 0.12);
  border-color: rgba(155, 77, 202, 0.6);
}
.wf-config-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.wf-config-status-dot.is-ready {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18);
}

/* ── Side drawer (Trigger + Endpoint config) ────────────────────────────── */
.wf-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 92vw;
  background: #141111;
  border-left: 1px solid rgba(240, 236, 236, 0.08);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
  z-index: 70;
  display: flex; flex-direction: column;
}
.wf-drawer-inner {
  display: flex; flex-direction: column;
  height: 100%;
}
.wf-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(240, 236, 236, 0.06);
}
.wf-drawer-title {
  font-size: 1.05rem; margin: 2px 0 0; letter-spacing: -0.01em;
}
.wf-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.wf-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(240, 236, 236, 0.06);
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.wf-save-hint {
  font-size: 0.74rem; color: var(--muted);
}
.wf-save-hint.is-ready { color: var(--ok); }
.wf-drawer-footer .accent-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.wf-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.wf-section-head h3 {
  font-size: 0.85rem; margin: 0;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-soft);
}
.wf-section-head svg { color: var(--accent); }

.wf-type-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.wf-type-card {
  all: unset;
  display: block;
  box-sizing: border-box;
  padding: 12px 14px;
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.08);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.wf-type-card:hover { background: rgba(240, 236, 236, 0.05); }
.wf-type-card.is-selected {
  background: rgba(234, 75, 53, 0.08);
  border-color: rgba(234, 75, 53, 0.5);
}
.wf-card-head {
  display: flex; align-items: center; gap: 10px;
}
.wf-card-radio {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
  position: relative;
}
.wf-type-card.is-selected .wf-card-radio {
  border-color: var(--accent);
  background: radial-gradient(var(--accent) 35%, transparent 40%);
}
.wf-card-title {
  font-weight: 600; color: var(--ink); font-size: 0.86rem;
}
.wf-card-desc {
  font-size: 0.74rem; color: var(--muted);
  margin-top: 4px; line-height: 1.4;
  padding-left: 24px;
}
.wf-card-fields {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-left: 24px;
}
.wf-field {
  display: flex; flex-direction: column; gap: 4px;
}
.wf-field > span {
  font-size: 0.7rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wf-field > input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(240, 236, 236, 0.1);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit; font-size: 0.84rem;
  padding: 8px 10px;
  outline: none;
}
.wf-field > input:focus {
  border-color: rgba(234, 75, 53, 0.6);
}
.wf-name-field { margin-bottom: 4px; }

/* ── Workflows tab page ─────────────────────────────────────────────────── */
.wf-page-header { margin-bottom: 6px; }

.wf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
@media (max-width: 720px) { .wf-card-grid { grid-template-columns: 1fr; } }

.wf-card {
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.07);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 160ms ease, background 160ms ease;
}
.wf-card:hover {
  border-color: rgba(234, 75, 53, 0.35);
  background: rgba(240, 236, 236, 0.05);
}
.wf-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.wf-card-name {
  font-weight: 600; font-size: 0.96rem; color: var(--ink);
  cursor: text;
  line-height: 1.3;
  word-break: break-word;
}
.wf-rename-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(234, 75, 53, 0.5);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.96rem; font-weight: 600;
  padding: 4px 8px;
  width: 100%;
  outline: none;
}

/* Status badges */
.wf-status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wf-status-draft  { background: rgba(138, 118, 118, 0.2); color: var(--muted); }
.wf-status-active { background: rgba(62, 207, 142, 0.18); color: var(--ok); }
.wf-status-paused { background: rgba(245, 166, 35, 0.18); color: var(--warn); }

.wf-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 500;
  background: rgba(240, 236, 236, 0.06);
  color: var(--ink-soft);
  border: 1px solid rgba(240, 236, 236, 0.06);
}
.wf-chip-trigger { color: var(--accent); border-color: rgba(234, 75, 53, 0.25); background: rgba(234, 75, 53, 0.06); }
.wf-chip-endpoint { color: var(--purple); border-color: rgba(155, 77, 202, 0.25); background: rgba(155, 77, 202, 0.06); }
.wf-chip svg { flex-shrink: 0; }

.wf-meta-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.74rem; color: var(--muted);
}
.wf-action-row {
  display: flex; gap: 6px; margin-top: 4px;
}
.wf-action-row button { flex: 0 0 auto; }
.danger-btn-ghost {
  background: transparent;
  border: 1px solid rgba(245, 101, 101, 0.35);
  color: var(--error);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.danger-btn-ghost:hover { background: var(--error); color: #fff; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.wf-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 48px 20px; gap: 10px;
  color: var(--ink-soft);
}
.wf-empty-icon { color: var(--purple); opacity: 0.75; margin-bottom: 6px; }
.wf-empty h2 { font-size: 1.1rem; margin: 0; color: var(--ink); }
.wf-empty p {
  max-width: 460px;
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.wf-loading { color: var(--muted); padding: 24px; font-size: 0.9rem; }

/* ── Detail view ───────────────────────────────────────────────────────── */
.wf-detail { display: flex; flex-direction: column; gap: 18px; }
.wf-detail-header {
  display: flex; flex-direction: column; gap: 10px;
}
.wf-detail-title-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wf-detail-title-row h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; }

.wf-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
}
.wf-stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wf-stat-value {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 600;
  margin-top: 2px;
}

.wf-detail-preview {
  border: 1px solid rgba(240, 236, 236, 0.07);
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.wf-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(240, 236, 236, 0.03);
  border-bottom: 1px solid rgba(240, 236, 236, 0.05);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.wf-preview-lock {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 0.7rem;
}
.wf-preview-stage {
  height: 300px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.wf-preview-svg { width: 100%; height: 100%; display: block; }
.wf-preview-empty {
  color: var(--muted); font-size: 0.84rem; padding: 20px;
}

.wf-te-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .wf-te-summary { grid-template-columns: 1fr; } }
.wf-te-box {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
}
.wf-te-label {
  font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.wf-te-value { margin-top: 4px; color: var(--ink); font-weight: 600; }

.wf-run-history h3 {
  font-size: 0.92rem; margin: 0 0 10px;
  color: var(--ink);
}
.wf-run-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
  margin-bottom: 6px;
}
.wf-run-title { font-size: 0.88rem; color: var(--ink); }
.wf-run-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.74rem; color: var(--muted);
}
.wf-run-status {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
}
.wf-run-completed { background: rgba(62, 207, 142, 0.18); color: var(--ok); }
.wf-run-running   { background: rgba(155, 77, 202, 0.18); color: var(--purple); }
.wf-run-failed    { background: rgba(245, 101, 101, 0.18); color: var(--error); }
.wf-run-pending   { background: rgba(138, 118, 118, 0.18); color: var(--muted); }
.wf-run-empty {
  color: var(--muted); font-size: 0.84rem;
  padding: 14px; border-radius: var(--r-md);
  background: rgba(240, 236, 236, 0.02);
  border: 1px dashed rgba(240, 236, 236, 0.1);
}

.wf-detail-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════ GAP-E— LEARNING TAB Scoreboard (top), Review Queue (bottom), formula + level-up modals ════════════════════════════════════════════════════════════════════ */

#tab-learning { display: none; flex-direction: column; }
#tab-learning.is-active { display: flex; }

.learning-loading,
.learning-empty {
  padding: 32px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: center;
  background: rgba(240, 236, 236, 0.02);
  border: 1px dashed rgba(240, 236, 236, 0.08);
  border-radius: var(--r-lg);
}

.learning-empty-queue {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.learning-empty-title { font-size: 1rem; color: var(--ink); font-weight: 600; }
.learning-empty-sub   { color: var(--muted); font-size: 0.82rem; }

.learning-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.learning-title  { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 0; }
.learning-sub    { color: var(--ink-soft); font-size: 0.86rem; margin-top: 6px; line-height: 1.5; max-width: 640px; }
.learning-header-actions { display: flex; gap: 8px; }

.learning-split {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  min-height: calc(100vh - 260px);
}

.learning-scoreboard-section,
.learning-queue-section {
  background: rgba(240, 236, 236, 0.025);
  border: 1px solid rgba(240, 236, 236, 0.06);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.learning-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.learning-section-head h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.learning-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ── Scoreboard table ── */
.learning-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.learning-sb-row {
  display: grid;
  grid-template-columns: 40px minmax(160px, 2fr) 130px 90px minmax(120px, 1.6fr) 64px 80px 88px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(240, 236, 236, 0.02);
  border: 1px solid rgba(240, 236, 236, 0.04);
  transition: background 0.14s ease, border-color 0.14s ease;
}
.learning-sb-row:hover { background: rgba(240, 236, 236, 0.04); border-color: rgba(240, 236, 236, 0.08); }

.learning-sb-head {
  background: transparent;
  border: none;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.learning-sb-rank    { text-align: center; }
.learning-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(240, 236, 236, 0.06);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.78rem;
}
.learning-rank-badge.rank-gold   { background: rgba(234, 75, 53, 0.18); color: var(--accent); }
.learning-rank-badge.rank-silver { background: rgba(240, 236, 236, 0.10); color: var(--ink); }
.learning-rank-badge.rank-bronze { background: rgba(245, 166, 35, 0.18); color: var(--warn); }

.learning-sb-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.learning-agent-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(234,75,53,0.22), rgba(155,77,202,0.22));
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.learning-agent-avatar.sm { width: 26px; height: 26px; font-size: 0.72rem; }

.learning-agent-meta { display: flex; flex-direction: column; min-width: 0; }
.learning-agent-name { color: var(--ink); font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learning-agent-role { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Level pills ── */
.learning-level-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.learning-level-pill.lv-1 { background: rgba(138, 118, 118, 0.14); color: var(--muted); border: 1px solid rgba(138, 118, 118, 0.3); }
.learning-level-pill.lv-2 { background: rgba(138, 118, 118, 0.22); color: #c4b8b8; border: 1px solid rgba(138, 118, 118, 0.5); }
.learning-level-pill.lv-3 { background: rgba(155, 77, 202, 0.18); color: var(--purple); border: 1px solid rgba(155, 77, 202, 0.45); }
.learning-level-pill.lv-4 { background: rgba(245, 166, 35, 0.16); color: var(--warn); border: 1px solid rgba(245, 166, 35, 0.45); }
.learning-level-pill.lv-5 { background: rgba(62, 207, 142, 0.16); color: var(--ok); border: 1px solid rgba(62, 207, 142, 0.45); }
.learning-level-pill.lv-6 { background: rgba(234, 75, 53, 0.18); color: var(--accent); border: 1px solid rgba(234, 75, 53, 0.5); }

/* ── Score display ── */
.learning-sb-score { text-align: right; font-variant-numeric: tabular-nums; }
.learning-score-num { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
.learning-score-max { color: var(--muted); font-size: 0.74rem; margin-left: 2px; }

/* ── Score progress bar ── */
.learning-score-bar {
  width: 100%;
  height: 6px;
  background: rgba(240, 236, 236, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.learning-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.learning-score-bar-fill.lv-1 { background: linear-gradient(90deg, #8a7676, #a89898); }
.learning-score-bar-fill.lv-2 { background: linear-gradient(90deg, #a89898, #c4b8b8); }
.learning-score-bar-fill.lv-3 { background: linear-gradient(90deg, #9b4dca, #b87ad8); }
.learning-score-bar-fill.lv-4 { background: linear-gradient(90deg, #f5a623, #f7b94a); }
.learning-score-bar-fill.lv-5 { background: linear-gradient(90deg, #3ecf8e, #6cdca8); }
.learning-score-bar-fill.lv-6 { background: linear-gradient(90deg, #ea4b35, #f57055); }

.learning-sb-runs  { text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.learning-sb-trend { text-align: center; }
.learning-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.learning-trend-up      { color: var(--ok);    background: rgba(62, 207, 142, 0.12); }
.learning-trend-down    { color: var(--error); background: rgba(245, 101, 101, 0.12); }
.learning-trend-neutral { color: var(--muted); background: rgba(138, 118, 118, 0.12); }

.learning-sb-action { text-align: right; }

/* ── Review Queue ── */
.learning-queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}

.learning-review-card {
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.06);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.learning-review-card.learning-review-exit {
  opacity: 0;
  transform: translateY(-6px);
}

.learning-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.learning-review-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.learning-review-agent-name { color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.learning-review-agent-role { color: var(--muted); font-size: 0.72rem; }

.learning-review-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.learning-review-runid {
  font-family: 'Menlo', 'SF Mono', Consolas, monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: rgba(240, 236, 236, 0.05);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.learning-review-time { color: var(--muted); font-size: 0.72rem; }

.learning-review-goal {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(240, 236, 236, 0.02);
  border-radius: var(--r-sm);
  border-left: 2px solid rgba(155, 77, 202, 0.5);
}
.learning-review-goal-label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.learning-review-goal-text { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.4; }

.learning-review-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Star rating widget ── */
.learning-stars {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.learning-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}
.learning-star svg { width: 22px; height: 22px; display: block; }
.learning-star:hover { transform: scale(1.1); }
.learning-star.is-hovered,
.learning-star.is-filled {
  color: var(--warn);
}
.learning-star.is-hovered svg,
.learning-star.is-filled svg {
  fill: var(--warn);
  stroke: var(--warn);
}
.learning-star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.learning-review-comment {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink);
  background: rgba(240, 236, 236, 0.03);
  border: 1px solid rgba(240, 236, 236, 0.08);
  border-radius: var(--r-sm);
  line-height: 1.45;
}
.learning-review-comment:focus {
  outline: none;
  border-color: rgba(234, 75, 53, 0.5);
  background: rgba(240, 236, 236, 0.05);
}

.learning-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.learning-review-hint {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* ── Modals (formula + level-up) ── */
.learning-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.learning-modal[hidden] { display: none; }
.learning-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 13, 0.72);
  backdrop-filter: blur(4px);
}
.learning-modal-dialog {
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(240, 236, 236, 0.08);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  animation: learningModalIn 0.22s cubic-bezier(.2,.8,.2,1);
}
@keyframes learningModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.learning-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 22px 10px;
  gap: 16px;
}
.learning-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.learning-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
}
.learning-modal-close:hover { color: var(--ink); }
.learning-modal-body { padding: 12px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.learning-modal-foot {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Formula breakdown */
.learning-formula-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.learning-formula-agent {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 500;
}
.learning-formula-score-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 8px 0 4px;
}
.learning-formula-score-num {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.learning-formula-score-max { color: var(--muted); font-size: 0.9rem; margin-left: 4px; }

.learning-formula-body-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learning-formula-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) 2fr 60px 60px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.learning-formula-label { color: var(--ink-soft); }
.learning-formula-bar {
  height: 8px;
  background: rgba(240, 236, 236, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.learning-formula-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--accent));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.learning-formula-value { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.learning-formula-contrib { text-align: right; color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }

.learning-formula-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 12px;
  background: rgba(240, 236, 236, 0.03);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}
.learning-formula-stats strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 700; }

.learning-formula-footnote {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  padding: 4px 8px;
}

/* Level-up modal */
.learning-levelup-modal .learning-modal-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  align-items: center;
  text-align: center;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.2,1.2,.4,1), opacity 0.2s ease;
}
.learning-levelup-modal.learning-levelup-shown .learning-modal-dialog {
  transform: scale(1);
  opacity: 1;
}
.learning-levelup-badge {
  color: var(--accent);
  margin-bottom: 4px;
  animation: learningBadgeSpin 0.6s cubic-bezier(.2,1.2,.4,1);
}
.learning-levelup-badge svg { width: 56px; height: 56px; }
@keyframes learningBadgeSpin {
  from { transform: rotate(-30deg) scale(0.4); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}
.learning-levelup-header {
  margin: 4px 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.learning-levelup-agent { color: var(--ink); font-size: 0.95rem; font-weight: 600; margin: 4px 0 0; }
.learning-levelup-score-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 2px 0 8px;
}
.learning-levelup-score { font-size: 2rem; font-weight: 800; color: var(--ink); }
.learning-levelup-score-max { color: var(--muted); font-size: 0.86rem; }
.learning-levelup-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 8px;
}
.learning-levelup-arrow { color: var(--ink-soft); font-size: 1.1rem; }
.learning-levelup-desc {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 4px 0 6px;
  padding: 0 4px;
}
.learning-levelup-fork-hint {
  color: var(--purple);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(155, 77, 202, 0.1);
  border: 1px dashed rgba(155, 77, 202, 0.35);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin: 6px 0 4px;
}

/* Responsive */
@media (max-width: 900px) {
  .learning-sb-row {
    grid-template-columns: 36px minmax(120px, 2fr) 110px 70px minmax(80px, 1fr) 48px;
    font-size: 0.82rem;
  }
  .learning-sb-row .learning-sb-trend,
  .learning-sb-row .learning-sb-action {
    display: none;
  }
  .learning-formula-row {
    grid-template-columns: minmax(110px, 1.2fr) 1.4fr 48px 48px;
    font-size: 0.78rem;
  }
}

/* QA overrides— keep new Gap CSS aligned to design tokens without rewriting existing blocks */
.schema-version-restore-btn:hover {
  color: var(--ink);
}
.apt-role-chip {
  color: color-mix(in srgb, var(--purple) 52%, var(--ink));
}
.apt-tone-strong { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 72%, var(--ink))); }
.apt-tone-good   { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--ink))); }
.apt-tone-ok     { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 72%, var(--ink))); }
.apt-tone-weak   { background: linear-gradient(90deg, var(--muted), color-mix(in srgb, var(--muted) 72%, var(--ink-soft))); }
.fork-btn-confirm {
  color: var(--ink);
}
.fork-btn-confirm:hover {
  background: color-mix(in srgb, var(--purple) 82%, var(--ink));
}

/* ── PATCH— LEARNING SPACING + WORKFLOW ENDPOINT EXTENSIONS ── */

/* Connector badge inside endpoint cards */
.wf-connector-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.wf-connector-badge.is-configured {
  background: rgba(62, 207, 142, 0.15);
  color: var(--ok);
  border: 1px solid rgba(62, 207, 142, 0.25);
}
.wf-connector-badge.not-configured {
  background: rgba(138, 118, 118, 0.12);
  color: var(--muted);
  border: 1px solid rgba(138, 118, 118, 0.2);
}

/* Connector-backed endpoint cards get a subtle left accent */
.wf-type-card.is-connector-card {
  border-left: 2px solid rgba(155, 77, 202, 0.35);
}
.wf-type-card.is-connector-card.is-selected {
  border-left-color: var(--purple);
}

/* Endpoint grid: allow wrapping for larger sets of cards */
.wf-type-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Scrollbar styling for endpoint grid */
.wf-type-grid::-webkit-scrollbar { width: 4px; }
.wf-type-grid::-webkit-scrollbar-track { background: transparent; }
.wf-type-grid::-webkit-scrollbar-thumb { background: rgba(240,236,236,0.12); border-radius: 2px; }

/* ── Agent Builder: Credential Status Banner ─────────────────────────────── */
.na-chat-cred-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.na-chat-cred-banner svg {
  flex-shrink: 0;
}
.na-chat-cred-banner.na-cred-live {
  background: rgba(62, 207, 142, 0.08);
  border-color: rgba(62, 207, 142, 0.25);
  color: var(--ok);
}
.na-chat-cred-banner.na-cred-sim {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.25);
  color: var(--warn);
}
.na-chat-cred-banner.na-cred-sim a.na-cred-link {
  color: var(--warn);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.na-chat-cred-banner.na-cred-sim a.na-cred-link:hover {
  opacity: 0.8;
}

/* ── Agent Builder: Chat Message Badges ──────────────────────────────────── */
.na-chat-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 20px;
  vertical-align: middle;
}
.na-badge-live {
  background: rgba(62, 207, 142, 0.12);
  color: var(--ok);
  border: 1px solid rgba(62, 207, 142, 0.3);
}
.na-badge-sim {
  background: rgba(245, 166, 35, 0.10);
  color: var(--warn);
  border: 1px solid rgba(245, 166, 35, 0.25);
}

/* ══— Avatar dropdown + Admin Panel ═══════════════════════════════════ */

/* ── Avatar button ────────────────────────────────────────────────────────── */
.av-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.av-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ea4b35 0%, #9b4dca 100%);
  border: 2px solid rgba(234,75,53,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 0;
}
.av-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234,75,53,0.2);
}
.av-initials {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */
.av-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(234,75,53,0.08);
  z-index: 9000;
  padding: 8px 0;
  animation: dropdownIn 0.15s ease;
}
.av-dropdown.open { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.av-user-info {
  padding: 12px 16px 10px;
}
.av-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-email {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-role-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(234,75,53,0.12);
  color: var(--accent);
  border: 1px solid rgba(234,75,53,0.2);
}
.av-role-badge.role-admin {
  background: rgba(155,77,202,0.12);
  color: #9b4dca;
  border-color: rgba(155,77,202,0.25);
}

.av-separator {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.av-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.av-menu-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
.av-menu-item svg { opacity: 0.7; flex-shrink: 0; }
.av-logout { color: #ff6b6b; }
.av-logout:hover { background: rgba(255,107,107,0.08); color: #ff6b6b; }

/* ── Admin Panel Modal ─────────────────────────────────────────────────────── */
.r25-admin-modal {
  /* Wider so the 4-column stats grid + the user table (USER, ROLE,
     STATUS, JOINED, LAST LOGIN, ACTIONS) breathe. The previous 720px
     felt cramped on common 1080p+ displays. Cap with calc() so it
     still gracefully shrinks on smaller viewports. */
  width: 960px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.r25-admin-body {
  display: block !important; /* override.modal-body display:grid */
  overflow-y: auto;
  flex: 1;
  padding: 0 24px 24px;
}
.r25-admin-section {
  margin-bottom: 28px;
}
.r25-admin-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.r25-create-user-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.r25-admin-input {
  flex: 1;
  min-width: 140px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.r25-admin-input:focus { border-color: var(--accent); }
.r25-admin-select { min-width: 160px; }
.r25-admin-btn {
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.r25-admin-btn:hover { opacity: 0.85; }
.r25-admin-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.r25-admin-btn-sm {
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(234,75,53,0.12);
  color: var(--accent);
  border: 1px solid rgba(234,75,53,0.25);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.r25-admin-msg {
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
  color: var(--ok);
}
.r25-admin-msg.error { color: var(--error); }
.r25-invite-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(62,207,142,0.06);
  border: 1px solid rgba(62,207,142,0.2);
  border-radius: 9px;
  flex-wrap: wrap;
}
.r25-invite-label { font-size: 11px; color: var(--muted); }
.r25-invite-url {
  font-size: 11px;
  color: var(--ok);
  word-break: break-all;
  flex: 1;
}

/* Users table */
.r25-users-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.r25-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.r25-users-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.r25-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
}
.r25-users-table tbody tr:last-child td { border-bottom: none; }
.r25-users-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.r25-user-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.r25-status-active { background: rgba(62,207,142,0.12); color: var(--ok); }
.r25-status-inactive { background: rgba(245,101,101,0.12); color: var(--error); }
.r25-status-invited { background: rgba(245,166,35,0.12); color: var(--warn); }
.r25-user-actions { display: flex; gap: 6px; }
.r25-action-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.r25-action-btn:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.r25-action-btn.danger { border-color: rgba(245,101,101,0.3); color: var(--error); }
.r25-action-btn.danger:hover { background: rgba(245,101,101,0.1); }
.r25-loading-row { text-align: center; color: var(--muted); padding: 20px; }

/* ══— User Management, Profile Panel, Avatar Dropdown Fix ═════════════ */

/* ── Avatar dropdown: escape above tab-nav ────────────────────────────────── */
/* The topbar needs a stacking context so the dropdown floats above everything */
.topbar {
  position: relative;
  z-index: 10000;
}
/* Raise the av-wrap so the dropdown doesn't inherit a clipped context */
.av-wrap {
  z-index: 10001;
}
.av-dropdown {
  z-index: 10002 !important;
}

/* ── Admin panel tab bar ──────────────────────────────────────────────────── */
.r35-admin-tab-bar {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px;
}
.r35-admin-tab {
  padding: 5px 14px;
  border-radius: calc(var(--r-sm) - 2px);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.r35-admin-tab.active {
  background: var(--accent);
  color: #fff;
}
.r35-admin-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}

/* ── Admin stats bar ──────────────────────────────────────────────────────── */
.r35-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.r35-admin-stat {
  text-align: center;
}
.r35-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.r35-stat-val.ok     { color: var(--ok); }
.r35-stat-val.purple { color: var(--purple); }
.r35-stat-val.warn   { color: var(--warn); }
.r35-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Admin search row ─────────────────────────────────────────────────────── */
.r35-admin-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.r35-admin-search-row .r25-admin-input {
  flex: 1;
  max-width: 300px;
}

/* ── Users table enhanced ─────────────────────────────────────────────────── */
.r25-users-table .r35-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.r35-user-monogram {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.r35-user-info-cell { display: flex; flex-direction: column; min-width: 0; }
.r35-user-name-cell { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r35-user-email-cell { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Role badge in table */
.r35-role-select {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.r35-role-select.role-admin {
  color: var(--purple);
  border-color: rgba(155,77,202,0.3);
  background: rgba(155,77,202,0.08);
}
.r35-role-select.role-member {
  color: var(--accent);
  border-color: rgba(234,75,53,0.25);
  background: rgba(234,75,53,0.06);
}
.r35-role-select:focus { outline: none; border-color: var(--accent); }

/* ── Mini modals (reset pw, delete confirm) ───────────────────────────────── */
.r35-mini-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
}
.r35-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-soft) !important;
}
.r35-btn-ghost:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
}

/* ── Invite result box ────────────────────────────────────────────────────── */
.r35-invite-result {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(62, 207, 142, 0.08);
  border: 1px solid rgba(62,207,142,0.2);
  border-radius: var(--r-md);
}
.r35-invite-label {
  font-size: 11px;
  color: var(--ok);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.r35-invite-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.r35-invite-url {
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
  flex: 1;
  font-family: monospace;
}

/* ── My Profile modal ─────────────────────────────────────────────────────── */
.r35-profile-modal {
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.r35-profile-body {
  display: block !important; /* override.modal-body display:grid */
  overflow-y: auto;
  flex: 1;
  padding: 0 24px 28px;
}
.r35-profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0 16px;
}
.r35-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.r35-profile-meta { min-width: 0; }
.r35-profile-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r35-profile-email {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r35-profile-divider {
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}
.r35-profile-section {
  padding: 14px 0;
}
.r35-profile-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.r35-profile-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.r35-profile-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.r35-danger-zone {
  background: rgba(245,101,101,0.05);
  border: 1px solid rgba(245,101,101,0.15);
  border-radius: var(--r-md);
  padding: 16px !important;
}
.r35-danger-desc {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Light theme overrides for new components */
[data-theme="light"] .r35-admin-tab-bar {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .r35-admin-tab:hover:not(.active) {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .r35-invite-result {
  background: rgba(62,207,142,0.06);
}
[data-theme="light"] .r35-danger-zone {
  background: rgba(245,101,101,0.04);
}

/*— small action button variant */
.r25-action-btn.sm {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
}

/*— Ensure new modals render above topbar (z-index 10000) */
#profilePanelModal,
#adminPanelModal,
#adminResetModal,
#adminDeleteModal,
#profileDeleteModal {
  z-index: 10500 !important;
}

/*— Credential modal scroll fix */
/* Give the credential modal body a max-height and scroll so it never overflows at 100% zoom */
.cred-modal-body,
#credModalBody,
[id="credModalBody"] {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Also apply to all modal-body elements inside a credential modal for safety */
.credential-modal .modal-body,
.cred-modal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

/*— Keep the credential modal card from growing past the viewport */
#credentialModal .modal-card {
  max-height: 88vh;
  /* R94 — bumped width again (640 → 760) per Drew's screenshot:
     the multi-probe error text was getting clipped because the modal
     was too narrow even with wrapping enabled, AND the buttons looked
     cramped. 760 fits both with breathing room. */
  max-width: 760px;
  width: min(96vw, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* R93/R94 — status row spans the full footer width and wraps long
   error messages without jostling the buttons. !important on the
   wrapping rules because the base `.cred-modal-status` has
   `white-space: nowrap` and the JS sometimes swaps classes — these
   guarantee the row always wraps long messages. */
.cred-modal-status.cred-modal-status-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  flex-shrink: 1 !important;
  box-sizing: border-box;
}
.cred-modal-status.cred-modal-status-row:empty {
  display: none !important;
}
.cred-modal-status.cred-modal-status-row.cred-error {
  background: rgba(245,90,90,0.10);
  border: 1px solid rgba(245,90,90,0.35);
}
.cred-modal-status.cred-modal-status-row.cred-saved {
  background: rgba(62,207,142,0.10);
  border: 1px solid rgba(62,207,142,0.35);
}
/* R95 — autosave indicator. Quieter than cred-saved (which is a
   user-initiated commit). cred-autosave is the in-flight "Auto-saving…"
   row; cred-autosaved is the fade-after-success state. Both use the
   muted-blue token so they don't compete with the prominent green of
   a manual Save Credentials confirmation. */
.cred-modal-status.cred-modal-status-row.cred-autosave {
  background: rgba(120,160,210,0.10);
  border: 1px solid rgba(120,160,210,0.30);
  color: var(--muted);
  font-style: italic;
}
.cred-modal-status.cred-modal-status-row.cred-autosaved {
  background: rgba(62,207,142,0.06);
  border: 1px solid rgba(62,207,142,0.22);
  color: var(--ok);
}

/* ══— Portal dropdown fix ═══════════════════════════════════════════════ cs-dropdown-portal lives on document.body, positioned with fixed coords. This escapes overflow:hidden on all modal ancestors. */

.cs-dropdown-portal {
  position: fixed !important;
  /* top/left/width set by JS positionDropdown */
  z-index: 99999 !important;
  background: var(--surface-2, rgba(28,22,22,0.98));
  border: 1px solid var(--line-strong, rgba(200,160,160,0.2));
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.cs-dropdown-portal.cs-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.cs-dropdown-portal.cs-drop-up {
  transform: translateY(6px);
}
.cs-dropdown-portal.cs-drop-up.cs-open {
  transform: translateY(0);
}

/* Remove the old.cs-dropdown absolute positioning— portaled dropdowns no longer live inside.custom-select, so the old absolute rule is harmless but we keep it for any non-portaled selects that might remain */

/* Light theme for portal */
[data-theme="light"] .cs-dropdown-portal {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

/* ──— Agents header action group ───────────────────────────────────── */
.agents-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Smart.md import— KB injection visual feedback ────────────────── */
.na-knowledge-paste-field.na-kb-injected {
  animation: naKbPulse 1.2s ease-out;
  border-color: var(--accent, #ea4b35) !important;
}
@keyframes naKbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(234, 75, 53, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(234, 75, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 75, 53, 0); }
}

/*— optimistic run row in workflow detail */
.wf-run-row.wf-run-optimistic {
  background: rgba(99, 182, 255, 0.08);
  border-left: 3px solid #63b6ff;
  animation: wfRunOptimisticPulse 1.4s ease-in-out infinite;
}
@keyframes wfRunOptimisticPulse {
  0%, 100% { background: rgba(99, 182, 255, 0.08); }
  50%      { background: rgba(99, 182, 255, 0.18); }
}

/* ── Team Electron canvas layer (Phase 1) ─────────────────────────── */
.free-canvas-electron-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 6; /* above wires (z=1), above cards (z=2). Cards are transparent for electrons. */
}

/* The.canvas-node.is-team-electron hit target— transparent, pointer-events disabled on the body but enabled on inner port buttons and hit overlay. */
.canvas-node.is-team-electron {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: none; /* visual drawn on overlay; only children are interactive */
}
.canvas-node.is-team-electron .electron-hit {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer; /* click anywhere to enter team */
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.canvas-node.is-team-electron.is-selected .electron-hit {
  outline: 1px dashed rgba(255,255,255,0.25);
  outline-offset: 4px;
  border-radius: 50%;
}
.canvas-node.is-team-electron .node-port-out,
.canvas-node.is-team-electron .node-port-in {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: crosshair;
  transform: translate(-50%, -50%);
}
.canvas-node.is-team-electron .node-btn-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

/* Reduced motion: freeze electron animation */
@media (prefers-reduced-motion: reduce) {
  .free-canvas-electron-layer { opacity: 0.9; }
}

/* ════════════════════════════════════════════════════════════════— Team interior (replaces the expanded electron cockpit). Shown when node.expanded === true on a team-electron node. The electron particle scene + hit surface are suppressed while this panel is visible so all inner controls are fully interactive. ════════════════════════════════════════════════════════════════ */
.canvas-node.is-team-electron.is-expanded {
  /* v5: wrap stays click-through so other canvas nodes remain interactive AND clicks on empty interior space fall through to the viewport's background-click-to-collapse handler. Only tiles/goal/close/wires (explicitly pointer-events:auto below) intercept clicks. */
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
.team-interior {
  position: absolute;
  inset: 12px;
  background: rgba(12, 14, 20, 0.94);
  border: 1px solid rgba(155, 77, 202, 0.45);
  border-radius: 14px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(155, 77, 202, 0.12);
  pointer-events: auto;
  cursor: default;
  z-index: 3;
}

/* Goal card at top */
.team-interior-goal {
  background: linear-gradient(135deg, rgba(155, 77, 202, 0.18), rgba(94, 210, 220, 0.10));
  border: 1px solid rgba(155, 77, 202, 0.55);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.team-interior-goal-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-interior-goal-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9b4dca;
  text-transform: uppercase;
}
.team-interior-goal-mode {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5ed2dc;
  text-transform: uppercase;
  padding: 2px 8px;
  background: rgba(94, 210, 220, 0.14);
  border-radius: 999px;
  border: 1px solid rgba(94, 210, 220, 0.35);
}
.team-interior-goal-mode[data-mode="parallel"] {
  color: #e8b85a;
  background: rgba(232, 184, 90, 0.14);
  border-color: rgba(232, 184, 90, 0.35);
}
.team-interior-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.team-interior-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.team-interior-goal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}
.team-interior-goal-body {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.team-interior-goal-body.is-empty {
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
}
.team-interior-goal-meta {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* Agent list */
.team-interior-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}
.team-interior-empty {
  padding: 20px 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

/* Agent tile inside interior */
.team-interior-agent-tile {
  background: rgba(22, 26, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--tile-accent, #9b4dca);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.team-interior-agent-tile.is-reorderable { cursor: grab; }
.team-interior-agent-tile.is-reorderable:active { cursor: grabbing; }
.team-interior-agent-tile.is-dragging { opacity: 0.4; }
.team-interior-agent-tile.is-drop-target {
  border-color: #9b4dca;
  box-shadow: 0 0 0 1px #9b4dca inset;
}

.team-interior-agent-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-interior-agent-grip {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
  user-select: none;
  letter-spacing: -2px;
}
.team-interior-agent-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tile-accent, #9b4dca);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.team-interior-agent-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.team-interior-agent-name:hover { text-decoration: underline; }
.team-interior-agent-role {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

/* Workflow section per agent */
.team-interior-wf-section {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(94, 210, 220, 0.22);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-interior-wf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-interior-wf-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5ed2dc;
  text-transform: uppercase;
}
.team-interior-wf-add {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(94, 210, 220, 0.14);
  border: 1px solid rgba(94, 210, 220, 0.4);
  color: #5ed2dc;
  cursor: pointer;
  font-weight: 600;
}
.team-interior-wf-add:hover {
  background: rgba(94, 210, 220, 0.22);
}

.team-interior-wf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.team-interior-wf-subtile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(94, 210, 220, 0.06);
  border: 1px solid rgba(94, 210, 220, 0.25);
  border-radius: 5px;
  cursor: grab;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.team-interior-wf-subtile:active { cursor: grabbing; }
.team-interior-wf-subtile.is-dragging { opacity: 0.4; }
.team-interior-wf-subtile.is-drop-target {
  border-color: #5ed2dc;
  box-shadow: 0 0 0 1px #5ed2dc inset;
}
.team-interior-wf-grip {
  color: rgba(94, 210, 220, 0.55);
  font-size: 0.8rem;
  user-select: none;
}
.team-interior-wf-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(94, 210, 220, 0.18);
  color: #5ed2dc;
  font-size: 0.62rem;
  font-weight: 700;
}
.team-interior-wf-name {
  flex: 1;
  font-size: 0.76rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-interior-wf-kind {
  font-size: 0.58rem;
  color: #5ed2dc;
  background: rgba(94, 210, 220, 0.12);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-interior-wf-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}
.team-interior-wf-remove:hover {
  background: rgba(255, 80, 80, 0.2);
  color: #ff8080;
}

.team-interior-wf-dropzone {
  padding: 8px 10px;
  border: 1px dashed rgba(94, 210, 220, 0.28);
  border-radius: 5px;
  color: rgba(94, 210, 220, 0.55);
  font-size: 0.72rem;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.team-interior-wf-dropzone.is-empty {
  padding: 10px 10px;
}
.team-interior-wf-dropzone.is-drop-target {
  border-color: #5ed2dc;
  background: rgba(94, 210, 220, 0.10);
  color: #5ed2dc;
  border-style: solid;
}

/* "+ Attach" picker dropdown */
.team-interior-wf-picker {
  position: absolute;
  right: 0;
  top: 26px;
  min-width: 180px;
  max-width: 240px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(18, 22, 30, 0.98);
  border: 1px solid rgba(94, 210, 220, 0.5);
  border-radius: 6px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-interior-wf-picker-empty {
  padding: 10px 8px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.team-interior-wf-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.team-interior-wf-picker-item:hover {
  background: rgba(94, 210, 220, 0.14);
}
.team-interior-wf-picker-name {
  flex: 1;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-interior-wf-picker-kind {
  font-size: 0.58rem;
  color: #5ed2dc;
  background: rgba(94, 210, 220, 0.14);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Ensure wf-header is positioning context for picker */
.team-interior-wf-header { position: relative; }

/* ── Phase 2— sequence editor ─────────────────────────── */
.team-sequence-section { padding: 14px 16px; border-top: 1px solid var(--line); }
.team-sequence-section h2 { margin: 0; font-size: 0.95rem; }
.run-mode-toggle { display: inline-flex; gap: 4px; }
.run-mode-toggle .chip { padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink); }
.run-mode-toggle .chip[aria-pressed="true"] { background: #9b4dca; border-color: #9b4dca; color: #fff; }
.team-sequence-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.team-seq-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; cursor: grab; }
.team-seq-row.dragging { opacity: 0.4; }
.team-seq-row.drop-target { border-color: #9b4dca; }
.team-seq-handle { color: var(--muted); user-select: none; font-weight: 700; font-size: 0.9rem; }
.team-seq-index { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: rgba(155,77,202,0.2); color: #9b4dca; border-radius: 50%; font-size: 0.7rem; font-weight: 700; }
.team-seq-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700; }
.team-seq-meta { flex: 1; display: flex; flex-direction: column; }
.team-seq-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.team-seq-role { font-size: 0.72rem; color: var(--muted); }
.team-seq-group-break { background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 0.78rem; }
.team-seq-group-divider { height: 1px; background: repeating-linear-gradient(90deg, #9b4dca 0, #9b4dca 4px, transparent 4px, transparent 8px); margin: 4px 0; }
.team-sequence-hint { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

/* ── Phase 3— trigger node sidebar + canvas ─────────────────────────── */
.trigger-card { background: rgba(30, 22, 12, 0.85); border: 1px solid rgba(232, 184, 90, 0.55); color: #f2e5d8; width: 230px; min-height: 90px; border-radius: 10px; padding: 10px 12px; position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.trigger-card .trigger-header { display: flex; align-items: center; gap: 8px; }
.trigger-card .trigger-bolt { flex-shrink: 0; }
.trigger-card .trigger-title { font-size: 0.85rem; font-weight: 700; color: #f2e5d8; }
.trigger-card .trigger-kind-pill { font-size: 0.62rem; padding: 2px 6px; background: rgba(232, 184, 90, 0.18); color: #e8b85a; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.trigger-card .trigger-fire-btn { font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; background: #e8b85a; border: none; color: #1a140a; font-weight: 700; cursor: pointer; align-self: flex-start; }
.trigger-card .trigger-port-out { position: absolute; right: -4px; top: 50%; transform: translate(50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #0c0708; border: 1.4px solid #3ecf8e; cursor: crosshair; }
.trigger-card .trigger-port-out::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #3ecf8e; }
.trigger-card .node-btn-delete { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(0,0,0,0.4); color: #fff; border-radius: 50%; cursor: pointer; }

/* Trigger sidebar tile */
.trigger-tile { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; cursor: grab; margin-bottom: 4px; }
.trigger-tile-bolt { color: #e8b85a; flex-shrink: 0; }
.trigger-tile-name { flex: 1; font-size: 0.8rem; color: var(--ink); }
.trigger-tile-kind { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; }



/* ── Phase 2— Team sequence editor (detailed styling) ─── */
.team-sequence-section { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.team-sequence-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.team-sequence-hint { margin: 0; color: var(--muted); font-size: 0.78rem; }
.run-mode-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.run-mode-chip { padding: 4px 12px; font-size: 0.74rem; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; line-height: 1.4; }
.run-mode-chip.is-active { background: var(--accent, #ea4b35); color: #fff; }
.team-sequence-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.team-sequence-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; cursor: grab; user-select: none; }
.team-sequence-item.is-dragging { opacity: 0.55; }
.team-sequence-item.is-drop-target { border-color: var(--accent, #ea4b35); box-shadow: 0 0 0 1px var(--accent, #ea4b35) inset; }
.team-sequence-grip { color: var(--muted); font-size: 1rem; }
.team-sequence-idx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0.72rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.04); border-radius: 50%; }
.team-sequence-name { flex: 1; font-size: 0.85rem; color: var(--ink); }
.team-sequence-actions { display: inline-flex; gap: 4px; }
.team-sequence-footer { display: flex; justify-content: flex-end; }

/* Phase 3— Trigger modal kind-panel notes */
.trigger-kind-panel { margin-top: 4px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 8px; }
.trigger-stub-note { margin: 6px 0 0; font-size: 0.76rem; color: var(--muted); font-style: italic; }
.trigger-card.is-selected { box-shadow: 0 0 0 2px rgba(232,184,90,0.7); }

/* ══════════════════════════════════════════════════════════════════ WORKFLOWS SIDEBAR TILES + CANVAS REFERENCE CARD ══════════════════════════════════════════════════════════════════ */

/* Sidebar tile— draggable handle for a saved workflow */
.workflow-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: grab;
  margin-bottom: 4px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.workflow-tile:hover {
  border-color: rgba(94, 210, 220, 0.55);
  background: rgba(94, 210, 220, 0.06);
}
.workflow-tile:active { cursor: grabbing; }
.workflow-tile-icon { color: #5ed2dc; flex-shrink: 0; }
.workflow-tile-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workflow-tile-kind {
  font-size: 0.62rem;
  color: #5ed2dc;
  background: rgba(94, 210, 220, 0.12);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* On-canvas reference card for a saved workflow */
.workflow-ref-card {
  position: absolute;
  box-sizing: border-box;
  width: 240px;
  min-height: 94px;
  padding: 10px 12px;
  background: rgba(12, 28, 32, 0.88);
  border: 1px solid rgba(94, 210, 220, 0.55);
  border-radius: 10px;
  color: #e0f6f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.workflow-ref-card.is-selected {
  box-shadow: 0 0 0 2px rgba(94, 210, 220, 0.8), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.workflow-ref-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.workflow-ref-icon { color: #5ed2dc; flex-shrink: 0; }
.workflow-ref-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e0f6f9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workflow-ref-status-pill {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(94, 210, 220, 0.16);
  color: #5ed2dc;
}
.workflow-ref-status-pill[data-status="active"],
.workflow-ref-status-pill[data-status="running"] {
  background: rgba(62, 207, 142, 0.18);
  color: #3ecf8e;
}
.workflow-ref-status-pill[data-status="error"],
.workflow-ref-status-pill[data-status="failed"] {
  background: rgba(234, 75, 53, 0.18);
  color: #ff7f6e;
}
.workflow-ref-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(224, 246, 249, 0.78);
}
.workflow-ref-flow-chip {
  padding: 2px 8px;
  background: rgba(94, 210, 220, 0.08);
  border: 1px solid rgba(94, 210, 220, 0.28);
  border-radius: 6px;
  font-weight: 600;
  text-transform: none;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow-ref-arrow { color: rgba(94, 210, 220, 0.6); flex-shrink: 0; }
.workflow-ref-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.workflow-ref-btn {
  padding: 4px 10px;
  font-size: 0.74rem;
  border-radius: 6px;
  border: 1px solid rgba(94, 210, 220, 0.4);
  background: rgba(94, 210, 220, 0.08);
  color: #e0f6f9;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.workflow-ref-btn:hover {
  background: rgba(94, 210, 220, 0.18);
  border-color: rgba(94, 210, 220, 0.7);
}
.workflow-ref-btn-primary {
  background: #5ed2dc;
  color: #07242a;
  border-color: #5ed2dc;
}
.workflow-ref-btn-primary:hover {
  background: #7ae0ea;
  border-color: #7ae0ea;
}
.workflow-ref-card .node-btn-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.workflow-ref-port-out,
.workflow-ref-port-in {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0c1c20;
  border: 1.4px solid #5ed2dc;
  cursor: crosshair;
  transform: translateY(-50%);
}
.workflow-ref-port-out { right: -7px; }
.workflow-ref-port-in  { left:  -7px; }
.workflow-ref-port-out::after,
.workflow-ref-port-in::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #5ed2dc;
}

/* ══════════════════════════════════════════════════════════════════ SIDEBAR COLLAPSE TOGGLE (parallel request) ══════════════════════════════════════════════════════════════════ */

/* The layout grid is the positioning root for the floating toggle. */
#tab-canvas .layout { position: relative; }

/* Floating toggle sits just outside the sidebar's right edge. Overlaps canvas slightly so it remains clickable even when collapsed. */
.sidebar-collapse-btn {
  position: absolute;
  top: 52px;
  left: 288px;                 /* = sidebar width (300) - half button width */
  z-index: 60;
  width: 22px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 0 6px 6px 0;
  background: var(--layer-2, rgba(24, 24, 28, 0.92));
  color: var(--muted, rgba(255,255,255,0.6));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
  transition: left 0.22s ease, color 0.15s ease, background 0.15s ease;
}
.sidebar-collapse-btn:hover {
  color: var(--ink, #fff);
  background: var(--layer-3, rgba(40, 40, 48, 0.95));
}
.sidebar-collapse-icon {
  transition: transform 0.22s ease;
}

/* Collapsed state— hide sidebar, slide the toggle to the left edge, give the canvas the reclaimed horizontal space. */
body.sidebar-collapsed #tab-canvas .layout {
  grid-template-columns: 0 minmax(0, 1fr) auto !important;
}
body.sidebar-collapsed #tab-canvas .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-right: 0 !important;
  padding: 0 !important;
}
body.sidebar-collapsed #tab-canvas .sidebar-collapse-btn {
  left: 0;
}
body.sidebar-collapsed #tab-canvas .blueprint-viewport {
  margin-left: 28px !important;   /* leave room for the toggle */
}

/* Only show the sidebar collapse button on the Canvas tab */
#tab-canvas:not(.is-active) ~ .sidebar-collapse-btn,
.tab-page:not(#tab-canvas) .sidebar-collapse-btn { display: none; }
.sidebar-collapse-btn { display: none; }
#tab-canvas.is-active .sidebar-collapse-btn { display: flex; }

/* ============================================================== */
/* Team interior— goal-centered radial layout (r55 revision) */
/* ============================================================== */

/* Radial root overrides the vertical-flex layout of.team-interior. v5: also strips the opaque dark panel so tiles + goal float naturally on the canvas background. The wrap itself is pointer-events:none (set on.canvas-node.is-team-electron.is-expanded above) so empty interior space falls through to the viewport's pan/collapse handler. Only the goal circle, agent tiles, close button, and wire strokes (all explicitly re-enabled below) intercept clicks. */
.team-interior.is-radial {
  display: block;
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

/* SVG overlay for virtual wires sits underneath tiles and ignores pointer events */
.team-interior-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Central goal card rendered as a soft circle. v5: pointer-events:auto makes this the primary click target for the goal (while the parent wrap + interior are now click-through). */
.team-interior-goal.is-circle {
  border-radius: 50%;
  padding: 18px 20px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(94, 210, 220, 0.18), rgba(155, 77, 202, 0.14) 62%, rgba(22, 26, 34, 0.92) 100%);
  border: 1.6px solid rgba(94, 210, 220, 0.55);
  box-shadow:
    0 0 28px rgba(94, 210, 220, 0.18),
    0 0 80px rgba(155, 77, 202, 0.20),
    inset 0 0 0 1px rgba(155, 77, 202, 0.16);
  z-index: 3;
  pointer-events: auto;
}
.team-interior-goal.is-circle .team-interior-close { pointer-events: auto; }
.team-interior-goal.is-circle .team-interior-goal-top {
  width: 100%;
  justify-content: center;
}
.team-interior-goal.is-circle .team-interior-close {
  margin-left: auto;
  position: absolute;
  top: 10px;
  right: 10px;
}
.team-interior-goal.is-circle .team-interior-goal-title {
  font-size: 0.95rem;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.team-interior-goal.is-circle .team-interior-goal-body {
  font-size: 0.75rem;
  max-width: 90%;
  max-height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.team-interior-goal.is-circle .team-interior-goal-meta {
  font-size: 0.66rem;
}

/* Radial tile: sits absolutely— override default flex-column flow. v5: chrome aligned with the regular canvas.free-node card so that when the surrounding panel is removed, the tiles read as first-class canvas nodes rather than fragments of a window. */
.team-interior-agent-tile.is-radial {
  z-index: 2;
  overflow: hidden;
  background: var(--layer-1, rgba(22, 26, 34, 0.96));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.10));
  border-left: 3px solid var(--tile-accent, #9b4dca);
  border-radius: var(--r-xl, 12px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.45));
  pointer-events: auto;
}
.team-interior-agent-tile.is-radial:hover {
  border-color: rgba(155, 77, 202, 0.45);
  box-shadow: var(--shadow, 0 6px 20px rgba(0, 0, 0, 0.55));
}

/* v5: wires remain interactive even though their SVG parent is pointer-events:none— the inline style already enables stroke hit-testing, and this rule is a defensive companion so clicks on the visible path strokes still reach the goal-awareness toggle. */
.team-interior-svg { pointer-events: none; }
.team-interior-svg .team-interior-wire { pointer-events: stroke; }

/* Radial wrapper: clears flex behavior of.team-interior-list */
.team-interior-list.is-radial {
  display: block;
  gap: 0;
  padding-bottom: 0;
}

/* Virtual-wire styling (on top of inline attrs as defensive fallback) */
.team-interior-wire { pointer-events: stroke; }
.team-interior-wire.is-goal {
  stroke: #5ed2dc;
  stroke-opacity: 0.72;
  stroke-dasharray: 6 5;
  stroke-width: 1.8;
  cursor: pointer;
}
.team-interior-wire.is-goal.is-off {
  stroke: #555 !important;
  stroke-opacity: 0.28 !important;
  stroke-width: 1.2 !important;
}
.team-interior-wire.is-goal.is-off:hover {
  stroke-opacity: 0.55 !important;
  stroke-width: 1.6 !important;
}

/*— trigger flush-snap visual: golden edge hugs the workflow tile */
.trigger-card.is-flush-snapped {
  border-right-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 4px 0 12px rgba(232, 184, 90, 0.35), inset -3px 0 0 rgba(232, 184, 90, 0.80);
}
.team-interior-wire.is-sequence {
  stroke: #9b4dca;
  stroke-opacity: 0.95;
  stroke-width: 2.1;
}
.team-interior-wire.is-goal:hover {
  stroke-opacity: 0.95;
  stroke-width: 2.2;
}
.team-interior-wire.is-sequence:hover {
  stroke-opacity: 1;
  stroke-width: 2.6;
}

[data-theme="light"] .team-interior-goal.is-circle {
  background:
    radial-gradient(circle at 50% 38%, rgba(110, 180, 210, 0.18), rgba(140, 100, 180, 0.12) 62%, rgba(255, 255, 255, 0.96) 100%);
  border-color: rgba(110, 180, 210, 0.65);
  color: #1a1a1a;
}
[data-theme="light"] .team-interior-goal.is-circle .team-interior-goal-title {
  color: #1a1a1a;
}
[data-theme="light"] .team-interior-goal.is-circle .team-interior-goal-body {
  color: rgba(26, 26, 26, 0.75);
}

/* ───────────────────────────────────────────────────────────────────────── v4— Credentials: per-auth-method renderer + JSON file drop-zone ───────────────────────────────────────────────────────────────────── */
.cred-method-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 12px 4px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}

.json-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  border: 1.5px dashed rgba(94, 210, 220, 0.35);
  border-radius: 10px;
  background: rgba(94, 210, 220, 0.04);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  min-height: 68px;
}
.json-dropzone:hover,
.json-dropzone:focus-visible {
  background: rgba(94, 210, 220, 0.09);
  border-color: rgba(94, 210, 220, 0.6);
  outline: none;
}
.json-dropzone.is-drag-over {
  background: rgba(94, 210, 220, 0.14);
  border-color: rgba(94, 210, 220, 0.9);
  color: rgba(220, 240, 245, 0.95);
}
.json-dropzone-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.json-dropzone-status {
  line-height: 1.4;
  word-break: break-word;
  max-width: 100%;
}
.json-dropzone-status[data-kind="ok"]   { color: #7ddc96; }
.json-dropzone-status[data-kind="warn"] { color: #e8b85a; }
.json-dropzone-status[data-kind="err"]  { color: #f27272; }

[data-theme="light"] .cred-method-fields {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="light"] .json-dropzone {
  border-color: rgba(0, 80, 120, 0.28);
  background: rgba(0, 80, 120, 0.04);
  color: rgba(30, 30, 30, 0.75);
}
[data-theme="light"] .json-dropzone:hover,
[data-theme="light"] .json-dropzone:focus-visible {
  background: rgba(0, 80, 120, 0.08);
  border-color: rgba(0, 80, 120, 0.45);
}

/*— Step-reorder chevrons inside the team interior */
.wf-node-step-badge.is-interior-reorder {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  background: rgba(155, 77, 202, 0.12);
  border: 1px solid rgba(155, 77, 202, 0.35);
  border-radius: 4px;
  font-size: 0.68rem;
  color: var(--text, #e6e6e6);
  user-select: none;
}
.wf-node-step-badge.is-interior-reorder .wf-step-number {
  min-width: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--text, #e6e6e6);
}
.wf-node-step-badge.is-interior-reorder .wf-step-reorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(155, 77, 202, 0.85);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s ease, color 0.12s ease;
}
.wf-node-step-badge.is-interior-reorder .wf-step-reorder:hover:not(.is-disabled):not(:disabled) {
  background: rgba(155, 77, 202, 0.22);
  color: #fff;
}
.wf-node-step-badge.is-interior-reorder .wf-step-reorder.is-disabled,
.wf-node-step-badge.is-interior-reorder .wf-step-reorder:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* ══— Team interior polish ══════════════════════════════════════════════ Tighter typography, softer chrome, a subtle "breath" on the boundary aura, and an icon-led dropzone that no longer feels like noisy placeholder text.
════════════════════════════════════════════════════════════════════════════ */

/* Dropzone: icon-led, terse, centered. Works for both empty + add-more zones. */
.team-interior-wf-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  min-height: 28px;
  border-radius: 7px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.015);
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.14s ease;
  cursor: pointer;
}
.team-interior-wf-dropzone:hover {
  border-color: rgba(94,210,220,0.38);
  background: rgba(94,210,220,0.04);
  color: rgba(255,255,255,0.82);
}
.team-interior-wf-dropzone.is-add-more {
  min-height: 22px;
  padding: 4px 8px;
  font-size: 0.68rem;
  opacity: 0.75;
}
.team-interior-wf-dropzone .wf-dropzone-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(94,210,220,0.16);
  color: rgba(94,210,220,0.95);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
}
.team-interior-wf-dropzone:hover .wf-dropzone-plus {
  background: rgba(94,210,220,0.28);
  color: #eafeff;
}
[data-theme="light"] .team-interior-wf-dropzone {
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.015);
}
[data-theme="light"] .team-interior-wf-dropzone:hover {
  border-color: rgba(14,116,144,0.48);
  background: rgba(14,116,144,0.05);
  color: rgba(0,0,0,0.82);
}
[data-theme="light"] .team-interior-wf-dropzone .wf-dropzone-plus {
  background: rgba(14,116,144,0.14);
  color: rgba(14,116,144,0.95);
}

/* Goal meta pills— replace the old "3 agents · drag tiles to reorder" line with a compact 3-chip readout that reads at a glance. */
.team-interior-goal-meta .goal-meta-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-right: 4px;
  border-radius: 9px;
  background: rgba(94,210,220,0.18);
  color: #eafeff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.team-interior-goal-meta .goal-meta-label {
  margin-right: 6px;
  opacity: 0.78;
  font-weight: 500;
}
.team-interior-goal-meta .goal-meta-sep {
  display: inline-block;
  margin: 0 5px 0 1px;
  opacity: 0.36;
}
.team-interior-goal-meta .goal-meta-mode {
  opacity: 0.62;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}
[data-theme="light"] .team-interior-goal-meta .goal-meta-count {
  background: rgba(14,116,144,0.16);
  color: #0f7079;
}

/* Boundary aura— slow breathing so the expanded team feels "on" */
@keyframes teamAuraBreath {
  0%, 100% { opacity: 0.70; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.008); }
}
.team-interior-aura {
  transform-origin: center;
  transform-box: fill-box;
  animation: teamAuraBreath 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .team-interior-aura { animation: none; opacity: 0.8; }
}

/* Boundary stroke: softer, warmer— no longer a harsh dashed outline */
.team-interior-boundary {
  transition: stroke 0.3s ease, opacity 0.3s ease;
}
[data-theme="light"] .team-interior-boundary {
  stroke: rgba(14,116,144,0.32) !important;
}

/* Workflow section header— tighter, more editorial */
.team-interior-wf-section .team-interior-wf-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  opacity: 0.6;
  text-transform: uppercase;
  font-weight: 600;
}
.team-interior-wf-section .team-interior-wf-add {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ──— Port disconnect affordance ─────────────────────────────── Ports that currently terminate a wire get an `.is-connected` class (added by _markConnectedPorts after every renderFreeCanvas pass). On hover we: • swap the cursor to an SVG broken-link glyph so the user knows a double-click here will cut the wire; • tint the port red / warning orange to reinforce the intent. The cursor is inlined as a data URI so it ships with the CSS— no extra asset request. Fallback is `not-allowed` for browsers that reject the data URI (older Edge / some Linux cursor themes). */
.node-port.is-connected:hover,
.workflow-ref-port-in.is-connected:hover,
.workflow-ref-port-out.is-connected:hover,
.trigger-port-out.is-connected:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ea4b35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17l-3 3a4.2 4.2 0 0 1-6-6l3-3'/><path d='M15 7l3-3a4.2 4.2 0 0 1 6 6l-3 3'/><line x1='2' y1='22' x2='22' y2='2'/></svg>") 12 12, not-allowed;
  background: rgba(234, 75, 53, 0.22) !important;
  border-color: #ea4b35 !important;
  box-shadow: 0 0 0 2px rgba(234, 75, 53, 0.35), 0 0 8px rgba(234, 75, 53, 0.55) !important;
}
/* Subtle always-on tell that the port is live (before hover): a thin red ring so a glance is enough to see which ports are attached. */
.node-port.is-connected,
.workflow-ref-port-in.is-connected,
.workflow-ref-port-out.is-connected,
.trigger-port-out.is-connected {
  box-shadow: 0 0 0 1.5px rgba(234, 75, 53, 0.35);
}

/* ── Inline autosave chip + keyboard shortcuts ───────────── Drew asked for a premium inline save-status indicator anchored in the Canvas tab's nav slot (next to play/pause/stop), replacing the bottom-up "Canvas saved" toast. Four visual states, only one icon + one label visible per state:.is-saved → green check + "Saved".is-saving → spinner + "Saving…".is-dirty → amber dot + "Unsaved".is-error → red ✕ + "Save failed" */
.canvas-save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  user-select: none;
  white-space: nowrap;
  min-height: 22px;
}
.canvas-save-status .save-spinner,
.canvas-save-status .save-check,
.canvas-save-status .save-dot-icon,
.canvas-save-status .save-error-icon {
  display: none;
  flex-shrink: 0;
}
.canvas-save-status .save-spinner {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  animation: save-spin 0.8s linear infinite;
}
@keyframes save-spin {
  to { transform: rotate(360deg); }
}
/* Default (saved) state */
.canvas-save-status.is-saved {
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.25);
}
.canvas-save-status.is-saved .save-check { display: inline-block; }
/* Saving state */
.canvas-save-status.is-saving {
  color: #60a5fa;
  background: rgba(96,165,250,0.08);
  border-color: rgba(96,165,250,0.25);
}
.canvas-save-status.is-saving .save-spinner { display: inline-block; }
/* Dirty / unsaved state */
.canvas-save-status.is-dirty {
  color: #fbbf24;
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.25);
}
.canvas-save-status.is-dirty .save-dot-icon {
  display: inline-block;
  animation: save-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes save-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Error state */
.canvas-save-status.is-error {
  color: #f87171;
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.35);
}
.canvas-save-status.is-error .save-error-icon { display: inline-block; }
/* Light theme— preserve legibility */
[data-theme="light"] .canvas-save-status { background: rgba(0,0,0,0.03); }
[data-theme="light"] .canvas-save-status.is-saved { color: #15803d; border-color: rgba(21,128,61,0.35); background: rgba(21,128,61,0.08); }
[data-theme="light"] .canvas-save-status.is-saving { color: #1d4ed8; border-color: rgba(29,78,216,0.35); background: rgba(29,78,216,0.08); }
[data-theme="light"] .canvas-save-status.is-dirty { color: #b45309; border-color: rgba(180,83,9,0.40); background: rgba(180,83,9,0.08); }
[data-theme="light"] .canvas-save-status.is-error { color: #b91c1c; border-color: rgba(185,28,28,0.40); background: rgba(185,28,28,0.08); }

/* ──— Keyboard shortcut cheatsheet modal ──────────────────────── */
#shortcutCheatsheet .modal-card {
  max-width: 560px;
}
/* R84/R86 three-column layout: Editing on top, Navigation | Keyboard | Run/Help.
   R86 bumps the modal to 1320px so the larger keyboard fits with breathing
   room on each side. The around-keyboard layout is the ONLY view —
   no separate flat list. */
#shortcutCheatsheet .shortcut-modal-card {
  max-width: 1320px;
  width: min(98vw, 1320px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
#shortcutCheatsheet .shortcut-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#shortcutCheatsheet .shortcut-section-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#shortcutCheatsheet .shortcut-section-title {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
[data-theme="light"] #shortcutCheatsheet .shortcut-section-title {
  border-bottom-color: rgba(0,0,0,0.08);
}
#shortcutCheatsheet .shortcut-section-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#shortcutCheatsheet .shortcut-three-col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: start;
}
#shortcutCheatsheet .shortcut-three-col .shortcut-keyboard-wrap {
  /* Center column shrinks to keyboard width; sides fill remaining space. */
  min-width: 0;
}
@media (max-width: 1100px) {
  /* On narrow screens (<1100px), the keyboard at 44px-base no longer
     fits with two side columns. Stack everything vertically. */
  #shortcutCheatsheet .shortcut-three-col {
    grid-template-columns: 1fr;
  }
  #shortcutCheatsheet .kb-keyboard {
    --kb-base: 36px;
  }
}
#shortcutCheatsheet .shortcut-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
#shortcutCheatsheet .shortcut-grid .shortcut-section {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  padding-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
#shortcutCheatsheet .shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 100ms ease;
}
#shortcutCheatsheet .shortcut-row:hover {
  background: rgba(255,255,255,0.04);
}
#shortcutCheatsheet .shortcut-row.is-selected {
  background: rgba(251,191,36,0.10);
}
#shortcutCheatsheet .shortcut-row.is-selected:hover {
  background: rgba(251,191,36,0.16);
}
#shortcutCheatsheet .shortcut-label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.88);
  padding: 2px 0;
}
#shortcutCheatsheet .shortcut-keys {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}
#shortcutCheatsheet kbd {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
  line-height: 1.4;
  min-width: 22px;
  text-align: center;
}
#shortcutCheatsheet .shortcut-hint {
  margin-top: 14px;
  font-size: 0.72rem;
  opacity: 0.6;
  text-align: center;
}
[data-theme="light"] #shortcutCheatsheet kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.82);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
[data-theme="light"] #shortcutCheatsheet .shortcut-label { color: rgba(0,0,0,0.82); }
[data-theme="light"] #shortcutCheatsheet .shortcut-section { border-bottom-color: rgba(0,0,0,0.08); }

/* ── Interactive virtual keyboard remapper ─────── */
#shortcutCheatsheet .shortcut-keyboard-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
#shortcutCheatsheet .kb-keyboard {
  /* R86 — bumped from 32px → 44px so the keyboard reads as the
     centerpiece of the modal, not as a thumbnail. Combined with the
     wider modal, the QWERTY layout fills the centre column with
     room to breathe and shortcut rows flank it cleanly. */
  --kb-base: 44px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
}
#shortcutCheatsheet .kb-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}
#shortcutCheatsheet .kb-key {
  --kw: 1;
  flex: 0 0 calc(var(--kb-base) * var(--kw));
  min-width: 0;
  height: var(--kb-base);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.85);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: default;
  user-select: none;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.30);
  transition: background-color 120ms ease, border-color 120ms ease, transform 90ms ease;
}
#shortcutCheatsheet .kb-key:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
/* Keys with a binding get a faint badge dot in the corner. */
#shortcutCheatsheet .kb-key.kb-bound {
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.12);
  color: rgba(255,255,255,0.95);
}
#shortcutCheatsheet .kb-key.kb-bound::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.20);
}
/* Section-tinted backgrounds for bound keys. */
#shortcutCheatsheet .kb-key.kb-bound.kbsec-editing {
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.16);
}
#shortcutCheatsheet .kb-key.kb-bound.kbsec-editing::after { background: #60a5fa; }
#shortcutCheatsheet .kb-key.kb-bound.kbsec-navigation {
  border-color: rgba(45,212,191,0.55);
  background: rgba(45,212,191,0.16);
}
#shortcutCheatsheet .kb-key.kb-bound.kbsec-navigation::after { background: #2dd4bf; }
#shortcutCheatsheet .kb-key.kb-bound.kbsec-runhelp {
  border-color: rgba(251,191,36,0.55);
  background: rgba(251,191,36,0.16);
}
#shortcutCheatsheet .kb-key.kb-bound.kbsec-runhelp::after { background: #fbbf24; }
/* Multi-binding hint stacks dots. */
#shortcutCheatsheet .kb-key.kb-bound.kb-multi::after {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 6px 0 0 -1px rgba(255,255,255,0.50);
}
/* Currently-selected shortcut’s key glows. */
#shortcutCheatsheet .kb-key.kb-selected {
  border-color: #fbbf24;
  background: rgba(251,191,36,0.22);
  color: #fffbeb;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.35), inset 0 -1px 0 rgba(0,0,0,0.30);
}
/* Remap-mode click affordance. */
#shortcutCheatsheet .kb-key.kb-clickable {
  cursor: pointer;
}
#shortcutCheatsheet .kb-key.kb-clickable:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-1px);
}
#shortcutCheatsheet .kb-key.kb-clickable.kb-bound:hover {
  background: rgba(96,165,250,0.22);
}
#shortcutCheatsheet .kb-key.kb-mod {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.62);
}
#shortcutCheatsheet .kb-key.kb-mod.kb-mod-active {
  background: rgba(251,191,36,0.20);
  border-color: rgba(251,191,36,0.55);
  color: #fffbeb;
}
#shortcutCheatsheet .kb-key.kb-disabled {
  opacity: 0.45;
}
#shortcutCheatsheet .kb-key.kb-disabled.kb-clickable {
  cursor: not-allowed;
}
/* Remap action bar */
#shortcutCheatsheet .shortcut-remap-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 8px;
  flex-wrap: wrap;
}
#shortcutCheatsheet .remap-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
#shortcutCheatsheet .remap-title strong {
  color: #fbbf24;
}
#shortcutCheatsheet .remap-mods {
  display: inline-flex;
  gap: 6px;
}
#shortcutCheatsheet .remap-mod {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.74);
  cursor: pointer;
  user-select: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
#shortcutCheatsheet .remap-mod:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
#shortcutCheatsheet .remap-mod.is-on {
  background: rgba(251,191,36,0.22);
  border-color: rgba(251,191,36,0.55);
  color: #fffbeb;
}
#shortcutCheatsheet .remap-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
#shortcutCheatsheet .remap-preview-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#shortcutCheatsheet .remap-preview-keys {
  display: inline-flex;
  gap: 4px;
}
#shortcutCheatsheet .remap-preview-keys kbd.is-empty {
  opacity: 0.5;
  font-style: italic;
}
#shortcutCheatsheet .remap-actions {
  display: inline-flex;
  gap: 6px;
}
#shortcutCheatsheet .remap-btn {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}
#shortcutCheatsheet .remap-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
#shortcutCheatsheet .remap-btn.is-primary {
  background: rgba(96,165,250,0.20);
  border-color: rgba(96,165,250,0.55);
  color: #eff6ff;
}
#shortcutCheatsheet .remap-btn.is-primary:hover {
  background: rgba(96,165,250,0.30);
  border-color: rgba(96,165,250,0.75);
}
#shortcutCheatsheet .remap-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#shortcutCheatsheet .remap-conflict {
  font-size: 0.70rem;
  color: #fca5a5;
  flex: 1 1 100%;
  margin-top: 2px;
}
/* shortcut row action buttons (Edit / Reset) */
#shortcutCheatsheet .shortcut-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
#shortcutCheatsheet .kb-edit-btn,
#shortcutCheatsheet .kb-reset-btn {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.74);
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
  white-space: nowrap;
}
#shortcutCheatsheet .kb-edit-btn:hover,
#shortcutCheatsheet .kb-reset-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.95);
}
#shortcutCheatsheet .kb-edit-btn.is-active {
  background: rgba(251,191,36,0.20);
  border-color: rgba(251,191,36,0.55);
  color: #fffbeb;
}
#shortcutCheatsheet .kb-reset-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#shortcutCheatsheet .shortcut-binding-customized {
  font-size: 0.62rem;
  color: #fbbf24;
  margin-left: 4px;
  letter-spacing: 0.03em;
}
/* Light theme— preserve legibility for the keyboard graphic. */
[data-theme="light"] #shortcutCheatsheet .shortcut-keyboard-wrap {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] #shortcutCheatsheet .kb-key {
  background: rgba(0,0,0,0.035);
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.78);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
}
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound {
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.45);
  color: rgba(0,0,0,0.92);
}
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound::after { background: #2563eb; }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-editing { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.45); }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-editing::after { background: #2563eb; }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-navigation { background: rgba(13,148,136,0.12); border-color: rgba(13,148,136,0.45); }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-navigation::after { background: #0d9488; }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-runhelp { background: rgba(217,119,6,0.14); border-color: rgba(217,119,6,0.45); }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-bound.kbsec-runhelp::after { background: #d97706; }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-selected {
  background: rgba(217,119,6,0.18);
  border-color: #d97706;
  color: #1c1917;
  box-shadow: 0 0 0 2px rgba(217,119,6,0.30), inset 0 -1px 0 rgba(0,0,0,0.06);
}
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-mod { color: rgba(0,0,0,0.55); }
[data-theme="light"] #shortcutCheatsheet .kb-key.kb-mod.kb-mod-active {
  background: rgba(217,119,6,0.18);
  border-color: rgba(217,119,6,0.55);
  color: #1c1917;
}
[data-theme="light"] #shortcutCheatsheet .shortcut-remap-bar {
  background: rgba(217,119,6,0.10);
  border-color: rgba(217,119,6,0.45);
}
[data-theme="light"] #shortcutCheatsheet .remap-title { color: rgba(0,0,0,0.82); }
[data-theme="light"] #shortcutCheatsheet .remap-title strong { color: #d97706; }
[data-theme="light"] #shortcutCheatsheet .remap-mod {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.66);
}
[data-theme="light"] #shortcutCheatsheet .remap-mod.is-on {
  background: rgba(217,119,6,0.18);
  border-color: rgba(217,119,6,0.55);
  color: #1c1917;
}
[data-theme="light"] #shortcutCheatsheet .remap-preview-label { color: rgba(0,0,0,0.55); }
[data-theme="light"] #shortcutCheatsheet .remap-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.78);
}
[data-theme="light"] #shortcutCheatsheet .remap-btn.is-primary {
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.55);
  color: #1e3a8a;
}
[data-theme="light"] #shortcutCheatsheet .kb-edit-btn,
[data-theme="light"] #shortcutCheatsheet .kb-reset-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.66);
}
[data-theme="light"] #shortcutCheatsheet .kb-edit-btn.is-active {
  background: rgba(217,119,6,0.18);
  border-color: rgba(217,119,6,0.55);
  color: #1c1917;
}
[data-theme="light"] #shortcutCheatsheet .shortcut-binding-customized { color: #d97706; }
[data-theme="light"] #shortcutCheatsheet .shortcut-row:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] #shortcutCheatsheet .shortcut-row.is-selected {
  background: rgba(217,119,6,0.10);
}
[data-theme="light"] #shortcutCheatsheet .shortcut-row.is-selected:hover {
  background: rgba(217,119,6,0.16);
}

/* ──— Save chip clickable affordance + history panel ──────────── */
.canvas-save-status { cursor: pointer; user-select: none; }
.canvas-save-status .save-history-glyph {
  margin-left: 4px;
  opacity: 0.45;
  transition: opacity 120ms ease;
  flex-shrink: 0;
}
.canvas-save-status:hover .save-history-glyph { opacity: 0.85; }
.canvas-save-status.is-saving .save-history-glyph,
.canvas-save-status.is-error  .save-history-glyph { display: none; }

.canvas-history-panel {
  position: fixed;
  top: 96px;
  right: 18px;
  width: 320px;
  max-height: calc(100vh - 132px);
  background: #161821;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  z-index: 950;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.canvas-history-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.canvas-history-panel[hidden] { display: none; }
/* panel only matters on the Canvas tab. Hide outright on other tabs so a user who left it open then switched away doesn't see a floating panel anchored to the wrong UI. */
body:not([data-active-tab="canvas"]) .canvas-history-panel { display: none !important; }
[data-theme="light"] .canvas-history-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
}
.canvas-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .canvas-history-header { border-bottom-color: rgba(0,0,0,0.06); }
.canvas-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
}
[data-theme="light"] .canvas-history-title { color: rgba(0,0,0,0.86); }
.canvas-history-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.canvas-history-actions .modal-close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.6);
  font-size: 1.2rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-history-actions .modal-close:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); }
[data-theme="light"] .canvas-history-actions .modal-close { color: rgba(0,0,0,0.5); }
[data-theme="light"] .canvas-history-actions .modal-close:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }

.canvas-history-meta {
  padding: 8px 14px;
  font-size: 0.7rem;
  opacity: 0.55;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
[data-theme="light"] .canvas-history-meta { border-bottom-color: rgba(0,0,0,0.04); }
.canvas-history-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.canvas-history-list .canvas-history-empty,
.canvas-history-list .canvas-history-error {
  padding: 16px 18px;
  font-size: 0.78rem;
  opacity: 0.55;
  text-align: center;
}
.canvas-history-list .canvas-history-error { color: #ff8b8b; opacity: 0.85; }
.canvas-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: default;
  border-left: 2px solid transparent;
  transition: background 80ms ease, border-color 80ms ease;
}
.canvas-history-row:hover { background: rgba(255,255,255,0.04); border-left-color: #4cc9f0; }
[data-theme="light"] .canvas-history-row:hover { background: rgba(0,0,0,0.03); }
.canvas-history-row .ts {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.canvas-history-row .ts-primary {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="light"] .canvas-history-row .ts-primary { color: rgba(0,0,0,0.85); }
.canvas-history-row .ts-secondary {
  font-size: 0.66rem;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.canvas-history-row .counts {
  font-size: 0.66rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.canvas-history-row .canvas-history-restore {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  flex-shrink: 0;
}
.canvas-history-row .canvas-history-restore:hover {
  background: rgba(76,201,240,0.18);
  border-color: rgba(76,201,240,0.45);
  color: #fff;
}
.canvas-history-row.is-current { border-left-color: #3ecf8e; background: rgba(62,207,142,0.06); }
.canvas-history-row.is-current .ts-primary::after {
  content: " · current";
  color: #3ecf8e;
  font-size: 0.66rem;
  font-weight: 600;
  margin-left: 4px;
}
[data-theme="light"] .canvas-history-row .canvas-history-restore {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.78);
}
[data-theme="light"] .canvas-history-row .canvas-history-restore:hover {
  background: rgba(76,201,240,0.18);
  border-color: rgba(76,201,240,0.45);
  color: rgba(0,0,0,0.92);
}

@media (max-width: 720px) {
  .canvas-history-panel {
    right: 12px;
    left: 12px;
    width: auto;
    top: 110px;
  }
}

/* ══════════════════════════════════════════════════════════════════— Help icon, dropdown menu, quick-tips modal, about modal The help button matches the 32px circular shape used elsewhere in the topbar (theme toggle, avatar) and sits to the LEFT of the "Server" status pair. Clicking it opens a dropdown of quick links into the in-app references. The dropdown anchors to the button. ══════════════════════════════════════════════════════════════════ */
.help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-control);
  background: var(--fill-control);
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.help-btn:hover {
  background: var(--fill-control-hover);
  color: var(--ink);
  border-color: rgba(76,201,240,0.45);
  box-shadow: 0 0 0 3px rgba(76,201,240,0.14);
}
.help-btn[aria-expanded="true"] {
  background: var(--fill-control-hover);
  color: var(--ink);
  border-color: rgba(76,201,240,0.55);
  box-shadow: 0 0 0 3px rgba(76,201,240,0.18);
}
.help-btn:focus-visible {
  outline: 2px solid rgba(76,201,240,0.7);
  outline-offset: 2px;
}

.help-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 244px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(76,201,240,0.06);
  z-index: 9000;
  padding: 8px 0;
  animation: dropdownIn 0.15s ease;
}
.help-dropdown.open { display: block; }
.help-header {
  padding: 12px 16px 8px;
}
.help-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.help-subtitle {
  font-size: 11px;
  color: var(--muted);
}
.help-separator {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.help-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.help-menu-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
.help-menu-item svg { opacity: 0.75; flex-shrink: 0; }
.help-menu-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.help-menu-kbd {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0.85;
}
.help-menu-kbd kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-weight: 600;
}

/* Tab-scoped: hide canvas-only entry when not on canvas tab. */
body:not([data-active-tab="canvas"]) .help-canvas-only { display: none !important; }

/* ── quick-tips modal grid ────────────────────────────── */
.quick-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quick-tip-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.15s, background 0.15s;
}
.quick-tip-card:hover {
  border-color: rgba(76,201,240,0.4);
  background: rgba(76,201,240,0.04);
}
.quick-tip-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(76,201,240,0.12);
  color: #4cc9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(76,201,240,0.25);
}
.quick-tip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.quick-tip-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.quick-tip-body kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-weight: 600;
  margin: 0 1px;
}
@media (max-width: 720px) {
  .quick-tips-grid { grid-template-columns: 1fr; }
}

/* ── about modal ─────────────────────────────────────── */
.about-blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px 0;
}
.about-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0 0 14px 0;
  font-size: 12px;
}
.about-list dt {
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  align-self: center;
}
.about-list dd {
  margin: 0;
  color: var(--ink);
}
.about-footer {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.about-footer code {
  background: rgba(255,255,255,0.07);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
}

/* ── light-theme overrides ──────────────────────────── */
[data-theme="light"] .help-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.7);
}
[data-theme="light"] .help-btn:hover,
[data-theme="light"] .help-btn[aria-expanded="true"] {
  background: rgba(76,201,240,0.12);
  border-color: rgba(76,201,240,0.55);
  color: rgba(0,0,0,0.9);
}
[data-theme="light"] .help-menu-item:hover {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.92);
}
[data-theme="light"] .help-menu-kbd kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.72);
}
[data-theme="light"] .quick-tip-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .quick-tip-card:hover {
  background: rgba(76,201,240,0.07);
  border-color: rgba(76,201,240,0.45);
}
[data-theme="light"] .quick-tip-body kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.72);
}
[data-theme="light"] .about-footer code {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.78);
}


/* ════════════════════════════════════════════════════════════════ *— Demo Mode platform switch + run-readiness modal * ════════════════════════════════════════════════════════════════ * * Two-channel CSS: * • Always-on styles for the demo-mode toggle item, the * confirmation modal, the persistent badge, and the run-readiness * error modal. * • Body[data-demo-mode="true"] styles for the ethereal treatment— * activated only when the user is inside the fantasy preview. */

/* ── Demo-mode toggle row in the help dropdown ──────────────────── */
.help-menu-item.demo-mode-toggle-item .help-menu-state {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  color: rgba(255,255,255,0.55);
  transition: background-color 120ms ease, color 120ms ease;
}
.help-menu-item.demo-mode-toggle-item[aria-pressed="true"] .help-menu-state {
  background: linear-gradient(135deg, rgba(168,85,247,0.32), rgba(56,189,248,0.32));
  color: #f5d0fe;
  box-shadow: 0 0 0 1px rgba(168,85,247,0.45);
}

/* ── Demo-mode confirmation modal ───────────────────────────────── */
.demo-mode-confirm-card { max-width: 520px; }
.demo-mode-confirm-lede {
  font-size: 1rem;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.92);
}
.demo-mode-confirm-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.demo-mode-confirm-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
}
.demo-mode-confirm-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #38bdf8);
}
.demo-mode-confirm-warn {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 0.78rem;
  border-radius: 8px;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.40);
  color: rgba(255,255,255,0.82);
}
.demo-mode-confirm-warn strong { color: #fde68a; }
.demo-mode-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.demo-mode-confirm-actions .accent-btn.demo-mode-confirm-yes {
  background: linear-gradient(135deg, #a855f7, #38bdf8);
  border-color: rgba(168,85,247,0.55);
  color: #fff;
  font-weight: 600;
}

/* ── Navbar Demo Mode toggle pill ────────────────────────── Sits next to the Help button. OFF state matches the Help button chrome (subtle slate); ON state lights up with the ethereal gradient and a pulsing sparkle. */
.demo-mode-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 200ms ease;
  user-select: none;
  white-space: nowrap;
}
.demo-mode-nav-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
  color: rgba(255,255,255,0.92);
}
.demo-mode-nav-btn:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
.demo-mode-nav-spark {
  flex-shrink: 0;
  opacity: 0.62;
  transition: opacity 140ms ease, transform 200ms ease;
}
.demo-mode-nav-btn:hover .demo-mode-nav-spark { opacity: 0.92; }
/* ON state— small button transforms into ethereal "Demo ✦" */
.demo-mode-nav-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(168,85,247,0.40), rgba(56,189,248,0.40));
  border-color: rgba(168,85,247,0.65);
  color: #f5f3ff;
  box-shadow: 0 0 14px rgba(168,85,247,0.30);
  animation: demo-nav-pulse 3.6s ease-in-out infinite;
}
.demo-mode-nav-btn[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, rgba(168,85,247,0.55), rgba(56,189,248,0.55));
  border-color: rgba(168,85,247,0.85);
  color: #fff;
}
.demo-mode-nav-btn[aria-pressed="true"] .demo-mode-nav-spark {
  opacity: 1;
  color: #f5d0fe;
  filter: drop-shadow(0 0 4px rgba(168,85,247,0.7));
  animation: demo-nav-spark-spin 4.4s linear infinite;
}
@keyframes demo-nav-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(168,85,247,0.30); }
  50%      { box-shadow: 0 0 22px rgba(56,189,248,0.45); }
}
@keyframes demo-nav-spark-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Light-theme parity for the navbar pill */
[data-theme="light"] .demo-mode-nav-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.66);
}
[data-theme="light"] .demo-mode-nav-btn:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.24);
  color: rgba(0,0,0,0.86);
}
[data-theme="light"] .demo-mode-nav-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(126,34,206,0.18), rgba(14,165,233,0.18));
  border-color: rgba(126,34,206,0.55);
  color: #4c1d95;
}
[data-theme="light"] .demo-mode-nav-btn[aria-pressed="true"] .demo-mode-nav-spark {
  color: #7e22ce;
  filter: drop-shadow(0 0 4px rgba(126,34,206,0.45));
}

/* ── Run-readiness error modal ──────────────────────────────────── */
.run-readiness-card { max-width: 600px; }
.run-readiness-lede {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  margin: 0 0 14px;
  line-height: 1.5;
}
.run-readiness-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}
.run-readiness-step {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.32);
}
.run-readiness-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.run-readiness-step-icon {
  display: inline-flex;
  align-items: center;
  color: #f87171;
}
.run-readiness-step-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.run-readiness-step-connector {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(248,113,113,0.18);
  color: #fecaca;
  margin-left: auto;
}
.run-readiness-missing {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.run-readiness-missing li {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
}
.run-readiness-missing li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #f87171;
  font-weight: 700;
}
.run-readiness-field {
  font-weight: 600;
  color: #fecaca;
}
.run-readiness-hint { color: rgba(255,255,255,0.62); }
.run-readiness-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
}
.run-readiness-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.run-readiness-demo-btn {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(56,189,248,0.18));
  border-color: rgba(168,85,247,0.45);
  color: #f5d0fe;
}
.run-readiness-demo-btn:hover {
  background: linear-gradient(135deg, rgba(168,85,247,0.30), rgba(56,189,248,0.30));
  border-color: rgba(168,85,247,0.60);
}

/* ════════════════════════════════════════════════════════════════ * Ethereal treatment— only active when demo mode is on * ════════════════════════════════════════════════════════════════ */

body[data-demo-mode="true"] {
  position: relative;
}
/* Soft cool-purple/cyan aurora overlay drifting across the viewport. */
body[data-demo-mode="true"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(168,85,247,0.10) 0%, transparent 70%),
    radial-gradient(50% 35% at 80% 60%, rgba(56,189,248,0.10) 0%, transparent 70%),
    radial-gradient(40% 30% at 50% 90%, rgba(244,114,182,0.08) 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: demo-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes demo-aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50%  { transform: translate3d(-20px, 12px, 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(18px, -8px, 0) scale(1); opacity: 0.85; }
}
/* Subtle hue shift + saturation lift on the whole UI. We use a filter on the main stage container only (not the body) so the aurora overlay and badge stay crisp. */
body[data-demo-mode="true"] #appShell,
body[data-demo-mode="true"] main,
body[data-demo-mode="true"] .canvas-tab,
body[data-demo-mode="true"] .nav-shell {
  filter: saturate(1.18) hue-rotate(-6deg) brightness(1.02);
  transition: filter 360ms ease;
}
/* Cards get a soft amethyst glow that replaces their default shadow so the whole UI feels lit from within. */
body[data-demo-mode="true"] .agent-card,
body[data-demo-mode="true"] .workflow-card,
body[data-demo-mode="true"] .modal-card,
body[data-demo-mode="true"] .canvas-history-panel {
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.28),
    0 0 32px rgba(168,85,247,0.16),
    0 12px 32px rgba(0,0,0,0.40);
}
/* Buttons and inputs get a faint inner glow. */
body[data-demo-mode="true"] .accent-btn,
body[data-demo-mode="true"] .modal-input,
body[data-demo-mode="true"] .ghost-btn:hover {
  box-shadow:
    inset 0 0 0 1px rgba(168,85,247,0.30),
    0 0 14px rgba(56,189,248,0.18);
}

/* Light-theme parity— the ethereal palette stays intentional but reads on a light background. */
[data-theme="light"] body[data-demo-mode="true"]::before {
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(126,34,206,0.10) 0%, transparent 70%),
    radial-gradient(50% 35% at 80% 60%, rgba(14,165,233,0.10) 0%, transparent 70%),
    radial-gradient(40% 30% at 50% 90%, rgba(219,39,119,0.08) 0%, transparent 70%);
}
[data-theme="light"] body[data-demo-mode="true"] .agent-card,
[data-theme="light"] body[data-demo-mode="true"] .workflow-card,
[data-theme="light"] body[data-demo-mode="true"] .modal-card {
  box-shadow:
    0 0 0 1px rgba(126,34,206,0.22),
    0 0 24px rgba(126,34,206,0.12),
    0 8px 24px rgba(0,0,0,0.10);
}
[data-theme="light"] .demo-mode-confirm-bullets li::before {
  background: linear-gradient(135deg, #7e22ce, #0ea5e9);
}
[data-theme="light"] .demo-mode-confirm-warn {
  background: rgba(217,119,6,0.08);
  border-color: rgba(217,119,6,0.40);
}
[data-theme="light"] .demo-mode-confirm-warn strong { color: #b45309; }
[data-theme="light"] .run-readiness-step {
  background: rgba(248,113,113,0.06);
  border-color: rgba(248,113,113,0.40);
}
[data-theme="light"] .run-readiness-step-label { color: rgba(0,0,0,0.84); }
[data-theme="light"] .run-readiness-missing li { color: rgba(0,0,0,0.74); }
[data-theme="light"] .run-readiness-field { color: #b91c1c; }


/* ════════════════════════════════════════════════════════════════ *— Feedback ingestion modal + admin priority dashboard * ════════════════════════════════════════════════════════════════ */

/* Submission modal */
.feedback-card { max-width: 560px; }
.feedback-lede {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  margin: 0 0 14px;
}
.feedback-card .modal-field { margin-bottom: 12px; }
.modal-label-required { color: #f87171; margin-left: 2px; }
.feedback-include-row { margin-top: 6px; }
.feedback-include-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
}
.feedback-include-label input[type="checkbox"] {
  width: 14px; height: 14px; cursor: pointer;
  accent-color: rgba(168,85,247,0.85);
}
.feedback-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}
.feedback-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.feedback-result.is-success {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.45);
  color: #bbf7d0;
}
.feedback-result.is-error {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.45);
  color: #fecaca;
}
.modal-hint {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  text-align: right;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* Admin priority panel */
.feedback-admin-card { max-width: 760px; }
.feedback-admin-lede {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.74);
  margin: 0 0 12px;
}
.feedback-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.feedback-admin-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,0.50);
  font-size: 0.82rem;
}
.feedback-admin-row {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.feedback-admin-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.feedback-pri {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(168,85,247,0.32), rgba(56,189,248,0.32));
  color: #f5d0fe;
  min-width: 36px;
  text-align: center;
}
.feedback-sev {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.20);
}
.feedback-sev.fb-sev-low      { background: rgba(148,163,184,0.20); color: #cbd5e1; }
.feedback-sev.fb-sev-medium   { background: rgba(56,189,248,0.20);  color: #bae6fd; }
.feedback-sev.fb-sev-high     { background: rgba(251,191,36,0.20);  color: #fde68a; }
.feedback-sev.fb-sev-critical { background: rgba(248,113,113,0.20); color: #fecaca; }
.feedback-cat {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.66);
}
.feedback-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.62);
}
.feedback-status.fb-status-open        { background: rgba(248,113,113,0.18); color: #fecaca; }
.feedback-status.fb-status-triaged     { background: rgba(251,191,36,0.18);  color: #fde68a; }
.feedback-status.fb-status-in-progress { background: rgba(56,189,248,0.18);  color: #bae6fd; }
.feedback-status.fb-status-resolved    { background: rgba(34,197,94,0.18);   color: #bbf7d0; }
.feedback-status.fb-status-wont-fix    { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.feedback-status.fb-status-duplicate   { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.feedback-votes {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(168,85,247,0.20);
  color: #f5d0fe;
}
.feedback-summary {
  flex: 1 1 auto;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  min-width: 200px;
}
.feedback-admin-row-body {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.60);
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.20);
  white-space: pre-wrap;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}
.feedback-admin-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.feedback-admin-row-actions .btn-xs {
  font-size: 0.70rem;
  padding: 3px 9px;
}

/* Light-theme parity */
[data-theme="light"] .feedback-lede,
[data-theme="light"] .feedback-admin-lede { color: rgba(0,0,0,0.74); }
[data-theme="light"] .feedback-include-label { color: rgba(0,0,0,0.74); }
[data-theme="light"] .feedback-result.is-success {
  background: rgba(21,128,61,0.10);
  border-color: rgba(21,128,61,0.45);
  color: #14532d;
}
[data-theme="light"] .feedback-result.is-error {
  background: rgba(185,28,28,0.10);
  border-color: rgba(185,28,28,0.45);
  color: #7f1d1d;
}
[data-theme="light"] .feedback-admin-row {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .feedback-summary { color: rgba(0,0,0,0.84); }
[data-theme="light"] .feedback-admin-row-body {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.66);
}
[data-theme="light"] .feedback-cat,
[data-theme="light"] .feedback-status { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.66); }

/* ════════════════════════════════════════════════════════════════ *— Pre-flight readiness annotations (verified / advisory / unverified) * ════════════════════════════════════════════════════════════════ */
.run-readiness-missing-item {
  margin-bottom: 6px;
}
/* R90 — clickable "Go fix it" affordance on missing-field rows. */
.run-readiness-missing-item.is-fixable {
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background-color 100ms ease;
  position: relative;
}
.run-readiness-missing-item.is-fixable:hover {
  background: rgba(96,165,250,0.10);
}
.run-readiness-missing-item.is-fixable:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 1px;
}
.run-readiness-missing-item .run-readiness-fix-cta {
  display: inline-block;
  font-size: 0.68rem;
  color: #60a5fa;
  margin-left: 8px;
  opacity: 0.6;
  transition: opacity 100ms ease;
}
.run-readiness-missing-item.is-fixable:hover .run-readiness-fix-cta {
  opacity: 1;
}
.run-readiness-missing-item .run-readiness-hint {
  display: block;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  padding-left: 12px;
  line-height: 1.45;
}
.run-readiness-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.run-readiness-tag.tag-verified {
  background: rgba(34,197,94,0.18);
  color: #bbf7d0;
}
.run-readiness-tag.tag-advisory {
  background: rgba(56,189,248,0.18);
  color: #bae6fd;
}
.run-readiness-tag.tag-unverified {
  background: rgba(251,191,36,0.18);
  color: #fde68a;
}
.run-readiness-step.is-advisory {
  background: rgba(56,189,248,0.06);
  border-color: rgba(56,189,248,0.32);
}
.run-readiness-step.is-advisory .run-readiness-step-icon { color: #38bdf8; }
[data-theme="light"] .run-readiness-tag.tag-verified { background: rgba(21,128,61,0.16); color: #14532d; }
[data-theme="light"] .run-readiness-tag.tag-advisory { background: rgba(14,165,233,0.16); color: #0c4a6e; }
[data-theme="light"] .run-readiness-tag.tag-unverified { background: rgba(217,119,6,0.16); color: #78350f; }
[data-theme="light"] .run-readiness-step.is-advisory {
  background: rgba(14,165,233,0.06);
  border-color: rgba(14,165,233,0.45);
}
[data-theme="light"] .run-readiness-missing-item .run-readiness-hint { color: rgba(0,0,0,0.55); }

/* R117v39 Tier 5 — CCM modal scrolling. Tall connectors (e.g. YouTube
   with 8 op fields) were pushing Save off-screen. Constrain panel
   height + add scrollbar. Modal-box already has its own constraints; we
   target the panel where the form fields live. */
#connectorConfigModal .modal-box {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
#connectorConfigModal .ccm-panel {
  max-height: calc(90vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Ensure the modal footer/save row stays pinned outside the scroll */
#connectorConfigModal .modal-header,
#connectorConfigModal .ccm-tab-bar,
#connectorConfigModal .modal-footer {
  flex-shrink: 0;
}

/* R117v40 Tier C — wire + non-team-card dimming when a team is expanded.
   Body class toggled by expand/collapse handlers in public/app.js.
   Selected nodes/wires keep full opacity (handled by `.is-selected`
   class which existing code applies on click). */
body.r117v40-team-expanded-mode .wire-layer path:not(.is-selected) {
  opacity: 0.15;
  transition: opacity 200ms ease-out;
}
body.r117v40-team-expanded-mode .canvas-card:not(.is-inside-team):not(.is-selected) {
  opacity: 0.25;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

/* R117v47 Tier F — team-expanded member-card status badge.
   Driven by node._memberStatuses[agentId] which is set by the team-polling
   loop in launchCanvasAutomation. The inline-flex span is built by
   renderMemberStatusBadge() in app.js. */
.v47-member-status-badge { font-weight: 600; letter-spacing: 0.02em; }