:root{ --bg:#0b1220; --card:#121a2b; --muted:#9fb0d0; --hi:#42c6ff; }
*{ box-sizing:border-box } body{ margin:0; font-family:system-ui,Inter,Segoe UI,Roboto; background:var(--bg); color:#eaf1ff }
.wrap{ max-width:1100px; margin:0 auto; padding:16px }
.top{ position:sticky; top:0; backdrop-filter:blur(8px); border-bottom:1px solid #1e2943; background:rgba(11,18,32,.7) }
.pill{ padding:4px 10px; border:1px solid #2b3b63; border-radius:999px; color:var(--muted) }
.grid{ display:grid; grid-template-columns:260px 1fr; gap:16px }
.card{ background:var(--card); border:1px solid #1c2846; border-radius:14px; padding:14px }
.players{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 }
.players li{ background:#0f172a; border:1px solid #27365d; padding:6px 10px; border-radius:999px; color:var(--muted) }
.msg{ display:grid; grid-template-columns:150px 110px 80px 1fr; gap:10px; padding:8px 10px; border-bottom:1px dashed #1e2943; align-items:center }
.msg.highlight{ background:linear-gradient(90deg, rgba(66,198,255,.08), rgba(66,198,255,0)) }
.ts,.server,.type{ color:var(--muted); font-variant-numeric:tabular-nums }
button,input,select{ background:#0f172a; color:#cbd5e1; border:1px solid #27365d; border-radius:10px; padding:10px }
button{ cursor:pointer }

/* Empty view */
.empty-header{ display:flex; justify-content:center; align-items:center; padding:20px }
.empty-logo{ height:120px; opacity:.95 }
.empty-wrap{ min-height:calc(100vh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:24px }
.empty-hero{ width:260px; max-width:60vw; height:auto; margin:16px 0 6px 0; user-select:none }
.empty-wrap h1{ margin:0; font-size:28px; font-weight:700 }
.empty-sub{ margin:0; color:var(--muted); font-size:16px }
.empty-footer{ margin-top:46px; display:flex; flex-direction:column; gap:6px; color:var(--muted) }
.empty-footer a{ color:var(--muted); text-decoration:none }
.empty-footer a:hover{ text-decoration:underline }