feat: add IPv4 address space graph with interactive tooltip

app/static/style.css

@@ -371,3 +371,129 @@ pre.content {
   border: none;
   padding: 0.25rem 0.5rem;
 }
+
+/* IPv4 graph page */
+
+.graph-controls {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+}
+
+.legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+.sw {
+  display: inline-block;
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+}
+.sw.red {
+  background: #e53935;
+}
+.sw.green {
+  background: #43a047;
+}
+.sw.plain {
+  background: #fff;
+}
+
+.graph-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+#graph-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  image-rendering: pixelated;
+  cursor: crosshair;
+}
+
+.graph-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.g-line {
+  position: absolute;
+  background: rgba(148, 163, 184, 0.55);
+}
+.g-v {
+  top: 0;
+  bottom: 0;
+  width: 1px;
+}
+.g-h {
+  left: 0;
+  right: 0;
+  height: 1px;
+}
+
+.g-label {
+  position: absolute;
+  transform: translate(6px, 4px);
+  font-size: 0.55rem;
+  line-height: 1;
+  color: #475569;
+  white-space: nowrap;
+  user-select: none;
+  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
+}
+
+.graph-tooltip {
+  position: absolute;
+  z-index: 5;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.5rem 0.65rem;
+  pointer-events: none;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+  max-width: 260px;
+}
+.graph-tooltip.hidden {
+  display: none;
+}
+
+.tt-head {
+  font-weight: 600;
+  margin-bottom: 0.2rem;
+}
+.tt-status {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+.tt-status.blocked {
+  color: #e53935;
+}
+.tt-status.whitelisted {
+  color: #43a047;
+}
+.tt-status.unlisted {
+  color: var(--muted);
+}
+.tt-list {
+  margin-top: 0.35rem;
+  font-size: 0.72rem;
+  white-space: pre-line;
+  color: var(--text);
+}