/*  RunYourAgent design system — single source of truth  */

:root {
  color-scheme: dark;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', ui-monospace, 'Cascadia Code', monospace;

  --base: #0b0b0d;
  --surface: #141417;
  --ink: #e8e8ec;
  --muted: #9a9aa4;
  --faint: #63636d;
  --line: rgba(255,255,255,.10);
  --accent: #8ea2ff;
  --accent-dim: #7b90e6;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --on-accent: #0b0b0d;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:var(--sans); background:var(--base); color:var(--ink); -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
::selection { background:var(--accent); color:var(--on-accent) }

/* ---- Shared nav ---- */
.site-nav {
  position:sticky; top:0; z-index:100; height:48px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(16px, calc((100% - 720px)/2));
  background:rgba(11,11,13,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .brand { font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--accent) }
.site-nav .brand:hover { opacity:.8 }
.nav-right { display:flex; align-items:center; gap:16px }
.nav-right a, .nav-right button {
  font-size:12px; color:var(--muted); background:none; border:0; cursor:pointer;
  transition:color .2s;
}
.nav-right a:hover, .nav-right button:hover { color:var(--ink) }
.nav-right .btn-primary {
  background:var(--accent); color:var(--on-accent); padding:6px 14px;
  border-radius:6px; font-weight:500;
}
.nav-right .btn-primary:hover { background:var(--accent-dim); color:var(--on-accent) }

/* ---- Layout ---- */
.container { max-width:720px; margin:0 auto; padding:0 16px }
.page-body { padding:32px 0 64px }

/* ---- Cards & borders ---- */
.card { border:1px solid var(--line); border-radius:8px; padding:16px }
.card-accent { border-color:rgba(142,162,255,.3); background:rgba(142,162,255,.04) }
.divider { border-top:1px solid var(--line) }

/* ---- Typography ---- */
.label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:12px }
.section-title { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:24px }
h1 { font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.15; letter-spacing:-.02em }
h1 .dim { color:var(--muted) }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; padding:9px 16px; border-radius:6px;
  border:0; cursor:pointer; transition:all .2s;
}
.btn-accent { background:var(--accent); color:var(--on-accent) }
.btn-accent:hover { background:var(--accent-dim) }
.btn-accent:disabled { opacity:.4; cursor:not-allowed }
.btn-outline { background:none; border:1px solid var(--line); color:var(--muted) }
.btn-outline:hover { border-color:var(--muted); color:var(--ink) }
.btn-ghost { background:none; color:var(--muted); padding:9px 8px }
.btn-ghost:hover { color:var(--ink) }

/* ---- Inputs ---- */
input[type="text"], input[type="email"], input[type="password"], select {
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:10px 12px; font-size:13px; color:var(--ink);
  font-family:inherit; outline:none; transition:border-color .2s;
}
input:focus, select:focus { border-color:var(--accent) }
input::placeholder { color:var(--faint) }

/* ---- Grid selectors (tier, agent, etc.) ---- */
.select-grid { display:grid; gap:8px }
.select-grid.cols-2 { grid-template-columns:1fr 1fr }
.select-grid.cols-3 { grid-template-columns:1fr 1fr 1fr }
.select-option {
  text-align:left; padding:12px; border-radius:6px;
  border:1px solid var(--line); background:none; cursor:pointer;
  transition:border-color .2s, background .2s; color:var(--ink);
}
.select-option:hover { border-color:rgba(255,255,255,.2) }
.select-option.active { border-color:var(--accent); background:rgba(142,162,255,.05) }
.select-option .opt-title { font-size:12px; color:var(--ink) }
.select-option .opt-sub { font-size:11px; color:var(--faint); margin-top:2px }
.select-option .opt-right { font-size:12px; color:var(--accent) }

/* ---- Status dots ---- */
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor }
.dot-green { color:var(--green) }
.dot-amber { color:var(--amber) }
.dot-red { color:var(--red) }
.dot-faint { color:var(--faint) }

/* ---- Info rows ---- */
.info-table { border-radius:8px; overflow:hidden; border:1px solid var(--line) }
.info-row { display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line) }
.info-row:last-child { border-bottom:0 }
.info-row .info-label { width:120px; flex-shrink:0; font-size:12px; color:var(--faint) }
.info-row .info-value { font-size:12px; color:var(--ink); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis }

/* ---- Alerts ---- */
.alert { padding:10px 12px; border-radius:6px; font-size:12px }
.alert-error { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.2); color:var(--red) }
.alert-warn { background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2); color:var(--amber) }
.alert-success { background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.2); color:var(--green) }

/* ---- Progress bar ---- */
.progress { height:2px; background:var(--line); border-radius:1px; overflow:hidden }
.progress-fill { height:100%; background:var(--accent); transition:width .5s }

/* ---- Log entries ---- */
.log-entry { display:flex; align-items:flex-start; gap:8px; font-size:12px; padding:2px 0 }
.log-icon { flex-shrink:0; margin-top:2px }

/* ---- Footer ---- */
.site-footer {
  border-top:1px solid var(--line); padding:24px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.site-footer span, .site-footer a { font-size:10px; color:var(--faint) }
.site-footer a:hover { color:var(--ink) }

/* ---- Utility ---- */
.mt-1 { margin-top:4px } .mt-2 { margin-top:8px } .mt-3 { margin-top:12px }
.mt-4 { margin-top:16px } .mt-6 { margin-top:24px } .mt-8 { margin-top:32px }
.mb-1 { margin-bottom:4px } .mb-2 { margin-bottom:8px } .mb-3 { margin-bottom:12px }
.mb-4 { margin-bottom:16px } .mb-6 { margin-bottom:24px }
.gap-2 { gap:8px } .gap-3 { gap:12px } .gap-4 { gap:16px }
.flex { display:flex } .items-center { align-items:center } .justify-between { justify-content:space-between }
.flex-1 { flex:1 }
.text-accent { color:var(--accent) } .text-muted { color:var(--muted) } .text-faint { color:var(--faint) }
.text-green { color:var(--green) } .text-amber { color:var(--amber) } .text-red { color:var(--red) }
.text-xs { font-size:12px } .text-sm { font-size:13px } .text-mono { font-family:var(--mono) }
.hidden { display:none !important }

/* ---- Responsive ---- */
@media (max-width:640px) {
  .select-grid.cols-3 { grid-template-columns:1fr }
  .select-grid.cols-2 { grid-template-columns:1fr }
  .site-nav { padding:0 16px }
}

/* ---- Trust badges ---- */
.badges { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint) }

/* ---- Landing sections ---- */
.section { padding:48px 0; border-top:1px solid var(--line) }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.feature-card { border:1px solid var(--line); border-radius:8px; padding:14px }
.feature-card .fc-title { font-size:12px; color:var(--ink); margin-bottom:6px }
.feature-card .fc-desc { font-size:11px; color:var(--faint); line-height:1.5 }
.tag { font-size:10px; padding:2px 8px; border-radius:4px; background:var(--surface); color:var(--faint) }
.tag-accent { background:rgba(142,162,255,.1); color:var(--accent) }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0 }

@media (max-width:640px) {
  .feature-grid { grid-template-columns:1fr }
}