:root {
  --accent: #3d85ff;
  --bg: #030812;
  --text: #d0dce8;
  --text-bright: #f0f6ff;
  --muted: #5a7a9a;
  --panel: rgba(8, 20, 50, 0.55);
  --panel-strong: rgba(8, 20, 50, 0.7);
  --border: rgba(61, 133, 255, 0.1);
  --red: #ff5757;
  --amber: #f59e0b;
  --signal: #00e5a0;
  --noise: #4a6080;
}

body {
  background: var(--bg);
  font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.mono { font-family: 'Space Mono', monospace; }

.scan-line {
  position: fixed; left: 0; right: 0; height: 1px; top: -2px;
  background: linear-gradient(90deg, transparent, rgba(61,133,255,.18), transparent);
  animation: scan-y 9s linear infinite;
  z-index: 2; pointer-events: none;
}
@keyframes scan-y { 0% { top: -2px; } 100% { top: 100%; } }

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(61,133,255,.025) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(61,133,255,.025) 1px,transparent 1px);
  background-size: 60px 60px;
}

.bg-glow {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 300px;
  background: radial-gradient(ellipse at 50% 0%, rgba(61,133,255,.09), transparent 65%);
  pointer-events: none; z-index: 0;
}

.pulse-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(61,133,255,.5); animation: ring-out 2.8s ease-out infinite; }
.pulse-ring.r2 { border-color: rgba(61,133,255,.35); animation-delay: .93s; }
.pulse-ring.r3 { border-color: rgba(61,133,255,.2); animation-delay: 1.86s; }
@keyframes ring-out { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }

.pulse-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 12px var(--accent); } 50% { opacity: .3; box-shadow: none; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.stat-card { background: var(--panel-strong); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; }
.stat-value { font-family: 'Space Mono', monospace; font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; align-items: center; }
.filter-btn {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .03em;
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  transition: all .15s;
}
.filter-btn:hover { border-color: rgba(61,133,255,.3); color: var(--text); }
.filter-btn.active { background: rgba(61,133,255,.12); color: var(--accent); border-color: rgba(61,133,255,.5); }
.filter-btn.signal-filter.active { background: rgba(0,229,160,.1); border-color: rgba(0,229,160,.5); color: var(--signal); }
.filter-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* Section headers */
.section-header {
  display: flex; align-items: center; gap: 12px;
  margin: 40px 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.section-header:first-of-type { margin-top: 10px; }
.section-title {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--signal);
}
.section-count {
  font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted);
}

/* Signal cards - bigger and clearer */
.signal-card {
  display: flex; gap: 20px; padding: 24px 28px;
  background: var(--panel-strong); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; align-items: flex-start;
  transition: border-color .2s, box-shadow .2s, opacity .2s;
  margin-bottom: 12px;
}
.signal-card:hover { border-color: rgba(0,229,160,.4); box-shadow: 0 4px 36px rgba(0,229,160,.08); }
.signal-card.is-noise { opacity: 0.4; }
.signal-card.is-noise:hover { opacity: 0.75; }

.signal-card .summary {
  font-size: 16px; line-height: 1.65; color: var(--text-bright);
  margin: 0 0 12px;
}
.signal-card.is-noise .summary { color: var(--muted); }

.signal-card .meta {
  font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted);
  display: flex; gap: 16px; align-items: center;
}

.chip {
  font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(0,229,160,.25);
  background: rgba(0,229,160,.06); color: var(--signal);
}
.chip.noise { border-color: rgba(74,96,128,.25); background: rgba(74,96,128,.06); color: var(--muted); }

.quality-badge {
  font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(0,229,160,.08); color: var(--signal); border: 1px solid rgba(0,229,160,.2);
}
.quality-badge.noise { background: rgba(74,96,128,.08); color: var(--noise); border-color: rgba(74,96,128,.2); }

.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dist-track { flex: 1; height: 5px; background: rgba(255,255,255,.04); border-radius: 3px; position: relative; overflow: hidden; }
.dist-bar { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 3px; transition: width .4s ease; }

.empty-state { text-align: center; padding: 100px 32px; }

/* Noise section */
.noise-section { margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(74,96,128,.15); }
.noise-section .section-title { color: var(--noise); }