.vz2-datagrid-wrap { overflow: auto; border: 1px solid var(--vz2-border-1); border-radius: var(--vz2-radius); }
.vz2-datagrid { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.vz2-datagrid caption { padding: 12px; text-align: left; color: var(--vz2-muted); }
.vz2-datagrid th, .vz2-datagrid td { padding: 11px 12px; border-bottom: 1px solid var(--vz2-border-1); text-align: left; }
.vz2-datagrid th { position: sticky; top: 0; z-index: 1; background: var(--vz2-surface-2); color: var(--vz2-txt); }
.vz2-datagrid tr:hover td { background: color-mix(in srgb, var(--vz2-accent) 9%, transparent); }
.vz2-datagrid [data-sort] { cursor: pointer; }
.vz2-datagrid [data-sort]::after { content: "↕"; margin-left: 6px; color: var(--vz2-muted); }
.vz2-row-actions { position: sticky; right: 0; background: inherit; }
.vz2-grid-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vz2-grid-search { min-height: var(--vz2-control-h); border: 1px solid var(--vz2-border-1); border-radius: 12px; background: rgba(0,0,0,.18); color: var(--vz2-txt); padding: 0 12px; }
.vz2-grid-cardlist { display: none; }
@media (max-width: 640px) {
  .vz2-datagrid-wrap { display: none; }
  .vz2-grid-cardlist { display: grid; gap: 10px; }
  .vz2-grid-row-card { padding: 14px; border: 1px solid var(--vz2-border-1); border-radius: var(--vz2-radius); background: var(--vz2-card); }
}