:root{
  /* tuned to Discourse dark */
  --bg: #1f2125;
  --panel: #21252b;
  --panel-2:#171a1f;
  --text:#e6e9ef;
  --muted:#9aa3ad;
  --line:#2a2f36;
  --accent:#6ea8fe;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
}
.wrap{width:min(1100px,94vw);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:#0b0c0f; border-bottom:1px solid #0f1116; box-shadow:0 1px 0 rgba(255,255,255,0.03)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.6px}
.brand .logo{display:inline-flex;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand-text{font-size:18px}
.main-nav a{color:var(--text);text-decoration:none;margin-left:16px;opacity:.9}
.main-nav a:hover{opacity:1}
.main-nav a.active{color:#c7d7ff}

/* Hero */
.hero{background:linear-gradient(90deg, rgba(67,198,255,.18), rgba(139,92,246,.18));border-bottom:1px solid var(--line)}
.hero .wrap{padding:24px 0}
.page-title{margin:0;font-size:28px;letter-spacing:.5px}
.page-subtitle{margin:6px 0 0;color:var(--muted)}

/* Controls */
.controls{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
#searchBox{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  min-width:300px;
}
#searchBox::placeholder{color:var(--muted)}
.meta{color:var(--muted)}

/* Card/Table */
.table-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.table-responsive{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);font-weight:600;text-align:left;border-bottom:1px solid var(--line);padding:10px 14px}
tbody tr.summary{background:rgba(255,255,255,.02);cursor:pointer}
tbody tr.summary:hover{background:rgba(255,255,255,.05)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.player .primary{font-weight:600}
.player .ip-pill{display:inline-block;margin-top:6px;padding:2px 6px;border-radius:999px;font-size:11px;letter-spacing:.3px;border:1px solid var(--line);color:var(--muted)}
.player .ip-pill.hidden{display:none}

.badge{display:inline-block;padding:4px 8px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;border:1px solid transparent}
.badge.active{background:rgba(241,91,91,.15);color:#ff8080;border-color:rgba(241,91,91,.25)}
.badge.unbanned{background:rgba(110,168,254,.18);color:#a5c8ff;border-color:rgba(110,168,254,.3)}
.badge.expired{background:rgba(104,115,133,.18);color:#b5bfcc;border-color:rgba(104,115,133,.35)}

.reason{opacity:.95}
.length,.bannedAt{color:var(--muted)}

/* Details */
tr.details.hidden{display:none}
tr.details>td{background:rgba(255,255,255,.03)}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.details-grid h4{margin:8px 0 6px}
.details-grid dl{margin:0;display:grid;grid-template-columns:120px 1fr;column-gap:12px;row-gap:6px}
.details-grid dt{color:var(--muted)}
.details-grid dd{margin:0}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;align-items:center;padding:18px 0 28px;flex-wrap:wrap}
.page-btn{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px 12px;border-radius:10px;cursor:pointer}
.page-btn[disabled]{opacity:.5;cursor:not-allowed}
.page-btn.active{outline:2px solid var(--accent)}

@media (max-width:720px){.details-grid{grid-template-columns:1fr}}