/* Minimal utility CSS; Tailwind is loaded via CDN for layout/spacing/typography */
:root {
  --bg: #0b0f14;
  --panel: #101722;
  --ink: #e6edf3;
  --muted: #8aa0b3;
  --accent: #4fd1c5;
  --good: #10b981;
  --warn: #f59e0b;
  --bad:  #ef4444;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); 
}
header {
  border-bottom: 1px solid #182131;
  background: linear-gradient(180deg, #0e1520, #0c121b 60%, #0b0f14);
}
.card { background: var(--panel); border: 1px solid #182131; border-radius: 16px; }
.badge { padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; }
.badge.good { background: color-mix(in oklab, var(--good) 20%, transparent); border: 1px solid #1f4f3b; }
.badge.warn { background: color-mix(in oklab, var(--warn) 20%, transparent); border: 1px solid #5b4a23; }
.badge.bad  { background: color-mix(in oklab, var(--bad) 20%,  transparent); border: 1px solid #5c2628; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #1c2737; padding: 0.6rem 0.5rem; text-align: left; }
th { color: #9fb3c8; font-weight: 600; }
tbody tr:hover { background: #0e1622; }
button.btn {
  padding: 0.6rem 1rem; border-radius: 12px; background: #1c2737; border: 1px solid #253248; color: var(--ink);
}
button.btn.primary { background: #2563eb; border-color: #1d4ed8; }
button.btn.success { background: #16a34a; border-color: #15803d; }
button.btn.warn    { background: #d97706; border-color: #b45309; }
button.btn.danger  { background: #b91c1c; border-color: #991b1b; }
input, select, textarea {
  background: #0c121b; color: var(--ink); border: 1px solid #1c2737; border-radius: 12px; padding: 0.6rem 0.7rem;
}
label { color: #9fb3c8; font-size: 0.9rem; }
.small { font-size: 0.85rem; color: var(--muted); }
#cy { width: 100%; height: 70vh; background: #0b0f14; border-radius: 16px; border: 1px solid #182131; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; margin-right: 6px; }
.legend .node-page { background: #60a5fa; }
.legend .node-include { background: #f472b6; }
.legend .node-asset { background: #34d399; }
legend, fieldset { border: none; }
a.link { color: #8ab4ff; text-decoration: underline; }
.hidden { display: none !important; }