*{
box-sizing:border-box;
}


body{

margin:0;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

background:#f4f8ff;

}


body:before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
circle at 20% 20%,
#bfdbfe,
transparent 35%
),

radial-gradient(
circle at 80% 80%,
#bbf7d0,
transparent 35%
);

z-index:-1;

}



.card{

width:400px;

padding:45px;

background:
rgba(255,255,255,.85);

border-radius:28px;

box-shadow:
0 20px 60px #0002;

text-align:center;

backdrop-filter:
blur(20px);

}



.logo{

font-size:60px;

}


h1{

font-size:32px;

margin:10px 0;

}


h2{

color:#2563eb;

}


p{

color:#64748b;

}


.node{

margin:25px 0;

color:#64748b;

}


#node{

font-weight:bold;

color:#16a34a;

}



input{

width:100%;

padding:15px;

border-radius:14px;

border:1px solid #ddd;

font-size:16px;

}



button{

margin-top:18px;

width:100%;

padding:15px;

border:0;

border-radius:14px;

background:
linear-gradient(
135deg,
#2563eb,
#22c55e
);

color:white;

font-size:16px;

cursor:pointer;

}



#status{

margin-top:15px;

height:25px;

}



footer{

margin-top:30px;

font-size:12px;

color:#94a3b8;

}