/* ===================================================
   NUMERA PARTNER - MASTER STYLE.CSS
   =================================================== */
:root{
--primary:#8B7CF8;
--accent:#E8A8D8;
--bg:#FAFBFF;
--card:#FFFFFF;
--text:#2F3445;
--muted:#7A8095;
--border:#ECEFF5;
--radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Poppins',sans-serif;
background:linear-gradient(180deg,#FFFDFE,#F7F3FF 45%,#EEF8FF 100%);
color:var(--text);
min-height:100vh;
}
a{text-decoration:none;color:inherit}
.login-body,.login-page,.dashboard,.page,.app{
max-width:430px;
margin:auto;
padding:20px 18px 100px;
}
.login-card,.wallet,.summary-card,.list-card,.profile-card,.promo,.menu-card{
background:#fff;
border-radius:22px;
box-shadow:0 10px 30px rgba(139,124,248,.10);
padding:22px;
margin-bottom:18px;
}
.brand-logo,.logo,.avatar{
width:88px;height:88px;
margin:0 auto 18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:24px;
background:linear-gradient(135deg,#F8D7E8,#D7C9FF,#CBEFFF);
color:#fff;
font-size:34px;
font-weight:700;
}
h1,h2,h3{font-weight:700}
h1,h2,h3,p,.version{text-align:center}
small{color:var(--muted)}
label{display:block;margin:14px 0 8px;font-weight:600}
input{
width:100%;
padding:15px;
border:1px solid var(--border);
border-radius:16px;
background:#fff;
}
input:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
button,.btn-outline,.email-button{
display:block;
width:100%;
padding:15px;
margin-top:16px;
border-radius:16px;
font-weight:700;
text-align:center;
}
button{
background:linear-gradient(135deg,#A78BFA,#CDBBFF);
color:#fff;
border:none;
}
.btn-outline,.email-button{
border:1px solid var(--primary);
background:#fff;
color:var(--primary);
}
.hero,.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}
.wallet{
display:flex;
justify-content:space-between;
align-items:center;
background:linear-gradient(135deg,#A78BFA,#CDBBFF);
color:#fff;
}
.wallet p,.wallet small{color:#F5F5F5}
.wallet-icon{font-size:42px}
.grid,.menu-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin:18px 0;
}
.menu,.menu-grid a{
background:#fff;
border-radius:18px;
padding:18px;
text-align:center;
box-shadow:0 8px 24px rgba(139,124,248,.08);
}
.menu span,.menu-grid span{
display:block;
margin-top:8px;
font-size:12px;
}
.menu-card{margin-bottom:14px}
.profile-card{text-align:center}
.danger{color:#DC2626}
.bottom-nav{
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:16px;
width:calc(100% - 24px);
max-width:406px;
background:#fff;
border-radius:24px;
display:flex;
justify-content:space-around;
padding:14px;
box-shadow:0 12px 30px rgba(139,124,248,.12);
}
.bottom-nav a.active{
color:var(--primary);
font-weight:700;
}
/* BONUS PARTNER */
.promo{
position:relative;
overflow:hidden;
margin-top:22px;
padding:26px;
background:#fff;
border:1px solid #EEEAFD;
box-shadow:0 12px 30px rgba(139,124,248,.08),0 2px 8px rgba(0,0,0,.03);
}
.promo::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top left,rgba(139,124,248,.08),transparent 55%),
radial-gradient(circle at bottom right,rgba(232,168,216,.06),transparent 45%);
pointer-events:none;
}
.promo h3{
position:relative;
color:#1F2937;
font-size:32px;
margin-bottom:12px;
}
.promo p{
position:relative;
color:#4B5563;
font-size:18px;
line-height:1.6;
max-width:90%;
text-align:left;
}
.promo .btn{
position:relative;
display:inline-block;
margin-top:20px;
padding:12px 22px;
border-radius:14px;
background:linear-gradient(135deg,#A78BFA,#CDBBFF);
color:#fff;
}
.promo::after{
content:"";
position:absolute;
width:180px;
height:180px;
right:-70px;
bottom:-70px;
border-radius:50%;
background:rgba(191,232,255,.18);
}