/* ============================================================
   ~/threatmon — live attack map panel
   ============================================================ */

.tm-wrap { display: flex; flex-direction: column; gap: 14px; }

/* counters */
.tm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tm-stat {
  border: 1px solid var(--line, rgba(0,255,136,0.3));
  border-radius: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel, #070b07) 70%, transparent);
  position: relative;
  overflow: hidden;
}
.tm-stat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--accent, #00ff88) 7%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: tm-shine 6s ease-in-out infinite;
}
.tm-stat:nth-child(2)::after { animation-delay: 1.5s; }
.tm-stat:nth-child(3)::after { animation-delay: 3s; }
.tm-stat:nth-child(4)::after { animation-delay: 4.5s; }
@keyframes tm-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.tm-stat b {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--accent-2, #39ff14);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2, #39ff14) 40%, transparent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.tm-stat span { color: var(--muted, #76d69b); font-size: 0.72rem; letter-spacing: 0.4px; text-transform: uppercase; }
.tm-stat.warn b { color: #ffea00; text-shadow: 0 0 14px rgba(255,234,0,0.4); }
.tm-stat.err b { color: var(--warn, #ff3b3b); text-shadow: 0 0 14px rgba(255,59,59,0.4); }

/* map */
.tm-map-box {
  position: relative;
  border: 1px solid var(--line, rgba(0,255,136,0.3));
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(140% 120% at 50% 0%, color-mix(in srgb, var(--accent, #00ff88) 4%, transparent), transparent 60%),
    color-mix(in srgb, #000 78%, transparent);
}
.tm-map-box canvas { display: block; width: 100%; height: auto; }
.tm-live {
  position: absolute; top: 10px; right: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem; letter-spacing: 1.5px;
  color: var(--warn, #ff3b3b);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,59,59,0.35);
  border-radius: 6px;
  padding: 4px 9px;
}
.tm-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn, #ff3b3b);
  box-shadow: 0 0 8px var(--warn, #ff3b3b);
  animation: tm-blink 1.2s steps(2, start) infinite;
}
@keyframes tm-blink { 50% { opacity: 0.25; } }
.tm-legend {
  position: absolute; left: 12px; bottom: 10px;
  display: flex; gap: 14px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--muted, #76d69b);
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  padding: 4px 10px;
}
.tm-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.tm-legend .l-ssh i { background: var(--accent, #00ff88); box-shadow: 0 0 6px var(--accent, #00ff88); }
.tm-legend .l-http i { background: #ffea00; box-shadow: 0 0 6px #ffea00; }
.tm-legend .l-ban i { background: var(--warn, #ff3b3b); box-shadow: 0 0 6px var(--warn, #ff3b3b); }

/* event feed */
.tm-feed {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  line-height: 1.65;
  border: 1px solid var(--line, rgba(0,255,136,0.3));
  border-radius: 10px;
  background: color-mix(in srgb, #000 72%, transparent);
  padding: 10px 14px;
  height: 168px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.tm-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-row.fresh { animation: tm-drop 300ms ease; }
@keyframes tm-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tm-row .t { color: var(--muted, #76d69b); opacity: 0.75; }
.tm-row .k-ssh { color: var(--accent, #00ff88); font-weight: 700; }
.tm-row .k-http { color: #ffea00; font-weight: 700; }
.tm-row .k-ban { color: var(--warn, #ff3b3b); font-weight: 700; }
.tm-row .ip { color: var(--fg, #baf8c7); }
.tm-row .cc { color: var(--accent-2, #39ff14); }
.tm-row .d { color: var(--muted, #76d69b); }

@media (max-width: 760px) {
  .tm-stats { grid-template-columns: repeat(2, 1fr); }
  .tm-feed { font-size: 0.68rem; height: 150px; }
  .tm-legend { display: none; }
}