/* mastercdn-xanalyse — Nodes page. Uses app.css tokens; works in both themes. */
.nodes-stats { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.nodes-stat { flex:1 1 140px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.nodes-stat .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.nodes-stat .v { font-size:24px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.nodes-stat .v.bad { color:#f85149; }
.nodes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.nodes-tile { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.nodes-tile h3 { margin:0 0 8px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.nodes-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; padding:3px 0; border-bottom:1px solid var(--line-soft); }
.nodes-row:last-child { border-bottom:none; }
.nodes-row button.node-link { background:none; border:none; padding:0; color:var(--accent); cursor:pointer; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; text-align:left; }
.nodes-row button.node-link:hover { text-decoration:underline; }
.nodes-row .val { font-variant-numeric:tabular-nums; font-weight:600; color:var(--fg); white-space:nowrap; }
.nodes-row .val.warn { color:#d29922; }
.nodes-row .val.crit { color:#f85149; }
.nodes-row .bar { flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin:0 6px; }
.nodes-row .bar i { display:block; height:100%; background:var(--accent); }
.nodes-picker { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.nodes-picker label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.nodes-picker select { background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:13px; min-width:240px; }
.nodes-charts { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.nodes-chart { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.nodes-chart h3 { margin:0 0 4px; font-size:12px; font-weight:600; color:var(--muted); display:flex; justify-content:space-between; }
.nodes-chart h3 .now { color:var(--fg); font-variant-numeric:tabular-nums; }
.nodes-chart svg { width:100%; height:110px; display:block; }
.nodes-chart .ln { fill:none; stroke-width:1.6; }
.nodes-chart .ln2 { fill:none; stroke-width:1.6; stroke-dasharray:4 3; }
.nodes-chart .grid { stroke:var(--line); stroke-width:1; }
.nodes-chart .ax { fill:var(--muted); font-size:10px; }
.nodes-sub { font-size:13px; font-weight:600; margin:18px 0 8px; color:var(--fg); }
.ratio-low { color:#f85149; font-weight:600; }
.ratio-mid { color:#d29922; font-weight:600; }
.ratio-ok  { color:var(--ok); font-weight:600; }

/* anomaly: info level + troubleshooting guide */
.diag-row--info { border-left:3px solid #79c0ff; background:rgba(121,192,255,0.06); border-radius:6px; padding:8px 12px; margin-bottom:8px; }
.diag-row--info .diag-val { color:#79c0ff; }
.nodes-guide { margin-top:6px; font-size:12px; color:var(--muted); }
.nodes-guide summary { cursor:pointer; color:var(--accent); font-weight:600; }
.nodes-guide p { margin:6px 0; line-height:1.5; }
.nodes-guide ol { margin:4px 0 4px 18px; padding:0; }
.nodes-guide li { margin:4px 0; line-height:1.5; }
.nodes-guide code { display:block; margin-top:3px; padding:4px 8px; background:var(--bg); border:1px solid var(--line); border-radius:4px; font-size:11px; white-space:pre-wrap; word-break:break-all; color:var(--fg); }
.nodes-guide-avoid { color:#d29922; }