*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: "Poppins", "Segoe UI", sans-serif;
}

body{
  min-height:100vh;
  background:linear-gradient(135deg,#05070f,#0b1220,#020409);
  color:#e5e7eb;
}

/* LOGIN */

.login-body{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:
   radial-gradient(circle at top right,rgba(99,102,241,0.15),transparent 40%),
   radial-gradient(circle at bottom left,rgba(14,165,233,0.12),transparent 45%),
   linear-gradient(135deg,#020409,#05070f,#020409);
}

.login-box{
  width:100%;
  max-width:380px;
  background:rgba(10,14,25,0.75);
  backdrop-filter: blur(18px);
  border-radius:18px;
  padding:35px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  text-align:center;
  border:1px solid rgba(255,255,255,0.06);
}

.login-box h2{
  font-size:26px;
  letter-spacing:2px;
  margin-bottom:18px;
  background:linear-gradient(90deg,#60a5fa,#22d3ee,#818cf8);
  -webkit-background-clip:text;
  color:transparent;
}

.login-box input{
  width:100%;
  margin-top:14px;
  padding:13px 14px;
  border-radius:10px;
  background:#020617;
  border:1px solid rgba(255,255,255,0.08);
  color:white;
  outline:none;
  font-size:15px;
}

.login-box input:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 2px rgba(56,189,248,0.25);
}

.login-box button{
  width:100%;
  margin-top:18px;
  padding:13px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  background:linear-gradient(135deg,#3b82f6,#06b6d4);
  color:#020617;
}

/* HUD */

.hud{
  text-align:center;
  padding:20px 15px;
}

.logo{
  font-size:42px;
  font-weight:700;
  letter-spacing:4px;
  background:linear-gradient(90deg,#60a5fa,#22d3ee,#818cf8);
  -webkit-background-clip:text;
  color:transparent;
}

/* CHAT */

#chatbox{
  width:95%;
  max-width:850px;
  margin:18px auto;
  height:380px;
  overflow:auto;
  padding:16px;
  background:rgba(10,14,25,0.7);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

#chatbox p{
  margin-bottom:10px;
  line-height:1.5;
}

#chatbox b{
  color:#38bdf8;
}

/* CONTROLS */

.controls{
  width:95%;
  max-width:850px;
  margin:0 auto 18px;
  display:flex;
  gap:8px;
  justify-content:center;
}

.controls input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  background:#020617;
  border:1px solid rgba(255,255,255,0.08);
  color:white;
  outline:none;
}

.controls button{
  padding:12px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  background:linear-gradient(135deg,#22d3ee,#818cf8);
  color:#020617;
}

.controls button:hover{
  opacity:0.9;
}

.logout{
  color:#f87171;
  margin-left:12px;
  font-size:14px;
}