/* Agentic Genie — shared design tokens */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Paper — pure white */
  --paper: #FFFFFF;
  --paper-2: #F4F7FC;
  --card: #FFFFFF;

  /* Ink — black + blue */
  --ink: #0A0A0A;
  --ink-2: #18181B;
  --ink-muted: #475569;
  --ink-faint: #94A3B8;
  --line: #E2E8F0;
  --line-2: #EEF2F7;

  /* Section accents — all blue tints */
  --tools: #1D4ED8;
  --tools-tint: #E6EEFE;
  --agents: #1E40AF;
  --agents-tint: #DDE7FB;
  --playbooks: #2563EB;
  --playbooks-tint: #E1EAFD;
  --exec: #1D4ED8;
  --exec-tint: #E6EEFE;

  --signal: #16A34A;
  --warn: #D97706;
  --err: #B91C1C;

  /* Type */
  --serif: 'Newsreader', 'Georgia', serif;
  --sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── App shell ─────────────────────────────────── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(1.2);
}

.topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.brand em {
  font-style: italic;
}

.nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}

.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.nav a:hover { color: var(--ink); }

.nav a.active {
  background: var(--ink);
  color: var(--paper);
}

.nav a.active.tools { background: var(--tools); }
.nav a.active.agents { background: var(--agents); }
.nav a.active.playbooks { background: var(--playbooks); }
.nav a.active.exec { background: var(--exec); }

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

.topbar-right .env {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

/* ── Content scaffold ─────────────────────────── */
.page {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.section-marquee {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}

/* Marquee header — eyebrow is dominant (large serif), title is the small
   italic subtitle below it, sub is the descriptive paragraph. */

.section-eyebrow {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.section-eyebrow .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
}

.section-eyebrow > span:not(.dot) {
  font-family: inherit;
}

.section-title {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0;
  font-weight: 500;
}

.section-title em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 17px;
  color: var(--ink);
  margin-left: 6px;
  font-weight: 400;
}

.section-sub {
  margin-top: 14px;
  font-size: 17px;
  color: var(--ink-muted);
  max-width: 560px;
  line-height: 1.45;
}

/* Right column on marquee */
.marquee-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.15s, background 0.15s;
}
.btn:hover { transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--paper-2); }

.btn-pill {
  font-size: 12px;
  padding: 6px 12px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Stats strip — minimal */
.stats-strip {
  display: flex;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat {
  flex: 1;
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }

.stat-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.stat-value {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  margin-top: 8px;
  letter-spacing: -0.02em;
}

.stat-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
  font-family: var(--mono);
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font-size: 14px;
}
.search input {
  border: 0;
  outline: 0;
  flex: 1;
  font: inherit;
  background: transparent;
  color: inherit;
}
.search input::placeholder { color: var(--ink-faint); }

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

.chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--card);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { color: var(--ink); }
.chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
}
.view-toggle button {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.view-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}

/* Card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: -1px;
}

.card {
  background: var(--card);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  min-height: 200px;
}
.card:hover { background: var(--paper-2); }

.card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink);
}

.card-icon.tools { background: var(--tools-tint); color: var(--tools); }
.card-icon.agents { background: var(--agents-tint); color: var(--agents); }
.card-icon.playbooks { background: var(--playbooks-tint); color: var(--playbooks); }
.card-icon.exec { background: var(--exec-tint); color: var(--exec); }

.card-name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.card-meta .pill {
  padding: 3px 8px;
  background: var(--paper-2);
  border-radius: 4px;
  color: var(--ink);
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper-2);
}
.tag.tools { background: var(--tools-tint); color: var(--tools); }
.tag.agents { background: var(--agents-tint); color: var(--agents); }
.tag.playbooks { background: var(--playbooks-tint); color: var(--playbooks); }
.tag.exec { background: var(--exec-tint); color: var(--exec); }

.card-corner {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  transition: all 0.15s;
}
.icon-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Status dots */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}
.status.warn::before { background: var(--warn); }
.status.err::before { background: var(--err); }
.status.idle::before { background: var(--ink-faint); }
.status.live::before {
  background: var(--signal);
  animation: pulse 1.6s ease-in-out infinite;
}

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

/* Tiny sparkline svg helper */
.spark {
  height: 28px;
  width: 100%;
}

/* Section divider with serif mark */
.divider-mark {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  padding: 32px 0;
  font-size: 24px;
  letter-spacing: 0.4em;
}

/* ── Builder / wizard chrome ─────────────────── */
.builder-head {
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.crumb {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.crumb a { color: var(--ink-muted); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--ink-faint); }
.builder-title {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 400;
}
.builder-title em { font-style: italic; }
.builder-sub { color: var(--ink-muted); margin-top: 10px; font-size: 15px; max-width: 560px; }
.builder-actions { display: flex; gap: 10px; align-items: center; }

/* Stepper */
.stepper {
  display: flex;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
  border-radius: 6px;
}
.step {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.step:last-child { border-right: 0; }
.step:hover { background: var(--paper-2); }
.step .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.step .num::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-block;
  background: var(--paper-2);
}
.step.done .num::before { background: var(--signal); border-color: var(--signal); }
.step.active .num::before { background: var(--ink); border-color: var(--ink); }
.step .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}
.step.active .name { color: var(--ink); }
.step.done .name { color: var(--ink); }
.step.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
}

/* Wizard layout */
.wiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  margin-top: 32px;
}
.wiz-main {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px 36px;
  border-radius: 6px;
}
.wiz-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wiz-h2 {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  font-weight: 400;
}
.wiz-h2 em { font-style: italic; }
.wiz-lede {
  color: var(--ink-muted);
  font-size: 15px;
  margin: 0 0 28px;
  max-width: 540px;
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field label .req { color: var(--err); margin-left: 2px; }
.field input[type=text],
.field input[type=url],
.field textarea,
.field select {
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink);
  outline: none;
  transition: border 0.15s, background 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ink);
  background: var(--card);
}
.field textarea { font-family: var(--mono); font-size: 12.5px; min-height: 200px; line-height: 1.5; resize: vertical; }
.field .hint { font-size: 12px; color: var(--ink-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Aside cards */
.aside-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 18px 20px;
}
.aside-card h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.aside-card h4 em { font-style: italic; }
.aside-card p {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.aside-card ul {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}
.aside-card .kbd {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink);
}

/* Wizard footer (next/back) */
.wiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.wiz-foot .save-state {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Type cards (agent type chooser) */
.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.type-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
  padding: 22px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.type-card:hover { background: var(--card); }
.type-card.selected {
  background: var(--card);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.type-card .check {
  position: absolute;
  top: 14px; right: 14px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
}
.type-card.selected .check {
  background: var(--ink);
  border-color: var(--ink);
  display: grid;
  place-items: center;
  color: var(--paper);
}
.type-card .ico {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
}
.type-card .ttl {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 4px 0 0;
}
.type-card .ttl em { font-style: italic; }
.type-card .desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.type-card .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}

/* Tool/agent picker rows */
.picker-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.picker-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background 0.15s;
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--paper-2); }
.picker-row.on { background: var(--paper-2); }
.picker-row .pico {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
}
.picker-row .pname {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}
.picker-row .pdesc {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.picker-row .ptag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cbox {
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  display: grid; place-items: center;
}
.picker-row.on .cbox {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Code blocks */
.code-block {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  background: #1a1a1d;
  color: #e8e6e1;
  padding: 18px 22px;
  border-radius: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  white-space: pre;
}
.code-block .k { color: #ffb86c; }
.code-block .s { color: #a8e6a3; }
.code-block .n { color: #f7c4ff; }
.code-block .c { color: #6c6c70; font-style: italic; }

/* Define-tools list */
.dtools {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 14px;
}
.dtool {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
}
.dtool:last-child { border-bottom: 0; }
.dtool .verb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper-2);
  width: fit-content;
}
.dtool .verb.GET { color: var(--tools); background: var(--tools-tint); }
.dtool .verb.POST { color: var(--playbooks); background: var(--playbooks-tint); }
.dtool .verb.PUT { color: var(--exec); background: var(--exec-tint); }
.dtool .verb.DELETE { color: var(--err); background: rgba(185,28,28,0.07); }
.dtool .path { font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted); }
.dtool .opname { font-family: var(--mono); font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.dtool .opdesc { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; line-height: 1.5; }
.dtool .toggle {
  width: 32px; height: 18px;
  border-radius: 10px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.dtool .toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--card);
  top: 1px; left: 1px;
  transition: left 0.15s;
}
.dtool.on .toggle { background: var(--ink); }
.dtool.on .toggle::after { left: 16px; }

/* Test panel */
.test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.test-pane { padding: 22px; }
.test-pane.left { background: var(--paper-2); border-right: 1px solid var(--line); }
.test-pane h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .section-eyebrow { font-size: 48px; }
  .wiz { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .section-eyebrow { font-size: 36px; }
  .topbar-inner { padding: 0 20px; }
  .page { padding: 0 20px 60px; }
  .nav { display: none; }
}

/* ── Sidebar navigation ────────────────────────
   Replaces the old horizontal topbar. The mount element is still #topbar on
   every page; .nav-mount marks it as holding sidebar chrome. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 248px;
  height: 100vh;
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 60;
}

.side-brand {
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line-2);
  font-size: 20px;
  flex-shrink: 0;
}

.side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 18px;
}

.side-group-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 18px 10px 8px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink-muted);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.side-link:hover { background: var(--paper-2); color: var(--ink); }

/* Active row: tinted pill plus a flush left marker, matching the app's
   square-edged accent language. */
.side-link.active {
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 500;
}
.side-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ink);
}

.side-ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  flex-shrink: 0;
}
.side-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-foot .env {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  align-self: flex-start;
}

.side-account {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.side-account:hover { background: var(--paper-2); }
.side-account-name {
  font-size: 13px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shift page content clear of the fixed sidebar. */
body.has-sidebar .page,
body.has-sidebar .chat-shell,
body.has-sidebar .full-bleed {
  margin-left: 248px;
}
body.has-sidebar .page { max-width: 1240px; }

@media (max-width: 1080px) {
  .sidebar { width: 68px; }
  .side-brand span, .side-label, .side-account-name, .side-group-title, .side-foot .env { display: none; }
  .side-brand { padding: 20px 0 18px; justify-content: center; }
  .side-link { justify-content: center; padding: 11px 0; }
  .side-link.active::before { left: -12px; }
  .side-account { justify-content: center; }
  body.has-sidebar .page,
  body.has-sidebar .chat-shell,
  body.has-sidebar .full-bleed { margin-left: 68px; }
}

/* ── Data table ─────────────────────────────────
   Hoisted from executions.html, which hand-rolled this; the admin screens
   need the same treatment, and three copies of it would drift. */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.table th {
  text-align: left; padding: 13px 18px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-muted); font-weight: 500;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.table td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable:hover td { background: var(--paper-2); cursor: pointer; }

/* ── Role / status badges ──────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 9px; border-radius: 3px; border: 1px solid;
  white-space: nowrap;
}
.badge.ok, .badge.succeeded { color: var(--signal); border-color: var(--signal); background: rgba(22,163,74,0.06); }
.badge.info, .badge.running { color: var(--playbooks); border-color: var(--playbooks); background: rgba(37,99,235,0.06); }
.badge.muted, .badge.queued { color: var(--ink-muted); border-color: var(--line); background: var(--paper-2); }
.badge.err, .badge.failed { color: var(--err); border-color: var(--err); background: rgba(185,28,28,0.06); }
.badge.warn, .badge.killed { color: var(--warn); border-color: var(--warn); background: rgba(217,119,6,0.06); }

/* ── Empty state ───────────────────────────────── */
.empty-hero {
  border: 1px dashed var(--line); border-radius: 6px; background: var(--paper-2);
  padding: 64px 32px; text-align: center; margin-top: 16px;
}
.empty-hero .ehico {
  width: 56px; height: 56px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center;
  margin: 0 auto 18px; color: var(--ink-muted);
}
.empty-hero h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 0 0 8px; letter-spacing: -0.01em; }
.empty-hero p { color: var(--ink-muted); font-size: 14.5px; margin: 0 auto 22px; max-width: 420px; line-height: 1.55; }

/* ── Modal ─────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; background: rgba(15,15,17,0.45); display: grid; place-items: center; z-index: 1000; }
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  width: 520px; max-width: 94vw; max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: flex-start; }
.modal-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.modal-title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; margin-top: 3px; line-height: 1.15; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 8px; }
.modal-x { background: transparent; border: 0; font-size: 22px; color: var(--ink-faint); cursor: pointer; line-height: 1; }

/* Password and email inputs were missing from the .field selector list, so
   they rendered unstyled next to their text-input siblings. */
.field input[type=email],
.field input[type=password],
.field input[type=number] {
  font: inherit; font-size: 14px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper-2); color: var(--ink); outline: none;
  transition: border 0.15s, background 0.15s;
}
.field input[type=email]:focus,
.field input[type=password]:focus,
.field input[type=number]:focus { border-color: var(--ink); background: var(--card); }

/* ── Two-pane master/detail ────────────────────── */
.pane-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
.pane {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  display: flex; flex-direction: column; overflow: hidden;
}
.pane-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pane-head .title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.pane-list { padding: 8px; max-height: 60vh; overflow-y: auto; }
.pane-row {
  padding: 11px 12px; border-radius: 5px; margin-bottom: 4px; cursor: pointer;
  border: 1px solid transparent; display: flex; align-items: center; gap: 10px;
}
.pane-row:hover { background: var(--paper-2); }
.pane-row.active { background: var(--paper-2); border-color: var(--line-2); }
.pane-body { padding: 22px 24px; }
.pane-empty { padding: 56px 24px; text-align: center; color: var(--ink-muted); font-size: 14px; }

/* Circular initial chip, used in user/team lists. */
.chip-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-2); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase;
}
@media (max-width: 900px) { .pane-wrap { grid-template-columns: 1fr; } }

/* ── Account menu + sidebar footer identity ─────
   The account control sits at the bottom of the rail and shows who you are
   and what you can do, so the role is part of the resting state rather than
   something you have to open a menu to discover. */
.side-account { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.side-account-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.side-account-name {
  font-size: 13.5px; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-account-role {
  font-size: 11.5px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-account-chev { color: var(--ink-faint); display: grid; place-items: center; }

.acc-head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.acc-name { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }
.acc-mail { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; word-break: break-all; }
.acc-item {
  display: flex; width: 100%; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 5px; background: transparent; border: 0;
  cursor: pointer; color: var(--ink); font-size: 13.5px; text-align: left;
  font-family: inherit;
}
.acc-item:hover { background: var(--paper-2); }
.acc-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; }

@media (max-width: 1080px) {
  /* Icon-only rail: keep the avatar, drop the identity text. */
  .side-account { grid-template-columns: auto; }
  .side-account-who, .side-account-chev { display: none; }
}