@layer components {
/* ── Cards ────────────────────────────────────────────────── */
.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 28px;
}
.admin-card--table { padding: 24px 0; }
.admin-card--table .admin-card-header { padding: 0 28px 18px; }

.admin-card-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.admin-card-meta {
  font-size: 11px;
  color: var(--faint);
}
.admin-card-empty {
  padding: 14px 28px 24px;
  font-size: 12px;
  color: var(--faint);
}
.admin-card--linkable {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background var(--t);
}
.admin-card--linkable:hover { background: var(--hover, #faf9f7); }
.admin-page-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.admin-page-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0; }
.admin-back-link { font-size: 12px; color: var(--faint); text-decoration: none; }
.admin-back-link:hover { color: var(--text); }
.admin-search { display: flex; }
.admin-search-input {
  font: inherit; font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border, #e9e7e1);
  border-radius: var(--r-sm);
  background: var(--surface, #fff);
  color: var(--text);
  min-width: 200px;
}
.admin-table .score-good { color: #1D9E75; font-weight: 600; }
.admin-table .score-mid  { color: #c8932a; font-weight: 600; }
.admin-table .score-bad  { color: #c14747; font-weight: 600; }
}