body{

margin:0;

font-family:monospace;

background:#020617;

color:#e2e8f0;

}


/* FONDO estilo hacking */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b");

background-size:cover;

opacity:0.08;

z-index:-1;

}



/* HEADER */

header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 40px;

background:#020617;

border-bottom:1px solid #0f172a;

}

.logo{

font-size:26px;

color:#22c55e;

font-weight:bold;

letter-spacing:1px;

}

nav a{

color:#94a3b8;

margin-left:20px;

text-decoration:none;

}

nav a:hover{

color:#22c55e;

}



/* CONTENEDOR */

.main{

max-width:600px;

margin:auto;

padding:40px 20px;

text-align:center;

background:rgba(2,6,23,0.85);

border-radius:10px;

}



/* TITULO */

h1{

color:#22c55e;

margin-bottom:30px;

}



/* PASSWORD BOX */

.generator{

display:flex;

gap:10px;

justify-content:center;

margin-bottom:20px;

}


.generator input{

width:350px;

padding:14px;

font-size:20px;

border-radius:6px;

border:1px solid #22c55e;

background:black;

color:#22c55e;

text-align:center;

}


.generator button{

background:#22c55e;

border:none;

padding:12px 20px;

border-radius:6px;

cursor:pointer;

color:black;

font-weight:bold;

}



/* OPCIONES */

.options{

display:flex;

flex-direction:column;

gap:10px;

margin-top:20px;

text-align:left;

}


.check{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

}



/* BOTON GENERAR */

.generate{

display:block;

margin:25px auto;

background:#22c55e;

border:none;

padding:14px 30px;

border-radius:6px;

font-size:18px;

color:black;

cursor:pointer;

font-weight:bold;

}



/* FOOTER */

footer{

margin-top:50px;

padding:20px;

text-align:center;

color:#64748b;

}
.length-label{

display:flex;

flex-direction:column;

gap:5px;

margin-bottom:10px;

}
.generate:hover{

background:#16a34a;

transform:scale(1.05);

}
.strength-container{

margin-top:15px;

text-align:center;

}

#strength-bar{

height:8px;

width:0%;

background:red;

border-radius:4px;

transition:all 0.3s;

margin-bottom:5px;

}

#strength-text{

font-size:14px;

color:#cbd5f5;

}
#entropy{

font-size:13px;

color:#94a3b8;

margin-top:4px;

}