/* ZeroBot traffic viewers (hosting, antibot, redirect): shared design, 2026-11-01 */
:root{--sb-thumb:#c7c9d9;--sb-thumb-hover:#9fa3bd;
  --bg:#F3F4FA;--card:#FFFFFF;--ink:#141230;--ink-2:#666B80;--line:#E4E6F0;--line-soft:#EEF0F6;--row-hover:#F8F8FC;
  --accent:#5B2BE0;--accent-soft:rgba(91,43,224,.08);--accent-line:rgba(91,43,224,.22);
  --ok:#15803D;--ok-soft:#E8F7EE;--bad:#BE123C;--bad-soft:#FDE8EE;--warn:#B45309;--warn-soft:#FEF3DE;
  --ipc:#1D4ED8;--isp:#6D28D9;--host:#0F766E;--host-soft:rgba(15,118,110,.07);--host-line:rgba(15,118,110,.24);--isp-soft:rgba(109,40,217,.07);--isp-line:rgba(109,40,217,.22);--ipc-soft:rgba(29,78,216,.08);--ipc-line:rgba(29,78,216,.3);--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--shadow:0 1px 2px rgba(20,18,48,.04),0 8px 24px -16px rgba(20,18,48,.18);
}
[data-theme="dark"]{--sb-thumb:#3a3d55;--sb-thumb-hover:#555a7a;
  --bg:#0D0B1C;--card:#16142A;--ink:#ECEBF5;--ink-2:#9A9BB3;--line:#2A2744;--line-soft:#222038;--row-hover:#1B1931;
  --accent:#8B6CF0;--accent-soft:rgba(139,108,240,.12);--accent-line:rgba(139,108,240,.32);
  --ipc:#93C5FD;--isp:#C4B5FD;--host:#5EEAD4;--host-soft:rgba(94,234,212,.09);--host-line:rgba(94,234,212,.28);--isp-soft:rgba(196,181,253,.10);--isp-line:rgba(196,181,253,.28);--ipc-soft:rgba(147,197,253,.12);--ipc-line:rgba(147,197,253,.35);--ok:#4ADE80;--ok-soft:rgba(74,222,128,.12);--bad:#FB7185;--bad-soft:rgba(251,113,133,.12);--warn:#FBBF24;--warn-soft:rgba(251,191,36,.12);
  --shadow:0 1px 2px rgba(0,0,0,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{font-family:"Poppins",sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);padding:10px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head-l{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:34px}
.brand em{font-style:normal;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand em span{color:#b5264a}
[data-theme="dark"] .brand em span{color:#f27a98}
.vsep{width:1px;height:34px;background:var(--line);flex-shrink:0}
.t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.t b{font-size:1.02rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.t b a{color:var(--ipc);text-decoration:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.t b a i{font-size:.85rem;opacity:.7}
.t b a:hover{text-decoration:underline}
.t span{font-size:.76rem;color:var(--ink-2);margin-top:2px}
.ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.86rem;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.btn.icon{width:34px;padding:0;justify-content:center;font-size:1.1rem;color:var(--ink-2)}
.btn.danger{color:var(--bad);border-color:transparent;background:var(--bad-soft)}
.btn.danger:hover{border-color:var(--bad)}
.btn i{font-size:1.05rem}
.sw{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2);cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .k{width:38px;height:22px;border-radius:22px;background:var(--line);position:relative;transition:background .2s;flex-shrink:0}
.sw .k::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.sw input:checked+.k{background:var(--accent)}
.sw input:checked+.k::after{transform:translateX(16px)}
.sw input:focus-visible+.k{outline:2px solid var(--accent);outline-offset:2px}
.wrap{padding:18px 28px 28px;width:100%}
.band{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px}
.ph{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ph>i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.35rem;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.ph b{display:block;font-size:1rem;font-weight:600;line-height:1.2}
.ph span{display:block;font-size:.78rem;color:var(--ink-2);margin-top:2px;line-height:1.35}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto}
.tile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--line-soft);min-width:0}
.tile>i{font-size:1.3rem;flex-shrink:0}
.tile b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.tile span{display:block;font-size:.74rem;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.tile em{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--card)}
.tile.ok{background:var(--ok-soft)} .tile.ok>i,.tile.ok b,.tile.ok em{color:var(--ok)}
.tile.bad{background:var(--bad-soft)} .tile.bad>i,.tile.bad b,.tile.bad em{color:var(--bad)}
.tile.warn{background:var(--warn-soft)} .tile.warn>i,.tile.warn b,.tile.warn em{color:var(--warn)}
.big{font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.big small{font-size:.86rem;font-weight:400;color:var(--ink-2);margin-left:8px;letter-spacing:0}
.bar{display:flex;height:12px;margin:14px 0 14px;border-radius:6px;overflow:hidden;background:var(--line-soft)}
.bar span{display:block;height:100%;min-width:24px}
.bar .ok{background:var(--ok)} .bar .bad{background:var(--bad)} .bar .warn{background:var(--warn)}
.uv-body{display:flex;align-items:center;justify-content:center;gap:28px}
.uv .uv-stats{flex:0 0 auto}
.ring{--sz:96px;width:var(--sz);height:var(--sz);border-radius:50%;flex-shrink:0;background:conic-gradient(var(--ok) calc(var(--p) * 1%),var(--line-soft) 0);display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.ring-in{position:relative;text-align:center;line-height:1.05}
.ring-in b{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--ok)}
.ring-in span{font-size:.72rem;color:var(--ink-2)}
.uv-stats{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.uv-stat{display:flex;align-items:center;gap:12px}
.uv-stat>i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.25rem;background:var(--ipc-soft);color:var(--ipc);flex-shrink:0}
.uv-stat.ok>i{background:var(--ok-soft);color:var(--ok)}
.uv-stat .n{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.uv-stat.ok .n{color:var(--ok)}
.uv-stat .l{font-size:.8rem;color:var(--ink-2);margin-top:2px}
.band .panel{display:flex;flex-direction:column}
.uv-body{margin-top:auto;margin-bottom:auto}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bar-row .l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sel{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2)}
select{height:34px;padding:0 30px 0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:.86rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666B80' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
.range{font-size:.82rem;color:var(--ink-2)}
.tbl{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{position:sticky;top:0;z-index:1;background:var(--card);text-align:left;font-weight:500;font-size:.8rem;color:var(--ink-2);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--row-hover)}
.ip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.84rem;font-weight:500;letter-spacing:-.01em;color:var(--ipc)}
.cp{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;font-size:.95rem;opacity:.75;transition:all .15s}
.cp:hover{opacity:1;color:var(--ipc);border-color:var(--ipc-line);background:var(--ipc-soft)}
.cp.done{color:var(--ok);opacity:1}
.sub{font-size:.76rem;color:var(--ink-2);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sub .mono{font-family:var(--mono);font-size:.72rem}
.sub .isp,.sub>span:not([class]){display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border-radius:6px;background:var(--isp-soft);border:1px solid var(--isp-line);color:var(--isp);font-weight:600;line-height:1.5}
.sub>span:not([class]):empty{display:none}
.sub>span:not([class])::before{content:"\F0002";font:normal normal normal .85rem/1 "Material Design Icons";opacity:.85}
.sub .isp i{font-size:.85rem;opacity:.85}
.sub .host,.sub>.mono{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 8px 1px 6px;border-radius:6px;background:var(--host-soft);border:1px solid var(--host-line);color:var(--host);font-family:var(--mono);font-size:.72rem;font-weight:500;line-height:1.6}
.sub>.mono{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.sub>.mono::before{content:"\F0B8C";font:normal normal normal .85rem/1 "Material Design Icons";opacity:.85;margin-right:4px;vertical-align:-1px}
.sub .host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sub .host i{font-size:.85rem;opacity:.85;flex-shrink:0}
.flag{width:18px;height:13px;border-radius:2px;object-fit:cover;flex-shrink:0}
.dev{display:flex;flex-direction:column;gap:4px}
.dev div{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dev img{width:16px;height:16px;object-fit:contain}
.dev .b{color:var(--ink-2);font-size:.8rem}
.num{font-weight:600;font-variant-numeric:tabular-nums}
.once{font-weight:600}
.when{font-size:.78rem;color:var(--ink-2);white-space:nowrap;margin-top:3px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;font-size:.78rem;font-weight:500;white-space:nowrap}
.chip i{font-size:.95rem}
.chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.warn{background:var(--warn-soft);color:var(--warn)}
.acts{display:flex;gap:6px;justify-content:center}
.act{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px;border:1px solid transparent;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s}
.act i{font-size:1rem}
.act.rp{color:var(--bad);background:var(--bad-soft)}
.act.wl{color:var(--ok);background:var(--ok-soft)}
.act.bl{color:var(--warn);background:var(--warn-soft)}
.act.rp:hover{border-color:var(--bad)} .act.wl:hover{border-color:var(--ok)} .act.bl:hover{border-color:var(--warn)}
th.c,td.c{text-align:center}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}
.pg{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;padding:0 10px;border:1px solid var(--line);border-radius:9px;color:var(--ink);text-decoration:none;font-size:.84rem;background:var(--card)}
.pg:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.pg.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.gap{color:var(--ink-2);padding:0 4px}
.empty{text-align:center;padding:64px 20px;color:var(--ink-2)}
.empty i{font-size:2.6rem;display:block;margin-bottom:10px;color:var(--accent)}
@media (min-width:901px){
  html,body{height:100%;overflow:hidden}
  body{display:flex;flex-direction:column}
  .top{flex-shrink:0}
  .wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:16px}
  .band,.bar-row{flex-shrink:0}
  .tbl{flex:0 1 auto;min-height:0;overflow:auto}
  .pager{flex-shrink:0;margin-top:14px}
}
@media (max-width:900px){.band{grid-template-columns:1fr}.wrap{padding:14px 14px 20px}.top{padding:10px 14px}html{font-size:13.5px}}
@media (max-width:640px){.act span{display:none}.act{padding:0 8px}.tiles{grid-template-columns:1fr}}
html,body,.tbl{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}.tbl{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent;scrollbar-gutter:auto}.tbl::-webkit-scrollbar{width:10px;height:10px}.tbl::-webkit-scrollbar-track{background:transparent;border-radius:999px}.tbl::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;border:2px solid var(--card);background-clip:padding-box}.tbl::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box}.tbl::-webkit-scrollbar-corner{background:transparent}.tbl::-webkit-scrollbar-button{display:none;width:0;height:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* shared extras for the antibot and redirect viewers */
.chip.info{background:var(--accent-soft);color:var(--accent)}
.chip.mute{background:var(--line-soft);color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.btn.ghost{color:var(--ink-2)}
.risk{font-size:.74rem;color:var(--ink-2);margin-top:4px}
.menu-wrap{position:relative;display:inline-block}
.menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:4px;display:none;z-index:20}
.menu.open{display:block}
.menu a{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:6px;font-size:.84rem;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.menu a:hover{background:var(--accent-soft);color:var(--accent)}
.act:disabled{opacity:.55;cursor:not-allowed}