.table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 1%));
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table thead th {
  text-align: left;
  padding: 15px 20px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 15px 20px;
  border-bottom: 1px solid rgb(255 255 255 / 4%);
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background 0.25s ease;
  animation: row-in 0.45s var(--ease-out) both;
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.data-table tbody tr:hover {
  background: rgb(255 34 49 / 6%);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tr.empty td {
  text-align: center;
  color: var(--dim);
  padding: 32px 20px;
}

.data-table .player-cell {
  color: #fff;
  font-weight: 700;
}

.data-table .order-cell {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge.completed { color: var(--ok); background: rgb(56 215 138 / 10%); border-color: rgb(56 215 138 / 28%); }
.badge.processing { color: var(--red-hot); background: rgb(255 34 49 / 10%); border-color: var(--line-red); }
.badge.queued,
.badge.partial { color: var(--warn); background: rgb(255 176 32 / 10%); border-color: rgb(255 176 32 / 28%); }
.badge.failed,
.badge.error { color: var(--bad); background: rgb(255 77 94 / 10%); border-color: rgb(255 77 94 / 28%); }

.badge.processing::before {
  animation: blink 1.1s var(--ease-in-out) infinite;
}