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

body{

background:#eef3f8;

min-height:100vh;

}

.login-container{
    width:100%;
    display:flex;
    justify-content:center;
    padding:20px;
}

.login-card{

    width:430px;

    background:white;

    border-radius:18px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    text-align:center;

}

h3{

    color:#003366;

    font-weight:600;

}

h1{

    margin-top:8px;

    color:#003366;

}

.subtitle{

    margin:15px 0 30px;

    color:#666;

    line-height:1.5;

}

input{

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:15px;

}

input:focus{

    outline:none;

    border-color:#003366;

}

button{

    width:100%;

    padding:15px;

    background:#D4AF37;

    color:white;

    border:none;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    transform:translateY(-2px);

    background:#bf9824;

}

.divider{

    margin:30px 0;

    height:1px;

    background:#ddd;

}

.help-text{

    color:#666;

    line-height:1.6;

}

.email-link{

    display:inline-block;

    margin-top:15px;

    color:#003366;

    text-decoration:none;

    font-weight:600;

}

.email-link:hover{

    text-decoration:underline;

}

.logo{

    width:120px;

    height:120px;

    object-fit:contain;

    margin-bottom:20px;

}

.dashboard-header{

background:#003366;
color:white;

padding:25px;
text-align:center;

}


.dashboard{

max-width:700px;

margin:40px auto;

padding:20px;

}


.welcome-card,
.progress-card{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.12);

}


.progress-bar{

height:25px;

background:#ddd;

border-radius:20px;

overflow:hidden;

}


.progress-bar div{

height:100%;

width:0%;

background:#D4AF37;

}


.dashboard button{

background:#003366;

color:white;

}
/* Missions Page */

.missions-container{

width:100%;
max-width:900px;

margin:40px auto;

padding:20px;

}


.missions-title{

text-align:center;

color:#003366;

margin-bottom:30px;

}


.category-title{

color:#003366;

margin:35px 0 15px;

font-size:24px;

}


.mission-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}



.mission-card{

background:white;

border-radius:20px;

padding:25px;

box-shadow:
0 10px 25px rgba(0,0,0,.12);

transition:.25s;

position:relative;

}



.mission-card:hover{

transform:translateY(-5px);

}



.mission-icon{

font-size:50px;

margin-bottom:15px;

}



.mission-card h3{

color:#003366;

margin-bottom:10px;

}



.mission-card p{

color:#666;

line-height:1.5;

}



.mission-card button{

margin-top:20px;

background:#003366;

color:white;

border:none;

padding:12px;

border-radius:12px;

width:100%;

cursor:pointer;

}



.mission-card button:hover{

background:#D4AF37;

}
.completed{

color:#D4AF37;

font-weight:700;

font-size:18px;

}

.progress-card{

background:white;

padding:25px;

margin-bottom:25px;

border-radius:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.12);

}


.progress-card h2{

color:#003366;

margin-bottom:15px;

}


#missionProgressBar{

height:100%;

width:0%;

background:#D4AF37;

transition:.5s;

}
.mission-status{

display:flex;

align-items:center;

gap:10px;

margin-top:20px;

}


.mission-status input{

width:20px;

height:20px;

}


.mission-status label{

color:#003366;

}


.mission-complete{

margin-top:20px;

font-weight:bold;

color:#D4AF37;

}
.site-footer{

    margin-top:40px;

    padding:25px;

    text-align:center;

    background:#003366;

    color:white;

}


.site-footer h3{

    color:white;

    margin-bottom:8px;

}


.site-footer p{

    opacity:.8;

}
.back-button{

    width:auto;

    padding:12px 25px;

    background:#003366;

    color:white;

    border:none;

    border-radius:12px;

    cursor:pointer;

    margin-bottom:25px;

    font-size:15px;

}


.back-button:hover{

    background:#002244;

}
/* DARK MODE */

body.dark-mode{

    background:#121212;

    color:white;

}


body.dark-mode .dashboard-header{

    background:#000;

}


body.dark-mode .welcome-card,
body.dark-mode .progress-card,
body.dark-mode .mission-card,
body.dark-mode .search-container{

    background:#1e1e1e;

    color:white;

}


body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3{

    color:white;

}


body.dark-mode p{

    color:#ddd;

}


body.dark-mode input{

    background:#2a2a2a;

    color:white;

    border-color:#555;

}



body.dark-mode .progress-bar{

    background:#444;

}



.dark-button{

    position:absolute;

    top:20px;

    right:20px;

    width:auto;

    padding:10px 18px;

    background:#003366;

    color:white;

    border-radius:12px;

}



.dark-button:hover{

    background:#001f3f;

}
/* MISSION MODAL */


.modal{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.6);

    justify-content:center;

    align-items:center;

    z-index:1000;

}



.modal-content{

    background:white;

    width:90%;

    max-width:600px;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.3);

}



.modal-content h2{

    margin-bottom:20px;

}



.modal-content p{

    line-height:1.6;

    margin-bottom:20px;

}



.modal-content button{

    margin-top:10px;

}



body.dark-mode .modal-content{

    background:#1e1e1e;

    color:white;

}
.cpft-image{

    width:90%;

    max-width:450px;

    max-height:300px;

    object-fit:contain;
    .progress-ring{

    display:flex;

    justify-content:center;

    margin:20px;

}


.ring{

    width:130px;

    height:130px;

    border-radius:50%;

    background:
    conic-gradient(
        #003366 0deg,
        #ddd 0deg
    );

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}


.ring::before{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    background:white;

    border-radius:50%;

}



.ring span{

    position:relative;

    font-size:24px;

    font-weight:bold;

    z-index:1;

}



body.dark-mode .ring::before{

    background:#1e1e1e;

}


body.dark-mode .ring{

    background:
    conic-gradient(
        #4da3ff 0deg,
        #444 0deg
    );

}

    display:block;

    margin:15px auto;

    border-radius:12px;

}
.progress-ring{

    display:flex;

    justify-content:center;

    margin:20px;

}


.ring{

    width:130px;

    height:130px;

    border-radius:50%;

    background:
    conic-gradient(
        #003366 0deg,
        #ddd 0deg
    );

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}


.ring::before{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    background:white;

    border-radius:50%;

}



.ring span{

    position:relative;

    font-size:24px;

    font-weight:bold;

    z-index:1;

}



body.dark-mode .ring::before{

    background:#1e1e1e;

}


body.dark-mode .ring{

    background:
    conic-gradient(
        #4da3ff 0deg,
        #444 0deg
    );

}
#celebrationModal{

    display:none;

}

/* Version 2.1 - Dark mode requirement readability */

body.dark-mode .mission-card p,
body.dark-mode .mission-status label,
body.dark-mode .modal-content p,
body.dark-mode #modalBody,
body.dark-mode .mission-complete {
    color:white;
}

/* Version 2.1 - Changelog */

.changelog-card{
    background:white;
    padding:25px;
    margin-bottom:20px;
    border-radius:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}

.changelog-card h2{
    color:#003366;
    margin-bottom:15px;
}

.changelog-card h3{
    color:#003366;
    margin-bottom:10px;
}

.changelog-card ul{
    padding-left:22px;
    color:#666;
    line-height:1.8;
}

body.dark-mode .changelog-card{
    background:#1e1e1e;
}

body.dark-mode .changelog-card h2,
body.dark-mode .changelog-card h3,
body.dark-mode .changelog-card li{
    color:white;
}