:root {
  --fg: #14161a;
  --muted: #5b6470;
  --line: #e3e6ea;
  --accent: #1b5e9c;
  --ok: #16794d;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8eaed;
    --muted: #9aa3af;
    --line: #2a2f36;
    --accent: #7ab6ef;
    --ok: #57c99a;
  }
  body { background: #101317; }
}

body { color: var(--fg); margin: 0 auto; max-width: 62rem; padding: 2rem 1.25rem 4rem; line-height: 1.5; }
h1 { margin: 0 0 0.25rem; font-size: 1.75rem; letter-spacing: -0.01em; }
.tagline { color: var(--muted); margin: 0 0 1rem; max-width: 48rem; }
.cta { background: var(--line); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; font-size: 0.9rem; }

form { display: flex; gap: 0.5rem; margin: 1.5rem 0 0.75rem; }
#q { flex: 1; padding: 0.6rem 0.75rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
#archetype { padding: 0.6rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }

#status { color: var(--muted); font-size: 0.9rem; }
#results { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }

.card { border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; }
.card h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.card .pkg { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.card .summary { margin: 0.4rem 0; color: var(--fg); }
.card .meta { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0; }
.badge { font-size: 0.72rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem; color: var(--muted); }
.badge.verified { color: var(--ok); border-color: currentColor; }
.badge.attested { color: var(--accent); border-color: currentColor; }
.matched { color: var(--muted); font-size: 0.78rem; margin-top: 0.4rem; }
.card.picked { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

#selection { border: 1px solid var(--accent); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
footer { margin-top: 3rem; color: var(--muted); font-size: 0.85rem; }
a { color: var(--accent); }

#account { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0; }
#account button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.5rem; cursor: pointer; }

.versions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.versions li { border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.9rem; }

.badge.delta-major { color: #b3261e; border-color: currentColor; }
.badge.delta-minor { color: #9a6700; border-color: currentColor; }
.badge.delta-patch, .badge.delta-none { color: var(--muted); }

#submit-section { margin-top: 2rem; }
#submit { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#submit input { padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
#submit input[name="package"] { flex: 1; min-width: 12rem; }
#submit-status { color: var(--muted); font-size: 0.85rem; }