:root{
  --bg0:#05070c;
  --bg1:#070b14;
  --panel: rgba(10, 16, 30, .75);
  --text:#d7f7ff;
  --muted:#84a7b3;
  --neon:#21f3c5;
  --border: rgba(33,243,197,.35);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(42,216,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.container{
  width: min(500px, 92%);
  margin: 60px auto;
}

.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 25px rgba(33,243,197,.15);
}

.brand{
  text-align:center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(33,243,197,.4);
}

h1{
  text-align:center;
  margin-bottom: 20px;
}

label{
  font-size: 13px;
  color: var(--muted);
}

.input{
  width:100%;
  padding:12px;
  margin-top:6px;
  margin-bottom:14px;
  border-radius:12px;
  border:1px solid rgba(33,243,197,.25);
  background: rgba(0,0,0,.3);
  color:white;
}

.input:focus{
  outline:none;
  border-color: var(--neon);
  box-shadow: 0 0 10px rgba(33,243,197,.3);
}

.btn{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--neon);
  background: rgba(33,243,197,.15);
  color:white;
  font-weight:bold;
  cursor:pointer;
  transition: .2s;
}

.btn:hover{
  background: rgba(33,243,197,.3);
}

.link{
  text-align:center;
  margin-top:15px;
}

a{
  color: var(--neon);
  text-decoration:none;
}