/* Azox Packet Traffic: ciemne centrum dowodzenia. Czcionki: Chakra Petch (nagłówki, liczby), IBM Plex Sans (reszta). */
:root{
  --acc:#00f0ff;--mode:var(--acc);
  --ink:#04070d;--panel:rgba(8,13,25,.8);--edge:rgba(255,255,255,.08);
  --text:#dbe7ff;--mute:#8da0bf;--dim:#6a7e9f;
  --line:color-mix(in srgb,var(--mode) 28%,transparent);
  --display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --tb:86px;--fh:190px;
}
body.phish{--mode:#ff3b6b}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--body)}
html,body{width:100%;height:100%;background:var(--ink);color:var(--text);overflow:hidden;font-variant-numeric:tabular-nums}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mode);outline-offset:2px}

/* ---------- mapa i nakładki ---------- */
#map{position:absolute;inset:0;background:#02050a;transition:filter .3s}
#fx{position:absolute;inset:0;z-index:500;pointer-events:none}
.ov{position:absolute;inset:0;pointer-events:none}
#tint{z-index:550;background:radial-gradient(ellipse at center,transparent 40%,color-mix(in srgb,var(--mode) 14%,transparent))}
#scan{z-index:600;background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
#sweep{inset:0 0 auto 0;height:140px;will-change:transform;z-index:600;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mode) 9%,transparent),transparent);animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateY(-140px)}to{transform:translateY(100vh)}}
#vig{z-index:600;box-shadow:inset 0 0 150px 30px rgba(0,0,0,.62)}
#flash{z-index:700}#flash.go{animation:flash .7s}
@keyframes flash{0%{box-shadow:inset 0 0 130px 25px rgba(255,59,107,.55)}100%{box-shadow:inset 0 0 0 0 transparent}}
.br{position:absolute;width:30px;height:30px;z-index:650;pointer-events:none;border:2px solid var(--mode);opacity:.55;transition:border-color .5s}
.br.a{top:6px;left:6px;border-right:0;border-bottom:0}.br.b{top:6px;right:6px;border-left:0;border-bottom:0}
.br.c{bottom:6px;left:6px;border-right:0;border-top:0}.br.d{bottom:6px;right:6px;border-left:0;border-top:0}

/* ---------- szklane panele ---------- */
.glass{position:absolute;background:var(--panel);backdrop-filter:blur(14px) saturate(1.3);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .35s,box-shadow .4s}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--mode) 55%,transparent),rgba(255,255,255,.07) 35%,rgba(255,255,255,.04) 70%,color-mix(in srgb,var(--mode) 30%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
body.alert #top{box-shadow:0 0 36px rgba(255,59,107,.3),inset 0 1px 0 rgba(255,255,255,.06)}
body.offline #top{box-shadow:0 0 40px rgba(255,59,107,.55),inset 0 0 40px rgba(255,59,107,.12)}

h3{font-family:var(--display);font-size:13px;font-weight:600;color:var(--mute);display:flex;align-items:center;gap:10px;margin-top:2px;letter-spacing:.01em}
h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
.hint{font-size:11px;color:var(--dim);line-height:1.4}

/* ---------- przyciski ---------- */
button{cursor:pointer;border:0;color:var(--mute);background:transparent;padding:8px 12px;border-radius:8px;font:600 13px/1 var(--display);transition:color .2s,background .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
button:hover{color:#fff;background:rgba(255,255,255,.07)}
button.active{color:var(--mode);background:color-mix(in srgb,var(--mode) 17%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mode) 50%,transparent)}
button.lyr{font-size:12px;padding:8px 10px}
button.lyr.active{color:#fff;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
button.ic{padding:8px 10px}
button.ic svg{width:16px;height:16px}
button.on{color:#ffc933;background:rgba(255,201,51,.14);box-shadow:inset 0 0 0 1px rgba(255,201,51,.4)}
.seg{display:flex;gap:2px;padding:3px;background:rgba(255,255,255,.04);border-radius:11px}

/* ---------- górny pasek ---------- */
#top{top:14px;left:16px;right:16px;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 12px 8px 14px;animation:drop .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes drop{from{transform:translateY(-130%);opacity:0}to{transform:none;opacity:1}}
.logo{display:flex;align-items:center;gap:12px;white-space:nowrap}
.logo .ring{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.logo img{width:30px;height:30px;border-radius:8px}
.logo .name{font-family:var(--display);font-size:17px;line-height:1.1}
.logo .a{font-weight:700;color:#fff}
.logo .b{font-weight:500;color:var(--mode);transition:color .4s}
.logo small{display:block;font:400 11.5px var(--body);color:var(--mute);margin-top:3px}
.live{display:flex;align-items:center;gap:12px;white-space:nowrap}
#fps{color:var(--dim);font-size:11px}
#clock{color:var(--mute);font:500 13px var(--display)}
#status{font:600 13px var(--display);color:var(--mute);display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:20px;background:rgba(255,255,255,.04)}
#status i{width:8px;height:8px;border-radius:50%;background:#ff3b6b;animation:blink 1s infinite}
#status.on{color:#c8ffe9}
#status.on i{background:#00ffaa;box-shadow:0 0 10px #00ffaa;animation:none}
body.offline #status{color:#ff7d9b}
@keyframes blink{50%{opacity:.25}}
#meter{position:absolute;left:30px;right:30px;top:76px;height:2px;z-index:1000;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
#meter div{height:100%;width:0;background:linear-gradient(90deg,transparent,var(--mode));box-shadow:0 0 12px var(--mode);transition:width .8s}

/* ---------- pasek z IP ---------- */
#ipbar{top:82px;left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100% - 600px);z-index:1000;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 16px;border-radius:30px;animation:drop .9s .35s cubic-bezier(.2,.9,.3,1) both}
#ipbar .k{font-size:12px;color:var(--mute);white-space:nowrap}
#ipbar .v{font:600 14px var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ipbar .sep{width:1px;height:16px;background:var(--edge)}
#ipbar .pin{width:15px;height:15px;flex:none;fill:none;stroke:var(--mode);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#ipbar button{padding:7px 12px;font-size:12px;background:rgba(255,255,255,.07)}
#ipbar button:hover{background:rgba(255,255,255,.14)}

/* ---------- panele boczne ---------- */
#left,#right{top:var(--tb);z-index:1000;width:258px;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100% - var(--fh) - var(--tb) - 36px);overflow:auto}
#left{left:16px;animation:inL .9s .15s cubic-bezier(.2,.9,.3,1) both}
#right{right:16px;animation:inR .9s .2s cubic-bezier(.2,.9,.3,1) both}
@keyframes inL{from{transform:translateX(-130%);opacity:0}to{transform:none;opacity:1}}
@keyframes inR{from{transform:translateX(130%);opacity:0}to{transform:none;opacity:1}}
#left::-webkit-scrollbar,#right::-webkit-scrollbar,#drawer::-webkit-scrollbar{width:0}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi span{display:block;font-size:11.5px;color:var(--mute);margin-bottom:2px}
.kpi b{font:600 26px/1.1 var(--display);color:#fff;display:inline-block}
.kpi.main b{color:var(--mode);font-size:30px}
#s-threat{color:#ff5a82}
.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.1)}}
#spark{width:100%;height:44px;display:block}
.donut{display:flex;align-items:center;gap:14px}
.donut canvas{width:72px;height:72px;flex:none}
.donut .dd{flex:1;min-width:0}
#dlg{font-size:11.5px;line-height:1.7;color:var(--mute)}
#dlg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
#threat{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px}
#threat div{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#00ffaa,#ffee00,#ff3b6b);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.tlrow{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px;font-size:11px;color:var(--dim)}
#tl{font:600 12px var(--display);color:#00ffaa}

.bar{margin-bottom:9px;cursor:pointer;transition:opacity .3s}
.bar.off{opacity:.3}
.bar .r{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:4px;color:#c1d0e8}
.bar .r span:last-child{color:var(--mute)}
.bar .t{height:4px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .f{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 8px color-mix(in srgb,currentColor 45%,transparent)}

/* ---------- strumień pakietów ---------- */
#bottom{left:16px;right:16px;bottom:16px;height:var(--fh);transition:height .5s cubic-bezier(.2,.9,.3,1),transform .6s cubic-bezier(.2,.9,.3,1),opacity .4s;z-index:1000;overflow:hidden;display:flex;flex-direction:column;animation:rise .9s .25s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{transform:translateY(130%);opacity:0}to{transform:none;opacity:1}}
#bottom .hd{padding:11px 16px 7px;display:flex;align-items:center;gap:12px}
#bottom .hd h3{flex:1;font-size:14px;color:#c1d0e8}
.search{position:relative;display:block}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
#q{background:rgba(255,255,255,.05);border:1px solid var(--edge);color:#fff;border-radius:9px;padding:6px 10px 6px 30px;font-size:12px;outline:0;width:200px;transition:width .3s,border-color .3s}
#q:focus{width:270px;border-color:var(--line)}
#q::placeholder{color:var(--dim)}
#tw{overflow-y:auto;flex:1}
#tw::-webkit-scrollbar{width:6px}#tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{position:sticky;top:0;background:#0a1120;color:var(--mute);padding:6px 14px;text-align:left;font:600 12px var(--display);z-index:2}
td{padding:7px 14px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.04)}
tr.new{animation:rowin .3s both}
@keyframes rowin{0%{opacity:.3;transform:translateX(-10px)}100%{opacity:1;transform:none}}
tr:hover td{background:rgba(255,255,255,.035)}
.tag{padding:2px 9px;border-radius:20px;font-weight:600;font-size:11px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);background:color-mix(in srgb,currentColor 11%,transparent)}
.cnt{color:var(--mode);font-weight:700;margin-left:6px}
body.nofeed{--fh:50px}
body.nofeed #tw{display:none}
@media(max-height:780px){:root{--fh:150px}body.nofeed{--fh:50px}}

/* ---------- powiadomienia ---------- */
#toasts{position:absolute;top:132px;left:50%;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:9px 18px;border-radius:12px;background:rgba(26,6,14,.92);border:1px solid #ff3b6b;color:#fff;font:500 13px var(--body);box-shadow:0 8px 30px rgba(255,59,107,.4);animation:toast 3.6s both;backdrop-filter:blur(8px)}
@keyframes toast{0%{opacity:0;transform:translateY(-16px)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* ---------- ustawienia ---------- */
#drawer{position:absolute;top:var(--tb);right:16px;bottom:calc(var(--fh) + 32px);width:312px;z-index:1100;padding:16px;overflow:auto;transform:translateX(130%);opacity:0;pointer-events:none}
body.drawer #drawer{transform:none;opacity:1;pointer-events:auto}
body.drawer #right{transform:translateX(130%);opacity:0;pointer-events:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;color:#c8d6ee}
.row output{font-size:11px;color:var(--mode);min-width:36px;text-align:right}
.sw{position:relative;width:38px;height:20px;flex:none}
.sw input{opacity:0;position:absolute;inset:0;cursor:pointer;z-index:2}
.sw i{position:absolute;inset:0;border-radius:20px;background:rgba(255,255,255,.12);transition:.25s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#9bb0d0;transition:.25s}
.sw input:checked+i{background:var(--mode)}
.sw input:checked+i::after{left:21px;background:#04070d}
.sw input:focus-visible+i{outline:2px solid var(--mode);outline-offset:2px}
input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:4px;border-radius:4px;background:rgba(255,255,255,.14);outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--mode);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--mode);cursor:pointer}
select{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--edge);border-radius:8px;padding:5px 8px;font-size:12px;outline:0}
select option{background:#0a1020}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.acts button{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--edge);padding:10px 6px;font-size:12px;justify-content:center}
#drawer h3{margin-top:14px}#drawer h3:first-child{margin-top:0}

#showui{position:absolute;top:16px;right:16px;z-index:1300;display:none;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px}
body.hideui #showui{display:inline-flex}
body.hideui #top,body.hideui #ipbar,body.hideui #left,body.hideui #right,body.hideui #bottom,body.hideui #drawer{transform:translateY(-150%);opacity:0;pointer-events:none;animation:none}
body.hideui #bottom{transform:translateY(150%)}

/* ---------- Leaflet i podpisy mapy ---------- */
.leaflet-container{background:#02050a;font-family:inherit}
.dark-osm{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.95) saturate(.7)}
.leaflet-control-zoom{border:0!important;margin-top:calc(var(--tb) + 6px)!important;margin-left:290px!important}
.leaflet-control-zoom a{background:var(--panel)!important;color:#fff!important;border:1px solid var(--edge)!important;backdrop-filter:blur(10px)}
.leaflet-control-attribution{background:rgba(0,0,0,.5)!important;color:#7f90ac!important;margin-bottom:calc(var(--fh) + 30px)!important}
.leaflet-control-attribution a{color:#9fb6d6!important}
.lbl span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000,0 0 10px #000}
.lbl.c span{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.92}
.lbl.t span{font-size:11px;font-weight:500}
.lbl.s span{font-size:11px;font-style:italic;letter-spacing:3px;color:#9fd8ff}

/* ---------- wydajność ---------- */
body.p-high .glass{backdrop-filter:blur(18px) saturate(1.5)}
body.p-low .glass{backdrop-filter:none;background:rgba(7,12,24,.94)}
body.p-low #sweep,body.p-low #tint{display:none}

/* ---------- różne szerokości ---------- */
@media(max-width:1500px){.logo small,#fps,#clock{display:none}}
@media(max-width:1260px){.tabs button svg{display:none}#top{gap:10px}}
@media(max-width:1100px){.logo .name{display:none}#ipbar{top:auto;bottom:calc(var(--fh) + 58px);left:288px;right:auto;margin:0;max-width:calc(100% - 304px)}}
@media(max-width:900px){#ipbar{left:16px;max-width:calc(100% - 32px)}#left,#right{display:none}.leaflet-control-zoom{margin-left:16px!important;margin-top:150px!important}#top{flex-wrap:wrap;justify-content:center}.layers{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#sweep{display:none}}