:root {
  --bg: #0d1117;
  --surface: #161b27;
  --surface2: #1e2535;
  --accent: #4f8ef7;
  --accent2: #7c3aed;
  --success: #22c55e;
  --warn: #f59e0b;
  --error: #ef4444;
  --text: #e2e8f0;
  --muted: #64748b;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; }

.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.tracking-wide { letter-spacing:.08em; }

/* Cards */
.card-dark {
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: 12px;
}
.card-dark-inner {
  background: var(--surface2);
  border-radius: 8px;
  padding: 1.25rem;
}

/* Hero */
.hero-banner {
  background: linear-gradient(135deg, #0f1e3d 0%, #1a0a2e 50%, #0d1117 100%);
  border: 1px solid var(--surface2);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79,142,247,.08) 0%, transparent 70%),
              radial-gradient(ellipse at 80% 30%, rgba(124,58,237,.06) 0%, transparent 60%);
}
.hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
.hero-sub { color: var(--muted); font-size: 1.05rem; }

/* Clock */
.clock-display {
  font-size: 2.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(79,142,247,.3);
}

/* Stat pills */
.stat-pill {
  background: var(--surface2);
  border-radius: 8px;
  padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
}
.stat-pill .icon { font-size: 1.4rem; }
.stat-pill .val { font-size: 1.4rem; font-weight: 700; }
.stat-pill .lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Event badge */
.ev-badge { font-size:.7rem; padding:.3em .7em; border-radius:4px; font-weight:600; text-transform:uppercase; }
.ev-info    { background:rgba(79,142,247,.15); color:var(--accent); }
.ev-warn    { background:rgba(245,158,11,.15); color:var(--warn); }
.ev-error   { background:rgba(239,68,68,.15);  color:var(--error); }
.ev-success { background:rgba(34,197,94,.15);  color:var(--success); }

/* Table */
.table-dark-custom { color: var(--text); }
.table-dark-custom th { color: var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; border-color:var(--surface2) !important; }
.table-dark-custom td { border-color:var(--surface2) !important; vertical-align:middle; }
.table-dark-custom tr:hover td { background:var(--surface2); }

/* API section */
.api-block { background:#0a0e1a; border:1px solid var(--surface2); border-radius:8px; padding:1rem 1.25rem; font-family:monospace; font-size:.85rem; color:#a5d6ff; }

/* Send event form */
.send-form input, .send-form select {
  background: var(--surface2); border: 1px solid #2d3748; color: var(--text); border-radius: 6px;
}
.send-form input:focus, .send-form select:focus { background: var(--surface2); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,142,247,.2); }
.send-form input::placeholder { color: var(--muted); }