body{
margin:0;
font-family:Segoe UI;
background: radial-gradient(circle at 20% 20%, #0b1b2b, #050814);
color:white;
}

.wrapper{
max-width:1100px;
margin:auto;
padding:40px;
}

.logo{
text-align:center;
margin-bottom:30px;
}

.logo h1{
font-size:60px;
letter-spacing:5px;
margin:10px 0;
color:#8ff;
text-shadow:0 0 20px #0ff;
}

.logo span{
color:#ff2e9f;
}

.logo p{
opacity:0.6;
}

.stats{
display:flex;
justify-content:center;
gap:30px;
margin-bottom:30px;
opacity:0.8;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.card{
background:rgba(255,255,255,0.03);
border-radius:20px;
padding:25px;
backdrop-filter: blur(10px);
box-shadow:0 0 30px rgba(0,255,255,0.05);
}

.card h3{
margin-bottom:15px;
}

input{
width:100%;
padding:12px;
margin-bottom:10px;
border-radius:10px;
border:none;
background:#0f1a2a;
color:white;
}

.btn{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:#00ffd0;
color:black;
font-weight:bold;
cursor:pointer;
margin-top:10px;
}

.btn.pink{
background:#ff2e9f;
color:white;
}

.item{
background:#0f1a2a;
padding:12px;
border-radius:10px;
margin-top:10px;
}

.footer{
text-align:center;
margin-top:30px;
opacity:0.6;
}

.section{
margin-top:30px;
}

.title{
margin-bottom:15px;
font-size:22px;
}

.cyan{ color:#11ffe3; }
.pink{ color:#ff3ca6; }

.emptyBox{
background:rgba(255,255,255,0.03);
padding:25px;
border-radius:15px;
text-align:center;
opacity:0.6;
margin-bottom:15px;
}

.formBox{
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:15px;
margin-bottom:15px;
}

.formHeader{
display:flex;
justify-content:space-between;
margin-bottom:15px;
}

.formHeader button{
background:none;
border:none;
color:white;
font-size:18px;
cursor:pointer;
}

.hidden{
display:none !important;
visibility:hidden;
opacity:0;
height:0;
overflow:hidden;
}

.formBox.hidden{
display:none !important;
}

.addBtn{
width:100%;
padding:15px;
border-radius:15px;
border:1px solid rgba(255,255,255,0.1);
background:transparent;
color:white;
cursor:pointer;
margin-bottom:15px;
}

.btn{
width:100%;
padding:14px;
border:none;
border-radius:12px;
font-weight:bold;
cursor:pointer;
}

.btn.cyan{
background:#11ffe3;
color:black;
}

.btn.pink{
background:#ff3ca6;
color:white;
}


.statItem{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
opacity:0.9;
}

.statItem .icon{
font-size:18px;
}

.purple{
color:#9b5cff;
}
.wifiIcon svg{
width:18px;
height:18px;
color:#ff3ca6;
opacity:0.95;
}


@keyframes wifiFade{
from{
opacity:0;
transform: translateX(10px);
}
to{
opacity:1;
transform: translateX(0);
}
}
.wifiTitle{
display:flex;
align-items:center;
gap:8px;
}

.wifiIcon svg{
width:18px;
height:18px;
color:#ff3ca6;
opacity:0.95;
}
.credCard{
background: rgba(255,255,255,0.03);
border-radius:16px;
padding:20px;
margin-bottom:15px;
border:1px solid rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
}

.credName{
color:#11ffe3;
font-weight:bold;
font-size:18px;
margin-bottom:10px;
}

.credName.wifi{
color:#ff3ca6;
}

.credRow{
display:flex;
gap:10px;
margin-top:6px;
font-size:14px;
}

.credLabel{
opacity:0.5;
font-size:12px;
letter-spacing:1px;
}
.credCard{
background: rgba(255,255,255,0.03);
border-radius:16px;
padding:20px;
margin-bottom:15px;
border:1px solid rgba(255,255,255,0.05);
}

.credTop{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

.credTop.wifi{
display:flex;
align-items:center;
gap:8px;
}

.credName{
color:#11ffe3;
font-weight:700;
font-size:18px;
}

.wifiText{
color:#ff3ca6;
}

.credLine{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:8px;
}

.credLabel{
opacity:0.5;
font-size:12px;
}

.credValue{
font-size:14px;
}

.credIcons{
opacity:0.6;
cursor:pointer;
}
.credIcons button{
background:none;
border:none;
color:white;
cursor:pointer;
font-size:14px;
margin-left:5px;
opacity:0.7;
}

.credIcons button:hover{
opacity:1;
}
.wifiHeader{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

.wifiLeft{
display:flex;
align-items:center;
gap:8px;
}

.wifiName{
color:#ff3ca6;
font-weight:600;
}
.credIcons button{
background:none;
border:none;
cursor:pointer;
color:white;
opacity:0.7;
padding:4px;
}

.credIcons button:hover{
opacity:1;
}
.credCard{
position:relative;
transition: all 0.3s ease;
}

.emailCard:hover{
box-shadow: 0 0 25px rgba(0,255,200,0.4);
border:1px solid rgba(0,255,200,0.5);
}
.wifiCard:hover{
box-shadow: 0 0 25px rgba(255,60,166,0.4);
border:1px solid rgba(255,60,166,0.5);
}

.credCard:hover .wifiText{
color:#ff3ca6;
}
.deleteBtn{
opacity:0;
background:none;
border:none;
color:white;
cursor:pointer;
transition: all 0.2s ease;
}
.credCard:hover .deleteBtn{
opacity:1;
}
.deleteBtn:hover{
color:#ff3ca6;
transform: scale(1.2);
}
.emailCard:hover{
box-shadow: 0 0 25px rgba(0,255,200,0.4);
}
.wifiCard:hover{
box-shadow: 0 0 25px rgba(255,60,166,0.4);
}
.emailCard .deleteBtn:hover{
color:#11ffe3;
}
.wifiCard .deleteBtn:hover{
color:#ff3ca6;
}
/* ===== HOVER EMAIL VERT ===== */
.emailCard:hover{
box-shadow: 0 0 25px rgba(0,255,200,0.45);
border:1px solid rgba(0,255,200,0.6);
}

/* Delete hover email */
.emailCard .deleteBtn:hover{
color:#11ffe3;
}


/* ===== HOVER WIFI ROSE ===== */
.wifiCard:hover{
box-shadow: 0 0 25px rgba(255,60,166,0.45);
border:1px solid rgba(255,60,166,0.6);
}

/* Delete hover wifi */
.wifiCard .deleteBtn:hover{
color:#ff3ca6;
}
.searchBox{
width:100%;
padding:14px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.03);
color:white;
margin-bottom:15px;
outline:none;
box-sizing:border-box;
}


.searchBox.cyan{
border:1px solid rgba(0,255,200,0.4);
}

.searchBox.pink{
border:1px solid rgba(255,60,166,0.4);
}

.searchBox:focus{
box-shadow:0 0 10px rgba(0,255,200,0.3);
}
.listScroll{
max-height:360px; /* ≈ 3 cards */
overflow-y:auto;
padding-right:5px;
}
.listScroll::-webkit-scrollbar{
width:6px;
}

.listScroll::-webkit-scrollbar-thumb{
background: rgba(255,255,255,0.15);
border-radius:10px;
}


.editInput{
width:100%;
background:#0f1a2a;
border:1px solid rgba(255,255,255,0.15);
border-radius:8px;
padding:8px;
color:white;
margin-top:5px;
}
.actionBtns{
display:flex;
align-items:center;
gap:8px;
}

.actionBtns button{
background:none;
border:none;
color:white;
cursor:pointer;
opacity:0.7;
transition: all 0.2s ease;
}

.actionBtns button:hover{
opacity:1;
transform: scale(1.1);
}
.editInput{
width:70%;
max-width:320px;

background:#0f1a2a;
border:1px solid rgba(255,255,255,0.15);
border-radius:8px;

padding:8px 10px;
color:white;

margin-top:4px;
transition: all 0.2s ease;
}

.editInput{
display:block;
margin-left:auto;
margin-right:auto;
}

.editInput:focus{
border:1px solid rgba(0,255,200,0.6);
box-shadow:0 0 8px rgba(0,255,200,0.25);
}
.credName.hidden,
.credValue.hidden{
display:none;
}
.credCard.editing{
box-shadow:0 0 25px rgba(255,255,255,0.15);
border:1px solid rgba(255,255,255,0.25);
}