:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
  background: #16181d;
  color: #d7dae0;
}
header {
  padding: 12px 24px;
  background: #1e2127;
  border-bottom: 1px solid #30343c;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header a { color: #fff; text-decoration: none; }
.subtitle { color: #8b93a1; font-size: 13px; }
main { padding: 16px 24px; max-width: 1400px; margin: 0 auto; }

#map { width: 100%; height: 56vh; min-height: 380px; background: #0e1014; border-radius: 6px; }
.leaflet-container { background: #0e1014; }
.leaflet-tooltip {
  background: #1e2127; color: #d7dae0; border: 1px solid #30343c;
  font: 12px ui-monospace, monospace;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #1e2127; color: #d7dae0; }
.map-legend {
  background: rgba(30, 33, 39, 0.92);
  border: 1px solid #30343c;
  border-radius: 4px;
  padding: 6px 10px;
  font: 12px ui-monospace, monospace;
  color: #d7dae0;
  line-height: 1.7;
}
.map-legend .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.card { background: #1e2127; border: 1px solid #30343c; border-radius: 6px; padding: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }

table { border-collapse: collapse; width: 100%; font: 13px ui-monospace, monospace; }
th, td { padding: 6px 10px; border-bottom: 1px solid #30343c; text-align: left; }
th { background: #1e2127; color: #fff; cursor: pointer; user-select: none; }
th[data-sort]:hover { color: #6cc070; }
tr:hover td { background: #1a1d22; }
td a { color: #6cc070; text-decoration: none; }
td a:hover { text-decoration: underline; }
.bad { color: #e06c75; }
.ok { color: #6cc070; }
.warn { color: #e5c07b; }   /* km between 150 and 300 */
.alert { color: #d19a66; }  /* km between 300 and 450 */
.dim { color: #8b93a1; }

.hops { font: 12px ui-monospace, monospace; }
.hops td { padding: 4px 8px; }
.path-detail {
  margin-top: 16px;
  padding: 12px 14px;
  background: #1e2127;
  border: 1px solid #30343c;
  border-radius: 6px;
}
.path-detail h3 { margin: 0 0 8px 0; font: 600 13px ui-monospace, monospace; color: #fff; }

input[type=search] {
  background: #1e2127; color: #d7dae0; border: 1px solid #30343c;
  padding: 6px 10px; border-radius: 4px; font: inherit; width: 240px;
}
label.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #1e2127; border: 1px solid #30343c; border-radius: 4px;
  cursor: pointer; user-select: none;
}
label.toggle:hover { border-color: #4b5161; }
label.toggle input[type=checkbox] { margin: 0; }