@layer pages {
  .certs__top { background: var(--color-bg-subtle); border-block-end: var(--border-width) solid var(--color-border); }
  .certs__top-inner { display: grid; gap: var(--space-4); }
  .certs__search { max-inline-size: var(--size-180); }
  .certs__base-inner { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  .certs__filters { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
  .certs__statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .certs__selects { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
  .certs__count { font: var(--text-small); color: var(--color-text-muted); }
  .certs__table .ds-table { table-layout: fixed; }
  .certs__table thead th:nth-child(1) { inline-size: var(--size-60); }
  .certs__table thead th:nth-child(3) { inline-size: var(--size-48); }
  .certs__table thead th:nth-child(4) { inline-size: var(--size-48); }
  .certs__table thead th:nth-child(5) { inline-size: var(--size-40); }
  .certs__table tr[data-status="expired"] :is(th, td):not(:nth-child(4)):not(:nth-child(5)) { color: var(--color-text-muted); }
  .certs__name { display: grid; gap: var(--space-1); }
  .certs__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .certs__actions { display: flex; gap: var(--space-2); justify-content: end; }
  .certs__detail { display: grid; gap: var(--space-4); }
  .certs__detail dl { display: grid; gap: var(--space-3); margin: 0; font: var(--text-small); div { display: grid; gap: var(--space-1); } dt { font: var(--text-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } dd { margin: 0; font-weight: var(--font-weight-semibold); } }
  .certs__detail ul { display: grid; gap: var(--space-1); padding-inline-start: var(--space-5); font-weight: var(--font-weight-regular); }
  .certs__detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  @media not all and (min-width: 48rem) {
    .certs__table .ds-table thead { display: none; }
    .certs__table .ds-table :is(tbody, tr, th, td) { display: block; }
    .certs__table .ds-table tr { display: grid; gap: var(--space-2); padding: var(--space-4); border-block-end: var(--border-width) solid var(--color-border); }
    .certs__table .ds-table tr:last-child { border-block-end: 0; }
    .certs__table .ds-table :is(th, td) { padding: 0; border: 0; text-align: start; }
    .certs__actions { justify-content: start; }
  }

  @media (min-width: 48rem) {
    .certs__selects { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  }
}