@font-face{font-family:"Orbitron";src:url(fonts/orbitron-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Orbitron";src:url(fonts/orbitron-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(fonts/rajdhani-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(fonts/rajdhani-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(fonts/rajdhani-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#04060d;--bg2:#0a1024;--glass:rgba(14,22,46,.58);--glass2:rgba(20,32,66,.5);
  --line:rgba(120,170,255,.14);--line2:rgba(120,170,255,.24);
  --txt:#e6ecff;--mut:#8b97b8;--dim:#5d6a8c;
  --cyan:#00e5ff;--mag:#ff2bd6;--amber:#ffb020;--violet:#8b5cf6;--green:#29f0a0;--red:#ff4d6d;
  --r:16px;--gap:14px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ui:"Rajdhani",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--txt);overflow-x:hidden}
body{font-family:var(--ui);font-size:16px;line-height:1.35;font-weight:500;min-height:100vh}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
b{font-weight:700}
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(900px 500px at 12% -5%,rgba(0,229,255,.13),transparent 60%),
   radial-gradient(800px 600px at 95% 10%,rgba(139,92,246,.16),transparent 60%),
   radial-gradient(900px 700px at 60% 110%,rgba(255,43,214,.10),transparent 60%),
   linear-gradient(180deg,#050814,#03050b);}
.bg::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(120,170,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.wrap{max-width:1480px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.cyan{color:var(--cyan)}.mag{color:var(--mag)}.amber{color:var(--amber)}.violet{color:var(--violet)}
.muted{color:var(--mut);font-weight:500;font-size:.86em}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 0 10px rgba(0,229,255,.55))}
h1{font-family:"Orbitron",var(--ui);font-weight:900;letter-spacing:.06em;margin:0;font-size:clamp(22px,3.3vw,34px);line-height:1.05;
  background:linear-gradient(90deg,#fff 0%,#bff6ff 55%,#8fe9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(0,229,255,.25)}
.sub{margin:4px 0 0;color:var(--mut);font-size:clamp(13px,1.6vw,16px)}
.sub .host{color:#b8c4e6}
.live{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px;color:#cdd6f4;white-space:nowrap}
.live b{color:var(--amber);font-family:"Orbitron";font-size:15px}
.live .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,77,109,.7)}70%{box-shadow:0 0 0 10px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}

/* tabs */
.tabs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;margin:0 -2px 4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{scroll-snap-align:start;flex:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;padding:9px 16px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);color:#c7d1ee;font:600 15px var(--ui);letter-spacing:.02em;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s,background .2s}
.tab:hover{border-color:var(--line2)}
.tab .w{color:var(--mut);font-weight:600}
.tab .d{color:#fff;font-weight:700}
.tab .n{color:var(--mut);font-size:13px}
.tab[aria-selected=true]{border-color:rgba(255,43,214,.75);background:linear-gradient(180deg,rgba(255,43,214,.16),rgba(139,92,246,.10));
  box-shadow:0 0 0 1px rgba(255,43,214,.35),0 0 22px rgba(255,43,214,.28)}
.badge{font:700 11px "Orbitron",var(--ui);letter-spacing:.08em;padding:3px 7px;border-radius:6px;color:#1a0016;background:var(--mag);box-shadow:0 0 12px rgba(255,43,214,.6)}
.tab:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* grid + cards */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-areas:
   "map map map map map map map map kpi kpi kpi kpi"
   "map map map map map map map map cty cty cty cty"
   "tl tl tl tl tl usr usr usr usr cmp cmp cmp"
   "ips ips ips ips ips ips ips hl hl hl hl hl"
   "ips ips ips ips ips ips ips hod hod hod hod hod"
   "abt abt abt abt abt abt abt abt abt abt abt abt"}
.map-card{grid-area:map}.kpis{grid-area:kpi}.countries{grid-area:cty}.timeline{grid-area:tl}.users{grid-area:usr}
.compare{grid-area:cmp}.ips{grid-area:ips}.extras{grid-area:hl}.hod{grid-area:hod}.about{grid-area:abt}
.card{position:relative;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.35)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,229,255,.06),transparent 35%,transparent 70%,rgba(255,43,214,.05))}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.02em;color:#eaf0ff}
h2 .muted{margin-left:4px}

/* KPIs */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.kpi{padding:13px 15px;display:flex;flex-direction:column;justify-content:center;min-height:106px}
.k-l{color:#b7c2e2;font-size:15px;font-weight:600}
.k-v{font-family:"Orbitron",var(--ui);font-weight:900;font-size:clamp(24px,2.3vw,34px);line-height:1.15;margin-top:3px;text-shadow:0 0 18px currentColor;font-variant-numeric:tabular-nums}
.k-v.mag{text-shadow:0 0 18px rgba(255,43,214,.55)}.k-v.cyan{text-shadow:0 0 18px rgba(0,229,255,.5)}.k-v.amber{text-shadow:0 0 18px rgba(255,176,32,.5)}
.k-v small{font-size:.5em;font-weight:700;margin-left:4px;color:#cfe}
.k-s{color:var(--mut);font-size:14px;margin-top:3px}
.up{color:var(--red)}.down{color:var(--green)}

/* map */
.map-card{display:flex;flex-direction:column;padding-bottom:10px}
.map{position:relative;flex:1;min-height:220px;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,40,90,.35),rgba(5,8,18,.2) 70%)}
.map svg{display:block;width:100%;height:auto;max-height:100%;touch-action:manipulation}
.loading{color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.chip-l{color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(20,32,66,.6);border:1px solid var(--line);font-size:14px;color:#d8e0f8;max-width:100%}
.chip .c-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12em}
.chip b{color:var(--mag);font-variant-numeric:tabular-nums}
.legend{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;white-space:nowrap}
.legend b{color:var(--cyan)}
.lg-dot{width:10px;height:10px;border-radius:50%;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.lg-arc{width:22px;height:2px;margin-left:8px;border-radius:2px;background:linear-gradient(90deg,var(--mag),var(--cyan));box-shadow:0 0 6px var(--cyan)}
.country{fill:#0e1a33;stroke:rgba(0,229,255,.22);stroke-width:.5;vector-effect:non-scaling-stroke}
.graticule{fill:none;stroke:rgba(120,170,255,.07);stroke-width:.5}
.sphere{fill:rgba(8,14,32,.35);stroke:rgba(0,229,255,.15)}
.arc{fill:none;stroke-linecap:round;mix-blend-mode:screen}
.arc.flow{stroke-dasharray:4 10;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.pt{cursor:pointer;mix-blend-mode:screen}
.pulse{fill:none;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.6);opacity:0}}
.srv-ring{fill:none;stroke:var(--cyan);transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
.srv-label rect{fill:rgba(4,12,28,.85);stroke:var(--cyan);stroke-width:1}
.srv-label text{fill:#dffbff;font:700 13px "Orbitron",var(--ui);letter-spacing:.05em}
.tip{position:absolute;z-index:5;pointer-events:none;max-width:240px;padding:9px 12px;border-radius:10px;background:rgba(6,12,28,.94);border:1px solid var(--line2);
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 16px rgba(0,229,255,.15);font-size:14px;line-height:1.3}
.tip .t1{font-weight:700;color:#fff}.tip .t2{color:var(--mut)}
.flag{width:20px;height:15px;border-radius:2px;flex:none;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12);vertical-align:-2px;background:#223}

/* countries */
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.bars li{display:grid;grid-template-columns:20px minmax(80px,8.5em) 1fr 52px;align-items:center;gap:9px;font-size:15px}
.bars .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d8e0f8}
.bar{height:7px;border-radius:9px;background:rgba(120,170,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;box-shadow:0 0 10px currentColor;transform-origin:left;animation:grow .7s ease-out both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bars .pc{text-align:right;color:#c6d0ee;font-variant-numeric:tabular-nums}

/* spark */
.spark{position:relative}
.spark svg,.hod-chart svg{display:block;width:100%;height:auto;overflow:visible}
.axis text{fill:#6f7ca0;font:600 12px var(--ui)}
.axis line,.axis path{stroke:rgba(120,170,255,.12)}
.hover-line{stroke:rgba(255,255,255,.35);stroke-dasharray:3 3}

/* cloud */
.cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:4px 2px;line-height:1.1}
.cloud span{font-weight:700;white-space:nowrap;cursor:default;text-shadow:0 0 14px currentColor;transition:transform .15s}
.cloud span:hover{transform:scale(1.08)}
.cloud span.real{font-style:italic;opacity:.75}

/* compare */
.cmp{display:flex;flex-direction:column;gap:12px}
.cmp-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cmp-row .l{color:#b7c2e2}
.cmp-row .v{font-family:"Orbitron";font-weight:900;font-size:22px}
.cmp-row .p{color:var(--mut);font-size:13px}
.split{height:10px;border-radius:10px;overflow:hidden;display:flex;background:rgba(120,170,255,.08)}
.split i{display:block;height:100%}
.split-l{display:flex;justify-content:space-between;font-size:14px;color:var(--mut);margin-top:5px}

/* ip list */
.iplist{display:flex;flex-direction:column;gap:2px}
.iprow{display:grid;grid-template-columns:26px 20px minmax(200px,1.2fr) minmax(0,1.4fr) minmax(50px,.8fr) 56px;gap:10px;align-items:center;
  padding:7px 6px;border-radius:9px;font-size:15px}
.iprow:nth-child(odd){background:rgba(120,170,255,.04)}
.iprow .rk{color:var(--dim);font-family:"Orbitron";font-size:12px;text-align:right}
.iprow .ip{display:flex;align-items:center;min-width:0;font-family:var(--mono);font-size:13.5px;color:#e2f7ff}
.iprow .ipt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.iprow .loc{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iprow .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rep{flex:none;font:700 9px "Orbitron";letter-spacing:.06em;color:var(--amber);border:1px solid rgba(255,176,32,.5);border-radius:5px;padding:2px 4px;margin-left:8px}
.usr{color:var(--dim);font-size:13px}

/* highlights */
.hl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hli{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;border-radius:12px;background:var(--glass2);border:1px solid var(--line);min-width:0}
.hli svg{width:26px;height:26px;flex:none;margin-top:2px}
.hli .l{color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.hli .v{font-weight:700;font-size:18px;color:#fff;overflow-wrap:anywhere}
.hli .s{color:var(--mut);font-size:13.5px}

/* about + footer */
.about details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.about details summary::-webkit-details-marker{display:none}
.about details summary::before{content:"+";font:900 16px "Orbitron";color:var(--cyan);width:18px}
.about details[open] summary::before{content:"–"}
.about-body{color:#b9c3df;font-size:15px;max-width:980px}
.about-body p{margin:10px 0 0}
.about-body code{font-family:var(--mono);font-size:13px;color:var(--cyan)}
.ftr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;color:var(--dim);font-size:13px;padding:16px 4px 6px}
.ftr a{color:#7f8fb8}

/* tablet */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));
   grid-template-areas:
    "map map map map map map"
    "kpi kpi kpi kpi kpi kpi"
    "cty cty cty usr usr usr"
    "tl tl tl tl tl tl"
    "cmp cmp cmp hl hl hl"
    "ips ips ips ips ips ips"
    "hod hod hod hod hod hod"
    "abt abt abt abt abt abt"}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hl{grid-template-columns:1fr}
}
/* phone */
@media (max-width:720px){
  :root{--gap:11px;--r:14px}
  .wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .grid{grid-template-columns:minmax(0,1fr);
   grid-template-areas:"map" "kpi" "cmp" "cty" "usr" "tl" "hl" "ips" "hod" "abt"}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{min-height:92px;padding:11px 13px}
  .card{padding:12px 13px}
  .map-card{padding:10px 8px 8px}
  .map-card .card-h{padding:0 5px}
  .map{min-height:0}
  .legend{font-size:12px}
  .logo{width:38px;height:38px}
  .brand{gap:11px}
  .sub .dash,.sub .host{display:none}
  .live{width:100%;justify-content:center;font-size:14px}
  .hl{grid-template-columns:1fr 1fr}
  .hli{flex-direction:column;gap:6px}
  .iprow{grid-template-columns:22px 20px minmax(0,1fr) 52px;grid-template-areas:"rk fl ip n" "rk fl loc n";row-gap:1px;padding:8px 4px}
  .iprow .rk{grid-area:rk}.iprow .flag{grid-area:fl}.iprow .ip{grid-area:ip}.iprow .loc{grid-area:loc;font-size:13.5px}.iprow .n{grid-area:n}
  .iprow .bar{display:none}
  .bars li{grid-template-columns:20px minmax(0,1fr) 34% 48px}
  .ftr{flex-direction:column;align-items:center;text-align:center}
  .tab{padding:8px 12px;font-size:14px;gap:7px;min-height:42px}
  .badge{font-size:9.5px;padding:3px 5px}
  .chips{gap:6px;margin-top:8px;padding:0 4px}
  .chip{font-size:13px;padding:4px 8px}
  .chip:nth-of-type(n+6){display:none}
}
@media (max-width:480px){.tab .w{display:none}}
@media (max-width:360px){.hl{grid-template-columns:1fr}.k-v{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}