/* Router graph page — latency / uplink / loss. */
body { overflow-y: auto; height: auto; min-height: 100vh; background: var(--void); color: var(--ink); font-family: var(--body); }

.rt-top {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 16px 26px; border-bottom: 1px solid var(--line);
  background: var(--void-2); position: sticky; top: 0; z-index: 5;
}
.rt-top .back { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: none; }
.rt-top .back:hover { color: var(--fiber); }
.rt-title h1 { font-family: var(--disp); font-size: 18px; letter-spacing: .04em; }
.rt-metaline { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }

.rt-controls { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rt-controls label { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.rt-controls select {
  font-family: var(--mono); font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0;
  background: var(--void); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 11px; cursor: pointer; max-width: 240px;
}
.range-tabs { display: flex; gap: 4px; }
.range-tabs button {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: transparent; border: 1px solid var(--line); padding: 6px 14px; cursor: pointer; border-radius: var(--radius);
}
.range-tabs button.active { color: var(--void); background: var(--fiber); border-color: var(--fiber); font-weight: 700; }

.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; padding: 22px 26px 44px; }
.rt-loading { color: var(--muted); font-size: 14px; padding: 20px; grid-column: 1 / -1; }

.rt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px 14px; }
.rt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rt-cname { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.rt-note { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.rt-canvas { width: 100%; height: 190px; display: block; }
.rt-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 12px; font-family: var(--mono); font-size: 11px; }
.rt-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.rt-legend .v { text-align: right; color: var(--ink); }

@media (max-width: 560px) {
  .rt-grid { grid-template-columns: 1fr; padding: 16px; }
  .rt-controls { width: 100%; }
}