.ni-graph-wrap {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel, #fff);
}
.ni-graph-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 8px;
}
.ni-graph-title { font-weight:600; }
.ni-uptime-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight:700; padding:4px 8px; border-radius:6px;
  background:#f4f6f8;
}
.ni-graph-canvas { width:100%; height:auto; position:relative; }
.ni-graph-svg { width:100%; height:280px; display:block; }
.grid-line { stroke:#e5e7eb; stroke-width:1; }
.axis-y { font-size:11px; fill:#6b7280; }
.axis-x { font-size:11px; fill:#6b7280; }
.latency-path { fill:none; stroke:#1f77b4; stroke-width:2; }
.errors .err-tick { stroke:#d9534f; stroke-width:2; }
.ni-graph-legend { display:flex; gap:16px; font-size:12px; margin-top:6px; color:#6b7280; }
.ni-graph-legend .lg::before {
  content:''; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px;
}
.lg-ok::before { background:#1f77b4; }
.lg-err::before { background:#d9534f; }
.ni-graph-tip {
  position:absolute; pointer-events:none; z-index:2;
  background:#111827; color:#fff; font-size:12px; padding:6px 8px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.ni-graph-tip .tt-date { opacity:.9; margin-bottom:4px; }
.ni-graph-tip .tt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ni-graph-tip .tt-label { opacity:.8; }
.ni-graph-tip .tt-val.ok { color:#34d399; }
.ni-graph-tip .tt-val.ko { color:#f87171; }
.ni-graph-error { padding:16px; text-align:center; color:#b91c1c; }