@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;600;700&display=swap');

:root{
--navy:#0a1f3c;
--navy-light:#112d55;
--gold:#c5a358;
--gold-dark:#b4924b;
--white:#ffffff;
--off-white:#f8f9fa;
--gray:#6c757d;
--light-gray:#e9ecef;
--border:#e2e8f0;
--shadow:0 4px 20px rgba(10,31,60,0.08);
--shadow-hover:0 8px 30px rgba(10,31,60,0.15);
--radius:8px;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
font-family:'Lato',sans-serif;
background:var(--off-white);
min-height:100vh;
display:flex;
flex-direction:column;
padding:0;
color:#333;
}

/* LOGIN */
.login-wrapper{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
padding:20px;
}
.login-box{
background:var(--white);
width:420px;
max-width:95%;
border-radius:12px;
padding:40px 35px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.login-box .logo{width:80px;margin-bottom:15px;}
.login-box h2{color:var(--navy);font-family:'Playfair Display',serif;font-size:22px;margin-bottom:5px;}
.login-box p{color:var(--gray);font-size:13px;margin-bottom:20px;}
.login-box input{
width:100%;padding:12px 15px;margin:6px 0;
border:1px solid var(--border);border-radius:var(--radius);
font-size:14px;font-family:'Lato',sans-serif;
transition:border 0.2s;
}
.login-box input:focus{outline:none;border-color:var(--gold);}
.login-box select{
width:100%;padding:12px 15px;margin:6px 0;
border:1px solid var(--border);border-radius:var(--radius);
font-size:14px;font-family:'Lato',sans-serif;
background:var(--white);
}

/* BUTTONS */
.btn{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 22px;font-size:13px;font-weight:700;
letter-spacing:0.5px;text-transform:uppercase;
border:none;border-radius:var(--radius);
cursor:pointer;transition:all 0.2s;
font-family:'Lato',sans-serif;
}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(197,163,88,0.3);}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{background:var(--navy-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,31,60,0.2);}
.btn-outline{background:transparent;border:2px solid var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:var(--white);}
.btn-danger{background:#dc3545;color:var(--white);}
.btn-danger:hover{background:#c82333;}
.btn-sm{padding:7px 14px;font-size:11px;}

/* PANEL (main dashboard) */
.panel{
background:var(--white);
width:95%;max-width:1200px;
margin:20px auto;
border-radius:12px;
box-shadow:var(--shadow);
overflow:hidden;
}

/* HEADER BAR */
.header-bar{
background:#4E4099;
padding:15px 25px;
display:flex;align-items:center;justify-content:space-between;
}
.header-bar .brand{display:flex;align-items:center;gap:12px;}
.header-bar .brand img{width:45px;}
.header-bar .brand h2{color:var(--white);font-family:'Playfair Display',serif;font-size:18px;margin:0;}
.header-bar .actions{display:flex;gap:8px;}

/* PROFILE SECTION */
.profile-section{
display:flex;align-items:center;gap:20px;
padding:25px 30px;
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
color:var(--white);
}
.profile-photo{
width:100px;height:100px;
border-radius:50%;
border:3px solid var(--gold);
object-fit:cover;
background-size:cover;background-position:center;
flex-shrink:0;
}
.profile-info h3{font-family:'Playfair Display',serif;font-size:22px;margin:0 0 5px;}
.profile-info p{font-size:13px;opacity:0.85;margin:2px 0;}

/* CARDS GRID */
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
padding:25px 30px;
}
.menu-card{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
padding:25px 20px;
text-align:center;
cursor:pointer;
transition:all 0.25s;
}
.menu-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
border-color:var(--gold);
}
.menu-card .icon{font-size:32px;margin-bottom:10px;}
.menu-card h4{color:var(--navy);font-size:15px;margin:0 0 5px;}
.menu-card p{color:var(--gray);font-size:12px;margin:0;}

/* FOOTER BAR */
.footer-bar{
padding:15px 30px;
display:flex;align-items:center;justify-content:center;gap:10px;
border-top:1px solid var(--border);
}
.footer-text{color:var(--gray);font-size:11px;}

/* MODAL */
.modal-overlay{
display:none;position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(10,31,60,0.6);z-index:1000;
justify-content:center;align-items:center;
backdrop-filter:blur(3px);
}
.modal-overlay.active{display:flex;}
.modal-box{
background:var(--white);
border-radius:12px;
padding:30px;
width:650px;max-width:95%;max-height:85vh;overflow-y:auto;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.modal-box h3{
font-family:'Playfair Display',serif;
color:var(--navy);
font-size:20px;
margin-bottom:15px;
padding-bottom:10px;
border-bottom:2px solid var(--gold);
}
.modal-close{
background:var(--navy);color:var(--white);
border:none;padding:6px 14px;border-radius:var(--radius);
cursor:pointer;font-size:11px;font-weight:700;
}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{background:var(--navy);color:var(--white);padding:10px 8px;text-align:center;font-size:12px;font-weight:700;}
td{padding:8px;border:1px solid var(--border);text-align:center;}
tr:nth-child(even){background:var(--off-white);}
.badge{background:var(--gold);color:var(--navy);padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;}

/* TRACKER */
.tracker{display:flex;justify-content:space-between;margin:15px 0;padding:12px 0;border-bottom:2px solid var(--light-gray);}
.tracker-step{font-size:10px;color:#bbb;font-weight:700;text-align:center;flex:1;padding:8px 3px;border-radius:6px;text-transform:uppercase;letter-spacing:0.3px;}
.tracker-step.completed{color:#28a745;}
.tracker-step.active{color:var(--navy);background:rgba(10,31,60,0.06);border-bottom:2px solid var(--navy);}

/* PROFILE CARD (inside modal) */
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:15px 0;}
.reg-card{background:var(--off-white);padding:15px;border-radius:var(--radius);border:1px solid var(--border);}
.reg-card h4{color:var(--navy);font-size:13px;margin-bottom:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.reg-card p{font-size:13px;margin:3px 0;}

/* FEEDBACK */
.feedback-box{background:#fff3cd;padding:12px 15px;border-radius:var(--radius);border-left:4px solid var(--gold);margin:10px 0;font-size:13px;}

/* RESULT MODAL TABLE */
.result-table{width:100%;border-collapse:collapse;}
.result-table th{background:var(--navy);color:var(--white);padding:10px;font-size:13px;}
.result-table td{padding:8px 10px;border:1px solid var(--border);font-size:13px;}
.result-table tr:last-child{background:var(--off-white);font-weight:700;}

/* PHOTO BOX */
.photo-circle{
width:120px;height:120px;
border-radius:50%;
border:3px solid var(--gold);
object-fit:cover;
background-size:cover;background-position:center;
background-color:var(--navy);
margin:auto;display:block;
}

/* FOOTER */
.footer{
margin-top:auto;
padding:20px;
text-align:center;
color:var(--gray);
font-size:12px;
}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--off-white);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* RESPONSIVE */
@media(max-width:768px){
.header-bar{flex-direction:column;gap:10px;text-align:center;}
.profile-section{flex-direction:column;text-align:center;}
.cards-grid{grid-template-columns:1fr 1fr;}
.reg-grid{grid-template-columns:1fr;}
.modal-box{width:95%;padding:20px;}
}