/* RESET */
* {
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

/* PAGE */
body {
  margin:0;
  background:#f5f5f7;
}

.page {
  display:flex;
  justify-content:center;
}

.container {
  width:100%;
  max-width:1100px;
  padding:40px 20px;
}

/* TITLE */
.title {
  font-size:32px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* SEARCH */
.search {
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:12px 16px;
  border-radius:14px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  margin-bottom:20px;
}

.search input {
  border:none;
  outline:none;
  font-size:15px;
  width:100%;
}

/* CARD */
.card {
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
  overflow:hidden;
}

/* TABLE */
table {
  width:100%;
  border-collapse:collapse;
}

thead {
  background:#f2f2f7;
}

th, td {
  padding:14px;
  text-align:left;
  vertical-align:middle;
}

tbody tr:not(:last-child) {
  border-bottom:1px solid #eee;
}

/* PLAYER CELL */
.player-cell {
  display:flex;
  align-items:center;
  gap:12px;
}

.head {
  border-radius:10px;
}

.player-text {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.player-name {
  font-weight:600;
}

.uuid-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(10,132,255,.15);
  color:#0a84ff;
  font-size:12px;
  width:fit-content;
}

.ban-id {
  font-size:12px;
  opacity:.55;
}

/* BADGES */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
}

.badge-active {
  background:rgba(255,149,0,.18);
  color:#ff9500;
}

.badge-unbanned {
  background:rgba(48,209,88,.18);
  color:#30d158;
}

.badge-duration {
  background:rgba(10,132,255,.12);
  color:#0a84ff;
}

/* PAGINATION */
.pagination {
  margin-top:20px;
  text-align:center;
}