:root{
  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb;
  --ink:#0f1826; --muted:#606b7d; --line:#dce1e9;
  --brand:#0a2540; --brand-2:#123a63; --accent:#2f6fed;
  --announce:#128a54; --announce-bg:#e3f5ec;
  --block:#c8384a;    --block-bg:#fbe7ea;
  --neutral-fg:#59647a; --neutral-bg:#eef1f6;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
}

html,body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);}
body{padding-bottom:4rem;}
.mono{font-family:var(--font-mono);}

/* ---------- Header ---------- */
.lg-header{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%);color:#eaf1fb;border-bottom:3px solid var(--accent);}
.lg-header .brand-mark{font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;font-size:1.35rem;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;}
.lg-header .brand-mark .dot{width:.55rem;height:.55rem;border-radius:2px;background:var(--accent);display:inline-block;}
.lg-header img.logo{height:34px;width:auto;}
.brand-fallback{align-items:center;gap:.55rem;display:inline-flex;}
.header-sep{border-color:rgba(255,255,255,.15)!important;}
.lg-title{font-size:.82rem;text-transform:uppercase;letter-spacing:.22em;color:#9fb6d6;font-weight:600;margin:0;}
.af-toggle a{font-family:var(--font-mono);font-weight:600;font-size:.85rem;text-decoration:none;color:#9fb6d6;padding:.15rem .55rem;border-radius:6px;border:1px solid transparent;}
.af-toggle a.active{color:#fff;background:rgba(47,111,237,.25);border-color:rgba(47,111,237,.55);}
.af-toggle a:hover{color:#fff;}
.af-sep{color:#3a5679;}

/* ---------- Query toolbar ---------- */
.query-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,24,38,.04);}
.query-card .form-select,.query-card .form-control{font-family:var(--font-mono);font-size:.9rem;border-color:var(--line);}
.field-label{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.2rem;display:block;}
.btn-query{background:var(--accent);border:none;color:#fff;font-weight:600;letter-spacing:.02em;}
.btn-query:hover,.btn-query:focus{background:#245fd0;color:#fff;}
.btn-query:disabled{background:#9db8ea;}

/* ---------- Result summary ---------- */
.result-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;}
.result-summary .prefix{font-family:var(--font-mono);font-weight:700;font-size:1.5rem;color:var(--ink);}
.result-summary .peer-ip{font-size:1.05rem;font-weight:600;color:var(--muted);}
.result-summary .meta{font-family:var(--font-mono);font-size:.85rem;color:var(--muted);}
.result-summary .meta b{color:var(--ink);font-weight:600;}

/* ---------- Path card ---------- */
.path-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;margin-bottom:1rem;overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease;}
.path-card:hover{box-shadow:0 6px 22px rgba(15,24,38,.08);}
.path-card.best{border-left-color:var(--announce);box-shadow:0 4px 18px rgba(18,138,84,.10);}
.path-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2);}
.path-head .via{font-family:var(--font-mono);font-weight:600;font-size:1rem;}
.path-head .via a{color:var(--accent);text-decoration:none;}
.path-head .via a:hover{text-decoration:underline;}
.path-head .kv{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);}
.path-head .kv b{color:var(--ink);font-weight:600;}
.best-pill{font-family:var(--font-mono);font-weight:700;font-size:.68rem;letter-spacing:.08em;background:var(--announce);color:#fff;padding:.2rem .55rem;border-radius:6px;display:inline-flex;align-items:center;gap:.3rem;}
.rank-pill{font-family:var(--font-mono);font-weight:600;font-size:.68rem;letter-spacing:.06em;background:#e7ebf2;color:var(--muted);padding:.2rem .5rem;border-radius:6px;}
.path-body{padding:.85rem 1rem 1rem;}

/* attribute strip */
.attr-strip{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-bottom:.9rem;}
.attr{font-family:var(--font-mono);font-size:.76rem;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:.22rem .5rem;color:var(--muted);}
.attr b{color:var(--ink);font-weight:600;}
.attr.hi b{color:var(--announce);}

/* section label */
.sec-label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:.9rem 0 .4rem;display:flex;align-items:center;gap:.5rem;}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line);}
.sec-label.sec-toggle{cursor:pointer;user-select:none;}
.sec-label.sec-toggle:hover{color:var(--accent);}
.sec-label .chev{display:inline-block;transition:transform .15s ease;font-size:.8rem;line-height:1;}
.sec-label.sec-toggle.collapsed .chev{transform:rotate(-90deg);}
.sec-label .comm-count{font-weight:600;letter-spacing:normal;}
.comm-wrap.collapsed{display:none;}

/* AS path flow */
.aspath{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;}
.as-chip{font-family:var(--font-mono);font-weight:600;font-size:.82rem;background:#eef2fb;border:1px solid #d4def5;color:#1a3a6b;padding:.24rem .55rem;border-radius:7px;text-decoration:none;white-space:nowrap;}
.as-chip:hover{background:#e0e9fb;color:#12294d;}
.as-chip .asn-name{color:#5f7ba8;font-weight:500;margin-left:.3rem;}
.as-chip.origin{border-color:var(--announce);background:var(--announce-bg);color:#0d5c3a;}
.as-sep{color:#9aa6b8;font-family:var(--font-mono);font-size:.9rem;padding:0 .1rem;user-select:none;}

/* community chips */
.comm-wrap{display:flex;flex-wrap:wrap;gap:.35rem;}
.comm{font-family:var(--font-mono);font-weight:500;font-size:.78rem;padding:.24rem .5rem;border-radius:7px;border:1px solid transparent;cursor:default;display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap;}
.comm .ico{width:.5rem;height:.5rem;border-radius:50%;flex:none;}
.comm .netix-meaning{font-weight:600;}
.comm.c-announce{background:var(--announce-bg);color:var(--announce);border-color:#bfe6d1;}
.comm.c-announce .ico{background:var(--announce);}
.comm.c-block{background:var(--block-bg);color:var(--block);border-color:#f3c6cd;}
.comm.c-block .ico{background:var(--block);}
.comm.c-neutral{background:var(--neutral-bg);color:var(--neutral-fg);border-color:var(--line);}
.comm.c-neutral .ico{background:#b3bccb;}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:.45rem .9rem;}
.legend .item{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);font-family:var(--font-mono);}
.legend .swatch{width:.7rem;height:.7rem;border-radius:3px;}
.sw-allow{background:var(--announce);} .sw-deny{background:var(--block);} .sw-neutral{background:#b3bccb;}

/* raw output / summary / neighbor */
.raw-pre{font-family:var(--font-mono);font-size:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;white-space:pre-wrap;word-break:break-word;}
.nb-pre{font-family:var(--font-mono);font-size:.78rem;white-space:pre-wrap;word-break:break-word;}
.summary-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;overflow-x:auto;}
.summary-box table{font-family:var(--font-mono);font-size:.8rem;}

/* route table (compact "show ip bgp") */
.route-table{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.route-table table{margin:0;font-family:var(--font-mono);font-size:.82rem;}
.route-table thead th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line);font-weight:700;}
.route-table thead th.sortable{cursor:pointer;user-select:none;}
.route-table thead th.sortable:hover{color:var(--accent);}
.route-table td,.route-table th{padding:.45rem .75rem;vertical-align:middle;white-space:nowrap;}
.route-table tbody tr{transition:background .08s ease;}
.route-table tbody tr:hover td{background:#e9f0fd;}
.route-table tr.best td{background:#f2faf6;}
.route-table tr.best:hover td{background:#e3f5ec;}
.st-est{color:var(--announce);font-weight:600;}
.st-other{color:#b0730a;font-weight:600;}
.st-down{color:var(--block);font-weight:600;}
.route-table a{color:var(--accent);text-decoration:none;}
.route-table a:hover{text-decoration:underline;}

.muted-note{font-size:.78rem;color:var(--muted);}
.spinner-wrap{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-family:var(--font-mono);font-size:.85rem;}

/* query timing footer */
.timing{
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
  text-align:right;margin-top:.6rem;padding-right:.25rem;
}

/* back navigation */
.btn-back{
  font-family:var(--font-mono);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .85rem;cursor:pointer;white-space:nowrap;
  transition:color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.btn-back:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 1px 6px rgba(47,111,237,.18);}
.btn-back:active{transform:translateY(1px);}

.tooltip-inner{font-family:var(--font-mono);font-size:.78rem;max-width:340px;text-align:left;background:#0f1826;line-height:1.45;}
.tooltip .tooltip-arrow::before{border-top-color:#0f1826;}

@media (prefers-reduced-motion: reduce){
  .path-card{transition:none;}
}