*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #080c18;
  --panel:        #0d1424;
  --attended:     #5cd498;
  --recent-bg:    rgba(42,180,120,0.14);
  --attended-bg:  rgba(42,180,120,0.06);
  --pending-text: rgba(255,255,255,0.32);
  --title-text:   #e8dfc8;
  --border-faint: rgba(255,255,255,0.07);
  --font:         -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: #fff;
  font-family: var(--font);
  overflow: hidden;
}

.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 8px;
  gap: 6px;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tab {
  padding: 4px 14px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  background: transparent;
  transition: all 0.2s;
}

.tab.active {
  background: #1a2540;
  color: var(--title-text);
  border-color: rgba(255,255,255,0.25);
}

/* ─── Views ──────────────────────────────────────────────────────────────── */
.view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 6px;
}

.view.active { display: flex; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.htitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--title-text);
  letter-spacing: 0.04em;
}

.hsub {
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  margin-top: 1px;
}

.hright {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat {
  font-size: 9.5px;
  color: rgba(255,255,255,0.35);
}

.stat b {
  color: #e0e6f0;
  font-weight: 500;
}

.live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--attended);
}

.livdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--attended);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ─── Group grid ─────────────────────────────────────────────────────────── */
.group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  flex: 1;
  min-height: 0;
}

.q {
  background: var(--panel);
  border-radius: 5px;
  border: 0.5px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.qhdr {
  padding: 4px 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.qtitle {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qcount {
  font-size: 8.5px;
  color: rgba(255,255,255,0.28);
}

.col-hdr {
  display: grid;
  grid-template-columns: 12px 1fr 56px 36px 32px;
  gap: 2px;
  padding: 2px 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.col-hdr span {
  font-size: 7.5px;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.col-hdr span:nth-child(4),
.col-hdr span:nth-child(5) { text-align: right; }

.glist {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.glist::-webkit-scrollbar { width: 2px; }
.glist::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}

.g {
  display: grid;
  grid-template-columns: 12px 1fr 56px 36px 32px;
  gap: 2px;
  align-items: center;
  padding: 2px 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.025);
  transition: background 0.4s;
}

.gnames { min-width: 0; }

.gname {
  font-size: 9.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.gname-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.gof {
  font-size: 7.5px;
  margin-top: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.2);
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 7px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}

.pill-inv {
  background: rgba(255,190,60,0.15);
  color: #f0c060;
  border: 0.5px solid rgba(255,190,60,0.3);
}

.pill-guest {
  background: rgba(140,160,255,0.12);
  color: #9ab0f5;
  border: 0.5px solid rgba(140,160,255,0.25);
}

.gseat {
  font-size: 9px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gtime {
  font-size: 8.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status colours — group view */
.g.attended {
  background: var(--attended-bg);
}

.g.attended .gname-text,
.g.attended .gseat { color: var(--attended); }
.g.attended .gof   { color: rgba(92,212,152,0.4); }
.g.attended .gtime { color: rgba(92,212,152,0.5); }

.g.recent {
  background: var(--recent-bg);
}

.g.recent .gname-text,
.g.recent .gseat { color: #7de8b8; }
.g.recent .gof   { color: rgba(125,232,184,0.45); }
.g.recent .gtime { color: #7de8b8; }

.g.pending .gname-text { color: var(--pending-text); }
.g.pending .gseat      { color: rgba(255,255,255,0.18); }
.g.pending .gtime      { color: rgba(255,255,255,0.1); }

/* Status dots */
.rdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--attended);
  flex-shrink: 0;
}

.pdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Flash animation for new arrivals */
@keyframes flash {
  0%   { background: rgba(42,180,120,0.5);