/* ===================================
   NEXIFY AI DAILY GROWTH ENGINE
=================================== */

.missions-container{
    max-width:1400px;
    margin:auto;
    padding:40px 6%;
}

/* ===================================
   HEADER
=================================== */

.mission-header{
    text-align:center;
    padding:50px;
    margin-bottom:30px;
}

.mission-header h1{
    font-size:3rem;
    font-weight:800;
    margin-bottom:15px;

    background:linear-gradient(
        90deg,
        #8b5cf6,
        #06b6d4
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.mission-header p{
    max-width:700px;
    margin:auto;
    color:var(--muted);
    line-height:1.8;
}

/* ===================================
   CAREER SELECTOR
=================================== */

.career-selector{
    padding:30px;
    margin-bottom:30px;
    text-align:center;
}

.career-selector h3{
    margin-bottom:20px;
}

#careerTrack{
    width:100%;
    max-width:500px;
    padding:15px 20px;

    border:none;
    outline:none;

    border-radius:14px;

    background:
    rgba(255,255,255,.05);

    color:white;

    margin-bottom:20px;

    font-size:1rem;
}

.primary-btn{

    border:none;
    cursor:pointer;

    padding:14px 30px;

    border-radius:14px;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #06b6d4
    );

    color:white;

    transition:.3s;
}

.primary-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 10px 25px
    rgba(124,58,237,.35);
}

.ai-status{

    margin-top:15px;

    color:var(--muted);

    font-size:.95rem;
}

/* ===================================
   ANALYSIS GRID
=================================== */

.analysis-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.analysis-card{

    padding:30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    transition:.35s;
}

.analysis-card:hover{

    transform:
    translateY(-8px);
}

.analysis-card h3{

    color:var(--muted);

    margin-bottom:12px;

    font-size:.95rem;
}

.analysis-card h2{

    font-size:2rem;

    font-weight:700;
}

.analysis-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-100px;
    right:-100px;

    background:
    radial-gradient(
        rgba(124,58,237,.18),
        transparent 70%
    );

    pointer-events:none;
}

/* ===================================
   CAREER OVERVIEW
=================================== */

.career-overview{

    padding:35px;

    text-align:center;

    margin-bottom:30px;
}

.career-overview h3{

    color:var(--muted);

    margin-bottom:12px;
}

.career-overview h2{

    font-size:2rem;

    background:
    linear-gradient(
        90deg,
        #06b6d4,
        #8b5cf6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ===================================
   PROGRESS
=================================== */

.progress-section{

    padding:30px;

    margin-bottom:30px;
}

.progress-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;
}

.progress-top span{

    color:var(--muted);
}

.progress-bar{

    width:100%;

    height:12px;

    background:
    rgba(255,255,255,.08);

    border-radius:30px;

    overflow:hidden;
}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:30px;

    background:
    linear-gradient(
        90deg,
        #7c3aed,
        #06b6d4
    );

    transition:1s ease;
}

/* ===================================
   AI INSIGHT
=================================== */

.ai-insight{

    padding:35px;

    margin-bottom:30px;

    position:relative;

    overflow:hidden;
}

.ai-insight h2{

    margin-bottom:15px;
}

.ai-insight p{

    color:var(--muted);

    line-height:1.8;
}

.ai-insight::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    top:-150px;
    right:-120px;

    background:
    radial-gradient(
        rgba(6,182,212,.15),
        transparent 70%
    );

    pointer-events:none;
}

/* ===================================
   MISSION SECTION
=================================== */

.mission-section{

    margin-bottom:35px;
}

.section-title{

    margin-bottom:20px;
}

.section-title h2{

    font-size:2rem;
}

/* ===================================
   MISSION GRID
=================================== */

.mission-grid{

    display:grid;

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

    gap:22px;
}

/* ===================================
   MISSION CARD
=================================== */

.mission-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    transition:.35s;
}

.mission-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 15px 35px
    rgba(124,58,237,.15);
}

.mission-card h3{

    font-size:1.2rem;

    margin-bottom:12px;
}

.mission-card p{

    color:var(--muted);

    line-height:1.7;

    margin-bottom:18px;
}

.mission-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-120px;
    right:-120px;

    background:
    radial-gradient(
        rgba(124,58,237,.15),
        transparent 70%
    );

    pointer-events:none;
}

/* ===================================
   BADGES
=================================== */

.badge-container{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;
}

.badge{

    padding:8px 14px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

    background:
    rgba(255,255,255,.08);
}

/* Difficulty */

.easy{

    background:
    rgba(34,197,94,.15);

    color:#22c55e;
}

.medium{

    background:
    rgba(234,179,8,.15);

    color:#eab308;
}

.hard{

    background:
    rgba(239,68,68,.15);

    color:#ef4444;
}

/* ===================================
   COMPLETE BUTTON
=================================== */

.complete-btn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #06b6d4
    );

    transition:.3s;
}

.complete-btn:hover{

    transform:
    translateY(-3px);
}

.complete-btn:disabled{

    background:
    rgba(34,197,94,.2);

    color:#22c55e;

    cursor:not-allowed;
}

/* ===================================
   COMPLETED CARD
=================================== */

.mission-card.completed{

    border:1px solid
    rgba(34,197,94,.4);
}

.mission-card.completed::after{

    content:"✓";

    position:absolute;

    top:15px;
    right:18px;

    font-size:1.2rem;

    color:#22c55e;

    font-weight:700;
}

/* ===================================
   FUTURE PROJECTION
=================================== */

.future-preview{

    padding:35px;

    margin-top:35px;

    margin-bottom:35px;

    text-align:center;
}

.future-preview h2{

    margin-bottom:15px;
}

.future-preview p{

    color:var(--muted);

    line-height:1.8;
}

/* ===================================
   XP SUMMARY
=================================== */

.reward-section{

    display:grid;

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

    gap:20px;

    padding:35px;

    margin-bottom:35px;
}

.reward-section div{

    text-align:center;
}

.reward-section h3{

    color:var(--muted);

    margin-bottom:10px;
}

.reward-section h2{

    font-size:2rem;
}

/* ===================================
   COMPLETION SECTION
=================================== */

.completion-section{

    display:none;

    text-align:center;

    padding:45px;
}

.completion-section h2{

    font-size:2rem;

    margin-bottom:15px;
}

.completion-section p{

    color:var(--muted);

    line-height:1.8;
}

/* ===================================
   FLOATING GLOW
=================================== */

.glass{

    position:relative;

    overflow:hidden;
}

.glass::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.04),
        transparent
    );

    pointer-events:none;
}

/* ===================================
   SCROLL ANIMATION
=================================== */

.analysis-card,
.mission-card,
.ai-insight,
.future-preview,
.reward-section{

    animation:
    fadeUp .6s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(20px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}

select{
    width:100%;
    padding:18px 20px;
    background:#2b3245;
    color:#ffffff;
    border:none;
    border-radius:14px;
    font-size:16px;
}

select option{
    background:#2b3245;
    color:#ffffff;
}


/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:768px){

    .missions-container{

        padding:25px;
    }

    .mission-header{

        padding:30px 20px;
    }

    .mission-header h1{

        font-size:2.2rem;
    }

    .analysis-card h2{

        font-size:1.5rem;
    }

    .career-overview h2{

        font-size:1.6rem;
    }

    .reward-section h2{

        font-size:1.6rem;
    }

    .section-title h2{

        font-size:1.6rem;
    }

    .progress-top{

        flex-direction:column;

        gap:10px;

        align-items:flex-start;
    }
}