:root{
	--bg1:#02030a;
	--bg2:#081028;
	--accent:#7fe7ff;
	--card-bg: rgba(0,0,0,0.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
	font-family: 'Press Start 2P', monospace;
	background: linear-gradient(180deg,var(--bg1),var(--bg2));
	overflow:hidden;
	color:#e6f7ff;
}

/* canvas ocupa toda a tela */
#stars{
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	z-index:0;
	/* adicionado blur para suavizar as estrelas em segundo plano */
	filter: blur(1.6px) drop-shadow(0 0 6px rgba(127,231,255,0.06));
}

/* nebulosa em cima do canvas, com blur para profundidade */
.nebula{
	position:fixed;
	inset:-15%;
	pointer-events:none;
	z-index:1;
	background:
		radial-gradient(30% 40% at 10% 20%, rgba(120,80,200,0.18), transparent 10%),
		radial-gradient(40% 40% at 80% 70%, rgba(20,140,180,0.12), transparent 12%),
		radial-gradient(35% 30% at 50% 40%, rgba(200,120,160,0.08), transparent 12%);
	/* blur aumentado para dar mais profundidade */
	filter: blur(26px) saturate(1.2);
	opacity:0.95;
	mix-blend-mode:screen;
}

/* centro do conteúdo */
.center{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	padding:2rem;
}

/* cartão do formulário */
.card{
	background: var(--card-bg);
	border:1px solid rgba(127,231,255,0.08);
	/* aumento do backdrop blur para destacar o efeito */
	backdrop-filter: blur(10px);
	padding:28px;
	border-radius:12px;
	min-width:280px;
	text-align:center;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 30px rgba(127,231,255,0.03) inset;
	position:relative;
}

/* glow borrado atrás do cartão */
.card::before{
	content:"";
	position:absolute;
	inset:-18%;
	z-index:-1;
	background: radial-gradient(closest-side, rgba(127,231,255,0.12), transparent 50%);
	filter: blur(22px) saturate(1.2);
	border-radius:18px;
	pointer-events:none;
}

.title{
	font-size:14px;
	letter-spacing:2px;
	color:var(--accent);
	margin-bottom:18px;
}

/* input estilo retrô */
input[type="password"]{
	width:100%;
	padding:12px 14px;
	border-radius:6px;
	border:2px solid rgba(255,255,255,0.06);
	background: rgba(8,12,20,0.6);
	color: #dff6ff;
	font-family: inherit;
	font-size:12px;
	letter-spacing:1px;
	outline:none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.45);
	margin-bottom:12px;
	text-transform:uppercase;
}

/* botão */
button{
	display:inline-block;
	padding:10px 14px;
	background:linear-gradient(180deg, rgba(127,231,255,0.12), rgba(127,231,255,0.06));
	color:var(--accent);
	border:1px solid rgba(127,231,255,0.15);
	border-radius:6px;
	cursor:pointer;
	font-size:11px;
	letter-spacing:1px;
}

/* acessibilidade */
.visually-hidden{
	position:absolute!important;
	height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* responsividade */
@media (max-width:420px){
	.card{min-width:220px;padding:20px}
	input[type="password"]{font-size:11px}
}