:root{
  --wg-primary:#00A3FF;
  --wg-dark:#0b1020;
  --wg-card:#111a33;
  --wg-border: rgba(255,255,255,.08);
}

.wg-body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,163,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(120,0,255,.12), transparent 60%),
              var(--wg-dark);
  color: #e9eefc;
}

.wg-nav{ background: rgba(11,16,32,.75); backdrop-filter: blur(10px); }
.wg-footer{ background: rgba(0,0,0,.15); }

.wg-card{
  background: rgba(17,26,51,.75);
  border: 1px solid var(--wg-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wg-hero{
  border-bottom: 1px solid var(--wg-border);
  background: linear-gradient(180deg, rgba(0,163,255,.10), transparent 55%);
}

.wg-glow{ color: var(--wg-primary); text-shadow: 0 0 18px rgba(0,163,255,.35); }
.wg-badge{ border-color: var(--wg-border)!important; }
.wg-logo{ filter: drop-shadow(0 0 12px rgba(0,163,255,.35)); }

.wg-link{ color: rgba(233,238,252,.8); text-decoration: none; }
.wg-link:hover{ color: #fff; text-decoration: underline; }

.wg-input{
  background: rgba(0,0,0,.22);
  border: 1px solid var(--wg-border);
  color: #e9eefc;
}
.wg-input:focus{
  border-color: rgba(0,163,255,.6);
  box-shadow: 0 0 0 .25rem rgba(0,163,255,.15);
  background: rgba(0,0,0,.28);
  color: #fff;
}

.wg-embed iframe{ border:0; border-radius: 14px; }

.wg-line{ height:1px; background: var(--wg-border); }

.wg-pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid var(--wg-border);
  background: rgba(0,0,0,.18);
}

.wg-dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 12px rgba(255,255,255,.08);
}
.wg-dot.online{ background: #22c55e; box-shadow: 0 0 18px rgba(34,197,94,.25); }
.wg-dot.offline{ background: #ef4444; box-shadow: 0 0 18px rgba(239,68,68,.25); }