/* =================================================
   MAY-CONNECT — CLEAN FINAL CSS
================================================== */

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Inter",system-ui,sans-serif;
}

body{
background:#0B0F1A;
color:#fff;
min-height:100vh;
}

/* THEME */

:root{

--bg-main:#0B0F1A;
--bg-card:#131A2E;
--bg-soft:#0F172A;

--primary:#3B82F6;
--success:#22C55E;
--danger:#EF4444;

--text-muted:#9CA3AF;
--border-soft:#1F2A44;

}

/* LOGO */

.logo-circle{
display:flex;
justify-content:center;
margin:1.5rem 0;
}

.logo-circle img{
width:80px;
height:80px;
border-radius:50%;
border:4px solid var(--primary);
padding:5px;
background:var(--bg-card);
}

/* AUTH */

.auth-container{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:1rem;
}

.auth-card{
width:100%;
max-width:380px;
background:var(--bg-card);
padding:2rem;
border-radius:20px;
border:1px solid var(--border-soft);
text-align:center;
}

.auth-card h2{
margin-bottom:.5rem;
}

.auth-card p{
color:var(--text-muted);
margin-bottom:1.5rem;
font-size:.9rem;
}

.auth-card input{
width:100%;
padding:14px;
margin-bottom:1rem;
border-radius:12px;
border:1px solid var(--border-soft);
background:var(--bg-soft);
color:#fff;
}

/* BUTTONS */

.primary-btn{
background:var(--primary);
border:none;
padding:14px;
border-radius:14px;
color:white;
font-weight:600;
width:100%;
cursor:pointer;
transition:.2s;
}

.primary-btn:hover{
background:#2563eb;
}

.primary-btn:active{
transform:scale(.97);
}

.secondary-btn{
width:100%;
padding:14px;
border-radius:12px;
border:2px solid var(--primary);
background:transparent;
color:var(--primary);
font-weight:600;
cursor:pointer;
}

/* DASHBOARD */

.wallet-card{
background:linear-gradient(135deg,var(--primary),#1E3A8A);
padding:1.5rem;
border-radius:18px;
margin:1rem;
text-align:center;
}

.wallet-card strong{
font-size:1.8rem;
}

/* QUICK ACTIONS */

.quick-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
padding:1rem;
}

.quick-actions button{
background:var(--bg-card);
border:1px solid var(--border-soft);
padding:1.2rem;
border-radius:16px;
color:white;
cursor:pointer;
}

/* NETWORK GRID */

.network-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:16px;
}

.network-card{
background:var(--bg-card);
border:1px solid var(--border-soft);
border-radius:14px;
padding:14px;
text-align:center;
cursor:pointer;
transition:.2s;
}

.network-card.selected{
transform:scale(1.05);
border-color:var(--primary);
}

.network-card img{
width:36px;
height:36px;
border-radius:50%;
border:3px solid var(--primary);
}

/* DATA PLANS */

.plan-card{
background:var(--bg-soft);
border:1px solid var(--border-soft);
border-radius:14px;
padding:14px;
margin:10px;
display:flex;
justify-content:space-between;
cursor:pointer;
}

/* INPUT */

input{
background:var(--bg-soft);
border:1px solid var(--border-soft);
color:white;
padding:12px;
border-radius:10px;
}

/* MODAL */

.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
}

.modal-card{
background:var(--bg-card);
padding:1.5rem;
border-radius:18px;
width:90%;
max-width:380px;
}

/* SHIMMER */

.shimmer{
height:60px;
border-radius:12px;
background:linear-gradient(
90deg,
#1f2937 25%,
#374151 37%,
#1f2937 63%
);
background-size:400% 100%;
animation:shimmer 1.4s infinite;
}

@keyframes shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}

/* SPLASH LOADER */

#splashLoader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#020b1f;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
transition:opacity .4s;
}

#splashLoader.hide{
opacity:0;
pointer-events:none;
}

@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}


/* ADMIN PANEL */

.admin-card{
background:#08142c;
padding:20px;
border-radius:20px;
margin-top:20px;
box-shadow:0 0 20px rgba(59,120,231,0.2);
}

.admin-balance{
background:#020b1f;
padding:15px;
border-radius:15px;
text-align:center;
margin-bottom:20px;
}

/* BOTTOM NAV */

.bottomNav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:70px;
background:#08142c;
display:flex;
justify-content:space-around;
align-items:center;
border-top:1px solid rgba(255,255,255,0.05);
}

.bottomNav button{
background:none;
border:none;
color:white;
display:flex;
flex-direction:column;
align-items:center;
font-size:20px;
cursor:pointer;
}

.bottomNav span{
font-size:11px;
margin-top:3px;
}

/* HIDDEN */

.hidden{
display:none;
}
.modalcard button{
cursor : pointer;
margin-top: 10px;
}
.planCard{
background:#0c1a36;
padding:15px;
margin:10px;
border-radius:10px;
text-align:center;
}
.planCard{
background:#08142c;
padding:15px;
border-radius:12px;
margin-top:10px;
border:1px solid #12264f;
}