:root {
  font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  color:#E2E8F0;
  background:#080D14;
  font-synthesis:none;
  --muted:#94A3B8;
  --line:rgba(255,255,255,.08);
  --focus:#38BDF8;
  --accent:#2DD4BF;
  --out:#7fe0e5;
  --in:#ebbf7b;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
* {box-sizing:border-box}
body {margin:0}
[hidden] {display:none!important}
button,input,select {font:inherit}
button,select {cursor:pointer}
button {
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 12px;border:1px solid var(--line);border-radius:6px;
  background:#0F172A;color:#CBD5E1;font-size:12px;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
button:hover {background:#18283A;color:#F1F5F9}
button:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid var(--focus);outline-offset:2px}
button:disabled {opacity:.35;cursor:default}
header {
  height:68px;padding:0 3.6%;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand {font-size:21px;color:inherit;text-decoration:none;font-weight:600;display:flex;gap:11px;align-items:center;white-space:nowrap}
.brand-mark {display:block;flex:none;width:36px;height:36px}
.brand-name {letter-spacing:-.6px}
.brand-name>span {color:var(--accent)}
.session {display:flex;gap:10px;align-items:center}
#status {
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;background:rgba(15,23,42,.55);
  font-size:11px;color:var(--muted);white-space:nowrap;
}
#status::before {content:"";width:6px;height:6px;flex:none;border-radius:50%;background:#64748B}
#status[data-state="running"] {color:var(--accent)}
#status[data-state="running"]::before {background:var(--accent);box-shadow:0 0 7px #2DD4BF66;animation:signal 2s ease-in-out infinite}
#status[data-state="paused"]::before,#status[data-state="warning"]::before {background:#C7A76B}
.session .primary {height:32px;padding:0 14px;gap:7px;font-size:13px;font-weight:600;color:var(--accent);border-color:var(--accent);background:rgba(45,212,191,.15)}
.session .primary:hover {background:var(--accent);color:#080D14;box-shadow:0 0 14px #2DD4BF22}
.primary span {font-size:10px}
main {max-width:2000px;margin:auto}
.map {
  position:relative;min-height:470px;height:calc(100svh - 310px);max-height:850px;overflow:hidden;
  background:radial-gradient(ellipse at 56% 57%,#152739 0,#0C1927 48%,#080D14 86%);
}
.map-heading {position:absolute;left:24px;top:20px;z-index:1;pointer-events:none;text-shadow:0 2px 10px #000C}
.eyebrow {font-size:9px;letter-spacing:3px;color:#8299AE}
h1 {font-size:20px;font-weight:400;margin:9px 0 0;letter-spacing:1.5px;color:rgba(255,255,255,.85)}
.map-tooltip {position:absolute;z-index:2;max-width:calc(100% - 16px);padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(15,23,42,.92);color:#E2E8F0;font-size:12px;pointer-events:none;overflow-wrap:anywhere;box-shadow:0 4px 16px #0005}
canvas {width:100%;height:100%;display:block;touch-action:none}
.map-bottom {position:absolute;bottom:36px;left:3.6%;right:3.6%;display:flex;align-items:center;gap:16px;pointer-events:none}
.map-bottom button {pointer-events:auto}
.legend {display:flex;gap:14px;padding:4px 10px;border-radius:6px;background:rgba(15,23,42,.6);font-size:11px;letter-spacing:.5px}
.legend span {display:flex;align-items:center;gap:7px}
.legend span::before {content:"";display:block;width:16px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 0 5px currentColor}
.out {color:var(--out)}
.in {color:var(--in)}
#selection {font-size:11px;color:#BECED9;pointer-events:auto;cursor:pointer}
.map-buttons {display:flex;gap:0;padding:2px;margin-left:auto;transform:translateY(-6px);border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(15,23,42,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.map-buttons button {height:28px;padding:0 10px;border:0;border-radius:4px;background:transparent;font-size:12px}
.map-buttons button+button {border-left:1px solid var(--line);border-top-left-radius:0;border-bottom-left-radius:0}
.map-buttons button:hover {background:rgba(56,189,248,.12);color:var(--focus)}
.map-buttons #zoom-in,.map-buttons #zoom-out {width:28px;padding:0;font-size:17px}
.map-credit {position:absolute;right:3.6%;bottom:12px;font-size:8px;color:#94A3B8;letter-spacing:1px;opacity:.35}
.traffic {border-top:1px solid var(--line);padding:0 3.6% 18px}
.metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.metrics>div {border-left:1px solid rgba(255,255,255,.06);padding:14px 24px;min-width:0}
.metrics>div:first-child {border-left:0}
.metrics span {display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.metrics strong {font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;line-height:26px;letter-spacing:-.5px;white-space:nowrap}
body[data-state="stopped"] .metrics strong {color:#64748B}
.table-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:18px 0 14px}
.table-title,.privacy {display:flex;align-items:center}
.table-title {gap:16px;flex:none}
.privacy {gap:6px}
h2 {display:flex;align-items:center;font-size:14px;font-weight:500;white-space:nowrap;margin:0}
#row-count {font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;line-height:16px;margin-left:8px;padding:2px 8px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.06)}
.table-toolbar button,.table-toolbar select,.search {height:30px;border-radius:6px;font-size:12px}
.table-toolbar .toggle {height:28px;gap:6px;padding:0 9px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.03);color:#94A3B8}
.toggle::before {content:"";width:6px;height:6px;border-radius:50%;background:#475569;flex:none}
.table-toolbar .toggle[aria-pressed="true"] {color:#2DD4BF;border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.12)}
.toggle[aria-pressed="true"]::before {background:#2DD4BF}
.table-toolbar .toggle:hover {border-color:rgba(45,212,191,.5)}
.analysis {display:inline-flex;align-items:center;flex:none;gap:6px}
.filters {display:flex;gap:8px;align-items:center;margin-left:auto;min-width:0}
select {color:#CBD5E1;background:#0F172A;border:1px solid rgba(255,255,255,.1);padding:0 26px 0 9px}
select:focus-visible {border-color:var(--focus)}
.search {border:1px solid rgba(255,255,255,.1);background:#0F172A;padding:0 9px;color:var(--muted);display:flex;gap:7px;align-items:center;width:200px;flex:none}
.search:focus-within {border-color:var(--focus)}
.search input {width:100%;min-width:0;height:28px;padding:0;border:0;background:transparent;color:#E2E8F0;font-size:12px;outline:0}
.search input::placeholder {color:#64748B}
.search input:focus-visible {outline:none}
.privacy-ip .search {visibility:hidden}
#expand {display:none}
table {width:100%;border-collapse:collapse;text-align:left;font-size:11px}
thead {background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
th {font-size:11px;font-weight:500;color:var(--muted);padding:10px;white-space:nowrap}
.sort-label {display:inline-flex;align-items:center;gap:4px;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;box-shadow:none}
.sort-label::after {content:"↕";color:#64748B}
.sort-label[data-order="desc"],.sort-label[data-order="asc"] {color:#2DD4BF}
.sort-label[data-order="desc"]::after {content:"↓";color:inherit}
.sort-label[data-order="asc"]::after {content:"↑";color:inherit}
.sort-label:hover {color:#2DD4BF;background:transparent}
td {padding:12px 10px;border-bottom:1px solid #FFFFFF0A;white-space:nowrap}
th:nth-last-child(-n+3),td:nth-last-child(-n+3) {text-align:right;font-variant-numeric:tabular-nums}
td:nth-last-child(-n+3) {font-family:var(--mono)}
td.endpoint {font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.flow-table {table-layout:fixed;min-width:1080px}
.flow-table th:nth-child(1) {width:11%}
.flow-table th:nth-child(2),.flow-table th:nth-child(4) {width:24%}
.flow-table th:nth-child(3) {width:6%}
.flow-table th:nth-child(5) {width:14%}
.flow-table th:nth-last-child(-n+3) {width:7%}
.flow-table td {height:44px;padding:7px 10px;line-height:16px;overflow:hidden;text-overflow:ellipsis}
.line-badge {display:inline-block;padding:1px 5px;border:1px solid rgba(255,255,255,.06);border-radius:4px;background:rgba(255,255,255,.04);color:#CBD5E1;font-size:10px;line-height:16px}
.transport {margin-left:7px;color:#64748B;font-family:var(--mono);font-size:10px}
.flow-table td:first-child small {display:block;font-size:10px;color:var(--muted)}
.endpoint-host {color:#E2E8F0}
.endpoint-port,.endpoint-bracket {color:#64748B}
.table-wrap {overflow:auto}
tbody tr {cursor:pointer}
tbody tr:hover,tbody tr.selected {background:#38BDF808}
#empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:130px;margin:0;padding:22px;color:#64748B;font-size:12px;text-align:center;background:radial-gradient(ellipse at 50% 50%,#38BDF804,transparent 65%)}
#empty svg {width:34px;height:34px;fill:none;stroke:#38BDF8;stroke-width:1;opacity:.35}
#empty svg .radar-dot {fill:#38BDF8;stroke:none}
.table-footer {display:flex;justify-content:space-between;align-items:center;color:#718B9D;font-size:10px;margin-top:12px}
.table-footer>div {display:flex;align-items:center;gap:14px}
.page-size {display:flex;align-items:center;gap:6px;white-space:nowrap}
.page-size select {height:28px;border-radius:6px;font-size:11px;padding-left:7px}
.table-footer button {height:26px;background:transparent;border:0;padding:0 8px;color:#87A2B6}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes signal {50% {box-shadow:0 0 0 4px #2DD4BF14;opacity:.55}}
@media(prefers-reduced-motion:reduce) {button {transition:none}#status[data-state="running"]::before {animation:none}}
@media(max-width:1050px) {.filters {margin-left:0}.table-toolbar {gap:10px 16px}}
@media(max-width:650px) {
  header {height:auto;min-height:68px;padding:14px 20px;flex-wrap:wrap;gap:12px}
  .brand {font-size:18px;gap:8px}
  .brand-mark {width:30px;height:30px}
  .session {gap:6px;margin-left:auto}
  #status {padding:0 8px;font-size:10px}
  .session .primary {padding:0 11px}
  .map {height:44svh;min-height:360px}
  .eyebrow {font-size:8px}
  .map-bottom {left:20px;right:20px;bottom:34px;gap:10px}
  .legend {gap:10px;font-size:10px;padding:4px 8px}
  .legend span {gap:5px}
  .legend span::before {width:12px}
  #selection {position:absolute;bottom:40px}
  .traffic {padding:0 20px 15px}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics>div:nth-child(odd) {border-left:0}
  .metrics>div:nth-child(n+3) {border-top:1px solid rgba(255,255,255,.06)}
  .table-toolbar {gap:10px;padding:16px 0 12px}
  .table-title {width:100%;justify-content:space-between}
  .filters {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;width:100%;gap:8px}
  .filters label:first-child {grid-column:1}
  .filters label:nth-child(2) {grid-column:2/4}
  .filters label:nth-child(3) {grid-column:1}
  .filters label:nth-child(4) {grid-column:2/4}
  .filters select {width:100%}
  .search {grid-column:1/3;width:min(220px,100%)}
  #expand {display:inline-flex;grid-column:3;padding:0 9px}
  .table-wrap.collapsed {display:none}
}

td.endpoint small {display:block;margin-top:3px;font-family:"Avenir Next","PingFang SC",sans-serif;font-size:10px;line-height:12px;color:var(--muted)}

.endpoint-link { display:inline-block; max-width:100%; height:auto; padding:0; border:0; border-radius:3px; background:transparent; color:inherit; font:inherit; line-height:16px; text-align:left; cursor:pointer; box-shadow:none; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.endpoint-link:hover { color:#38bdf8; text-decoration:underline; }
.endpoint-link:focus-visible { outline:1px solid #2dd4bf; outline-offset:3px; }
.endpoint small.association { display:inline-block; margin:0 0 0 6px; color:#8299aa; vertical-align:middle; }
.ip-filter { display:flex; align-items:center; gap:8px; height:30px; padding-left:9px; border:1px solid #254d5b; border-radius:6px; background:#11202a; color:#91d9e0; font-size:12px; }
.ip-filter span { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ip-filter button { height:28px; padding:0 8px; border:0; border-left:1px solid #254d5b; border-radius:0 5px 5px 0; background:transparent; font-size:12px; }
.diagnostics { border-top:1px solid #ffffff0f; color:#94a3b8; font-size:12px; }
.diagnostics summary { width:fit-content; padding:10px 0; cursor:pointer; }
#diagnostic-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px 20px; padding:8px 0 16px; }
#diagnostic-content div { display:flex; justify-content:space-between; gap:12px; }
#diagnostic-content strong { color:#c2d1db; font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.diagnostic-table { overflow-x:auto; margin-bottom:12px; }
.diagnostic-table table { min-width:480px; }
.diagnostic-table th,.diagnostic-table td { padding:7px 10px; text-align:right; }
.diagnostic-table th:first-child,.diagnostic-table td:first-child { text-align:left; }
@media(max-width:650px) { .ip-filter { max-width:100%; } }

.demo-badge{font-size:11px;font-weight:500;letter-spacing:.04em;color:#2DD4BF;border:1px solid rgba(45,212,191,.22);background:rgba(45,212,191,.08);border-radius:999px;padding:4px 9px;margin-left:10px;white-space:nowrap}
@media(max-width:540px){.demo-badge{margin-left:2px;font-size:10px;padding:3px 7px}}