:root{
  --bg:#0c0a12; --panel:#141019; --panel2:#1b1524; --line:#2a2233;
  --ink:#f3eefa; --dim:#9a91ac; --faint:#6e6580;
  --accent:#b79bff; --accent2:#c9569e;
  --sent:#8b8196; --acked:#5aa9e6; --routed:#e0a83a; --closed:#e0605f; --bounced:#e0605f; --live:#54c98a;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(120% 70% at 50% -10%,rgba(139,109,255,.12),transparent 60%),var(--bg);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;padding:30px 20px 80px;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
h1{font-family:"Arial Black",Arial,sans-serif;font-size:25px;letter-spacing:.01em;text-transform:uppercase}
.brand .sub{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.updated{color:var(--faint);font-size:12px;margin:4px 0 20px}
/* nav */
.nav{display:flex;gap:6px;margin:0 0 22px;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:13px;font-weight:600;color:var(--dim);padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);transition:.15s;letter-spacing:.02em}
.nav a:hover{border-color:var(--accent);color:var(--ink)}
.nav a.on{background:var(--accent);border-color:var(--accent);color:#12091f}
.nav a.on.rich{background:var(--accent2);border-color:var(--accent2);color:#fff}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-bottom:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.card .n{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.card .l{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.card.big .n{color:var(--accent)}
.card.big.rich .n{color:var(--accent2)}
/* pipeline bar */
.pipe{margin-bottom:22px}
.pipe .bar{display:flex;height:14px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.pipe .seg{height:100%}
.pipe .seg.sent{background:var(--sent)} .pipe .seg.acked{background:var(--acked)}
.pipe .seg.routed{background:var(--routed)} .pipe .seg.closed{background:var(--closed)} .pipe .seg.bounced{background:var(--bounced)}
.pipe .key{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--dim)}
.pipe .key span{display:inline-flex;align-items:center;gap:6px}
.pipe .key i{width:9px;height:9px;border-radius:2px;display:inline-block}
/* controls */
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--dim);font-size:12.5px;
  padding:7px 13px;border-radius:999px;cursor:pointer;user-select:none;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#12091f;font-weight:600}
.chip.sep{background:none;border:none;color:var(--faint);cursor:default;padding-left:2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
thead th{text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
tbody td{padding:12px 14px;border-bottom:1px solid rgba(42,34,51,.6);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel2)}
.venue{font-weight:600;color:var(--ink)}
.who{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dim);word-break:break-all}
.art{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.art.lefti{color:var(--accent)} .art.rich{color:var(--accent2)}
.city,.date{color:var(--dim);white-space:nowrap}
.date{font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.pill.sent{background:rgba(139,129,150,.16);color:var(--sent);border:1px solid rgba(139,129,150,.35)}
.pill.acked{background:rgba(90,169,230,.14);color:var(--acked);border:1px solid rgba(90,169,230,.35)}
.pill.routed{background:rgba(224,168,58,.14);color:var(--routed);border:1px solid rgba(224,168,58,.4)}
.pill.closed,.pill.bounced{background:rgba(224,96,95,.13);color:var(--closed);border:1px solid rgba(224,96,95,.38)}
.note{color:var(--dim);font-size:12.5px}
.foot{margin-top:22px;color:var(--faint);font-size:12px;line-height:1.7}
.foot b{color:var(--dim)}
.empty{color:var(--faint);text-align:center;padding:30px}
@media (max-width:560px){h1{font-size:21px}body{padding:22px 12px 60px}}