:root{

    --bg:#f8f7ff;
    --card:#ffffff;

    --text:#243049;
    --text-muted:#708090;

    --primary:#7c9cf5;
    --primary-hover:#6686e8;

    --success:#6bcf97;
    --danger:#ff8b8b;

    --border:#e4e9f2;

    --radius:16px;

    --shadow:
        0 10px 25px rgba(0,0,0,0.08);

}

[data-theme="dark"]{

    --bg:#101827;
    --card:#1a2437;

    --text:#f0f4ff;
    --text-muted:#a3aec7;

    --border:#2c3952;

}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{

    font-family:
        system-ui,
        sans-serif;

    background:var(--bg);
    color:var(--text);

    min-height:100vh;
}

.hero{

    background:
        linear-gradient(
            135deg,
            #7c9cf5,
            #8ec5fc
        );

    color:white;

    padding:60px 20px;

    text-align:center;
}

.hero h1{

    font-size:3rem;
    margin-top:12px;

}

.hero-badge{

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

    padding:8px 18px;

    border-radius:999px;

    font-weight:700;
}

main{

    max-width:900px;
    margin:auto;

    padding:20px;
}

.subject-card,
.q-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

    margin-bottom:20px;
}

.subject-card h2{
    margin-bottom:15px;
}

select{

    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid var(--border);
}

.btn-primary,
.btn-success{

    border:none;

    cursor:pointer;

    border-radius:10px;

    color:white;

    font-weight:700;

    padding:12px 24px;
}

.btn-primary{

    margin-top:15px;

    background:var(--primary);
}

.btn-primary:hover{
    background:var(--primary-hover);
}

.btn-success{

    background:var(--success);
}

.q-header{

    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
}

.q-number{

    background:#eef2ff;
    color:var(--primary);

    padding:5px 12px;

    border-radius:8px;

    font-weight:700;
}

.q-type{

    color:var(--text-muted);
    font-size:.85rem;
}

.q-title{

    font-size:1.1rem;

    margin-bottom:20px;

    font-weight:600;
}

.options{

    display:flex;
    flex-direction:column;
    gap:10px;
}

.option{

    display:flex;
    gap:12px;

    padding:14px;

    border:1px solid var(--border);

    border-radius:12px;

    cursor:pointer;

    transition:.2s;
}

.option:hover{

    background:#eef2ff;
    border-color:var(--primary);
}

.tracker{

    position:sticky;

    top:0;

    z-index:100;

    background:var(--card);

    display:flex;

    gap:15px;

    align-items:center;

    padding:12px 16px;

    border-bottom:1px solid var(--border);
}

.progress{

    flex:1;

    height:10px;

    border-radius:999px;

    background:#e2e8f0;

    overflow:hidden;
}

.progress-fill{

    width:0;

    height:100%;

    background:
        linear-gradient(
            90deg,
            #7c9cf5,
            #6bcf97
        );
}

.bottom-bar{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    padding:15px;

    background:var(--card);

    border-top:1px solid var(--border);

    text-align:right;
}

.theme-toggle{

    position:fixed;

    top:15px;
    right:15px;

    z-index:999;

    width:45px;
    height:45px;

    border:none;

    border-radius:999px;

    cursor:pointer;
}

@media(max-width:768px){

    .hero h1{
        font-size:2rem;
    }

}