.threat-text{justify-self:center;font-size:13px;font-weight:bold;letter-spacing:3px;margin-bottom:4px}
.threat{height:5px;border-radius:0px;overflow:hidden;margin:3px 0}
.threatline{height:100%;border-radius:0px;transition:width .2s,background .1s;box-shadow:0 0 6px rgba(0,255,65,0.3)}
.datahash{font-size:10px;color:rgb(0 255 65 / 54%);line-height:1.5;letter-spacing:.5px}
.cpu-container{display:grid;grid-template-columns:repeat(2, 1fr);gap:5px}
.cpubox{width:45px;height:auto;background:#031603;padding:5px;border:1px solid #00ff41;border-radius:3px;text-align:center;z-index:17}
.cpu-marquee {overflow:hidden;width:100%;user-select:none}
.cpu-wave1{display:flex;align-items:center;justify-content:space-around;gap:0px; padding-top:3px;padding-right:0px;flex-shrink:0; width:210px;animation:scroll-left 10s linear infinite;}
.cpu-wave2{display:flex;align-items:center;justify-content:space-around;gap:0px; padding-top:13px;padding-left:0px;flex-shrink:0; width:210px;animation:scroll-left 25s linear infinite;}
.bg-cpu{background-image:linear-gradient(#011e00 1px, transparent 1px), linear-gradient(to right, #011e00 1px, transparent 1px);background-size:6px 6px;border-top:1px dashed #00a729;border-bottom:1px dashed #00a729;border-right:2px solid #00a729;}
@keyframes scroll-left {0% {transform: translateX(0%);} 100%{transform:translateX(-280px);}}
.marquee-inner {display: flex;width: max-content}
.ticker-wrap {flex: 1;overflow: hidden;margin:0 25px}
.ticker-inner {display:flex;gap:40px;white-space:nowrap;animation:ticker 30s linear infinite;font-size:7px;color: rgba(72,249,85,0.5);}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item span { color: #00ff41; }
.thr-info{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:#00aa2a}
.attack-level{margin-top:5px;text-align:center;font-size:10px;color:#00aa2a}
.firewall-status{display:flex;justify-content:space-between;padding:2px 0;font-size:10px;color:#00aa2a}
.bt{height:4px;background:#011e00;border-radius:2px;overflow:hidden;margin:3px 0}
.bf{height:100%;border-radius:2px;background:#00ff41;transition:width .6s,background .5s;box-shadow:0 0 6px rgba(0,255,65,0.3)}
.rr{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.rr .rl{width:28px;font-size:10px;color:#00aa2a;letter-spacing:1px}
.rr .bt{flex:1;margin:0}
.rr .rv{width:30px;text-align:right;font-size:9px;color:rgba(0,255,65,0.3)}
.nsc{max-height:100px;overflow-y:auto;overflow-x:hidden}
.nsc::-webkit-scrollbar{width:2px}
.nsc::-webkit-scrollbar-thumb{background:#222}
.nr{display:flex;gap:4px;padding:2px 0;border-bottom:1px solid #0c0c0c;font-size:10px;white-space:nowrap;overflow:hidden} 
.nt{font-size:10px;}
.nr .nt{color:#353535;width:55px;flex-shrink:0}
.nr .ni{color:#00aa2a;flex:1;overflow:hidden;text-overflow:ellipsis}
.nr .np{color:#444;width:50px;flex-shrink:0;text-align:right}
.nr .ns{color:#333;width:35px;flex-shrink:0;text-align:right}
.cr{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:9px}
.cdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cip{color:#00aa2a;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpr{color:#404040;width:38px;flex-shrink:0}
.cst{font-size:8px;letter-spacing:1px;width:60px;text-align:right;flex-shrink:0}
.enc-r{display:flex;justify-content:space-between;padding:2px 0;font-size:10px;color:#00aa2a}
.enc-r span:last-child{color:#00ff41}
.enc-r.bar-r{align-items:center;gap:6px}
.enc-r .bt{flex:1;margin:0}
.folder {width:48px;height:32px;position:relative;background-color:#05af00;border-radius:3px 3px 3px 3x;margin:20px 25px;float:left;cursor:pointer}
.folder:before {content: '';width:50%;height:6px;border-radius:0 3px 0 0;background-color:#ccc;position:absolute;top:-6px;left:0px}
.folder p {padding-top:35px;text-align:center;letter-spacing:0.3px;line-height:1.4;padding-bottom:20px;font-size:9px;color:#fff;cursor:pointer}
.graph__line {stroke: #00ccff;stroke-width: 1}
.graph__polygon {fill: #007d0521;stroke: #00ff41;stroke-width: 1}
.bg-graph {background-image: linear-gradient(#011e00 1px, transparent 1px), linear-gradient(to right, #011e00 1px, transparent 1px);background-size: 20px 10px;border-bottom: 1px dashed #011e00;border-right: 1px solid #011e00}
.first {position:relative;height:85px;margin-bottom:12px}
.first .bars {display:flex;overflow:hidden}
.first .bar {position:relative;top:73px;width:12px;height:85px;box-sizing:content-box;outline:2px solid #00ff41;margin-right:8px;background-color:#012e03}
.first .bar:last-of-type {margin-right:0}
.dot-1{background-color: #000000}
.dot-2{background-color: #7df599}
.dot-3{background-color: #05f53d}
.dot-4{background-color: #006317}
.swap{font-family: "Electrolize",sans-serif;font-size:10px;font-weight:600;letter-spacing:2px}
#memoryusage{display: flex;flex-wrap:wrap;width:262px;height:55px;gap:3px;overflow:hidden}
#memoryusage div{width:4px;height:4px}
#clock{position:relative;text-align:center;font-family: "Electrolize",sans-serif}
#date,#time,#day{margin:0 auto}
#date{font-size:12px;letter-spacing:7px;font-weight:600}
#time{padding:3px 0;font-size:26px;letter-spacing:7px;font-weight:900}
#day{font-size:1.5;text-transform:uppercase;font-weight:200;letter-spacing:0.4em}
g{fill:none;stroke-width:1px;stroke: url(#gradient_svg)}
.cpu-1{background:url(../img/cpu1.png) repeat-x;width:100vw;height:30px;animation:cpu1 40s linear infinite}
@keyframes cpu1 { 0% { transform:translateX(0px); } 100% { transform:translateX(-1600px);}}
.cpu-2{background:url(../img/cpu2.png) repeat-x;width:100vw;height:25px;animation:cpu2 60s linear infinite}
@keyframes cpu2 { 0% { transform:translateX(0px); } 100% { transform:translateX(-1600px)}}
.threat-bar-wrap {margin:5px 0}
.threat-label {display:flex;justify-content:space-between;font-size:9px;margin-bottom:4px;color:rgba(72,249,85,0.6)}
.threat-bar {height:4px;background:rgba(72,249,85,0.1);border-radius:2px;overflow:hidden}
.threat-fill {height:100%;border-radius:2px;transition:width 1s ease}
.threat-fill.low {background: #00ff41}
.threat-fill.med {background: #00ff41}
.threat-fill.high {background: #f81b1b;);animation: pulse-red 1s infinite}
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.5}}


#map {
  display: block;
  position: relative;
  margin:12px auto;
  width: 160px;
  height: 160px;
  border: 1px solid #00ff41;
  box-shadow: 0 0 10px #00ff41;
  border-radius: 50%;
  overflow: hidden;
  background: url(../img/map.png);
  background-size: auto 100%;
  animation: anime 9s linear infinite; 
}
@-webkit-keyframes anime {
 to { background-position-x: 160px; }
}

@-webkit-keyframes fills {
 to { left: 0px; }
}

.globe-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #00ff41;
  border-radius: 300px;
  
}

.globe-cross-1, .globe-cross-2, .globe-cross-3, .globe-cross-4 {
  position: absolute;
  height: 1px;
  width: 80%;
  background: #00ff41;
}

.globe-rail:nth-of-type(2) {
  transform: rotateY(40deg);
  animation: globerail-1 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(3) {
  transform: rotateY(60deg);
  animation: globerail-2 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(4) {
  transform: rotateY(80deg);
  animation: globerail-3 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(5) {
  transform: rotateY(100deg);
  animation: globerail-4 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(6) {
  transform: rotateY(120deg);
  animation: globerail-5 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(7) {
  transform: rotateY(140deg);
  animation: globerail-6 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(8) {
  transform: rotateY(160deg);
  animation: globerail-7 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(9) {
  transform: rotateY(180deg);
  animation: globerail-8 5s infinite;
  animation-timing-function: linear;
}
.globe-rail:nth-of-type(10) {
  transform: rotateY(220deg);
  animation: globerail-9 5s infinite;
  animation-timing-function: linear;
}

.globe-cross-1 {
  top: 20%;
  left: 10%;
}
.globe-cross-2 {
  top: 40%;
  left: 2%;
  width: 98%;
}
.globe-cross-3 {
  top: 60%;
  left: 2%;
  width: 98%;
}
.globe-cross-4 {
  top: 80%;
  left: 10%;
}

@keyframes globerail-1 {
  from {transform: rotateY(40deg)}
  to {transform: rotateY(220deg)}
}
@keyframes globerail-2 {
  from {transform: rotateY(60deg)}
  to {transform: rotateY(240deg)}
}
@keyframes globerail-3 {
  from {transform: rotateY(80deg)}
  to {transform: rotateY(260deg)}
}
@keyframes globerail-4 {
  from {transform: rotateY(100deg)}
  to {transform: rotateY(280deg)}
}
@keyframes globerail-5 {
  from {transform: rotateY(120deg)}
  to {transform: rotateY(300deg)}
}
@keyframes globerail-6 {
  from {transform: rotateY(140deg)}
  to {transform: rotateY(320deg)}
}
@keyframes globerail-7 {
  from {transform: rotateY(160deg)}
  to {transform: rotateY(340deg)}
}
@keyframes globerail-8 {
  from {transform: rotateY(180deg)}
  to {transform: rotateY(360deg)}
}
@keyframes globerail-9 {
  from {transform: rotateY(200deg)}
  to {transform: rotateY(380deg)}
}

.pulse {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: #F64747;
  border-radius: 50%;
  top: calc(15% + 20px);
  left: calc(20% + 5px);
}
.pulse:before, .pulse:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 1px solid #F64747;
  border-radius: 50%;
}
.pulse:before {
  -webkit-animation: blip1 1s infinite cubic-bezier(0, 0.6, 1, 0.6);
          animation: blip1 1s infinite cubic-bezier(0, 0.6, 1, 0.6);
}
.pulse:after {
  -webkit-animation: blip2 1s infinite linear;
          animation: blip2 1s infinite linear;
}

@-webkit-keyframes blip1 {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes blip1 {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
@-webkit-keyframes blip2 {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blip2 {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

.pulse2{
	position: absolute;
    top: 68%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background: #00ff41;
    border-radius: 50%;
    animation: animate-pulse 3s linear infinite;
}
@keyframes animate-pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(40,252,3,0.7),  0 0 0 0 rgba(40,252,3,0.7);
    }
    40%{
        box-shadow: 0 0 0 30px rgba(40,252,3,0.0),  0 0 0 0 rgba(40,252,3,0.7);
    }
    80%{
        box-shadow: 0 0 0 30px rgba(40,252,3,0.0),  0 0 0 20px rgba(40,252,3,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(40,252,3,0.0),  0 0 0 20px rgba(40,252,3,0);
    }
    
}

#satellite {
  display: block;
  position: relative;
  width: 30px;
  bottom: 110px;
  margin-bottom: -30px;
  animation:
	moveLR 8s ease-in-out infinite alternate,
	axisRot 30s linear infinite,
	depthIllusion 8s linear infinite normal;
}
@keyframes moveLR {
	from {
		left: 0px;
	}
	to {
		left: 230px;
	}
}
@keyframes axisRot {
	to {
		rotate: 360deg;
	}
}
@keyframes depthIllusion {
	from {
		z-index: 9;
	}
	to {
		z-index: 1;
	}
}

.logs{height:130px;overflow:auto;color:#00ff41;}
.bg-pattern {background-image:linear-gradient(#011e00 1px, transparent 1px), linear-gradient(to right, #011e00 1px, transparent 1px);background-size:15px 15px;}
.scanvertical {width:100%;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.scanvertical::before {content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, transparent, #00ff00, transparent);animation:scanbg 2s linear infinite}
@keyframes scanbg {0% {transform: translateY(-100%);}100% {transform: translateY(200px);}}
.scanhorizontal {position:relative;width:100%;height:100%;overflow:hidden;}
.scanhorizontal::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgb(0, 225, 0,0.5), transparent);background-size:200% 100%;background-position:-100% 0;animation:scan-bg 2s linear infinite}
@keyframes scan-bg {0% {background-position: 100% 0;}100% {background-position: -100% 0;}}