Teststand

internal/httpserver/ui/static/logo.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-label="KubeViz Logo">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#1d4ed8"/>
+    </linearGradient>
+    <linearGradient id="node" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#22c3b7"/>
+      <stop offset="100%" stop-color="#0f766e"/>
+    </linearGradient>
+  </defs>
+  <rect x="4" y="4" width="88" height="88" rx="18" fill="url(#bg)"/>
+  <g fill="none" stroke="#93c5fd" stroke-width="4" stroke-linecap="round" opacity="0.95">
+    <path d="M24 66 L48 30 L72 66"/>
+    <path d="M24 66 L72 66"/>
+  </g>
+  <g fill="url(#node)">
+    <circle cx="24" cy="66" r="7"/>
+    <circle cx="48" cy="30" r="7"/>
+    <circle cx="72" cy="66" r="7"/>
+  </g>
+</svg>

internal/httpserver/ui/static/styles.css

@@ -0,0 +1,971 @@
+:root {
+  color-scheme: light dark;
+  --font-sans: "IBM Plex Sans", "Inter", "Segoe UI", sans-serif;
+  --radius-xs: 8px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
+
+  --bg: #edf2fa;
+  --bg-elevated: #f7faff;
+  --panel: #ffffff;
+  --ink: #12213b;
+  --muted: #4d5d79;
+  --line: #c9d6e6;
+  --line-strong: #aebfd4;
+  --accent: #0f766e;
+  --accent-ink: #ffffff;
+  --chip: #eff5fd;
+  --canvas-top: #f8fbff;
+  --canvas-bottom: #edf3fb;
+  --tooltip-bg: #111827;
+  --tooltip-ink: #e5e7eb;
+  --code-bg: #0f172a;
+  --code-ink: #e2e8f0;
+  --danger: #b91c1c;
+  --overlay: rgba(15, 23, 42, 0.45);
+  --brand-start: #0f172a;
+  --brand-end: #1d4ed8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0b1220;
+    --bg-elevated: #101a2e;
+    --panel: #111c31;
+    --ink: #e2e8f0;
+    --muted: #b8c6da;
+    --line: #274160;
+    --line-strong: #3b5d87;
+    --accent: #22c3b7;
+    --accent-ink: #052323;
+    --chip: #13253f;
+    --canvas-top: #0d182b;
+    --canvas-bottom: #0a1426;
+    --tooltip-bg: #e2e8f0;
+    --tooltip-ink: #0b1220;
+    --code-bg: #0a1426;
+    --code-ink: #d6e2f4;
+    --danger: #f87171;
+    --overlay: rgba(2, 7, 17, 0.58);
+    --brand-start: #0a1120;
+    --brand-end: #12326d;
+  }
+}
+
+:root[data-theme="light"] {
+  --bg: #edf2fa;
+  --bg-elevated: #f7faff;
+  --panel: #ffffff;
+  --ink: #12213b;
+  --muted: #4d5d79;
+  --line: #c9d6e6;
+  --line-strong: #aebfd4;
+  --accent: #0f766e;
+  --accent-ink: #ffffff;
+  --chip: #eff5fd;
+  --canvas-top: #f8fbff;
+  --canvas-bottom: #edf3fb;
+  --tooltip-bg: #111827;
+  --tooltip-ink: #e5e7eb;
+  --code-bg: #0f172a;
+  --code-ink: #e2e8f0;
+  --danger: #b91c1c;
+  --overlay: rgba(15, 23, 42, 0.45);
+  --brand-start: #0f172a;
+  --brand-end: #1d4ed8;
+}
+
+:root[data-theme="dark"] {
+  --bg: #0b1220;
+  --bg-elevated: #101a2e;
+  --panel: #111c31;
+  --ink: #e2e8f0;
+  --muted: #b8c6da;
+  --line: #274160;
+  --line-strong: #3b5d87;
+  --accent: #22c3b7;
+  --accent-ink: #052323;
+  --chip: #13253f;
+  --canvas-top: #0d182b;
+  --canvas-bottom: #0a1426;
+  --tooltip-bg: #e2e8f0;
+  --tooltip-ink: #0b1220;
+  --code-bg: #0a1426;
+  --code-ink: #d6e2f4;
+  --danger: #f87171;
+  --overlay: rgba(2, 7, 17, 0.58);
+  --brand-start: #0a1120;
+  --brand-end: #12326d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background:
+    radial-gradient(1200px 500px at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
+    linear-gradient(180deg, var(--bg-elevated), var(--bg));
+  color: var(--ink);
+}
+
+.topbar {
+  padding: 0.85rem 1.2rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
+  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.brand-logo {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: 2rem;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.topbar p {
+  margin: 0.2rem 0 0;
+  color: #dbeafe;
+  font-size: 0.97rem;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 330px 1fr 360px;
+  gap: 0.9rem;
+  padding: 0.9rem;
+  min-height: calc(100vh - 84px);
+}
+
+.left-panel,
+.graph-panel,
+.details-panel {
+  background: color-mix(in srgb, var(--panel) 96%, transparent);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 0.95rem;
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(2px);
+}
+
+.tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.35rem;
+  margin-bottom: 0.6rem;
+}
+
+.tab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
+  color: var(--muted);
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.tab-btn.active {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
+}
+
+.tab-icon {
+  width: 0.58rem;
+  height: 0.58rem;
+  border-radius: 999px;
+  border: 1.5px solid currentColor;
+  opacity: 0.72;
+}
+
+.tab-btn.active .tab-icon {
+  background: currentColor;
+  opacity: 0.95;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+h2,
+h3 {
+  margin: 0.15rem 0 0.65rem;
+}
+
+h2 {
+  font-size: 2.2rem;
+  letter-spacing: -0.02em;
+}
+
+h3 {
+  font-size: 1.02rem;
+}
+
+label,
+legend,
+summary {
+  display: block;
+  margin-top: 0.55rem;
+  font-weight: 600;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.help-tip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  margin-left: 0.32rem;
+  border-radius: 999px;
+  background: #2563eb;
+  color: #ffffff;
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: help;
+  position: relative;
+  vertical-align: middle;
+  outline: none;
+}
+
+.help-tip:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, #2563eb 35%, transparent);
+}
+
+.help-tooltip {
+  position: absolute;
+  left: 1.45rem;
+  top: -0.25rem;
+  width: min(420px, 80vw);
+  padding: 0.5rem 0.6rem;
+  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
+  color: var(--ink);
+  font-size: 0.79rem;
+  line-height: 1.35;
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 20;
+}
+
+.help-tip:hover .help-tooltip,
+.help-tip:focus .help-tooltip {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+textarea,
+input,
+select {
+  width: 100%;
+  margin-top: 0.2rem;
+  padding: 0.54rem 0.58rem;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--panel) 90%, var(--bg));
+  color: var(--ink);
+  font-size: 0.97rem;
+}
+
+textarea::placeholder,
+input::placeholder {
+  color: color-mix(in srgb, var(--muted) 55%, transparent);
+}
+
+textarea {
+  resize: vertical;
+}
+
+textarea:focus,
+input:focus,
+select:focus,
+button:focus,
+a:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: 1px;
+}
+
+.file-upload {
+  width: 100%;
+  margin-top: 0.2rem;
+  padding: 0.45rem;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+  flex-wrap: wrap;
+  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
+}
+
+#file-picker-btn {
+  background: color-mix(in srgb, var(--panel) 50%, var(--bg));
+  color: var(--ink);
+  border: 1px solid var(--line-strong);
+}
+
+#file-count {
+  color: var(--muted);
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.visually-hidden-file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+fieldset {
+  margin: 0.65rem 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+fieldset label {
+  font-weight: 500;
+  margin-top: 0.3rem;
+}
+
+.advanced-filters {
+  margin-top: 0.55rem;
+  padding: 0.2rem 0;
+}
+
+.advanced-filters > summary,
+.check-help > summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.advanced-filters > summary::-webkit-details-marker,
+.check-help > summary::-webkit-details-marker {
+  display: none;
+}
+
+.advanced-filters > summary::after,
+.check-help > summary::after {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform 140ms ease;
+  opacity: 0.75;
+  margin-top: -0.15rem;
+}
+
+.advanced-filters[open] > summary::after,
+.check-help[open] > summary::after {
+  transform: rotate(225deg);
+  margin-top: 0.1rem;
+}
+
+.summary-title {
+  display: inline-flex;
+  align-items: center;
+}
+
+.row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 0.6rem;
+}
+
+.row.compact {
+  margin-top: 0.45rem;
+}
+
+button,
+.exports a,
+.chip {
+  padding: 0.42rem 0.72rem;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
+}
+
+button:hover,
+.exports a:hover {
+  transform: translateY(-1px);
+}
+
+.btn-primary,
+button[type="submit"] {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+
+.exports a {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+
+.btn-primary:hover,
+button[type="submit"]:hover {
+  background: color-mix(in srgb, var(--accent) 90%, #000);
+  border-color: color-mix(in srgb, var(--accent) 90%, #000);
+}
+
+.btn-secondary,
+button[type="button"],
+#close-diff,
+#close-checks {
+  border: 1px solid var(--line-strong);
+  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
+  color: var(--accent);
+}
+
+.toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.btn-icon {
+  width: 0.62rem;
+  height: 0.62rem;
+  border-radius: 2px;
+  border: 1.5px solid currentColor;
+  position: relative;
+}
+
+.btn-icon::after {
+  content: "";
+  position: absolute;
+  right: -0.26rem;
+  top: 0.14rem;
+  width: 0.26rem;
+  height: 0.26rem;
+  border-top: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.btn-secondary:hover,
+button[type="button"]:hover,
+#close-diff:hover,
+#close-checks:hover {
+  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-strong));
+  background: color-mix(in srgb, var(--panel) 70%, var(--bg));
+}
+
+.theme-toggle {
+  min-width: 132px;
+}
+
+.status {
+  margin-top: 0.6rem;
+  font-size: 0.95rem;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.1rem;
+}
+
+.status-info {
+  color: var(--muted);
+}
+
+.status-ok {
+  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
+}
+
+.status-warn {
+  color: #b45309;
+}
+
+.status-error {
+  color: var(--danger);
+}
+
+.parse-issues {
+  margin-top: 0.45rem;
+  padding: 0.5rem 0.55rem;
+  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--panel) 84%, var(--bg));
+}
+
+.parse-issues strong {
+  display: block;
+  font-size: 0.86rem;
+  color: var(--muted);
+}
+
+#parse-issues-list {
+  margin: 0.35rem 0 0;
+  padding-left: 1rem;
+}
+
+#parse-issues-list li {
+  margin: 0.2rem 0;
+  font-size: 0.84rem;
+  color: var(--ink);
+  word-break: break-word;
+}
+
+.tool-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.65rem;
+}
+
+.field-hint {
+  margin: 0.32rem 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.path-result {
+  margin-top: 0.5rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 0.45rem 0.55rem;
+  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
+  color: var(--muted);
+  font-size: 0.84rem;
+  word-break: break-word;
+}
+
+.path-steps {
+  margin-top: 0.45rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+}
+
+.path-step {
+  border: 1px solid var(--line-strong);
+  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 0.2rem 0.48rem;
+  font-size: 0.78rem;
+}
+
+.path-step:hover {
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong));
+  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
+}
+
+.path-arrow {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.graph-panel {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.toolbar {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--muted);
+  margin-bottom: 0.4rem;
+}
+
+.kbd-hint {
+  margin-left: auto;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.kbd-hint kbd {
+  border: 1px solid var(--line-strong);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  padding: 0.08rem 0.3rem;
+  background: color-mix(in srgb, var(--panel) 85%, var(--bg));
+  color: var(--ink);
+  font-family: var(--font-sans);
+}
+
+.toolbar select {
+  width: auto;
+  margin-top: 0;
+  padding: 0.25rem 0.4rem;
+}
+
+.toolbar button {
+  padding: 0.25rem 0.55rem;
+  font-size: 0.85rem;
+}
+
+.chips {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.45rem;
+  min-height: 1.7rem;
+}
+
+.chip {
+  background: var(--chip);
+  color: var(--muted);
+  border: 1px solid var(--line);
+  font-weight: 600;
+  padding: 0.22rem 0.5rem;
+}
+
+.legend {
+  display: flex;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+  color: var(--muted);
+  font-size: 0.85rem;
+  margin-bottom: 0.45rem;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border-radius: 50%;
+  margin-right: 0.3rem;
+  border: 1px solid rgba(15, 23, 42, 0.18);
+}
+
+.kind-workload {
+  background: #0f766e;
+}
+
+.kind-network {
+  background: #2563eb;
+}
+
+.kind-config {
+  background: #14b8a6;
+}
+
+.kind-secret {
+  background: #dc2626;
+}
+
+.kind-group {
+  background: #7c3aed;
+}
+
+.health-warning {
+  background: #f59e0b;
+}
+
+#graph-canvas {
+  width: 100%;
+  flex: 1;
+  min-height: 620px;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(180deg, var(--canvas-top), var(--canvas-bottom));
+}
+
+.graph-overlay,
+.no-match {
+  position: absolute;
+  top: 46%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: color-mix(in srgb, var(--panel) 94%, transparent);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  padding: 0.7rem 0.85rem;
+  min-width: min(420px, 85%);
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  align-items: flex-start;
+  box-shadow: var(--shadow-sm);
+}
+
+.graph-overlay span,
+.no-match span {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.details-panel pre {
+  max-height: 72vh;
+  overflow: auto;
+  background: var(--code-bg);
+  color: var(--code-ink);
+  padding: 0.7rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 30%, transparent);
+}
+
+.sensitive {
+  color: var(--danger);
+  font-weight: 700;
+}
+
+.hidden {
+  display: none;
+}
+
+.edge-label {
+  font-size: 10px;
+  fill: var(--muted);
+  pointer-events: none;
+  user-select: none;
+}
+
+.findings-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0;
+  max-height: 55vh;
+  overflow: auto;
+}
+
+.findings-list li {
+  padding: 0.35rem 0.45rem;
+  margin-bottom: 0.35rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  font-size: 0.85rem;
+  background: color-mix(in srgb, var(--panel) 90%, var(--bg));
+}
+
+.finding-error {
+  border-color: #ef4444;
+}
+
+.finding-warning {
+  border-color: #f59e0b;
+}
+
+.check-help {
+  margin-bottom: 0.55rem;
+}
+
+.check-help p {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.check-config {
+  max-height: 220px;
+  overflow: auto;
+}
+
+.collapse-controls {
+  margin-top: 0.5rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 0.45rem;
+  background: color-mix(in srgb, var(--panel) 85%, var(--bg));
+}
+
+.collapse-controls label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.25rem;
+}
+
+.search-suggest {
+  margin-top: 0.35rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
+  padding: 0.25rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.suggest-item {
+  width: 100%;
+  text-align: left;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--ink);
+  padding: 0.38rem 0.45rem;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.suggest-item:hover,
+.suggest-item.active {
+  border-color: var(--line);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+.edge-tooltip {
+  position: absolute;
+  pointer-events: none;
+  background: var(--tooltip-bg);
+  color: var(--tooltip-ink);
+  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
+  border-radius: var(--radius-xs);
+  padding: 0.35rem 0.45rem;
+  font-size: 0.78rem;
+  max-width: 280px;
+  z-index: 20;
+  white-space: pre-line;
+}
+
+.minimap-wrap {
+  position: absolute;
+  right: 0.9rem;
+  bottom: 0.9rem;
+  width: 220px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
+  box-shadow: var(--shadow-sm);
+  padding: 0.35rem;
+}
+
+.minimap-wrap strong {
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+#minimap-canvas {
+  margin-top: 0.3rem;
+  width: 100%;
+  height: 132px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--canvas-top) 70%, var(--canvas-bottom));
+  cursor: crosshair;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 40;
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-card {
+  width: min(780px, 92vw);
+  max-height: 88vh;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 0.8rem;
+  box-shadow: var(--shadow-md);
+}
+
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.diff-output {
+  margin-top: 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem;
+  font-size: 0.85rem;
+  max-height: 220px;
+  overflow: auto;
+  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
+}
+
+@media (max-width: 1280px) {
+  .layout {
+    grid-template-columns: 300px 1fr;
+  }
+
+  .details-panel {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 980px) {
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .theme-toggle {
+    align-self: flex-end;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  #graph-canvas {
+    min-height: 420px;
+  }
+
+  .kbd-hint {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .minimap-wrap {
+    position: static;
+    width: 100%;
+    margin-top: 0.5rem;
+  }
+}