:root {
  color-scheme: dark;
  --bg: #05060c;
  --bg-alt: #0d1224;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f8fbff;
  --muted: #adb3ce;
  --accent: #ff5f6d;
  --accent-2: #5af8ff;
  --warning: #ffd166;
  --danger: #ff96a5;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --display: "Unbounded", sans-serif;
  --mono: "Chivo Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 0 5vw 5rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
}

a { color: var(--accent-2); }
.background-grid,
.background-glow { position: fixed; inset: 0; pointer-events: none; }
.background-grid {
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 72px 72px;
}
.background-glow {
  inset: auto auto 5% 35%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(90,248,255,0.12), transparent 60%);
  filter: blur(80px);
}
.site-header,
.hero,
.finder,
.why-join,
.interface,
.trust,
.site-footer,
.agent-profile-view { position: relative; z-index: 1; }
.site-header {
  margin: 1.5rem auto 3rem;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(5, 6, 12, 0.84);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}
.logo,h1,h2,h3,.cta,.stat { font-family: var(--display); }
.logo { font-weight: 700; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.site-header nav a,.footer-links a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover,.footer-links a:hover { color: var(--accent-2); }
.cta {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  background: linear-gradient(120deg, var(--accent), #ff9966);
  color: #05060c;
  font-size: 0.92rem;
}
.cta.secondary,.cta.ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.cta.small { padding: 0.65rem 1rem; font-size: 0.82rem; }
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
}
.hero h1 { font-size: clamp(2.5rem, 4vw, 3.8rem); line-height: 1.08; margin: 0.25rem 0 1rem; }
.lead,.note,.label,.finder-result__lead,.finder-marketplace__hint,.finder-outcome__empty,.finder-history__empty,.finder-validation__status,.mono,small,p { color: var(--muted); }
.hero-actions,.finder-form__footer,.action-row,.tag-row,.agent-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-stats,.interface-grid,.trust-grid,.stats-grid { display: grid; gap: 1rem; }
.hero-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 2rem; }
.stat { font-size: 2rem; }
.hero-panel,.finder-marketplace,.finder-shell,.finder-outcome,.finder-history,.finder-observer,.finder-network,.finder-onboarding,.ui-card,.trust-grid article,.stack-card,.finder-result,.finder-onboarding-card,.agent-card,.decision-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hero-panel,.finder-marketplace,.finder-shell,.finder-outcome,.finder-history,.finder-observer,.finder-network,.finder-onboarding,.ui-card,.trust-grid article,.finder-result,.finder-onboarding-card { padding: 1.5rem; }
.agent-card,.stack-card,.decision-card { padding: 1rem; }
.hero-panel__badge,.eyebrow,.pill,.badge { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.eyebrow,.pill { color: var(--accent-2); }
.badge { border: 1px solid var(--border); padding: 0.3rem 0.6rem; border-radius: 999px; color: var(--text); }
.badge.is-positive,.badge.is-active { color: var(--accent-2); border-color: rgba(90,248,255,0.35); background: rgba(90,248,255,0.09); }
.badge.is-warning { color: var(--warning); border-color: rgba(255,209,102,0.35); background: rgba(255,209,102,0.08); }
.badge.is-negative { color: var(--danger); border-color: rgba(255,150,165,0.35); background: rgba(255,150,165,0.08); }
.badge.is-muted { color: var(--muted); }
.stack-list,.finder-identities__list,.finder-marketplace__list,.finder-history__list,.finder-network__list,.finder-validation__list,.finder-onboarding__steps { display: grid; gap: 1rem; }
.compact { gap: 0.75rem; }
.section-heading { margin: 4rem 0 1.5rem; }
.finder-heading { margin-bottom: 2rem; }
.finder-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.finder-tab {
  padding: 0.8rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--display);
}
.finder-tab.is-active { color: #05060c; background: linear-gradient(120deg, var(--accent-2), #8afcff); }
.finder-live-grid,.finder-screen-grid--sessions,.finder-screen-grid--agents,.finder-screen-grid--console {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 1rem;
}
.finder-screen-grid--agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finder-screen-grid--console { grid-template-columns: 1fr; }
.one-column { display: grid; gap: 1rem; }
.stack-header,.finder-marketplace__header,.finder-outcome__header,.finder-history__header,.finder-observer__header,.finder-network__header,.finder-onboarding__header,.agent-card__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.inline-field { min-width: 220px; }
.inline-field label,.finder-form label { display: block; margin-bottom: 0.4rem; color: var(--text); font-size: 0.85rem; }
.finder-form input,.finder-form select,.finder-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  font-family: var(--mono);
  margin-bottom: 0.9rem;
}
.finder-mode-debug { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--accent-2); font-size: 0.8rem; }
.agent-card.is-selected,
.is-selected-card { border-color: rgba(90,248,255,0.45); box-shadow: 0 0 0 1px rgba(90,248,255,0.18); }
.agent-identity { display: flex; align-items: center; gap: 0.9rem; }
.agent-identity--large { align-items: flex-start; margin-bottom: 1rem; }
.agent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  font-size: 1.4rem;
}
.agent-avatar--xl { width: 72px; height: 72px; font-size: 2rem; border-radius: 20px; }
.tag-row span,.ui-card.profile .tags span {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
}
.agent-meta,.finder-result__meta,.timeline,.console-body,.waitlist-form { display: grid; gap: 0.75rem; }
.finder-result__meta { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 1rem; }
.finder-result__meta dt { color: var(--text); margin-bottom: 0.3rem; }
.finder-result__meta dd { margin: 0; word-break: break-word; }
.timeline__item { border-left: 2px solid rgba(90,248,255,0.25); padding-left: 0.9rem; }
.session-log-list { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.75rem; }
.session-log-list li {
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.session-log-list li span { display: block; color: var(--accent-2); font-size: 0.78rem; margin-bottom: 0.35rem; }
.session-log-list li strong { display: block; text-transform: capitalize; margin-bottom: 0.25rem; }
.session-log-list li p { margin: 0; }
.decision-card strong,.stack-card strong,.agent-card h3,.finder-result h3,.finder-onboarding-card h3,.ui-card h3,.trust-grid h3 { color: var(--text); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.finder-onboarding__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); gap: 1rem; margin-top: 1rem; }
.mono-inline { color: var(--accent-2); word-break: break-all; }
.agent-profile-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.ui-card.chat .bubble { max-width: 240px; padding: 0.8rem 1rem; border-radius: 18px; margin: 0.5rem 0; }
.ui-card.chat .bubble.left { background: rgba(90,248,255,0.12); border: 1px solid rgba(90,248,255,0.28); }
.ui-card.chat .bubble.right { background: rgba(255,95,109,0.14); border: 1px solid rgba(255,95,109,0.28); margin-left: auto; }
.ui-card.friends ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.ui-card.friends li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.7rem; }
.interface-grid,.trust-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.site-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.growth-ops-grid,
.growth-actions-grid,
.growth-channel-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.growth-deep-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  padding: 0.95rem 1rem 1rem;
}

.growth-deep-group summary {
  cursor: pointer;
  color: var(--text);
  font-family: var(--display);
  list-style: none;
}

.growth-deep-group summary::-webkit-details-marker {
  display: none;
}

.growth-deep-group summary::after {
  content: "Show";
  float: right;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.growth-deep-group[open] summary::after {
  content: "Hide";
}

.growth-deep-group__body {
  margin-top: 1rem;
}

.growth-llm-quick-test {
  position: relative;
  z-index: 9998;
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 16px;
  padding: 1rem;
  border: 1px solid rgba(90,248,255,0.28);
  border-radius: var(--radius-md);
  background: rgba(5,6,12,0.72);
}

.growth-llm-quick-test::before,
.growth-llm-quick-test::after {
  pointer-events: none;
}

.growth-llm-quick-test h3 {
  margin: 0.25rem 0 0.4rem;
}

.growth-llm-quick-test__controls {
  pointer-events: auto;
  display: grid;
  gap: 0.75rem;
}

#lobstercrew-llm-quick-run {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
  cursor: pointer;
  width: fit-content;
  border: 1px solid rgba(90,248,255,0.45);
  border-radius: 10px;
  padding: 0.72rem 1rem;
  color: #05060c;
  background: var(--accent-2);
  font-family: var(--display);
}

#lobstercrew-llm-quick-run:disabled {
  cursor: wait;
  opacity: 0.7;
}

#lobstercrew-llm-quick-result {
  pointer-events: auto;
  min-height: 96px;
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(0,0,0,0.35);
  white-space: pre-wrap;
  word-break: break-word;
}

.growth-llm-test-panel {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  border-color: rgba(90,248,255,0.32);
  background:
    radial-gradient(circle at top right, rgba(90,248,255,0.12), transparent 36%),
    rgba(255,255,255,0.055);
}

.growth-llm-test-panel::before,
.growth-llm-test-panel::after {
  pointer-events: none;
}

.growth-llm-test-panel button,
.growth-llm-test-panel .cta,
.growth-llm-test-panel [data-lobstercrew-llm-test-compare],
.growth-llm-test-panel [data-lobstercrew-llm-test-compare-inline] {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
}

.growth-llm-test-panel__fallback {
  margin-top: 0.75rem;
}

.growth-llm-inline-action {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  padding: 0;
}

.growth-llm-inline-action:disabled,
.growth-llm-test-panel button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.growth-llm-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.growth-llm-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.growth-llm-table th,
.growth-llm-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  vertical-align: top;
}

.growth-llm-table th {
  color: var(--text);
  background: rgba(255,255,255,0.045);
}

.growth-llm-notice {
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
}

.growth-llm-notice.is-positive {
  color: var(--accent-2);
  border-color: rgba(90,248,255,0.35);
  background: rgba(90,248,255,0.08);
}

.growth-llm-notice.is-warning {
  color: var(--warning);
  border-color: rgba(255,209,102,0.35);
  background: rgba(255,209,102,0.08);
}

@media (max-width: 760px) {
  .growth-llm-quick-test {
    grid-template-columns: 1fr;
  }
}

.agent-standalone {
  --agent-bg: var(--bg);
  --agent-bg-alt: var(--bg-alt);
  --agent-surface: var(--surface);
  --agent-surface-strong: var(--surface-strong);
  --agent-border: var(--border);
  --agent-text: var(--text);
  --agent-muted: var(--muted);
  --agent-accent: var(--accent);
  --agent-accent-2: var(--accent-2);
  --agent-card-backdrop: rgba(5, 6, 12, 0.84);
  --agent-glow: rgba(90, 248, 255, 0.12);
  color: var(--agent-text);
  background:
    radial-gradient(circle at top right, var(--agent-glow), transparent 42%),
    linear-gradient(180deg, var(--agent-bg), var(--agent-bg-alt));
  border-radius: calc(var(--radius-lg) + 10px);
  border: 1px solid color-mix(in srgb, var(--agent-border) 92%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.agent-standalone .finder-marketplace,
.agent-standalone .stack-card,
.agent-standalone .decision-card,
.agent-standalone .agent-card,
.agent-standalone .finder-result {
  background: var(--agent-surface);
  border-color: var(--agent-border);
  color: var(--agent-text);
}

.agent-standalone .site-header {
  background: var(--agent-card-backdrop);
  border-color: var(--agent-border);
}

.agent-standalone .lead,
.agent-standalone .note,
.agent-standalone .label,
.agent-standalone .finder-result__lead,
.agent-standalone .finder-outcome__empty,
.agent-standalone .finder-history__empty,
.agent-standalone .finder-validation__status,
.agent-standalone p,
.agent-standalone small {
  color: var(--agent-muted);
}

.agent-standalone .eyebrow,
.agent-standalone .pill,
.agent-standalone a,
.agent-standalone .mono-inline,
.agent-standalone .session-log-list li span {
  color: var(--agent-accent-2);
}

.agent-standalone .cta {
  background: linear-gradient(120deg, var(--agent-accent), var(--agent-accent-2));
}

.agent-standalone .cta.secondary,
.agent-standalone .cta.ghost {
  background: color-mix(in srgb, var(--agent-surface-strong) 92%, transparent);
  color: var(--agent-text);
  border-color: var(--agent-border);
}

.agent-standalone .badge.is-positive,
.agent-standalone .badge.is-active {
  color: var(--agent-accent-2);
  border-color: color-mix(in srgb, var(--agent-accent-2) 35%, transparent);
  background: color-mix(in srgb, var(--agent-accent-2) 10%, transparent);
}

.agent-standalone .session-log-list li,
.agent-standalone .tag-row span,
.agent-standalone .ui-card.profile .tags span,
.agent-standalone .agent-avatar {
  background: color-mix(in srgb, var(--agent-surface-strong) 88%, transparent);
  border-color: var(--agent-border);
}

.agent-standalone .theme-preview-trust,
.agent-standalone .trust-callout {
  border-left: 3px solid var(--agent-accent-2);
  padding-left: 0.85rem;
}

.agent-standalone .agent-share-cta {
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--agent-border) 92%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--agent-surface-strong) 90%, transparent);
}

.agent-standalone.theme-system-default {
  --agent-bg: #05060c;
  --agent-bg-alt: #0d1224;
  --agent-surface: rgba(255, 255, 255, 0.05);
  --agent-surface-strong: rgba(255, 255, 255, 0.08);
  --agent-border: rgba(255, 255, 255, 0.12);
  --agent-text: #f8fbff;
  --agent-muted: #adb3ce;
  --agent-card-backdrop: rgba(5, 6, 12, 0.84);
  --agent-glow: rgba(90, 248, 255, 0.12);
}

.agent-standalone.theme-ocean {
  --agent-bg: #04111a;
  --agent-bg-alt: #0d2230;
  --agent-surface: rgba(10, 41, 56, 0.58);
  --agent-surface-strong: rgba(18, 55, 72, 0.74);
  --agent-border: rgba(121, 214, 235, 0.22);
  --agent-text: #eefcff;
  --agent-muted: #9fc2cf;
  --agent-card-backdrop: rgba(4, 17, 26, 0.86);
  --agent-glow: rgba(71, 196, 224, 0.16);
}

.agent-standalone.theme-slate {
  --agent-bg: #111317;
  --agent-bg-alt: #1a1f27;
  --agent-surface: rgba(255, 255, 255, 0.045);
  --agent-surface-strong: rgba(255, 255, 255, 0.07);
  --agent-border: rgba(210, 220, 233, 0.14);
  --agent-text: #f4f7fb;
  --agent-muted: #b2bac8;
  --agent-card-backdrop: rgba(17, 19, 23, 0.88);
  --agent-glow: rgba(106, 141, 194, 0.12);
}

.agent-standalone.theme-sand {
  --agent-bg: #16120e;
  --agent-bg-alt: #241b13;
  --agent-surface: rgba(255, 248, 237, 0.06);
  --agent-surface-strong: rgba(255, 245, 229, 0.1);
  --agent-border: rgba(241, 207, 164, 0.18);
  --agent-text: #fff7ea;
  --agent-muted: #d8c4ad;
  --agent-card-backdrop: rgba(22, 18, 14, 0.88);
  --agent-glow: rgba(255, 186, 104, 0.12);
}

.agent-standalone.accent-teal {
  --agent-accent: #2fd0c7;
  --agent-accent-2: #88fff4;
}

.agent-standalone.accent-coral {
  --agent-accent: #ff7a6a;
  --agent-accent-2: #ffb59a;
}

.agent-standalone.accent-amber {
  --agent-accent: #ffb347;
  --agent-accent-2: #ffe08a;
}

.agent-standalone.accent-blue {
  --agent-accent: #5d8bff;
  --agent-accent-2: #93b9ff;
}

@media (max-width: 960px) {
  .finder-live-grid,.finder-screen-grid--sessions,.finder-screen-grid--agents,.finder-onboarding__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { padding: 0 1rem 3rem; }
  .site-header { flex-direction: column; align-items: stretch; }
  .hero-actions,.finder-form__footer,.action-row { flex-direction: column; }
  .finder-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta,.finder-tab { width: 100%; text-align: center; }
}
