@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@600&display=swap');

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Share Tech Mono", monospace;
  background: #080c0c;
  color: #00e5a0;
  padding: 24px;
  min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
h1 {
  font-family: "Orbitron", monospace;
  font-size: 1.4em;
  letter-spacing: .15em;
  border-bottom: 1px solid #00e5a040;
  padding-bottom: 12px;
  margin-bottom: 20px;
  color: #00ffbb;
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.stats {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.stat-box {
  background: #0d1a16;
  padding: 14px 22px;
  border: 1px solid #00e5a030;
  min-width: 120px;
}

.stat-box .label {
  font-size: .7em;
  color: #4a8a6a;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.stat-box h2 {
  font-family: "Orbitron", monospace;
  font-size: 1.8em;
  color: #00ffbb;
  margin-top: 4px;
}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.controls {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

button {
  padding: 7px 16px;
  border: 1px solid #00e5a050;
  background: transparent;
  color: #00e5a0;
  cursor: pointer;
  font-family: "Share Tech Mono", monospace;
  font-size: .85em;
  letter-spacing: .05em;
}
button:hover       { background: #00e5a015; }
button.danger      { border-color: #ff444450; color: #ff6666; }
button.danger:hover { background: #ff444415; }

label {
  font-size: .82em;
  color: #4a8a6a;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Log cards ────────────────────────────────────────────────────────────── */
.log-card {
  background: #0b1512;
  border: 1px solid #1a3028;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 2px;
  transition: border-color .2s;
}
.log-card:hover    { border-color: #00e5a040; }
.log-card.new      { border-left: 3px solid #ff4444; }

.hit-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.hit-num  { font-family: "Orbitron", monospace; font-size: .85em; color: #00ffbb; }
.hit-time { color: #2a6a4a; font-size: .8em; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section-title {
  color: #2a6a4a;
  font-size: .68em;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 10px 0 5px;
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  display: inline-block;
  background: #0d2018;
  border: 1px solid #1a3028;
  padding: 2px 8px;
  font-size: .75em;
  border-radius: 2px;
  color: #00c080;
}
.tag.red    { background: #200d0d; border-color: #3a1818; color: #ff7070; }
.tag.blue   { background: #0d1220; border-color: #182035; color: #70a0ff; }
.tag.yellow { background: #1a1800; border-color: #332e00; color: #ffd060; }

/* ── User agent ───────────────────────────────────────────────────────────── */
.ua {
  margin-top: 8px;
  color: #2a5040;
  font-size: .75em;
  word-break: break-all;
}

/* ── Toggles & code blocks ────────────────────────────────────────────────── */
.toggle { color: #6a9a80; cursor: pointer; font-size: .78em; margin-right: 12px; }
.toggle:hover { color: #00e5a0; }

pre {
  background: #060e0b;
  padding: 10px;
  overflow-x: auto;
  font-size: .72em;
  margin-top: 8px;
  border: 1px solid #1a3028;
  color: #00a060;
}

/* ── Map link ─────────────────────────────────────────────────────────────── */
.map-link { color: #70a0ff; font-size: .75em; margin-left: 6px; text-decoration: none; }
.map-link:hover { color: #a0c0ff; }

/* ── States ───────────────────────────────────────────────────────────────── */
.error { color: #ff6666; padding: 16px; border: 1px solid #ff444440; margin-top: 10px; }
.empty { color: #2a5040; text-align: center; padding: 40px; font-size: .9em; }