:root{
  --blue:#0097fc;
  --orange:#ff6a00;
  --dark:#050814;
  --glass:rgba(255,255,255,.08);
  --glowBlue:rgba(0,151,252,.6);
}

*{
  margin:0;padding:0;box-sizing:border-box;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

body{
  background:var(--dark);
  color:#fff;
  overflow-x:hidden;
}

/* ===== Background ===== */
.mesh{
  position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,151,252,.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(255,106,0,.3), transparent 45%),
    linear-gradient(180deg,#03040a,#070b18);
  animation:mesh 25s infinite alternate;
  z-index:-3;
}
@keyframes mesh{from{filter:hue-rotate(0)}to{filter:hue-rotate(25deg)}}

.grid{
  position:fixed; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:70px 70px;
  animation:grid 50s linear infinite;
  z-index:-3;
}
@keyframes grid{to{transform:translateY(70px)}}

/* ===== Glass Box ===== */
.glass-box{
  background:var(--glass);
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 0 40px var(--glowBlue);
  padding:24px;
  color: white;
  position: relative;
  z-index: 10;
}

/* ===== Buttons ===== */
.btn-glow{
  background:linear-gradient(135deg,var(--blue),var(--orange));
  border:none;
  color:#fff;
  box-shadow:0 0 20px var(--glowBlue);
}
.btn-glow:hover{
  transform:translateY(-2px);
  box-shadow:0 0 32px rgba(255,106,0,.7);
}
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:64px;
  padding:0 36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(8,12,25,.6);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:110 !important;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:600; color:white;}
.logo img{height:46px}
.logo span{color:var(--blue)}

.status{
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
  color: white;
}
.status::before{
  content:"";
  width:9px;height:9px;
  background:#1cff7a;
  border-radius:50%;
  box-shadow:0 0 12px #1cff7a;
}

#particles{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
