.page { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem; flex: 1; }
.hero { margin-bottom: 2rem; }
.hero h1 { margin: 0 0 0.4rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.hero .lead { color: var(--fg-soft); margin: 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.card-link {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;
}
.card-link:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.card-link h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--accent); }
.card-link p { margin: 0; color: var(--fg-soft); font-size: 0.92rem; }

#status { min-height: 1.4em; color: var(--muted); font-size: 0.875rem; }
#status.error { color: var(--error); }