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

body{
background:#f5f8ff;
min-height:100vh;
color:#111827;
}

/* Old sidebar/menu rules removed — now handled by assets/css/sidebar.css */

.subtitle{
color:#6b7280;
margin-bottom:30px;
font-size:18px;
}

.hero-card{
position:relative;
overflow:hidden;
background:linear-gradient(
135deg,
#0d6efd,
#3b82f6,
#60a5fa
);
border-radius:25px;
padding:40px;
min-height:260px;
margin-bottom:30px;
display:flex;
align-items:center;
color:white;
box-shadow:0 10px 25px rgba(13,110,253,.25);
}

.hero-card::before{
content:'';
position:absolute;
top:-120px;
right:-120px;
width:350px;
height:350px;
border-radius:50%;
background:rgba(255,255,255,.1);
}

.hero-card::after{
content:'';
position:absolute;
bottom:-120px;
left:-120px;
width:300px;
height:300px;
border-radius:50%;
background:rgba(255,255,255,.08);
}

.hero-overlay{
position:relative;
z-index:2;
max-width:620px;
}

.badge{
display:inline-block;
padding:8px 14px;
font-size:13px;
background:rgba(255,255,255,.15);
border-radius:25px;
margin-bottom:15px;
}

.hero-overlay h1{
font-size:38px;
line-height:1.15;
margin-bottom:15px;
font-weight:700;
}

.hero-overlay p{
font-size:16px;
margin-bottom:20px;
max-width:650px;
}

.hero-buttons{
display:flex;
gap:15px;
margin-top:20px;
align-items:center;
}
.hero-stats{
display:flex;
gap:25px;
margin-top:20px;
flex-wrap:wrap;
}

.hero-stats h3{
font-size:20px;
margin-bottom:3px;
font-weight:700;
}

.hero-stats span{
font-size:13px;
opacity:.9;
}
.btn-primary{
background:white;
color:#0d6efd;
padding:15px 30px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
}

.btn-secondary{
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.25);
color:white;
padding:15px 30px;
border-radius:12px;
text-decoration:none;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:white;
padding:25px;
border-radius:20px;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.icon{
font-size:40px;
margin-bottom:15px;
}

.card h3{
color:#0d6efd;
margin-bottom:10px;
}

.card p{
color:#555;
}

.dark-mode{
background:#071426;
color:#e2e8f0;
}

.dark-mode .card{
background:#10243a;
}

.dark-mode .card p{
color:#cbd5e1;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4{
color:#f1f5f9;
}

.dark-mode p{
color:#cbd5e1;
}

.dark-mode .subtitle{
color:#94a3b8;
}

.dark-mode a{
color:#60a5fa;
}

.dark-mode label{
color:#cbd5e1;
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select{
background:#10243a;
border-color:#243b55;
color:#f1f5f9;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder{
color:#64748b;
}

.dark-mode input:focus,
.dark-mode textarea:focus{
border-color:#1d9bf0;
}

/* Old mobile-header/overlay/mobile-sidebar rules removed — now handled by assets/css/sidebar.css */

@media (max-width:900px){

.hero-card{
padding:22px;
min-height:auto;
border-radius:18px;
}

.hero-overlay{
max-width:100%;
}

.badge{
font-size:11px;
padding:6px 12px;
margin-bottom:12px;
}

.hero-overlay h1{
font-size:30px;
line-height:1.15;
margin-bottom:12px;
}

.hero-overlay p{
font-size:15px;
line-height:1.5;
margin-bottom:18px;
max-width:100%;
}

.hero-buttons{
display:flex;
gap:10px;
flex-wrap:nowrap;
}

.btn-primary,
.btn-secondary{
flex:1;
padding:12px;
text-align:center;
font-size:14px;
}

.hero-stats{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:18px;
text-align:center;
}

.hero-stats h3{
font-size:18px;
}

.hero-stats span{
font-size:11px;
}

.cards{
grid-template-columns:1fr;
}

}

/* DARK MODE MOBILE */

.dark-mode .mobile-header{
background:#0d1b2a;
color:white;
}

.dark-mode .mobile-header button{
color:white;
}
.check-list{
    list-style:none;
    padding:0;
    margin:0;
}
.check-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font-size:16px;
    color:#1f2937;
}
.check-list li i{
    color:#16a34a;
    font-size:18px;
    flex-shrink:0;
}
/* ===========================
   PROOF OF PAYMENT UPLOAD
=========================== */
.proof-upload{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    border:2px dashed #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
    padding:28px 20px;
    cursor:pointer;
    text-align:center;
    transition:.2s;
    margin-bottom:20px;
}
.proof-upload:hover{
    border-color:#1d9bf0;
    background:#eef6fd;
}
.proof-upload input[type="file"]{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
}
.proof-upload i{
    font-size:28px;
    color:#1d9bf0;
}
.proof-text{
    font-size:15px;
    font-weight:700;
    color:#1d9bf0;
    word-break:break-all;
}
.proof-hint{
    font-size:12px;
    color:#94a3b8;
}
.proof-upload.has-file{
    border-color:#16a34a;
    background:#f0fdf4;
}
.proof-upload.has-file i,
.proof-upload.has-file .proof-text{
    color:#16a34a;
}

body.dark-mode .proof-upload{
    background:#0f1729;
    border-color:#334155;
}
body.dark-mode .proof-upload:hover{
    border-color:#1d9bf0;
    background:#16213a;
}
body.dark-mode .proof-upload.has-file{
    background:#052e16;
    border-color:#16a34a;
}