/* Chrome skeleton — the small subset of the cyborg-mcp dashboard's shared page styles that the
   lifted search.css builds on (wrap / header / card / footer). The dashboard rendered these
   server-side via stats_page.page_open/page_footer; here they're static. search.css overrides the
   visuals on top (body background, padding for the left rail, etc.). */
:root {
  color-scheme: light;
  --bg: #f6f7f9; --panel: #ffffff; --border: #e5e7eb; --text: #14171c;
  --muted: #6b7280; --dim: #9aa1ac;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: radial-gradient(1200px 600px at 50% -10%, #eef2f9 0%, var(--bg) 55%);
  color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; padding: 40px 24px 64px;
}
.wrap { max-width: 1040px; margin: 0 auto; }
header { margin-bottom: 24px; }
h1 { font-size: 22px; font-weight: 650; margin: 0 0 6px; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 13.5px; }
.card {
  background: var(--panel); scroll-margin-top: 16px;
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06);
}
footer { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-note { color: var(--dim); font-size: 12px; text-align: center; }
.nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nav a, .nav button {
  font-size: 12.5px; color: var(--muted); text-decoration: none; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
  transition: color .12s, border-color .12s, background .12s; white-space: nowrap;
}
.nav a:hover, .nav button:hover { color: #2563eb; border-color: color-mix(in srgb, #2563eb 45%, var(--border));
  background: color-mix(in srgb, #2563eb 7%, white); }