*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,monospace}
:root{
  --main:#00b8ff;
  --accent:#b84dff;
  --warn:#ffbb22;
  --danger:#ff4455;
  --glass-bg:rgba(10,20,40,0.22);
  --glass-border:rgba(0,160,255,0.24);
}
.theme-red{
  --main:#ff3344;
  --accent:#ff9922;
  --glass-border:rgba(255,80,80,0.3);
}
.theme-green{
  --main:#00ee77;
  --accent:#22bbff;
  --glass-border:rgba(0,255,120,0.3);
}
body{
  min-height:100vh;
  background:#030308;
  overflow:hidden;
  color:#e8f4ff;
}
#fullScanLine{
  position:fixed;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,var(--main),transparent);
  z-index:9998;
  pointer-events:none;
  opacity:0.4;
}
#bgCanvas{
  position:fixed;
  width:100%;
  height:100%;
  z-index:0;
}
#mouseGlow{
  position:fixed;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(0,160,255,0.18) 0%,transparent 70%);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:1;
  transition:0.08s ease;
}
#bootScreen{
  position:fixed;inset:0;background:#000;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.2s ease-out;
}
.boot-text{color:#00ee99;font-size:22px;margin-bottom:24px;white-space:pre}
.boot-bar{width:400px;height:6px;border:1px solid rgba(0,184,255,0.33);border-radius:4px;overflow:hidden}
.boot-progress{height:100%;width:0%;background:linear-gradient(90deg,var(--main),var(--accent));transition:width 0.05s linear}
.wrapper{
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  height:100vh;
  opacity:0;
  transition:opacity 0.8s ease 1s;
}
.sidebar{
  width:260px;
  padding:24px 16px;
  backdrop-filter: blur(14px);
  background:var(--glass-bg);
  border-right:1px solid var(--glass-border);
}
.logo{
  font-size:24px;
  letter-spacing:2px;
  background:linear-gradient(90deg,var(--main),var(--accent));
  -webkit-background-clip:text;
  color:transparent;
  margin-bottom:32px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(0,160,255,0.15);
}
.nav-item{
  display:block;
  padding:14px 16px;
  margin:8px 0;
  border-radius:10px;
  color:#b4d8ff;
  cursor:pointer;
  transition:0.3s;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
}
.nav-item::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle, #ffffff22 0%, transparent 70%);
  transform:scale(0);opacity:0;transition:0.4s;
}
.nav-item:active::after{transform:scale(2);opacity:1}
.nav-item:hover{
  background:rgba(0,140,255,0.15);
  border-color:rgba(0,160,255,0.3);
  color:#fff;
}
.nav-item.active{
  background:rgba(0,120,255,0.2);
  border-color:var(--main);
  animation:pulseBorder 2.5s infinite linear;
}
@keyframes pulseBorder{
  0%{box-shadow:0 0 4px rgba(0,184,255,0.27)}
  50%{box-shadow:0 0 14px rgba(0,184,255,0.47)}
  100%{box-shadow:0 0 4px rgba(0,184,255,0.27)}
}
.main-content{
  flex:1;
  padding:40px;
  overflow:auto;
}
.main-content::-webkit-scrollbar{width:6px}
.main-content::-webkit-scrollbar-track{background:#050810}
.main-content::-webkit-scrollbar-thumb{background:var(--main);border-radius:4px}
.glass-card{
  backdrop-filter: blur(16px);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:18px;
  padding:36px;
  box-shadow:0 0 40px rgba(0,140,255,0.12);
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;
  background:linear-gradient(90deg,transparent, rgba(0,184,255,0.22), transparent);
  animation:scanLine 4s infinite linear;
}
@keyframes scanLine{
  0%{left:-100%}
  100%{left:100%}
}
h1{
  font-size:42px;
  letter-spacing:3px;
  background:linear-gradient(90deg,var(--main),var(--accent));
  -webkit-background-clip:text;
  color:transparent;
  margin-bottom:12px;
}
.glitch{
  position:relative;
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;
  width:100%;height:100%;
}
.glitch::before{
  color:var(--main);animation:glitchLeft 3s infinite;clip-path:polygon(0 0,100% 0,100% 45%,0 45%)
}
.glitch::after{
  color:var(--accent);animation:glitchRight 3s infinite;clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%)
}
@keyframes glitchLeft{
  0%,90%,100%{transform:translate(0)}
  92%{transform:translate(-3px)}
}
@keyframes glitchRight{
  0%,90%,100%{transform:translate(0)}
  94%{transform:translate(3px)}
}
.subtext{
  color:#88bfff;
  margin-bottom:28px;
}
.status-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:20px;
  margin:24px 0;
}
.stat-box{
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(0,160,255,0.22);
  background:rgba(0,40,80,0.15);
  text-align:center;
  transition:transform 0.3s ease, box-shadow 0.3s;
}
.stat-box:hover{
  transform:translateY(-4px);
  box-shadow:0 0 20px rgba(0,184,255,0.27);
}
.stat-box b{
  display:block;
  font-size:26px;
  color:var(--main);
}
.stat-box span{
  font-size:13px;color:#99c8ff;
}
.ctrl-row{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;
}
.glow-btn{
  padding:14px 28px;
  border:none;border-radius:10px;
  background:linear-gradient(90deg,#0066dd,#9922ff);
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
  position:relative;
  overflow:hidden;
}
.glow-btn:hover{
  transform:scale(1.03);
  box-shadow:0 0 25px rgba(120,80,255,0.45);
}
.ripple{
  position:absolute;border-radius:50%;background:#ffffff30;
  transform:scale(0);animation:rippleAnim 0.7s linear;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{transform:scale(4);opacity:0}
}
.terminal{
  background:#050810;
  border:1px solid rgba(0,184,255,0.44);
  border-radius:12px;
  padding:18px;
  margin-top:20px;
  font-family:monospace;
}
.terminal-header{
  display:flex;gap:8px;margin-bottom:12px;
}
.term-dot{
  width:12px;height:12px;border-radius:50%;
}
.dot-red{background:#ff4455;}
.dot-yellow{background:#ffbb44;}
.dot-green{background:#22cc66;}
#term-output{
  color:#00ee99;
  min-height:140px;
  white-space:pre-wrap;
  line-height:1.6;
}
.term-input-line{
  margin-top:10px;
  display:flex;
  color:#00ee99;
}
.term-input-line span{margin-right:8px;}
#term-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#00ee99;
  font-family:monospace;
  font-size:15px;
}
.time-display{
  color:var(--main);
  font-size:20px;
  text-align:right;
  margin-bottom:16px;
}
.chartCanvas{width:100%;height:180px;margin-top:12px}
.radarCanvas{width:220px;height:220px;margin:0 auto;display:block}
.networkCanvas{width:100%;height:320px;margin-top:16px}
.notify-box{
  position:fixed;top:24px;right:24px;z-index:100;
  display:flex;flex-direction:column;gap:10px;
}
.notify{
  padding:14px 18px;background:#071020;border:1px solid rgba(0,184,255,0.44);border-radius:10px;
  animation:notifyIn 0.4s ease;
}
@keyframes notifyIn{from{transform:translateX(120px);opacity:0}}
.alert-light{
  display:inline-block;width:14px;height:14px;border-radius:50%;background:#222;
}
.alert-light.active{animation:blinkRed 0.6s infinite}
@keyframes blinkRed{0%{background:#ff3344;box-shadow:0 0 10px #ff3344}50%{background:#441111}100%{background:#ff3344}}
#loginModal{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
.login-card{
  width:420px;padding:32px;border-radius:20px;
  background:#060b16;border:1px solid rgba(0,184,255,0.44);
}
.login-input{width:100%;margin:12px 0;padding:12px;background:#020408;border:1px solid rgba(0,184,255,0.33);color:#fff;border-radius:8px;outline:none}
#floatTerm{
  position:fixed;top:120px;left:120px;width:360px;z-index:500;
  background:#04070c;border:1px solid rgba(0,184,255,0.55);border-radius:12px;
  overflow:hidden;
  display:none;
}
.float-term-head{
  padding:8px 12px;background:#0a1422;display:flex;justify-content:space-between;cursor:move;
}
.float-term-body{padding:12px;max-height:220px;overflow:auto;color:#00ee99;font-family:monospace;font-size:13px;white-space:pre-wrap}
.float-term-input{width:100%;background:#020408;border:none;color:#00ee99;padding:6px;margin-top:6px;outline:none}
.min-btn{cursor:pointer;padding:0 6px}