body{
margin:0;
font-family:tahoma;
background:#0b1220;
color:white;
padding-bottom:80px;
-webkit-tap-highlight-color: transparent;
}

#splash{
position:fixed;
inset:0;
background:#05070f;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.splash-logo{
width:120px;
animation:zoom 1.2s ease;
}

@keyframes zoom{
0%{transform:scale(0.6);opacity:0}
100%{transform:scale(1);opacity:1}
}

.header{
text-align:center;
padding:15px;
}

.logo{width:80px}

.page{
display:none;
padding:15px;
opacity:0;
transform:translateY(8px);
transition:0.25s;
}

.page.active{
display:block;
opacity:1;
transform:translateY(0);
}

.cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.card{
background:rgba(255,255,255,0.06);
padding:14px;
border-radius:14px;
text-align:center;
}

button{
padding:10px;
border:none;
border-radius:10px;
background:#38bdf8;
color:white;
cursor:pointer;
}

.item{
background:rgba(255,255,255,0.06);
padding:10px;
border-radius:10px;
margin-top:8px;
}

.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
display:flex;
justify-content:space-around;
background:#111827;
padding:10px;
}

.bottom-nav button{
background:none;
color:#aaa;
border:none;
}

.bottom-nav button.active{
color:#38bdf8;
}

/* ================= MODAL OVERLAY ================= */
.modal{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
z-index:999;
}

/* ================= MODAL BOX ================= */
.modal-box{
width:92%;
max-width:340px;
background:linear-gradient(145deg,#0f172a,#111827);
border:1px solid rgba(255,255,255,0.08);
padding:18px;
border-radius:18px;
display:flex;
flex-direction:column;
gap:12px;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:pop 0.2s ease;
}

@keyframes pop{
from{transform:scale(0.9);opacity:0}
to{transform:scale(1);opacity:1}
}

/* ================= TITLE ================= */
.modal-box h3{
margin:0;
font-size:16px;
text-align:center;
color:#38bdf8;
}

/* ================= INPUTS ================= */
.modal-box input{
padding:12px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.05);
color:white;
outline:none;
transition:0.2s;
font-size:13px;
}

.modal-box input:focus{
border-color:#38bdf8;
box-shadow:0 0 0 2px rgba(56,189,248,0.2);
}

/* ================= BUTTONS ================= */
.modal-box button{
padding:12px;
border:none;
border-radius:12px;
font-size:13px;
cursor:pointer;
transition:0.15s;
}

/* دکمه اصلی */
.modal-box button:first-of-type{
background:#38bdf8;
color:#001018;
font-weight:bold;
}

.modal-box button:first-of-type:active{
transform:scale(0.97);
}

/* دکمه بستن */
.modal-box button:last-of-type{
background:rgba(255,255,255,0.08);
color:#fff;
}

.modal-box button:last-of-type:hover{
background:rgba(255,255,255,0.12);
}
/* ================= DELETE BUTTON (APP STYLE) ================= */
.del-btn{
margin-top:10px;
padding:8px 10px;
border:none;
border-radius:10px;
background:rgba(239,68,68,0.15);
color:#ef4444;
font-size:12px;
cursor:pointer;
transition:0.2s;
width:100%;
border:1px solid rgba(239,68,68,0.3);
}

.del-btn:hover{
background:#ef4444;
color:white;
transform:translateY(-2px);
}

.del-btn:active{
transform:scale(0.97);
}
/* ================= STAFF GRID ================= */
#staff-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

/* کارت پرسنل حرفه‌ای */
.staff-card{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:12px;
text-align:center;
backdrop-filter: blur(8px);
transition:0.2s;
}

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

/* اسم */
.staff-card b{
display:block;
color:#38bdf8;
font-size:13px;
margin-bottom:4px;
}

/* مشخصات */
.staff-card small{
display:block;
color:#94a3b8;
font-size:11px;
}

/* دکمه تماس */
.call-btn{
display:inline-block;
margin-top:10px;
background:#22c55e;
color:white;
padding:7px 10px;
border-radius:10px;
text-decoration:none;
font-size:12px;
width:100%;
}