:root { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0e1116; color: #e8eefc; }

.wrap { max-width: 980px; margin: 0 auto; padding: 20px; }
h1 { margin: 18px 0 6px; font-size: 22px; }
p { margin: 0; color: #b9c0cc; }

.grid { margin-top: 18px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  display: block;
  padding: 16px;
  border-radius: 14px;
  background: #141823;
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-1px); }

.name { font-weight: 700; }
.desc { margin-top: 8px; color: #b9c0cc; font-size: 14px; line-height: 1.4; min-height: 2.8em; }
.meta { margin-top: 12px; display: flex; gap: 10px; align-items: center; color: #cfd6e4; font-size: 12px; }
.badge { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }

.err { margin-top: 18px; color: #ffb4b4; }