/* Shared base for all three exoteam site directions
   Each direction scopes its own styles under .dirA / .dirB / .dirC */

:root {
  --exo-blue: #5b8def;
  --exo-indigo: #7c69e0;
  --exo-pink: #e07ab0;
  --exo-amber: #e89e5b;
  --exo-green: #5db98a;
  --exo-ink: #1d1d1f;
  --exo-bone: #f5f5f7;
  --exo-midnight: #0a0a1a;

  /* R07 admin-chrome tokens — match landing's editorial-Apple vocabulary.
     `.exo-admin-*` namespace consumes these; `.dirA-*` (marketing) is
     independent. */
  --exo-ink-secondary: #6e6e73;
  --exo-ink-tertiary: #86868b;
  --exo-hairline: rgba(0,0,0,0.06);
  --exo-hairline-strong: rgba(0,0,0,0.10);
  --exo-surface: #ffffff;
  --exo-surface-sunken: #f5f5f7;
  --exo-accent: #5b8def;
  --exo-accent-success: #5db98a;
  --exo-accent-warning: #e89e5b;
  --exo-accent-destructive: #b3261e;
  --exo-radius-card: 22px;
  --exo-radius-input: 10px;
  --exo-radius-pill: 999px;
  --exo-shadow-soft: 0 1px 3px rgba(10,10,26,0.04), 0 12px 32px rgba(10,10,26,0.06);
}

* { box-sizing: border-box; }

.exo-logo { display: inline-block; vertical-align: middle; }
.exo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.exo-lockup-mark { width: 28px; height: 28px; flex-shrink: 0; }
.exo-lockup-text { font-family: 'Inter', sans-serif; letter-spacing: -0.04em; line-height: 1; display: inline-flex; align-items: baseline; }
.exo-lockup-text .nm { font-weight: 500; }
.exo-lockup-text .sf { font-weight: 200; opacity: 0.65; letter-spacing: -0.02em; }

.exo-site {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  color: #1d1d1f;
  line-height: 1.5;
}
.exo-site a { color: inherit; text-decoration: none; }
.exo-site button { font: inherit; cursor: pointer; }

/* ── Wordmark ── */
.exo-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.04em;
  line-height: 1;
}
.exo-mark-name { font-weight: 500; }
.exo-mark-suffix { font-weight: 200; letter-spacing: -0.02em; opacity: 0.65; }

/* ── Dashboard preview (shared, restyled per direction) ── */
.exo-dash {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18), 0 10px 30px -10px rgba(0,0,0,0.08);
  display: grid;
  grid-template-columns: 168px 1fr;
  grid-template-rows: 40px 1fr;
  font-size: 11px;
}
.exo-dash-tb {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #fbfbfb;
}
.exo-dash-tb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.10); }
.exo-dash-tb-crumb { margin-left: 12px; color: #6e6e73; font-size: 11px; }
.exo-dash-tb-crumb b { color: #1d1d1f; font-weight: 600; }
.exo-dash-tb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; color: #6e6e73; font-size: 10.5px; }
.exo-dash-tb-pill { background: #007aff; color: #fff; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 10.5px; }

.exo-dash-sb {
  background: #fafafa;
  border-right: 1px solid rgba(0,0,0,0.06);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exo-dash-sb-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 12px;
}
.exo-dash-sb-mark {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6);
}
.exo-dash-sb-name { font-weight: 600; font-size: 11px; letter-spacing: -0.02em; color: #000; }
.exo-dash-sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px;
  font-size: 11px; color: #1d1d1f;
}
.exo-dash-sb-item { transition: background 0.12s ease; }
.exo-dash-sb-item:hover { background: rgba(0,0,0,0.04); }
.exo-dash-sb-item.active { background: rgba(0,122,255,0.10); color: #007aff; font-weight: 500; }
.exo-dash-sb-item.active:hover { background: rgba(0,122,255,0.14); }
.exo-dash-sb-item-icon { width: 12px; height: 12px; opacity: 0.55; }
.exo-dash-sb-item.active .exo-dash-sb-item-icon { opacity: 1; }
.exo-dash-sb-count { margin-left: auto; font-size: 9.5px; color: #a1a1a6; }
.exo-dash-sb-item.active .exo-dash-sb-count { color: #007aff; }
.exo-dash-sb-label {
  padding: 14px 8px 4px;
  font-size: 9.5px; font-weight: 600; color: #a1a1a6;
  letter-spacing: 0.02em;
}

.exo-dash-main { display: grid; grid-template-columns: 1.1fr 1fr; min-width: 0; }
.exo-dash-list { border-right: 1px solid rgba(0,0,0,0.06); padding: 6px; overflow: hidden; }
.exo-dash-list-row { padding: 8px 10px; border-radius: 8px; margin-bottom: 1px; }
.exo-dash-list-row.sel { background: #007aff; color: #fff; }
.exo-dash-list-row-top { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.exo-dash-list-row-from { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exo-dash-list-row-time { font-size: 9.5px; opacity: 0.7; }
.exo-dash-list-row-sub { font-size: 10px; opacity: 0.85; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exo-dash-list-row-snip { font-size: 9.5px; opacity: 0.55; margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exo-dash-list-chip {
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 9px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,149,0,0.15); color: #c46e00; margin-top: 4px; font-weight: 500;
}
.exo-dash-list-row.sel .exo-dash-list-chip { background: rgba(255,255,255,0.22); color: #fff; }

.exo-dash-detail { padding: 14px 16px; min-width: 0; }
.exo-dash-detail-h { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; }
.exo-dash-detail-meta { font-size: 9.5px; color: #86868b; margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.exo-dash-draft {
  margin-top: 10px;
  border: 1px solid rgba(0,122,255,0.15);
  background: rgba(0,122,255,0.04);
  border-radius: 10px;
  padding: 8px 10px;
}
.exo-dash-draft-label { font-size: 9px; font-weight: 600; color: #007aff; letter-spacing: 0.02em; text-transform: uppercase; }
.exo-dash-draft-body { font-size: 10.5px; color: #1d1d1f; margin-top: 4px; line-height: 1.45; }
.exo-dash-draft-foot { display: flex; gap: 5px; margin-top: 8px; }
.exo-dash-draft-btn {
  font-size: 9.5px; padding: 3px 9px; border-radius: 999px;
  background: #007aff; color: #fff; font-weight: 600;
}
.exo-dash-draft-btn.gh { background: rgba(0,0,0,0.06); color: #1d1d1f; }

/* ── Overview mock (mirrors /today) ── */
.exo-dash-overview { grid-template-columns: 200px 1fr 240px; font-size: 12px; }
.exo-dash-overview .exo-dash-sb { padding: 12px 10px; }
.exo-dash-overview .exo-dash-tb { grid-column: 1 / -1; }

/* Right-side AI chat panel (sibling to .exo-dash-sb) */
.exo-dash-rb {
  background: #fafafa;
  border-left: 1px solid rgba(0,0,0,0.06);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden; min-height: 0;
}
.exo-dash-rb-h { display: flex; align-items: center; gap: 7px; padding: 0 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
.exo-dash-rb-h-dot { width: 6px; height: 6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2.5px rgba(52,199,89,0.18); }
.exo-dash-rb-h-meta { margin-left: auto; font-size: 9px; color: #a1a1a6; font-weight: 400; letter-spacing: 0.02em; }
.exo-dash-rb-msgs { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; padding: 0 2px; }
.exo-dash-rb-msg { font-size: 10px; line-height: 1.5; padding: 7px 10px; border-radius: 11px; max-width: 95%; }
.exo-dash-rb-msg.me { align-self: flex-end; background: #007aff; color: #fff; border-bottom-right-radius: 4px; }
.exo-dash-rb-msg.bot { align-self: flex-start; background: #fff; color: #1d1d1f; border: 1px solid rgba(0,0,0,0.05); border-bottom-left-radius: 4px; }
.exo-dash-rb-action { margin-top: 6px; padding: 6px 8px; background: rgba(0,122,255,0.05); border: 1px solid rgba(0,122,255,0.14); border-radius: 8px; font-size: 9px; color: #007aff; font-weight: 600; }
.exo-dash-rb-action-body { font-size: 9.5px; color: #1d1d1f; font-weight: 400; margin-top: 3px; line-height: 1.45; }
.exo-dash-rb-suggest { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px 0; }
.exo-dash-rb-chip { font-size: 9.5px; padding: 5px 9px; border-radius: 8px; background: #fff; border: 1px solid rgba(0,0,0,0.05); color: #1d1d1f; cursor: pointer; }
.exo-dash-rb-input { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 9px; margin-top: 2px; }
.exo-dash-rb-input-text { font-size: 10px; color: #a1a1a6; flex: 1; }
.exo-dash-rb-input-send { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #007aff; color: #fff; }

/* revert overview main to single column (chat lives outside now) */
.exo-dash-ov-main { padding: 18px 22px 22px; overflow: hidden; background: #fff; display: block; }
.exo-dash-sb-ver { margin-left: auto; font-size: 9.5px; color: #a1a1a6; letter-spacing: 0.04em; }
.exo-dash-tb-org { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: rgba(0,0,0,0.04); border-radius: 999px; font-size: 10.5px; }
.exo-ov-lens { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.exo-dash-ov-main { padding: 18px 22px 22px; overflow: hidden; background: #fff; display: block; }
.exo-dash-ov-col { min-width: 0; }
.exo-dash-ov-col.hero { margin-bottom: 8px; }

/* AI chat side panel inside overview */
.exo-ov-chat { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(91,141,239,0.04), #fff 60%); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 12px; gap: 8px; min-height: 100%; }
.exo-ov-chat-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
.exo-ov-chat-h-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,0.18); }
.exo-ov-chat-sub { font-size: 10.5px; color: #86868b; margin-top: -4px; margin-bottom: 4px; }
.exo-ov-chat-msgs { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.exo-ov-chat-msg { font-size: 10.5px; line-height: 1.5; padding: 8px 11px; border-radius: 12px; max-width: 92%; }
.exo-ov-chat-msg.me { align-self: flex-end; background: #007aff; color: #fff; border-bottom-right-radius: 4px; }
.exo-ov-chat-msg.bot { align-self: flex-start; background: rgba(0,0,0,0.04); color: #1d1d1f; border-bottom-left-radius: 4px; }
.exo-ov-chat-msg.bot b { color: #1d1d1f; }
.exo-ov-chat-action { margin-top: 6px; padding: 7px 9px; background: #fff; border: 1px solid rgba(0,122,255,0.18); border-radius: 9px; font-size: 9.5px; color: #007aff; font-weight: 600; }
.exo-ov-chat-action-body { font-size: 10px; color: #1d1d1f; font-weight: 400; margin-top: 3px; line-height: 1.45; }
.exo-ov-chat-suggest { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.exo-ov-chat-chip { font-size: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,0.04); color: #1d1d1f; cursor: pointer; }
.exo-ov-chat-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; margin-top: 4px; }
.exo-ov-chat-input-text { font-size: 10.5px; color: #a1a1a6; flex: 1; }
.exo-ov-chat-input-kbd { font-size: 9px; color: #86868b; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.04); font-family: ui-monospace, SF Mono, monospace; }

/* compress bundle preview grid when in two-col overview */
.exo-dash-ov-col .exo-dash-ov-grid { grid-template-columns: 1fr 1fr; }
.exo-dash-ov-hero { margin-bottom: 14px; }
.exo-dash-ov-greeting { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: #1d1d1f; }
.exo-dash-ov-meta { font-size: 13px; font-weight: 400; color: #6e6e73; letter-spacing: -0.01em; }
.exo-dash-ov-orgs { font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; letter-spacing: 0.02em; }
.exo-dash-ov-summary { font-size: 12.5px; color: #6e6e73; margin-top: 4px; }

.exo-dash-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.exo-ov-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.exo-ov-card-h { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.04); margin-bottom: 6px; }
.exo-ov-card-icon { font-size: 11px; color: #1d1d1f; }
.exo-ov-card-title { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.exo-ov-card-count { font-size: 10px; color: #6e6e73; background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 999px; font-weight: 500; }
.exo-ov-card-open { margin-left: auto; font-size: 10.5px; color: #6e6e73; }
.exo-ov-card-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }

.exo-ov-subhead { font-size: 9.5px; font-weight: 600; color: #a1a1a6; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 0 2px; }

.exo-ov-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.exo-ov-row-left { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 22px; }
.exo-ov-row-time { font-size: 10px; color: #6e6e73; font-family: ui-monospace, 'SF Mono', monospace; }
.exo-ov-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.exo-ov-row-title { font-size: 11.5px; color: #1d1d1f; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exo-ov-row-sub { font-size: 10.5px; color: #6e6e73; }
.exo-ov-row-muted { color: #a1a1a6; font-weight: 400; }
.exo-ov-row-right { font-size: 10px; color: #6e6e73; }

.exo-ov-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 500; background: rgba(52,199,89,0.15); color: #1f7a39; }
.exo-ov-pill.warn { background: rgba(255,149,0,0.16); color: #a65a00; }
.exo-ov-pill.bad { background: rgba(255,59,48,0.14); color: #a32820; }

.exo-ov-brief { margin-top: 10px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 12px 14px; }
.exo-ov-brief-body { padding-top: 4px; }
.exo-ov-brief-h { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.exo-ov-brief-sub { font-size: 11px; color: #6e6e73; margin-top: 6px; font-weight: 500; }
.exo-ov-brief-p { font-size: 11.5px; color: #1d1d1f; margin-top: 4px; line-height: 1.5; }

/* ── Telegram bubble preview (shared) ── */
.exo-tg {
  background: #e7f2ff;
  border-radius: 28px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.4;
}
.exo-tg-msg {
  padding: 9px 13px;
  border-radius: 18px;
  background: #fff;
  align-self: flex-start;
  max-width: 78%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.exo-tg-msg.me {
  background: #007aff;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}
.exo-tg-msg.bot { border-bottom-left-radius: 6px; }
.exo-tg-msg b { font-weight: 600; }
.exo-tg-msg .tg-sub { font-size: 11.5px; opacity: 0.7; margin-top: 3px; }

/* ── reusable text helpers ── */
.exo-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #86868b;
}

/* prevent design_canvas chrome bleeding through */
[data-artboard] { color: #1d1d1f; }

/* ─────────────── Mobile (<=760px) ─────────────── */
@media (max-width: 760px) {
  /* The dashboard frames use `zoom` (set in site-a.jsx) to scale the
     desktop layout for mobile. We don't redo the inner grid columns
     here so legibility/zoom math stays one-stop. */
  .exo-lockup-mark { width: 22px; height: 22px; }
}

/* ─────────────── F018 — auth + onboarding wizard ─────────────── */

/* Shell for full-bleed auth screens (sign-in form, post-link landing). */
.exo-auth-shell {
  min-height: 100vh;
  background: var(--exo-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--exo-ink);
}

.exo-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow:
    0 1px 2px rgba(10, 10, 26, 0.04),
    0 8px 24px rgba(10, 10, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exo-auth-card--centred { align-items: center; text-align: center; gap: 20px; padding-top: 48px; padding-bottom: 48px; }

.exo-auth-title {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.exo-auth-body {
  font-size: 14px;
  line-height: 1.5;
  color: #4a4a52;
  margin: 0 0 12px 0;
}

.exo-auth-label {
  display: block;          /* stack label above input — was inline by default,
                              which made the ICP firmographics cells lay label
                              next to input when the column had enough width. */
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #4a4a52;
  margin-top: 8px;
}
/* Inputs the auth-label sits above should always span their cell so the
   stacking reads consistently regardless of container width. */
.exo-auth-input { width: 100%; box-sizing: border-box; }

.exo-auth-input {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid rgba(10, 10, 26, 0.14);
  border-radius: 10px;
  background: #fff;
  color: var(--exo-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  outline: none;
}
.exo-auth-input:focus {
  border-color: var(--exo-blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
}
.exo-auth-input:disabled { background: #f8f8f9; color: #8a8a92; }

.exo-auth-submit {
  margin-top: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: var(--exo-ink);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.exo-auth-submit:hover:not(:disabled) { background: #2a2a32; }
.exo-auth-submit:active:not(:disabled) { transform: translateY(1px); }
.exo-auth-submit:disabled { background: #b5b5bd; cursor: not-allowed; }

/* Onboarding "← Back" — visually subordinate to the primary CTA, but
   present enough to be reachable. Sits on the bottom-left of each step's
   action row (see onboard-step-*.jsx). Padding + radius match
   .exo-auth-submit so the row baseline stays even. */
.exo-step-back {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  border: 1px solid rgba(10,10,26,0.10);
  border-radius: 10px;
  background: transparent;
  color: var(--exo-ink-secondary);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, transform 80ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.exo-step-back:hover:not(:disabled) {
  border-color: rgba(10,10,26,0.22);
  color: var(--exo-ink);
  background: rgba(10,10,26,0.03);
}
.exo-step-back:active:not(:disabled) { transform: translateY(1px); }
.exo-step-back:focus-visible {
  outline: 2px solid var(--exo-blue, #007aff);
  outline-offset: 2px;
}
.exo-step-back:disabled { opacity: 0.5; cursor: not-allowed; }

.exo-auth-tos {
  font-size: 11.5px;
  color: #8a8a92;
  line-height: 1.5;
  margin-top: 8px;
}
.exo-auth-tos a { color: #4a4a52; text-decoration: underline; }

.exo-auth-hint { font-size: 12.5px; color: #6e6e73; }
.exo-auth-error {
  font-size: 13px;
  background: #fdecea;
  color: #b3261e;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 4px;
}

.exo-link {
  background: none;
  border: none;
  color: var(--exo-blue);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.exo-link:hover { text-decoration: underline; }

/* Inline spinner */
.exo-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(91, 141, 239, 0.22);
  border-top-color: var(--exo-blue);
  animation: exo-spin 800ms linear infinite;
}
@keyframes exo-spin {
  to { transform: rotate(360deg); }
}

/* ----- Onboard wizard chrome ----- */

.exo-onboard {
  min-height: 100vh;
  background: var(--exo-bone);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--exo-ink);
}

.exo-onboard-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(10, 10, 26, 0.06);
}
.exo-onboard-logo { height: 22px; }
.exo-onboard-progress {
  display: flex;
  gap: 0;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.exo-onboard-step {
  font-size: 11.5px;
  font-weight: 500;
  color: #b5b5bd;
  padding: 5px 12px;
  position: relative;
}
.exo-onboard-step + .exo-onboard-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 10px;
  background: rgba(10, 10, 26, 0.08);
  transform: translateY(-50%);
}
.exo-onboard-step--done { color: #5db98a; }
.exo-onboard-step--current { color: var(--exo-ink); font-weight: 600; }
.exo-onboard-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: #6e6e73;
}
.exo-onboard-bar-user { color: var(--exo-ink); font-weight: 500; }

.exo-onboard-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 24px 100px;
}

/* Default data-entry step card. Wide enough to host 3-col grids
   ("HQ country · HQ city · Funding stage") comfortably. Use
   .exo-step--narrow on hero / signup / done where less is more. */
.exo-step {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  box-shadow:
    0 1px 2px rgba(10, 10, 26, 0.04),
    0 8px 24px rgba(10, 10, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exo-step--narrow { max-width: 460px; }
/* Wide screens get extra breathing room so multi-col grids don't
   feel cramped on 14"+ displays. Mobile keeps the same width via
   the responsive padding rule further down. */
@media (min-width: 1280px) {
  .exo-step { max-width: 880px; }
}
.exo-step-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px 0;
  line-height: 1.25;
}
.exo-step-body {
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a52;
  margin: 0 0 12px 0;
}
.exo-step-row { display: flex; gap: 12px; align-items: flex-end; }
.exo-step-row > * { flex: 1; }
/* Shared multi-column grids for any step. Each cell needs a minimum
   ~220px to fit "Funding stage" label + a placeholder input without
   crushing. `auto-fit` lets the row drop to 2 cols (and then 1) as
   the container narrows — no manual breakpoint needed. */
.exo-step-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.exo-step-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.exo-step-skip {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: #8a8a92;
}

/* Mobile sweep for wizard */
@media (max-width: 760px) {
  .exo-onboard-bar { flex-wrap: wrap; padding: 12px 16px; }
  .exo-onboard-progress { order: 10; width: 100%; padding: 4px 0; justify-content: flex-start; }
  .exo-step { padding: 28px 22px; border-radius: 12px; }
  .exo-step-title { font-size: 20px; }
  .exo-onboard-main { padding: 24px 14px 60px; }
}

/* ─────────────── F018 Phase 5 — pricing page ─────────────── */

.exo-pricing {
  min-height: 100vh;
  background: var(--exo-bone);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--exo-ink);
  padding: 80px 24px 100px;
}
.exo-pricing-header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.exo-pricing-title { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
.exo-pricing-sub { font-size: 16px; color: #4a4a52; margin: 0 0 28px; }
.exo-pricing-toggle {
  display: inline-flex;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(10,10,26,0.06);
}
.exo-pricing-toggle-btn {
  border: none;
  background: transparent;
  font: inherit;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: #6e6e73;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.exo-pricing-toggle-btn.is-active {
  background: var(--exo-ink);
  color: #fff;
}
.exo-pricing-save {
  font-size: 11px;
  background: #5db98a;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.exo-pricing-toggle-btn.is-active .exo-pricing-save { background: rgba(255,255,255,0.16); color: #fff; }

.exo-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .exo-pricing-grid { grid-template-columns: 1fr; }
}

.exo-pricing-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(10,10,26,0.04), 0 8px 24px rgba(10,10,26,0.06);
  display: flex;
  flex-direction: column;
}
.exo-pricing-card.is-highlighted {
  background: var(--exo-ink);
  color: #fff;
}
.exo-pricing-card.is-highlighted .exo-pricing-card-tagline,
.exo-pricing-card.is-highlighted .exo-pricing-card-annual { color: rgba(255,255,255,0.7); }
.exo-pricing-card.is-highlighted .exo-pricing-card-price-period { color: rgba(255,255,255,0.7); }
.exo-pricing-card.is-highlighted .exo-pricing-features li { color: rgba(255,255,255,0.92); }
.exo-pricing-card.is-highlighted .exo-pricing-tick { background: rgba(255,255,255,0.16); color: #fff; }
.exo-pricing-card.is-highlighted .exo-auth-submit { background: #fff; color: var(--exo-ink); }
.exo-pricing-card.is-highlighted .exo-auth-submit:hover:not(:disabled) { background: #f0f0f3; }

.exo-pricing-card-name { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.exo-pricing-card-tagline { font-size: 13px; color: #6e6e73; margin: 4px 0 20px; }
.exo-pricing-card-price { display: baseline; }
.exo-pricing-card-price-amount { font-size: 44px; font-weight: 600; letter-spacing: -0.025em; }
.exo-pricing-card-price-period { font-size: 16px; color: #6e6e73; margin-left: 6px; }
.exo-pricing-card-annual { font-size: 12.5px; color: #6e6e73; margin-top: 2px; }

.exo-pricing-features { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.exo-pricing-features li { font-size: 13.5px; line-height: 1.45; display: flex; align-items: baseline; gap: 10px; }
.exo-pricing-tick {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(91,141,239,0.16);
  color: var(--exo-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 18px;
}
.exo-pricing-foot { text-align: center; margin-top: 36px; font-size: 13px; color: #6e6e73; }
.exo-pricing-foot a { color: var(--exo-blue); }

/* ─────────────── R07 / T0013 — admin chrome (.exo-admin-*) ───────────────

The signed-in admin surface (Workspace Home + Settings). Matches the
landing's editorial-Apple vocabulary so the signed-in chrome reads as the
same product as exoteam.ai. The `.dirA-*` namespace stays scoped to
marketing; `.exo-admin-*` is its sibling for the signed-in surface.

Vocabulary:
  - Shell:  .exo-admin, .exo-admin-shell, .exo-admin-main, .exo-admin-page-title
  - Header: .exo-admin-header (lockup · switcher · nav · profile chip)
  - Nav:    .exo-admin-nav, .exo-admin-nav-item (with .is-active)
  - Layout: .exo-admin-layout, .exo-admin-sidebar, .exo-admin-sidebar-item
  - Pane:   .exo-admin-pane, .exo-admin-pane-header, .exo-admin-title
  - Cards:  .exo-admin-card (22px hairline), .exo-admin-card--hero,
            .exo-admin-card--danger, .exo-admin-status-card
  - Pills:  .exo-admin-pill (+ .is-success / .is-warning / .is-destructive /
            .is-muted — hairline + accent text, NO background fill)
  - Forms:  .exo-admin-input, .exo-admin-textarea, .exo-admin-select,
            .exo-admin-label, .exo-admin-hint
  - Buttons:.exo-admin-btn (pill, ink fill), .exo-admin-btn--ghost,
            .exo-admin-btn--destructive, .exo-admin-btn--link
  - Banners:.exo-admin-banner (+ .is-trial / .is-info / .is-warning)
  - Modal:  .exo-admin-modal-backdrop, .exo-admin-modal
  - Misc:   .exo-admin-divider, .exo-admin-empty, .exo-admin-status-row,
            .exo-admin-list-row
*/

/* — Shell — */
.exo-admin {
  min-height: 100vh;
  background: var(--exo-bone);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--exo-ink);
}
.exo-admin-shell {
  /* Body wrapper below the sticky header — gives panes a clean canvas. */
  display: block;
}

/* — Header (matches .dirA-nav: backdrop blur, sticky, hairline bottom) — */
.exo-admin-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 32px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 20;
}
.exo-admin-header-logo { height: 22px; display: inline-flex; align-items: center; }
.exo-admin-header-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--exo-ink-secondary);
}
.exo-admin-header-user { color: var(--exo-ink); font-weight: 500; }

.exo-admin-nav {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
}
.exo-admin-nav-item {
  color: var(--exo-ink);
  text-decoration: none;
  padding: 4px 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  opacity: 0.72;
  transition: opacity 0.12s ease;
}
.exo-admin-nav-item:hover { opacity: 1; }
.exo-admin-nav-item.is-active { opacity: 1; font-weight: 500; }

/* — Layout (sidebar + pane) — */
.exo-admin-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
}

.exo-admin-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
}
.exo-admin-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--exo-ink);
  text-align: left;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  opacity: 0.72;
}
.exo-admin-sidebar-item:hover { opacity: 1; }
.exo-admin-sidebar-item.is-active {
  opacity: 1;
  color: var(--exo-accent);
  border-left-color: var(--exo-accent);
  font-weight: 500;
}

/* — Main + page title — */
.exo-admin-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.exo-admin-pane {
  /* The right-hand pane under .exo-admin-layout. Plain canvas: no
     background, no border — cards inside provide the visual structure. */
  min-height: 240px;
}
.exo-admin-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.exo-admin-page-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
  color: var(--exo-ink);
}
.exo-admin-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.2;
  color: var(--exo-ink);
}
.exo-admin-subtitle {
  font-size: 14px;
  color: var(--exo-ink-secondary);
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 640px;
}
.exo-admin-section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--exo-ink);
  margin: 0 0 12px;
}
.exo-admin-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--exo-ink-tertiary);
}

.exo-admin-divider {
  border: none;
  border-top: 1px solid var(--exo-hairline);
  margin: 28px 0;
}

/* — Card — */
.exo-admin-card {
  background: var(--exo-surface);
  border: 1.5px solid var(--exo-hairline);
  border-radius: var(--exo-radius-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}
.exo-admin-card + .exo-admin-card { margin-top: 18px; }
.exo-admin-card--interactive {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.exo-admin-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--exo-shadow-soft);
}
.exo-admin-card--hero {
  padding: 32px 34px;
  box-shadow: 0 1px 2px rgba(10,10,26,0.03), 0 12px 32px rgba(10,10,26,0.04);
}
.exo-admin-card--danger {
  border-color: rgba(179,38,30,0.22);
}

/* — Status row (Workspace Home 3 quick-status tiles) — */
.exo-admin-status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.exo-admin-status-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: var(--exo-surface);
  border: 1.5px solid var(--exo-hairline);
  border-radius: var(--exo-radius-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.exo-admin-status-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--exo-shadow-soft);
}
.exo-admin-status-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--exo-ink);
}
.exo-admin-status-detail {
  font-size: 13.5px;
  color: var(--exo-ink-secondary);
  line-height: 1.5;
}

/* — Pill (hairline + accent text, NO background fill) — */
.exo-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--exo-radius-pill);
  border: 1px solid currentColor;
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--exo-ink-tertiary);
  line-height: 1.4;
}
.exo-admin-pill.is-success { color: var(--exo-accent-success); }
.exo-admin-pill.is-warning { color: var(--exo-accent-warning); }
.exo-admin-pill.is-destructive { color: var(--exo-accent-destructive); }
.exo-admin-pill.is-muted { color: var(--exo-ink-tertiary); }
.exo-admin-pill.is-accent { color: var(--exo-accent); }

/* — Inputs — */
.exo-admin-input,
.exo-admin-textarea,
.exo-admin-select {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--exo-hairline-strong);
  border-radius: var(--exo-radius-input);
  background: var(--exo-surface);
  color: var(--exo-ink);
  width: 100%;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.exo-admin-input:focus,
.exo-admin-textarea:focus,
.exo-admin-select:focus {
  border-color: var(--exo-accent);
  box-shadow: 0 0 0 3px rgba(91,141,239,0.15);
}
.exo-admin-input:disabled,
.exo-admin-textarea:disabled,
.exo-admin-select:disabled {
  background: var(--exo-bone);
  color: var(--exo-ink-tertiary);
  cursor: not-allowed;
}
.exo-admin-textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.55;
}
.exo-admin-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--exo-ink-secondary);
  margin: 16px 0 6px;
}
.exo-admin-hint {
  font-size: 12.5px;
  color: var(--exo-ink-tertiary);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* — Buttons — */
.exo-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--exo-radius-pill);
  border: 1.5px solid var(--exo-ink);
  background: var(--exo-ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, opacity 0.12s ease;
  text-decoration: none;
}
.exo-admin-btn:hover:not(:disabled) { background: #000; border-color: #000; }
.exo-admin-btn:active:not(:disabled) { transform: translateY(1px); }
.exo-admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.exo-admin-btn--ghost {
  background: transparent;
  color: var(--exo-ink);
  border-color: var(--exo-hairline-strong);
}
.exo-admin-btn--ghost:hover:not(:disabled) {
  background: rgba(0,0,0,0.04);
  border-color: var(--exo-hairline-strong);
  color: var(--exo-ink);
}

.exo-admin-btn--destructive {
  background: var(--exo-accent-destructive);
  border-color: var(--exo-accent-destructive);
  color: #fff;
}
.exo-admin-btn--destructive:hover:not(:disabled) {
  background: #8f1e18;
  border-color: #8f1e18;
}

.exo-admin-btn--link {
  background: transparent;
  border: none;
  color: var(--exo-accent);
  padding: 0;
  font-weight: 500;
  font-size: 13.5px;
  border-radius: 0;
}
.exo-admin-btn--link:hover:not(:disabled) {
  background: transparent;
  text-decoration: underline;
}
.exo-admin-btn--link.is-destructive { color: var(--exo-accent-destructive); }
.exo-admin-btn--link.is-muted { color: var(--exo-ink-tertiary); }

/* — Banner (small inline message blocks) — */
.exo-admin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border: 1.5px solid var(--exo-hairline);
  border-radius: var(--exo-radius-card);
  background: var(--exo-surface);
  font-size: 14px;
  color: var(--exo-ink);
  line-height: 1.5;
}
.exo-admin-banner a { color: var(--exo-accent); }
.exo-admin-banner.is-trial {
  border-color: rgba(232,158,91,0.30);
  background: rgba(232,158,91,0.06);
  color: #7a4c00;
}
.exo-admin-banner.is-trial a { color: #7a4c00; font-weight: 600; }
.exo-admin-banner.is-info {
  border-color: rgba(91,141,239,0.22);
  background: rgba(91,141,239,0.05);
}
.exo-admin-banner.is-success {
  border-color: rgba(93,185,138,0.32);
  background: rgba(93,185,138,0.06);
  color: #1d6e3d;
}
.exo-admin-banner.is-error {
  border-color: rgba(179,38,30,0.22);
  background: rgba(179,38,30,0.06);
  color: var(--exo-accent-destructive);
}

/* — Form rows — */
.exo-admin-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.exo-admin-form-row .exo-admin-input,
.exo-admin-form-row .exo-admin-select { flex: 1; }

/* — List rows (members list, workspaces list, audit log) — */
.exo-admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exo-admin-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--exo-surface);
  border: 1px solid var(--exo-hairline);
  border-radius: 12px;
}
.exo-admin-list-row strong { color: var(--exo-ink); }
.exo-admin-list-row-meta {
  font-size: 12px;
  color: var(--exo-ink-tertiary);
  margin-top: 2px;
}

/* — Empty state — */
.exo-admin-empty {
  text-align: center;
  padding: 36px 24px;
  color: var(--exo-ink-tertiary);
  font-size: 13.5px;
  line-height: 1.55;
}

/* — Modal — */
.exo-admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 20px;
}
.exo-admin-modal {
  background: var(--exo-surface);
  border-radius: 18px;
  padding: 26px 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.24);
}
.exo-admin-modal-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--exo-ink);
}
.exo-admin-modal-body {
  font-size: 14px;
  color: var(--exo-ink);
  line-height: 1.55;
  margin: 0 0 16px;
}
.exo-admin-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* — Danger zone (Profile delete) — */
.exo-admin-danger-zone-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  justify-content: space-between;
}

/* — Mobile sweep — minimal degradation, not phone-first. — */
@media (max-width: 760px) {
  .exo-admin-header { padding: 12px 18px; flex-wrap: wrap; }
  .exo-admin-header-right { margin-left: 0; width: 100%; justify-content: flex-end; }
  .exo-admin-nav { gap: 14px; font-size: 13px; }
  .exo-admin-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px 60px;
  }
  .exo-admin-main { padding: 20px 18px 60px; }
  .exo-admin-sidebar {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding: 0;
    border-bottom: 1px solid var(--exo-hairline);
  }
  .exo-admin-sidebar-item {
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 10px 12px;
  }
  .exo-admin-sidebar-item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--exo-accent);
  }
  .exo-admin-card { padding: 20px; }
  .exo-admin-card--hero { padding: 24px 20px; }
  .exo-admin-status-row { grid-template-columns: 1fr; }
  .exo-admin-page-title { font-size: 24px; }
  .exo-admin-title { font-size: 20px; }
  .exo-admin-card--interactive:hover,
  .exo-admin-status-card:hover { transform: none; box-shadow: none; }
}

/* ===== F018T28 — reusable loading / error / empty states =====

Three states every async surface needs. Apply via:
- <div class="exo-state exo-state-loading"><div class="exo-spinner"></div></div>
- <div class="exo-state exo-state-empty"><h4>...</h4><p>...</p><button class="exo-btn">CTA</button></div>
- <div class="exo-state exo-state-error" role="alert"><h4>...</h4><p>...</p><button class="exo-btn">Retry</button></div>

Plus:
- .exo-skeleton — for content-shaped loading placeholders
- .exo-toast — for transient success / error messages
*/

.exo-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  min-height: 200px;
}
.exo-state h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--exo-ink);
  letter-spacing: -0.01em;
}
.exo-state p {
  margin: 0;
  font-size: 14px;
  color: #5a5a64;
  max-width: 360px;
  line-height: 1.5;
}
.exo-state .exo-btn { margin-top: 4px; }

.exo-state-loading { color: #8a8a92; }
.exo-state-loading p { font-size: 13px; }

.exo-state-empty { background: rgba(10, 10, 26, 0.015); border-radius: 12px; }
.exo-state-empty h4 { color: #4a4a52; }

.exo-state-error {
  background: rgba(220, 64, 64, 0.06);
  border: 1px solid rgba(220, 64, 64, 0.18);
  border-radius: 12px;
}
.exo-state-error h4 { color: #b03030; }
.exo-state-error p { color: #743030; }

/* Inline error banner — narrower, for forms / cards */
.exo-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(220, 64, 64, 0.08);
  border: 1px solid rgba(220, 64, 64, 0.2);
  border-radius: 10px;
  color: #743030;
  font-size: 13.5px;
  line-height: 1.45;
}
.exo-error-banner-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #743030;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  opacity: 0.6;
}
.exo-error-banner-dismiss:hover { opacity: 1; }

/* Skeleton placeholders — animated grey blocks */
.exo-skeleton {
  background: linear-gradient(
    90deg,
    rgba(10, 10, 26, 0.05) 25%,
    rgba(10, 10, 26, 0.1) 50%,
    rgba(10, 10, 26, 0.05) 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: exo-skeleton-shimmer 1.4s ease-in-out infinite;
  display: inline-block;
}
.exo-skeleton-line { height: 14px; width: 100%; border-radius: 4px; }
.exo-skeleton-line.sm { height: 10px; width: 60%; }
.exo-skeleton-line.lg { height: 18px; width: 80%; }
.exo-skeleton-block { height: 80px; width: 100%; border-radius: 10px; }
@keyframes exo-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast — bottom-right, auto-dismissing */
.exo-toast-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: 360px;
}
.exo-toast {
  background: var(--exo-ink);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(10, 10, 26, 0.24);
  animation: exo-toast-in 200ms ease-out;
}
.exo-toast.is-success { background: #1d6f48; }
.exo-toast.is-error { background: #983030; }
@keyframes exo-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}