:root{
  --bg0:#05060b;
  --bg1:#070a14;
  --c0:#eaf6ff;
  --c1:#56e3ff;
  --c2:#b56bff;
  --c3:#ff4fd8;
  --line:rgba(255,255,255,.10);
  --line2:rgba(86,227,255,.18);
  --shadow:0 24px 80px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--c0);
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(181,107,255,.18), transparent 60%),
              radial-gradient(900px 700px at 85% 20%, rgba(86,227,255,.14), transparent 55%),
              radial-gradient(700px 600px at 55% 85%, rgba(255,79,216,.12), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

/* BACKGROUND LAYERS */
.bg{position:fixed;inset:0;pointer-events:none}
.nebula{
  position:absolute;inset:-20%;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(181,107,255,.55), transparent 60%),
    radial-gradient(closest-side at 70% 25%, rgba(86,227,255,.45), transparent 62%),
    radial-gradient(closest-side at 55% 70%, rgba(255,79,216,.35), transparent 65%),
    radial-gradient(closest-side at 35% 85%, rgba(86,227,255,.25), transparent 70%);
  filter: blur(34px) saturate(1.35);
  opacity:.55;
  animation: drift 12s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-18px,-10px,0) scale(1.03)}
  to{transform:translate3d(18px,12px,0) scale(1.08)}
}
.grid{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(86,227,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(86,227,255,.08) 1px, transparent 1px);
  background-size: 52px 52px;
  transform-origin:center;
  transform: perspective(900px) rotateX(62deg) translateY(140px);
  opacity:.22;
  mask-image: radial-gradient(closest-side at 50% 65%, #000 55%, transparent 100%);
}
.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9) 40%, transparent 60%),
    radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,.75) 40%, transparent 60%),
    radial-gradient(1px 1px at 78% 28%, rgba(255,255,255,.85) 40%, transparent 60%),
    radial-gradient(1px 1px at 62% 44%, rgba(255,255,255,.70) 40%, transparent 60%),
    radial-gradient(1px 1px at 18% 64%, rgba(255,255,255,.75) 40%, transparent 60%),
    radial-gradient(1px 1px at 84% 70%, rgba(255,255,255,.85) 40%, transparent 60%);
  opacity:.55;
  filter: drop-shadow(0 0 8px rgba(86,227,255,.25));
  animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.35}to{opacity:.75}}

.glow{
  position:absolute;inset:-10%;
  background: radial-gradient(circle at 50% 50%, rgba(86,227,255,.11), transparent 55%);
  filter: blur(10px);
}

/* LAYOUT */
.wrap{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  padding:28px;
}
.card{
  width:min(560px, 92vw);
  border-radius:22px;
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(86,227,255,.14), transparent 60%),
    radial-gradient(900px 320px at 80% 0%, rgba(181,107,255,.12), transparent 65%),
    linear-gradient(180deg, rgba(10,14,28,.82), rgba(5,6,11,.82));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding:22px 22px 16px;
  position:relative;
  overflow:hidden;
}

/* inner edge neon */
.card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:22px;
  padding:1px;
  background: linear-gradient(120deg, rgba(86,227,255,.35), rgba(181,107,255,.25), rgba(255,79,216,.20));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.9;
  pointer-events:none;
}

/* scanline effect */
.scanline{
  position:absolute;inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    transparent 3px,
    transparent 6px
  );
  opacity:.08;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.emblem{
  width:56px;height:56px;border-radius:16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(86,227,255,.85), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(181,107,255,.75), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 6px rgba(86,227,255,.06), 0 12px 40px rgba(86,227,255,.10);
}
.brand{
  font-weight:900;
  letter-spacing:.28em;
  font-size:18px;
}
.sub{
  opacity:.72;
  letter-spacing:.12em;
  font-size:11px;
  margin-top:4px;
}

h1{
  margin:12px 0 6px;
  font-size:20px;
  letter-spacing:.12em;
}
.hint{
  margin:0 0 14px;
  opacity:.76;
}

.form{display:grid;gap:12px}
.field span{
  display:block;
  font-size:11px;
  opacity:.82;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(2,4,8,.55);
  color:var(--c0);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(86,227,255,.06);
}
.field input:focus{
  border-color: rgba(86,227,255,.35);
  box-shadow:
    0 0 0 4px rgba(86,227,255,.10),
    inset 0 0 0 1px rgba(181,107,255,.08);
}

.btn{
  position:relative;
  margin-top:6px;
  width:100%;
  border-radius:16px;
  padding:13px 14px;
  border:1px solid rgba(86,227,255,.26);
  background: linear-gradient(180deg, rgba(86,227,255,.18), rgba(86,227,255,.06));
  color:var(--c0);
  font-weight:900;
  letter-spacing:.18em;
  cursor:pointer;
  overflow:hidden;
  transform: translateZ(0);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform: translateY(1px)}
.btnGlow{
  position:absolute;inset:-2px;
  background:
    radial-gradient(240px 80px at 50% 10%, rgba(255,79,216,.22), transparent 70%),
    radial-gradient(260px 90px at 50% 90%, rgba(181,107,255,.18), transparent 70%),
    linear-gradient(90deg, rgba(86,227,255,.15), rgba(181,107,255,.12), rgba(255,79,216,.10));
  opacity:.9;
  filter: blur(10px);
  animation: pulse 2.4s ease-in-out infinite alternate;
}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
.btnTxt{position:relative;z-index:2}

.msg{
  display:none;
  margin-top:6px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  opacity:.92;
}
.msg.err{display:block;border-color:rgba(255,80,80,.28)}
.msg.ok{display:block;border-color:rgba(86,227,255,.28)}

.footer{
  margin-top:14px;
  display:flex;align-items:center;gap:10px;
  opacity:.75;
  letter-spacing:.08em;
  font-size:11px;
}
.dot{
  width:9px;height:9px;border-radius:99px;
  background: rgba(86,227,255,.9);
  box-shadow: 0 0 18px rgba(86,227,255,.55);
}

.links{margin-top:10px;text-align:center}
.link{
  color: rgba(86,227,255,.92);
  text-decoration:none;
  letter-spacing:.08em;
  font-weight:700;
}
.link:hover{filter:brightness(1.15); text-decoration:underline}