/* BGP Insights — 数据密集型管理面板 + F 型布局。
 * 左侧固定深色信息栏(F 的竖笔) + 顶部筛选条(F 的横笔) + 主区高密度数据表。
 * 内容区可亮/暗主题(data-theme), 侧栏恒为深墨色。 */
:root{
  color-scheme:light;
  --bg:#ffffff; --panel:#ffffff; --alt:#f8fafc; --line:#e6ebf2; --line2:#eef2f7;
  --fg:#0f172a; --muted:#64748b; --accent:#0d9488; --accent-h:#0f766e; --link:#0e7490;
  --rowhover:#f1f6f9; --hit:#e6f6ee; --hit-h:#d6f0e1; --code:#0f3a44; --inbg:#ffffff;
  --shadow:rgba(15,23,42,.16);
  --sans:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){ color-scheme:dark;
  --bg:#0b1220; --panel:#0e1727; --alt:#0f1a2c; --line:#1d2a3e; --line2:#162234;
  --fg:#e2e8f0; --muted:#8b98ac; --accent:#2dd4bf; --accent-h:#5eead4; --link:#67e8f9;
  --rowhover:#132034; --hit:#10331f; --hit-h:#16462a; --code:#a5d8e6; --inbg:#0e1727;
  --shadow:rgba(0,0,0,.5); } }
:root[data-theme=dark]{ color-scheme:dark;
  --bg:#0b1220; --panel:#0e1727; --alt:#0f1a2c; --line:#1d2a3e; --line2:#162234;
  --fg:#e2e8f0; --muted:#8b98ac; --accent:#2dd4bf; --accent-h:#5eead4; --link:#67e8f9;
  --rowhover:#132034; --hit:#10331f; --hit-h:#16462a; --code:#a5d8e6; --inbg:#0e1727;
  --shadow:rgba(0,0,0,.5); }

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:13px}
.app{display:flex;min-height:100vh}

/* ---- 左侧信息栏 (F 竖笔, 恒深色) ---- */
.side{flex:0 0 214px;width:214px;background:#0f172a;color:#cbd5e1;
  display:flex;flex-direction:column;gap:16px;padding:16px 15px 13px;
  position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid #1e293b}
.brand .logo{font:800 19px/1 var(--mono);letter-spacing:-.02em;color:#f8fafc}
.brand .logo span{color:#2dd4bf;margin-left:3px}
.brand .tag{font-size:11px;color:#64748b;margin-top:4px}
.side-sec h3{margin:0 0 7px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#475569}
.stats{margin:0}
.stats>div{display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 0;border-bottom:1px solid #1b2740;font-size:12px}
.stats dt{color:#94a3b8} .stats dd{margin:0;color:#e2e8f0;font:600 12px/1 var(--mono)}
.legend{list-style:none;margin:0;padding:0;font-size:11px;color:#94a3b8}
.legend li{margin:6px 0;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.lg-star{color:#fbbf24}
.side-foot{margin-top:auto;display:flex;gap:6px;padding-top:12px}
.side .ghost{flex:1;background:transparent;border:1px solid #334155;color:#cbd5e1}
.side .ghost:hover{background:#1e293b;color:#fff}

/* ---- 主区 ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:6;background:var(--panel);
  border-bottom:1px solid var(--line);padding:11px 16px 9px}
.barrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px}
.statusline{margin-top:8px;min-height:15px;font-size:12px;color:var(--muted)}
.content{flex:1;padding:0 16px 26px}
#tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}

input,select{background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:5px;padding:5px 8px;font-size:12.5px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--accent)}
#city{width:170px} #path{width:210px} .ipbox{flex:1;min-width:240px}
.kwbox{width:150px} .numbox{width:58px} #preset{max-width:180px}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.chk input{width:auto}

button{font-family:inherit;cursor:pointer}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:5px;padding:5px 9px;font-size:12px}
.ghost:hover{background:var(--alt);color:var(--fg)}
/* 显示模式: 分段单选(主操作) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.seg button{background:transparent;border:0;color:var(--muted);padding:6px 13px;font-size:12.5px;font-weight:600}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--alt);color:var(--fg)}
.seg button.on,.seg button.on:hover{background:var(--accent);color:#fff}

/* ---- 数据表 (高密度) ---- */
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:4px 9px;border-bottom:1px solid var(--line2);white-space:nowrap}
th{background:var(--alt);color:var(--muted);cursor:pointer;
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--line)}
th.nosort{cursor:default}
table tr:hover{background:var(--rowhover)}
tr.hit{background:var(--hit)} tr.hit:hover{background:var(--hit-h)}
.ip{color:var(--link);cursor:pointer;font-family:var(--mono)}
.ip:hover{text-decoration:underline}
.op{color:var(--muted);font-size:11px}
.empty{color:var(--muted);padding:22px 4px;font-size:13px}

/* badge / 线路配色: 半透明底 + 实色字, 亮暗自适应 */
.badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;line-height:1.5;
  white-space:nowrap;border:1px solid transparent;
  background:color-mix(in srgb, var(--c,#888) 15%, transparent);
  color:var(--c,#888);border-color:color-mix(in srgb, var(--c,#888) 30%, transparent)}
.op-ct{--c:#2563eb} .op-cu{--c:#dc2626} .op-cm{--c:#059669}
.op-edu{--c:#7c3aed} .op-sci{--c:#d97706} .op-intl{--c:#64748b}
.b-ok{--c:#16a34a} .b-bad{--c:#dc2626} .b-warn{--c:#d97706} .b-info{--c:#2563eb} .b-mute{--c:#64748b}
.alive{color:#16a34a} .dead{color:#dc2626} .unk{color:var(--muted)}

/* AS_PATH token: 按运营商着色 */
code{color:var(--code);font-family:var(--mono);font-size:11.5px}
code.dim{color:var(--muted)}
.asn{color:var(--c,var(--fg));font-family:var(--mono)} .asn .an{color:inherit;opacity:.78}
.an{color:var(--muted);font-size:.9em}

/* 本市分段(城市树) */
.exp{color:var(--link);cursor:pointer;white-space:nowrap} .exp:hover{text-decoration:underline}
tr.segrow td{background:var(--alt);font-size:12px;padding:7px 10px 8px;box-shadow:inset 3px 0 0 var(--accent)}
.segs{margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px}
.segpill{white-space:nowrap;font-family:var(--mono);font-size:11.5px}

/* insight 抽屉 */
#ins{position:fixed;right:0;top:0;width:46%;max-width:720px;height:100%;background:var(--inbg);
  border-left:1px solid var(--line);overflow:auto;padding:18px 20px;
  box-shadow:-10px 0 30px var(--shadow);display:none;z-index:20}
#ins h2{font-size:14px;margin:0 0 6px;font-family:var(--mono)}
.close{float:right;cursor:pointer;color:var(--muted);font-size:20px;line-height:1}
.pill{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.relbox{margin:9px 0 0;font-size:12px} .relbox b{color:var(--muted);font-weight:600}
.rels{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 10px}
.rel{color:var(--link);cursor:pointer;white-space:nowrap;font-family:var(--mono)} .rel:hover{text-decoration:underline}
.relnote{color:var(--muted);font-size:11px;margin:8px 0 2px;line-height:1.5}

/* 关于 modal */
.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;z-index:30;
  align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal.open{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  max-width:640px;width:100%;padding:20px 24px;box-shadow:0 16px 50px var(--shadow)}
.modal-box h2{font-size:16px;margin:0 0 10px;font-family:var(--mono)}
.modal-box h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:16px 0 5px}
.modal-box p{font-size:12.5px;line-height:1.65;margin:6px 0} .modal-box code{font-size:11.5px}
.modal-box ul{margin:4px 0;padding-left:18px} .modal-box li{font-size:12.5px;line-height:1.65;margin:3px 0}
.modal-box a{color:var(--link)}
.disc{color:var(--muted);font-size:12px;border-top:1px solid var(--line2);margin-top:14px;padding-top:12px}

/* ---- 移动端: 侧栏收成顶部条 ---- */
@media (max-width:820px){
  .app{flex-direction:column}
  .side{flex:none;width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px 14px;padding:10px 14px;border-right:0;border-bottom:1px solid #1e293b}
  .brand .tag{display:none}
  .side-sec h3{display:none} .legend-sec{display:none}
  .stats{display:flex;gap:12px} .stats>div{border:0;padding:0;gap:5px}
  .side-foot{margin-top:0;padding-top:0;margin-left:auto}
  .topbar{padding:9px 12px} .content{padding:0 12px 20px}
  .ipbox{min-width:0;flex:1 1 100%} #city,#path,.kwbox{flex:1 1 calc(50% - 6px);width:auto}
  #ins{width:100%;max-width:none;border-left:0}
  th,td{padding:6px 8px}
}