:root{--bg:#FAF6F1;--card:#FFF;--hover:#F5F0EA;--input:#FAFAFA;--active:#F0EDFF;--border:#E8E1D9;--bl:#F0EBE4;--t1:#1A1C21;--t2:#6B7280;--t3:#9CA3AF;--a:#0057FF;--al:#EFF4FF;--g:#1EA672;--gb:#EDFCF5;--r:#E5484D;--rb:#FFF0F0;--y:#E09F00;--yb:#FFFAE5;--p:#7C5CFC;--pb:#F4F0FF;--cy:#0EA5E9;--cb:#EFF9FF;--pk:#E54D8A;--pkb:#FFF0F5;--o:#E8730C;--rad:8px;--rs:5px;--rl:12px;--ss:0 1px 2px rgba(0,0,0,.04);--tr:.15s ease}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}.app{display:flex;min-height:100vh}
.sb{width:240px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}.sb-logo{padding:18px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.sb-logo .ico{width:32px;height:32px;background:var(--t1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff}.sb-logo .txt{font-weight:700;font-size:15px}.sb-logo .txt span{color:var(--t3);font-weight:400;font-size:11px;display:block}.sb-nav{padding:8px;flex:1;overflow-y:auto}.ns{font-size:11px;font-weight:600;color:var(--t3);padding:14px 10px 6px;text-transform:uppercase}.ni{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;transition:var(--tr);font-size:13.5px;font-weight:500;color:var(--t2)}.ni:hover{background:var(--hover);color:var(--t1)}.ni.on{background:var(--active);color:var(--a);font-weight:600}.ni svg{width:16px;height:16px;flex-shrink:0;opacity:.55}.ni.on svg{opacity:1}.badge{margin-left:auto;background:var(--r);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}.cnt{margin-left:auto;font-size:12px;color:var(--t3)}.sb-ft{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px}.edot{width:6px;height:6px;background:var(--g);border-radius:50%;animation:pu 2s infinite}@keyframes pu{0%,100%{opacity:1}50%{opacity:.4}}
.mn{margin-left:240px;flex:1;display:flex;flex-direction:column}.hd{padding:14px 24px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}.hd h1{font-size:16px;font-weight:700}.hd p{font-size:12px;color:var(--t3);margin-top:1px}.ct{padding:20px 24px;flex:1}.pg{display:none}.pg.on{display:block;animation:fi .2s ease}@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.btn{padding:6px 12px;border-radius:var(--rs);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:var(--tr);border:1px solid var(--border);background:var(--card);color:var(--t1);display:inline-flex;align-items:center;gap:5px}.btn:hover{background:var(--hover)}.bp{background:var(--t1);border-color:var(--t1);color:#fff}.ba{background:var(--a);border-color:var(--a);color:#fff}.bs{padding:4px 10px;font-size:12px}.bd{color:var(--r);border-color:rgba(229,68,77,.2)}.bd:hover{background:var(--rb)}.bg{border:none;background:none;color:var(--t3);padding:4px 8px;cursor:pointer}.bg:hover{color:var(--r);background:var(--rb);border-radius:4px}
.mono{font-family:'SF Mono','Cascadia Code',monospace;font-size:12px}
.tp{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.tp.ipv4{background:var(--al);color:var(--a)}.tp.isp{background:var(--gb);color:var(--g)}.tp.ipv6{background:var(--cb);color:var(--cy)}.tp.mobile{background:var(--pkb);color:var(--pk)}
.sd{width:7px;height:7px;border-radius:50%;display:inline-block}.sd.online{background:var(--g)}.sd.offline{background:var(--r)}.sd.slow{background:var(--y)}
.sw{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500}.so{color:var(--g)}.sf{color:var(--r)}.ss{color:var(--y)}
.pp{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10.5px;font-weight:500;margin-right:3px;font-family:monospace}.pp.h{background:var(--al);color:var(--a)}.pp.s{background:var(--pb);color:var(--p)}.pp.b{background:rgba(232,115,12,.08);color:var(--o)}.pp.c{background:var(--pkb);color:var(--pk)}
.gb{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.gb.gm{background:var(--gb);color:var(--g)}.gb.gx{background:var(--rb);color:var(--r)}.gb.gn{background:var(--bg);color:var(--t3);font-style:italic}
.ab{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}.ab.as{background:var(--al);color:var(--a)}.ab.ac{background:var(--pkb);color:var(--pk)}
.cd{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:20px;box-shadow:var(--ss)}.cd.fu{grid-column:1/-1}.ct2{font-size:14px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:6px}.cds{font-size:12px;color:var(--t3);margin-bottom:16px;line-height:1.5}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl{margin-bottom:14px}.fl:last-child{margin-bottom:0}.flb{display:block;font-size:12px;font-weight:600;color:var(--t1);margin-bottom:4px}.fi{width:100%;padding:8px 10px;background:var(--input);border:1px solid var(--border);border-radius:var(--rs);color:var(--t1);font-family:monospace;font-size:13px;outline:none;transition:var(--tr)}.fi:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(0,87,255,.1)}.fs{width:100%;padding:8px 10px;background:var(--input);border:1px solid var(--border);border-radius:var(--rs);color:var(--t1);font-family:inherit;font-size:13px;outline:none;cursor:pointer}.fh{font-size:11px;color:var(--t3);margin-top:3px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bl)}.sr:last-child{border-bottom:none}.sr h4{font-size:13px;font-weight:600}.sr p{font-size:11.5px;color:var(--t3)}
.tg{width:36px;height:20px;background:#D1D5DB;border-radius:10px;cursor:pointer;position:relative;transition:var(--tr);flex-shrink:0}.tg.on{background:var(--a)}.tk{width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:var(--tr);box-shadow:0 1px 2px rgba(0,0,0,.15)}.tg.on .tk{left:19px}
.tc{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--ss)}table{width:100%;border-collapse:collapse}th{font-size:11px;font-weight:600;color:var(--t3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg);text-transform:uppercase;letter-spacing:.5px}td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--bl);vertical-align:middle}tr:last-child td{border-bottom:none}tr:hover td{background:#FDFAF7}
.ttb{display:flex;gap:0;margin-bottom:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--ss)}.tt{flex:1;padding:12px 14px;cursor:pointer;transition:var(--tr);text-align:center;border-right:1px solid var(--border);position:relative}.tt:last-child{border-right:none}.tt:hover{background:var(--hover)}.tt.on{background:var(--active)}.tt.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--a)}.tt .tl{font-size:11px;font-weight:600;color:var(--t2);display:flex;align-items:center;justify-content:center;gap:6px;text-transform:uppercase}.tt.on .tl{color:var(--a)}.ti{width:16px;height:16px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}.ti.ipv4{background:var(--al);color:var(--a)}.ti.isp{background:var(--gb);color:var(--g)}.ti.ipv6{background:var(--cb);color:var(--cy)}.ti.mobile{background:var(--pkb);color:var(--pk)}.tc2{font-size:20px;font-weight:700;margin-top:2px}.ts{font-size:11px;color:var(--t3);margin-top:1px}
.stg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:16px;box-shadow:var(--ss)}.sl{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.sv{font-size:24px;font-weight:800;letter-spacing:-1px}.sv.green{color:var(--g)}.sv.red{color:var(--r)}.sv.yellow{color:var(--y)}.sv.accent{color:var(--a)}.sv.orange{color:var(--o)}.su{font-size:11px;color:var(--t3);margin-top:4px}
.fbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;align-items:center}.fsel{padding:5px 10px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-family:inherit;font-size:12px;color:var(--t1);outline:none;cursor:pointer}
.ar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rad);margin-bottom:8px}.ar:hover{background:var(--hover)}.ai{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.ai.r{background:var(--rb)}.ai.y{background:var(--yb)}.ai.o{background:rgba(232,115,12,.08)}.ax{flex:1}.ax h4{font-size:13px;font-weight:600}.ax p{font-size:11px;color:var(--t3)}
.cs{padding:6px 12px;background:var(--card);border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;text-align:center}.ca{padding:0 4px;color:var(--t3);font-size:12px}.cs.pr{border-color:var(--a);background:var(--al);color:var(--a)}.cs.fb{border-color:var(--p);background:var(--pb);color:var(--p)}.cs.fb2{border-color:var(--o);background:rgba(232,115,12,.08);color:var(--o)}.cs.tm{border-color:var(--y);background:var(--yb);color:var(--y)}.cs.rf{border-color:var(--r);background:var(--rb);color:var(--r)}.cl{font-size:9px;color:var(--t3);margin-top:1px}
.cc{display:flex;align-items:center;gap:0;margin:10px 0;flex-wrap:wrap}
.at{display:flex;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:14px}.atb{padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;background:var(--input);border:none;font-family:inherit;color:var(--t2)}.atb.on{background:var(--a);color:#fff}
.mtb{display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--border)}.mt{padding:10px 18px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-2px}.mt:hover{color:var(--t1)}.mt.on{color:var(--a);border-bottom-color:var(--a)}
.tos{display:flex;gap:6px;margin-bottom:16px}.to{padding:8px 16px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;background:var(--input)}.to:hover{border-color:#bbb}.to.on.ipv4{border-color:var(--a);background:var(--al);color:var(--a)}.to.on.isp{border-color:var(--g);background:var(--gb);color:var(--g)}.to.on.ipv6{border-color:var(--cy);background:var(--cb);color:var(--cy)}.to.on.mobile{border-color:var(--pk);background:var(--pkb);color:var(--pk)}
.ll{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;box-shadow:var(--ss)}.lh,.lr{display:grid;grid-template-columns:130px 110px 60px 70px 70px 55px 1fr;gap:6px;padding:7px 14px;font-size:11.5px;font-family:monospace;border-bottom:1px solid var(--bl)}.lh{background:var(--bg);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-family:'Inter',sans-serif;border-bottom:1px solid var(--border);padding:10px 14px}.lr:hover{background:#FDFAF7}.lf{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--t3);border-top:1px solid var(--border)}
.login-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999}.login-box{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:40px;width:360px;box-shadow:var(--ss)}.login-box h2{font-size:18px;font-weight:700;margin-bottom:4px}.login-box p{font-size:12px;color:var(--t3);margin-bottom:24px}.login-err{color:var(--r);font-size:12px;margin-top:8px;display:none}
/* ─── Proxy Analytics Page ─── */
.pa-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.pa-back{padding:6px 12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px;transition:var(--tr)}.pa-back:hover{background:var(--hover)}
.pa-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.pa-mc{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:16px;box-shadow:var(--ss);text-align:center}
.pa-mc .pa-ml{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.pa-mc .pa-mv{font-size:26px;font-weight:800;letter-spacing:-1px}
.pa-mc .pa-ms{font-size:11px;color:var(--t3);margin-top:2px}
.pa-range{display:flex;gap:4px;margin-bottom:12px}
.pa-rbtn{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);color:var(--t2)}.pa-rbtn:hover{background:var(--hover)}.pa-rbtn.on{background:var(--a);color:#fff;border-color:var(--a)}
.pa-chart{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:16px;margin-bottom:16px;box-shadow:var(--ss);height:260px;position:relative}
.pa-chart canvas{width:100%!important;height:100%!important}
.pa-content{display:grid;grid-template-columns:1fr 380px;gap:16px}
.pa-left{}
.pa-right{}
.pa-strip{display:flex;gap:2px;flex-wrap:wrap}
.pa-strip .pa-sb{width:5px;height:22px;border-radius:2px;flex-shrink:0}
.pa-chk-row{display:grid;grid-template-columns:130px 80px 60px 1fr;gap:6px;padding:6px 0;font-size:11.5px;font-family:monospace;border-bottom:1px solid var(--bl)}.pa-chk-row:last-child{border-bottom:none}
.pa-chk-hdr{display:grid;grid-template-columns:130px 80px 60px 1fr;gap:6px;padding:6px 0;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);margin-bottom:4px;font-family:'Inter',sans-serif}
.pa-geo-row{display:grid;grid-template-columns:90px 1fr 50px;gap:4px;padding:4px 0;font-size:12px;align-items:center}
.pa-inc{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--bl)}.pa-inc:last-child{border-bottom:none}
.pa-inc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.pa-inc-info{flex:1;font-size:12px}.pa-inc-info .pa-inc-time{color:var(--t3);font-size:11px}
@media(max-width:1200px){.pa-content{grid-template-columns:1fr}.pa-metrics{grid-template-columns:repeat(2,1fr)}}
.fbar2{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--ss)}
.fbar2-group{display:flex;flex-direction:column;gap:4px}
.fbar2-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.fbar2-pills{display:flex;gap:4px}
.fpill{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:var(--tr);color:var(--t2)}.fpill:hover{background:var(--hover);border-color:#bbb}.fpill.on{background:var(--a);color:#fff;border-color:var(--a)}
.fsel2{padding:5px 12px;background:var(--card);border:1px solid var(--border);border-radius:20px;font-family:inherit;font-size:11px;color:var(--t1);outline:none;cursor:pointer;font-weight:600}
.da-uptime{display:flex;gap:1px;align-items:flex-end;height:18px}
.da-uptime .da-bar{width:3px;border-radius:1px;min-height:2px}
/* ─── In-table filter row ─── */
.tbl-frow th{padding:4px 6px;background:var(--bg)}
.tbl-fs{padding:4px 6px;background:var(--input);border:1px solid var(--border);border-radius:var(--rs);font-size:11px;width:100%;font-family:inherit}
.tbl-fi{padding:4px 6px;background:var(--input);border:1px solid var(--border);border-radius:var(--rs);font-size:11px;width:100%;font-family:monospace}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}
@media(max-width:1200px){.stg{grid-template-columns:repeat(2,1fr)}.sg{grid-template-columns:1fr}}