@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

background:#0f172a;
color:#fff;
padding:15px;
}

/* HEADING */
h1{
text-align:center;
margin-bottom:20px;
font-size:22px;
font-weight:700;
}

/* FORM */
form{
display:flex;
gap:10px;
margin-bottom:15px;
}

input{
flex:1;
padding:12px;
border-radius:10px;
border:none;
outline:none;
font-size:14px;
}

button{
background:#3b82f6;
color:white;
border:none;
padding:12px;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

button:hover{
transform:scale(1.05);
}

/* CARD */
.card{
border-radius:18px;
margin-bottom:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
transition:0.3s;
}

.card:hover{
transform:translateY(-3px);
}

/* GLASS EFFECT */
.overlay{
background:rgba(0,0,0,0.55);
backdrop-filter:blur(12px);
padding:15px;
}

/* USER HEADER */
.user-head{
text-align:center;
margin-bottom:12px;
}

.user-head h2{
font-size:20px;
font-weight:700;
color:#ffffff;
}

.user-head span{
font-size:13px;
color:#e2e8f0;
}

/* PAGE FORM */
.page-form{
display:flex;
gap:6px;
margin-bottom:12px;
}

.page-form input{
padding:9px;
font-size:13px;
border-radius:8px;
}

.page-form button{
background:#22c55e;
padding:9px 12px;
border-radius:8px;
}

/* PAGE LIST */
.pages{
list-style:none;
padding:0;
}

.pages li{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.1);
padding:10px;
border-radius:10px;
margin-bottom:8px;
}

/* PAGE LEFT */
.pages li strong{
color:#ffffff;
font-weight:600;
font-size:14px;
}

.pages li a{
color:#93c5fd;
font-size:12px;
text-decoration:none;
}

/* DELETE BUTTON (PAGE) */
.pages li a:last-child{
color:#ef4444;
font-weight:bold;
}

/* DELETE USER */
.delete-user{
display:block;
text-align:center;
margin-top:10px;
background:#ef4444;
padding:10px;
border-radius:10px;
color:white;
font-weight:600;
text-decoration:none;
}

/* ANIMATION */
.fade{
animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(15px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* MOBILE OPTIMIZATION */
@media(max-width:500px){

h1{
font-size:18px;
}

.user-head h2{
font-size:18px;
}

.pages li{
font-size:13px;
}

}