@layer components {
  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: left;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    background: var(--ink-50);
  }
  .data-table td {
    font-size: 13px;
    color: var(--ink-700, var(--ink-800));
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    vertical-align: middle;
  }
  .data-table tr:hover td { background: var(--ink-50); }
  .data-table tr:last-child td { border-bottom: none; }
  .td-name { font-weight: 500; color: var(--ink-800); }
  .td-muted { color: var(--ink-400); font-size: 12px; }
  .td-actions { display: flex; gap: var(--s2); justify-content: flex-end; }
}