:root{
  color-scheme:dark;
  --bg:#090d12;--panel:#101720;--panel2:#0c1219;--line:#22303d;
  --text:#e8f0f7;--muted:#8798a8;--good:#69e2a3;--warn:#f0c96a;
  --cyan:#70c7ff;--danger:#ff7d88;--shadow:0 18px 50px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:
  radial-gradient(circle at 15% 0%,rgba(65,122,167,.13),transparent 30rem),
  radial-gradient(circle at 85% 10%,rgba(74,170,128,.08),transparent 26rem),
  var(--bg);
  color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace
}
.shell{width:min(1380px,calc(100% - 28px));margin:0 auto;padding:28px 0 40px}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px}
.eyebrow,.sectionKicker{color:var(--good);font-size:.72rem;letter-spacing:.18em;font-weight:800}
h1{font-size:clamp(2.3rem,6vw,4.7rem);line-height:.92;margin:.25rem 0 .65rem;letter-spacing:-.06em}
h2{font-size:1.08rem;margin:.25rem 0 0}
.hero p{max-width:760px;color:var(--muted);margin:0;line-height:1.55}
.livebox{
  min-width:190px;display:flex;gap:12px;align-items:center;padding:14px 16px;
  border:1px solid var(--line);background:rgba(16,23,32,.82);border-radius:14px;box-shadow:var(--shadow)
}
.livebox strong{display:block;font-size:.87rem}.livebox small{display:block;color:var(--muted);margin-top:3px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 5px rgba(240,201,106,.08)}
.dot.live{background:var(--good);box-shadow:0 0 18px rgba(105,226,163,.6)}
.dot.stale{background:var(--danger);box-shadow:0 0 18px rgba(255,125,136,.38)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.card{
  background:linear-gradient(180deg,rgba(17,25,35,.97),rgba(12,18,25,.97));
  border:1px solid var(--line);border-radius:14px;padding:15px;min-height:105px;box-shadow:var(--shadow)
}
.card .label{color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.card .value{font-size:1.8rem;font-weight:900;margin-top:14px;letter-spacing:-.05em}
.card .sub{color:var(--muted);font-size:.72rem;margin-top:3px}
.panel{
  background:rgba(14,21,29,.94);border:1px solid var(--line);border-radius:15px;
  padding:16px;margin-top:12px;box-shadow:var(--shadow)
}
.toolbar{display:flex;gap:18px;align-items:end;justify-content:space-between}
.toolbar label{display:block;color:var(--muted);font-size:.72rem;margin-bottom:7px}
.toolbar>div:first-child{flex:1}
input{
  width:100%;border:1px solid var(--line);background:#080d12;color:var(--text);
  border-radius:10px;padding:12px 13px;font:inherit;outline:none
}
input:focus{border-color:#3f6f8e;box-shadow:0 0 0 3px rgba(112,199,255,.08)}
button{
  border:1px solid #31576e;background:#102434;color:#bfe5ff;border-radius:9px;
  padding:10px 13px;font:inherit;cursor:pointer
}
button:hover{background:#153147}
.refreshControls{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:.72rem}
.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.countPill{border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted);font-size:.72rem}
.tableWrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{text-align:left;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid rgba(34,48,61,.65);font-size:.8rem;vertical-align:middle}
tbody tr:hover{background:rgba(112,199,255,.035)}
.route{color:#c6e8ff;white-space:nowrap}
.route span{color:#547285;padding:0 4px}
.score{font-weight:900}
.score.confirmed{color:var(--good)}
.badge{
  display:inline-block;border-radius:999px;padding:3px 7px;font-size:.63rem;font-weight:900;
  letter-spacing:.05em;border:1px solid var(--line);margin-left:7px
}
.badge.confirmed{color:var(--good);border-color:#245a43;background:rgba(105,226,163,.07)}
.badge.passive{color:var(--cyan);border-color:#28566f;background:rgba(112,199,255,.06)}
.empty{display:none;color:var(--muted);font-size:.8rem;padding:18px 4px 5px}
.split{display:grid;grid-template-columns:1.12fr .88fr;gap:12px}
.sessionList,.stationList{display:grid;gap:8px}
.session,.station{
  border:1px solid rgba(34,48,61,.75);background:var(--panel2);border-radius:10px;padding:11px 12px
}
.sessionTop,.stationTop{display:flex;justify-content:space-between;gap:14px;align-items:center}
.sessionMeta,.stationMeta{color:var(--muted);font-size:.7rem;margin-top:6px;line-height:1.45}
.session strong,.station strong{font-size:.82rem}
.typeTag{color:var(--muted);font-size:.62rem;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:3px 6px}
footer{display:flex;justify-content:space-between;gap:12px;color:#607383;font-size:.68rem;padding:18px 4px 0}
.error{
  border:1px solid #6a2e35;background:rgba(255,125,136,.08);color:#ffc3c8;
  padding:12px;border-radius:10px;margin-bottom:12px
}
@media(max-width:1050px){.cards{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:650px){
  .shell{width:min(100% - 18px,1380px);padding-top:18px}
  .hero{align-items:flex-start;flex-direction:column}
  .livebox{width:100%}
  .cards{grid-template-columns:repeat(2,1fr)}
  .toolbar{align-items:stretch;flex-direction:column}
  .refreshControls{justify-content:space-between}
  .panel{padding:13px}
  footer{flex-direction:column}
}


/* PacketPath v0.2 topology */
.sectionNote{
  color:var(--muted);font-size:.72rem;line-height:1.45;margin:.45rem 0 0;max-width:760px
}
.topologyHead{align-items:flex-start}
.topologyControls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.topologyMode.active{
  background:#183a2a;border-color:#2d6b4e;color:#bff4d5
}
.topologyLegend{
  display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.68rem;
  margin:2px 0 12px;padding:9px 10px;border:1px solid rgba(34,48,61,.7);
  border-radius:10px;background:#0a1016
}
.topologyLegend span{display:inline-flex;gap:7px;align-items:center}
.legendDot{display:inline-block;width:9px;height:9px;border-radius:50%}
.legendDot.root{background:var(--good);box-shadow:0 0 10px rgba(105,226,163,.45)}
.legendDot.digi{background:var(--cyan)}
.legendDot.station{background:#d0d8e0}
.legendLine{display:inline-block;width:20px;height:2px;border-radius:999px}
.legendLine.confirmed{background:var(--good)}
.legendLine.passive{background:#45677c}

.topologyWrap{
  position:relative;overflow:hidden;min-height:520px;border:1px solid var(--line);
  border-radius:12px;background:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px),
    #080d12;
  background-size:28px 28px
}
#topologySvg{
  display:block;width:100%;height:clamp(520px,62vw,720px);
  touch-action:none;user-select:none;cursor:grab
}
#topologySvg.dragging{cursor:grabbing}
.topologyEmpty{
  display:none;position:absolute;inset:0;place-items:center;color:var(--muted);
  font-size:.8rem;pointer-events:none
}
.topologyEdge{
  fill:none;stroke:#45677c;stroke-width:2;opacity:.62;vector-effect:non-scaling-stroke
}
.topologyEdge.confirmed{
  stroke:var(--good);stroke-width:2.6;opacity:.82;
  filter:drop-shadow(0 0 4px rgba(105,226,163,.16))
}
.topologyEdge.dimmed{opacity:.12}
.topologyEdge.focused{opacity:1;stroke-width:4}
.topologyNode{cursor:pointer}
.topologyNode circle{
  stroke:#081019;stroke-width:3;vector-effect:non-scaling-stroke;
  transition:r .12s ease,filter .12s ease,opacity .12s ease
}
.topologyNode.root circle{fill:var(--good);filter:drop-shadow(0 0 9px rgba(105,226,163,.38))}
.topologyNode.digi circle{fill:var(--cyan)}
.topologyNode.station circle{fill:#cbd5de}
.topologyNode.confirmed station circle{stroke:var(--good)}
.topologyNode text{
  fill:#cbd8e2;font-size:13px;font-weight:800;paint-order:stroke;
  stroke:#080d12;stroke-width:4px;stroke-linejoin:round;pointer-events:none
}
.topologyNode.root text{fill:#caffdf}
.topologyNode:hover circle,.topologyNode.selected circle{
  filter:drop-shadow(0 0 10px rgba(112,199,255,.58))
}
.topologyNode.selected circle{stroke:#fff;stroke-width:4}
.topologyNode.dimmed{opacity:.17}
.nodeStatusRing{
  fill:none!important;stroke:var(--good)!important;stroke-width:2!important;
  stroke-dasharray:3 3;opacity:.78
}
.topologyDetails{
  margin-top:10px;border:1px solid var(--line);border-radius:11px;background:#0a1016;
  min-height:74px;padding:12px 13px
}
.detailsIdle{display:flex;flex-direction:column;gap:5px}
.detailsIdle strong{font-size:.82rem}
.detailsIdle span{color:var(--muted);font-size:.7rem}
.detailsGrid{
  display:grid;grid-template-columns:minmax(120px,.55fr) repeat(4,minmax(100px,1fr));
  gap:10px;align-items:start
}
.detailName{font-size:1rem;font-weight:900}
.detailLabel{
  display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:4px
}
.detailValue{font-size:.78rem;line-height:1.45}
.detailRoute{grid-column:1/-1;padding-top:4px}
.detailLinks{color:var(--muted)}
.nodeBadge{
  display:inline-block;margin-left:7px;border:1px solid var(--line);border-radius:999px;
  padding:2px 6px;font-size:.58rem;text-transform:uppercase;color:var(--muted)
}
.topologyHint{
  color:#617687;font-size:.64rem;margin-top:8px;text-align:right
}

@media(max-width:760px){
  .topologyHead{flex-direction:column}
  .topologyControls{justify-content:flex-start;width:100%}
  .topologyControls button{flex:1}
  .topologyWrap{min-height:480px}
  #topologySvg{height:540px}
  .detailsGrid{grid-template-columns:1fr 1fr}
  .detailRoute{grid-column:1/-1}
}
@media(max-width:470px){
  .detailsGrid{grid-template-columns:1fr}
  .detailRoute{grid-column:auto}
}


/* PacketPath v0.2.1 node popup */
.nodePopup{
  position:absolute;z-index:12;display:none;min-width:250px;max-width:min(360px,calc(100% - 20px));
  background:rgba(7,12,17,.97);border:1px solid #35576d;border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 0 1px rgba(112,199,255,.04);
  padding:12px 13px;backdrop-filter:blur(10px)
}
.nodePopup.open{display:block}
.nodePopupHead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:9px
}
.nodePopupTitle{font-size:.95rem;font-weight:900;letter-spacing:.01em}
.nodePopupType{
  display:inline-block;margin-left:7px;border:1px solid var(--line);border-radius:999px;
  padding:2px 6px;font-size:.56rem;text-transform:uppercase;color:var(--muted);vertical-align:1px
}
.nodePopupClose{
  width:28px;height:28px;min-width:28px;padding:0;display:grid;place-items:center;
  border-radius:8px;background:#0c151d;color:#90a9ba;border-color:#29404f;font-size:1rem;line-height:1
}
.nodePopupGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.nodePopupItem{min-width:0}
.nodePopupLabel{
  display:block;color:var(--muted);font-size:.59rem;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:3px
}
.nodePopupValue{font-size:.75rem;line-height:1.35;overflow-wrap:anywhere}
.nodePopupRoute{
  grid-column:1/-1;border-top:1px solid rgba(34,48,61,.65);padding-top:8px;margin-top:2px
}
.nodePopupRoute .route{white-space:normal}
.nodePopupStatus{
  display:inline-block;border-radius:999px;padding:2px 6px;font-size:.56rem;font-weight:900;
  letter-spacing:.05em;margin-left:6px;border:1px solid var(--line)
}
.nodePopupStatus.confirmed{color:var(--good);border-color:#245a43;background:rgba(105,226,163,.07)}
.nodePopupStatus.passive{color:var(--cyan);border-color:#28566f;background:rgba(112,199,255,.06)}

@media(max-width:650px){
  .nodePopup{
    position:absolute;left:10px!important;right:10px!important;top:auto!important;bottom:10px;
    width:auto;max-width:none
  }
}


/* PacketPath v0.2.2 mobile polish */
.zoomButton{
  min-width:42px;font-size:1.15rem;font-weight:900;padding:8px 11px;
  line-height:1
}

@media(max-width:650px){
  /*
   * Desktop tables are excellent on a monitor but become cramped on a phone.
   * Turn each tbody row into a readable mini-card instead of forcing a
   * horizontally scrolling 720px table into a ~390px viewport.
   */
  .tableWrap{
    overflow:visible;
  }

  .tableWrap table{
    min-width:0;
    width:100%;
    display:block;
  }

  .tableWrap thead{
    display:none;
  }

  .tableWrap tbody{
    display:grid;
    gap:9px;
    width:100%;
  }

  .tableWrap tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 14px;
    width:100%;
    padding:12px;
    border:1px solid rgba(34,48,61,.78);
    border-radius:11px;
    background:#0b1219;
  }

  .tableWrap tbody tr:hover{
    background:#0b1219;
  }

  .tableWrap tbody td{
    display:block;
    min-width:0;
    padding:0;
    border:0;
    font-size:.78rem;
    overflow-wrap:anywhere;
  }

  .tableWrap tbody td::before{
    content:attr(data-label);
    display:block;
    color:var(--muted);
    font-size:.58rem;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
  }

  .tableWrap tbody td[data-label="Station"],
  .tableWrap tbody td[data-label="Source"],
  .tableWrap tbody td[data-label="Route"],
  .tableWrap tbody td[data-label="VIA"]{
    grid-column:1/-1;
  }

  .tableWrap tbody td[data-label="Station"],
  .tableWrap tbody td[data-label="Source"]{
    padding-bottom:4px;
    border-bottom:1px solid rgba(34,48,61,.6);
  }

  .tableWrap .route{
    white-space:normal;
    line-height:1.6;
    overflow-wrap:anywhere;
  }

  .tableWrap .route span{
    display:inline-block;
    padding:0 3px;
  }

  .badge{
    white-space:nowrap;
  }

  .topologyControls{
    display:grid;
    grid-template-columns:1fr 1fr auto auto;
    gap:7px;
  }

  .topologyControls #topologyResetBtn{
    grid-column:1/-1;
  }

  .topologyControls button{
    min-height:40px;
  }
}

@media(max-width:390px){
  .tableWrap tbody tr{
    grid-template-columns:1fr;
  }

  .tableWrap tbody td{
    grid-column:1!important;
  }

  .topologyControls{
    grid-template-columns:1fr 1fr;
  }

  .topologyControls #topologyResetBtn{
    grid-column:1/-1;
  }
}


/* PacketPath v0.3 logical network + clipboard */
.nodePopupCopy{
  margin-top:9px;width:100%;border-color:#2b654a;background:#112d22;color:#bdf1d3;
  font-size:.7rem;font-weight:800
}
.nodePopupCopy:hover{background:#173c2d}
.badge.network-confirmed{color:var(--good);border-color:#245a43;background:rgba(105,226,163,.07)}
.badge.network-responsive{color:var(--cyan);border-color:#28566f;background:rgba(112,199,255,.06)}
.badge.network-attempted{color:var(--warn);border-color:#64542c;background:rgba(240,201,106,.06)}
.badge.network-failed{color:var(--danger);border-color:#6a2e35;background:rgba(255,125,136,.06)}
\n\n/* PacketPath v0.3.1 topology layer switch + latest traversal */\n.topologyControlStack{display:flex;flex-direction:column;gap:8px;align-items:flex-end}\n.topologyLayerTabs{display:flex;gap:7px}\n.topologyLayerButton{min-width:130px}\n.topologyLayerButton.active{background:#183a2a;border-color:#2d6b4e;color:#bff4d5}\n.legendLine.latest{background:#75ffad;height:3px;box-shadow:0 0 9px rgba(117,255,173,.65)}\n.topologyEdge.latest{stroke:#75ffad;stroke-width:4.5;opacity:1;filter:drop-shadow(0 0 7px rgba(117,255,173,.55))}\n.topologyNode.latest circle{stroke:#75ffad!important;stroke-width:4!important;filter:drop-shadow(0 0 10px rgba(117,255,173,.55))}\n.latestNetworkRow{background:rgba(105,226,163,.045)}\n.latestTag{color:#75ffad;border-color:#2d6b4e;background:rgba(105,226,163,.08)}\n@media(max-width:760px){\n  .topologyControlStack{align-items:stretch;width:100%}\n  .topologyLayerTabs{display:grid;grid-template-columns:1fr 1fr}\n  .topologyLayerButton{min-width:0}\n}\n