/*==================================================
            PREMIUM ONLINE TEST PORTAL CSS
                PART 1A
        Variables • Reset • Layout • Header
==================================================*/

/*==============================
        GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
        ROOT VARIABLES
==============================*/
:root{

    /* Colors */
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#38bdf8;
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --bg:#07111f;
    --bg2:#0f172a;
    --surface:rgba(255,255,255,.08);
    --surface-hover:rgba(255,255,255,.12);

    --white:#ffffff;
    --text:#e2e8f0;
    --muted:#94a3b8;

    --border:rgba(255,255,255,.12);

    /* Radius */

    --radius-sm:10px;
    --radius:18px;
    --radius-lg:25px;

    /* Shadows */

    --shadow-sm:0 8px 20px rgba(0,0,0,.15);
    --shadow-md:0 15px 35px rgba(0,0,0,.28);
    --shadow-lg:0 25px 55px rgba(0,0,0,.35);

    /* Blur */

    --blur:18px;

    /* Transition */

    --transition:.35s ease;

}

/*==============================
            RESET
==============================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:
    radial-gradient(circle at top left,#2563eb22 0%,transparent 35%),
    radial-gradient(circle at bottom right,#0ea5e922 0%,transparent 40%),
    linear-gradient(135deg,#07111f,#0f172a);

    color:var(--white);

    min-height:100vh;

    overflow-x:hidden;

}

/*==============================
        SELECTION
==============================*/

::selection{

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

}

/*==============================
        SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#081321;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    to bottom,
    var(--primary),
    var(--secondary));

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/*==============================
        TYPOGRAPHY
==============================*/

h1,h2,h3,h4,h5{

    color:#fff;

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:2.3rem;

}

h2{

    font-size:1.9rem;

}

h3{

    font-size:1.5rem;

}

p{

    color:var(--muted);

    line-height:1.8;

}

a{

    text-decoration:none;

    color:var(--secondary);

    transition:var(--transition);

}

a:hover{

    color:#fff;

}

/*==============================
        IMAGES
==============================*/

img{

    max-width:100%;

    display:block;

}

/*==============================
        CONTAINER
==============================*/

.container,
.test-container,
.result-container{

    width:94%;

    max-width:1300px;

    margin:auto;

    padding:35px 0;

}

/*==============================
        GLASS CARD
==============================*/

.card,
.glass-card{

    position:relative;

    background:var(--surface);

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

    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));

    border-radius:var(--radius-lg);

    padding:30px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.card:hover,
.glass-card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:0 30px 60px rgba(37,99,235,.22);

}

/* Shine Effect */

.card::before,
.glass-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:50%;

    height:100%;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent);

    transform:skewX(-25deg);

}

.card:hover::before,
.glass-card:hover::before{

    animation:shine 1.2s linear;

}

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

header,
.test-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    padding:24px 35px;

    margin-bottom:30px;

    border-radius:var(--radius-lg);

    background:rgba(10,18,35,.88);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-md);

}

header h1{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:2rem;

}

header h1 span{

    color:var(--secondary);

}

/*==============================
        USER INFO
==============================*/

.user-info{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.user-info span{

    color:var(--text);

    font-weight:500;

}

/*==============================
        NAVIGATION
==============================*/

.navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}

/*==============================
        DIVIDER
==============================*/

hr{

    border:none;

    height:1px;

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

    margin:30px 0;

}

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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:40px;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.5px;

    color:#fff;

    background:var(--success);

}

.badge.warning{

    background:var(--warning);

}

.badge.danger{

    background:var(--danger);

}

/*==============================
        UTILITIES
==============================*/

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes shine{

    0%{

        left:-100%;

    }

    100%{

        left:160%;

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.float{

    animation:float 4s ease-in-out infinite;

}

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

@media (max-width:992px){

    header,
    .test-header{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:768px){

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.5rem;

    }

    .container,
    .test-container,
    .result-container{

        width:95%;

        padding:20px 0;

    }

    .card,
    .glass-card{

        padding:22px;

    }

    .navigation{

        flex-direction:column;

        width:100%;

    }

}

@media (max-width:480px){

    header{

        padding:18px;

    }

    header h1{

        font-size:1.5rem;

    }

    .user-info{

        justify-content:center;

        font-size:.9rem;

    }

}
/*=========================================
        FORMS & INPUTS
=========================================*/

form{
    display:flex;
    flex-direction:column;
    gap:22px;
    width:100%;
    animation:fadeUp .6s ease;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
}

.form-group label{
    color:var(--text);
    font-size:.95rem;
    font-weight:600;
    margin-left:3px;
    transition:.3s;
}

/*=========================================
        INPUTS
=========================================*/

input,
select,
textarea{

    width:100%;

    padding:15px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.12);

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    outline:none;

    transition:all .35s ease;

}

textarea{

    resize:vertical;

    min-height:130px;

}

select{

    cursor:pointer;

}

option{

    background:#0f172a;

    color:#fff;

}

/*=========================================
        PLACEHOLDER
=========================================*/

input::placeholder,
textarea::placeholder{

    color:#94a3b8;

    transition:.3s;

}

input:focus::placeholder,
textarea:focus::placeholder{

    opacity:.6;

    transform:translateX(6px);

}

/*=========================================
        FOCUS EFFECT
=========================================*/

input:focus,
textarea:focus,
select:focus{

    border-color:var(--secondary);

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

    box-shadow:
    0 0 0 4px rgba(56,189,248,.15),
    0 12px 25px rgba(37,99,235,.15);

}

/*=========================================
        HOVER
=========================================*/

input:hover,
textarea:hover,
select:hover{

    border-color:rgba(56,189,248,.45);

}

/*=========================================
        DISABLED
=========================================*/

input:disabled,
textarea:disabled,
select:disabled{

    cursor:not-allowed;

    opacity:.65;

}

/*=========================================
        VALIDATION
=========================================*/

input:valid{

    border-color:rgba(34,197,94,.45);

}

input:invalid:focus{

    border-color:rgba(239,68,68,.6);

}

/*=========================================
        CHECKBOX
=========================================*/

input[type="checkbox"]{

    width:18px;

    height:18px;

    accent-color:var(--primary);

    cursor:pointer;

}

/*=========================================
        RADIO
=========================================*/

input[type="radio"]{

    width:20px;

    height:20px;

    accent-color:var(--primary);

    cursor:pointer;

}

/*=========================================
        FILE INPUT
=========================================*/

input[type=file]{

    padding:10px;

    cursor:pointer;

}

input[type=file]::file-selector-button{

    border:none;

    background:var(--primary);

    color:#fff;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

input[type=file]::file-selector-button:hover{

    background:var(--primary-dark);

}

/*=========================================
        SEARCH INPUT
=========================================*/

.search-box{

    position:relative;

    width:100%;

}

.search-box input{

    padding-left:48px;

}

.search-box i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

/*=========================================
        INPUT ICON
=========================================*/

.input-icon{

    position:relative;

}

.input-icon input{

    padding-left:48px;

}

.input-icon span{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--secondary);

    font-size:18px;

}

/*=========================================
        PASSWORD TOGGLE
=========================================*/

.password-group{

    position:relative;

}

.password-group button{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#94a3b8;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.password-group button:hover{

    color:#fff;

}

/*=========================================
        INPUT ANIMATION
=========================================*/

.form-group input,
.form-group textarea,
.form-group select{

    animation:fadeUp .4s ease;

}

/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    input,
    textarea,
    select{

        padding:14px 15px;

        font-size:14px;

    }

    .form-group label{

        font-size:.9rem;

    }

}
/*=========================================
        PREMIUM BUTTONS
=========================================*/

.btn{

    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:15px 28px;

    border:none;
    outline:none;

    border-radius:14px;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:600;

    cursor:pointer;

    overflow:hidden;

    transition:all .35s ease;

    user-select:none;

    text-decoration:none;

}

.btn:active{

    transform:scale(.96);

}

.btn i{

    font-size:18px;

}

/*=========================================
        PRIMARY
=========================================*/

.primary{

    color:#fff;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 12px 30px rgba(37,99,235,.30);

}

.primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 40px rgba(37,99,235,.45);

}

/*=========================================
        SECONDARY
=========================================*/

.secondary{

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

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    backdrop-filter:blur(14px);

}

.secondary:hover{

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

    transform:translateY(-4px);

}

/*=========================================
        SUCCESS
=========================================*/

.success{

    background:linear-gradient(
    135deg,
    #16a34a,
    #22c55e);

    color:#fff;

}

.success:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 35px rgba(34,197,94,.35);

}

/*=========================================
        DANGER
=========================================*/

.danger{

    background:linear-gradient(
    135deg,
    #dc2626,
    #ef4444);

    color:#fff;

}

.danger:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 35px rgba(239,68,68,.35);

}

/*=========================================
        WARNING
=========================================*/

.warning{

    background:linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24);

    color:#fff;

}

.warning:hover{

    transform:translateY(-4px);

}

/*=========================================
        OUTLINE BUTTON
=========================================*/

.outline{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--secondary);

}

.outline:hover{

    background:var(--primary);

    color:#fff;

}

/*=========================================
        BUTTON SIZES
=========================================*/

.large{

    width:100%;

}

.small{

    padding:10px 18px;

    font-size:14px;

}

.round{

    border-radius:50px;

}

/*=========================================
        RIPPLE EFFECT
=========================================*/

.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn:hover::before{

    width:320px;

    height:320px;

}

/*=========================================
        LOGIN CARD
=========================================*/

.auth-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.auth-card{

    width:100%;

    max-width:450px;

    padding:40px;

    border-radius:25px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    animation:fadeUp .7s ease;

}

.auth-card h2{

    text-align:center;

    margin-bottom:12px;

}

.auth-card p{

    text-align:center;

    margin-bottom:28px;

}

/*=========================================
        MODAL
=========================================*/

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    z-index:9999;

    animation:fadeUp .3s ease;

}

.modal.show{

    display:flex;

}

.modal-content{

    width:92%;

    max-width:500px;

    padding:35px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    position:relative;

    animation:popup .35s ease;

}

/*=========================================
        CLOSE BUTTON
=========================================*/

.close{

    position:absolute;

    right:18px;

    top:18px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.close:hover{

    background:var(--danger);

    transform:rotate(90deg);

}

/*=========================================
        GLASS PANEL
=========================================*/

.glass{

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    box-shadow:0 20px 45px rgba(0,0,0,.28);

}

/*=========================================
        HOVER CARD
=========================================*/

.hover-card{

    transition:.35s;

}

.hover-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(37,99,235,.20);

}

/*=========================================
        POPUP
=========================================*/

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*=========================================
        MOBILE
=========================================*/

@media(max-width:768px){

    .btn{

        width:100%;

    }

    .auth-card{

        padding:28px;

    }

    .modal-content{

        padding:25px;

    }

}

/*====================================================
            PART 1C-1
        DASHBOARD + TEST CARDS + STATS
====================================================*/

/*==============================
        MAIN
==============================*/

main{
    width:100%;
    animation:fadeUp .7s ease;
}

/*==============================
        WELCOME CARD
==============================*/

.welcome-card{

    position:relative;
    overflow:hidden;

    padding:40px;

    border-radius:28px;

    background:
    linear-gradient(135deg,
    #2563eb,
    #38bdf8);

    color:#fff;

    margin-bottom:35px;

    box-shadow:
    0 25px 55px rgba(37,99,235,.35);

}

.welcome-card::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    right:-90px;
    top:-90px;

    border-radius:50%;

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

}

.welcome-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-50px;
    bottom:-60px;

    border-radius:50%;

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

}

.welcome-card h2{

    position:relative;
    z-index:2;

    font-size:2rem;

    margin-bottom:10px;

}

.welcome-card p{

    position:relative;
    z-index:2;

    color:#fff;

    opacity:.92;

    line-height:1.8;

    max-width:700px;

}

/*==============================
        DASHBOARD TITLE
==============================*/

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:35px 0 25px;

}

.section-title h2{

    font-size:2rem;

}

.section-title p{

    color:var(--muted);

}

/*==============================
        STATS GRID
==============================*/

.stats-grid{

    display:grid;

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

    gap:22px;

    margin:35px 0;

}

/*==============================
        STAT CARD
==============================*/

.stat-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    transition:.35s;

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

}

.stat-card:hover{

    transform:
    translateY(-8px);

    border-color:#38bdf8;

    box-shadow:
    0 25px 45px rgba(37,99,235,.22);

}

.stat-card::before{

    content:"";

    position:absolute;

    width:120px;
    height:120px;

    top:-40px;
    right:-30px;

    border-radius:50%;

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

}

.stat-card h2{

    font-size:2.4rem;

    color:var(--secondary);

    margin-bottom:10px;

}

.stat-card h3{

    font-size:1rem;

    color:#fff;

    margin-bottom:8px;

}

.stat-card p{

    font-size:.9rem;

    color:var(--muted);

}

/*==============================
        TEST GRID
==============================*/

.tests-grid{

    display:grid;

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

    gap:25px;

    margin-top:25px;

}

/*==============================
        TEST CARD
==============================*/

.test-card{

    position:relative;

    overflow:hidden;

    padding:30px;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    transition:.35s;

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

}

.test-card:hover{

    transform:
    translateY(-10px);

    border-color:#3b82f6;

    box-shadow:
    0 30px 60px rgba(37,99,235,.25);

}

/*==============================
        SHINE
==============================*/

.test-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent);

    transform:skewX(-25deg);

}

.test-card:hover::before{

    animation:shine 1s linear;

}

/*==============================
        TEST TITLE
==============================*/

.test-card h3{

    font-size:1.4rem;

    margin-bottom:15px;

}

.test-card p{

    margin-bottom:10px;

    color:var(--muted);

}

/*==============================
        TEST INFO
==============================*/

.test-info{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:20px 0;

}

.test-info span{

    padding:8px 14px;

    border-radius:40px;

    background:rgba(37,99,235,.15);

    color:#cfe7ff;

    font-size:.82rem;

}

/*==============================
        CARD FOOTER
==============================*/

.test-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

    gap:15px;

}

.test-footer .btn{

    min-width:150px;

}

/*==============================
        BADGE
==============================*/

.live{

    background:#22c55e;

    color:#fff;

    padding:8px 15px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

}

.upcoming{

    background:#f59e0b;

    color:#fff;

    padding:8px 15px;

    border-radius:30px;

    font-size:.8rem;

}

.closed{

    background:#ef4444;

    color:#fff;

    padding:8px 15px;

    border-radius:30px;

    font-size:.8rem;

}

/*==============================
        MOBILE
==============================*/

@media(max-width:992px){

    .tests-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .welcome-card{

        padding:28px;

    }

    .welcome-card h2{

        font-size:1.6rem;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .test-footer{

        flex-direction:column;

    }

    .test-footer .btn{

        width:100%;

    }

}

@media(max-width:480px){

    .welcome-card{

        padding:22px;

    }

    .test-card{

        padding:22px;

    }

    .stat-card{

        padding:22px;

    }

}


/*==================================================
            PART 1C-2A
        PROGRESS • TABLE • EMPTY STATE
==================================================*/

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

.progress-section{

    margin-top:40px;

    display:grid;

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

    gap:25px;

}

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

.progress-card{

    position:relative;

    overflow:hidden;

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:24px;

    padding:28px;

    backdrop-filter:blur(18px);

    transition:.35s;

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

}

.progress-card:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

    box-shadow:0 25px 55px rgba(37,99,235,.25);

}

.progress-card h3{

    margin-bottom:18px;

    font-size:1.3rem;

    color:#fff;

}

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

.progress{

    width:100%;

    height:12px;

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

    border-radius:50px;

    overflow:hidden;

    margin:15px 0;

}

.progress span{

    display:block;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    animation:progressLoad 1.5s ease;

}

/*==============================
        STATS ROW
==============================*/

.progress-info{

    display:flex;

    justify-content:space-between;

    margin-top:12px;

    color:var(--muted);

    font-size:.9rem;

}

/*==============================
        ACTIVITY CARD
==============================*/

.activity-card{

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:22px;

    padding:25px;

}

.activity-card ul{

    list-style:none;

}

.activity-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.activity-card li:last-child{

    border:none;

}

.activity-card span{

    color:var(--muted);

}

/*==============================
        TABLE
==============================*/

.table-container{

    margin-top:35px;

    overflow-x:auto;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.08);

}

table{

    width:100%;

    border-collapse:collapse;

    min-width:700px;

}

thead{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

thead th{

    color:#fff;

    padding:18px;

    text-align:left;

    font-weight:600;

}

tbody tr{

    transition:.3s;

}

tbody tr:hover{

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

}

tbody td{

    padding:18px;

    color:var(--text);

    border-bottom:1px solid rgba(255,255,255,.06);

}

/*==============================
        EMPTY STATE
==============================*/

.empty-state{

    text-align:center;

    padding:60px 25px;

}

.empty-state img{

    width:180px;

    margin:auto;

    margin-bottom:25px;

}

.empty-state h3{

    margin-bottom:10px;

}

.empty-state p{

    max-width:500px;

    margin:auto;

}

/*==============================
        LOADER
==============================*/

.loader{

    width:60px;

    height:60px;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid var(--secondary);

    border-radius:50%;

    margin:auto;

    animation:spin 1s linear infinite;

}

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

@keyframes progressLoad{

    from{

        width:0;

    }

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .progress-section{

        grid-template-columns:1fr;

    }

    .activity-card li{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}

/*==================================================
            PART 1C-2B
      FOOTER • TOAST • FAB • UTILITIES
==================================================*/

/*==============================
        FOOTER
==============================*/

footer{

    margin-top:60px;

    padding:30px 20px;

    text-align:center;

    color:var(--muted);

    font-size:.95rem;

    border-top:1px solid rgba(255,255,255,.08);

}

footer a{

    color:var(--secondary);

    font-weight:600;

}

footer a:hover{

    color:#fff;

}

/*==============================
      FLOATING ACTION BUTTON
==============================*/

.fab{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:999;

    box-shadow:0 20px 45px rgba(37,99,235,.35);

    transition:all .35s ease;

}

.fab:hover{

    transform:translateY(-8px) scale(1.08);

}

.fab:active{

    transform:scale(.95);

}

/*==============================
        TOAST
==============================*/

.toast{

    position:fixed;

    right:25px;

    top:25px;

    min-width:300px;

    max-width:380px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(15,23,42,.95);

    color:#fff;

    border-left:5px solid var(--secondary);

    backdrop-filter:blur(16px);

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

    animation:toastIn .45s ease;

    z-index:9999;

}

.toast.success{

    border-left-color:var(--success);

}

.toast.error{

    border-left-color:var(--danger);

}

.toast.warning{

    border-left-color:var(--warning);

}

/*==============================
        ALERT BOX
==============================*/

.alert{

    padding:18px 22px;

    border-radius:18px;

    margin:18px 0;

    color:#fff;

    font-weight:500;

}

.alert.success{

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

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

}

.alert.error{

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

    border:1px solid rgba(239,68,68,.35);

}

.alert.warning{

    background:rgba(245,158,11,.15);

    border:1px solid rgba(245,158,11,.35);

}

/*==============================
        SPACING
==============================*/

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:50px;

}

.mb-4{

    margin-bottom:40px;

}

.mb-5{

    margin-bottom:50px;

}

.py{

    padding:40px 0;

}

.px{

    padding:0 25px;

}

/*==============================
        FLEX
==============================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

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

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

/*==============================
        SHADOWS
==============================*/

.shadow{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

/*==============================
      HOVER LIFT
==============================*/

.hover-lift{

    transition:all .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(100px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade{

    animation:fadeUp .6s ease both;

}

.zoom{

    animation:popup .45s ease;

}

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

@media(max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .fab{

        width:52px;

        height:52px;

        right:18px;

        bottom:18px;

        font-size:20px;

    }

    .toast{

        left:15px;

        right:15px;

        top:15px;

        min-width:auto;

        max-width:none;

    }

    .flex-between{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;

    }

}

@media(max-width:480px){

    footer{

        font-size:.85rem;

    }

}

/*==================================================
                PART 2A-1
        TEST CONTAINER + HEADER + TIMER
==================================================*/

/*==============================
        TEST CONTAINER
==============================*/

.test-container{

    width:95%;

    max-width:1400px;

    margin:auto;

    padding:30px 0 60px;

    animation:fadeUp .6s ease;

}

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

.test-header{

    position:sticky;

    top:15px;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    padding:22px 30px;

    margin-bottom:30px;

    background:rgba(8,18,35,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

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

}

/*==============================
        TEST INFO
==============================*/

.test-info{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.test-info h2{

    font-size:1.8rem;

    color:#fff;

}

.test-info p{

    color:var(--muted);

    font-size:.95rem;

}

/*==============================
        TIMER
==============================*/

.timer{

    min-width:150px;

    text-align:center;

    padding:15px 25px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

    font-size:2rem;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:0 18px 35px rgba(37,99,235,.35);

    transition:all .35s ease;

}

/*==============================
        TIMER WARNING
==============================*/

.timer.warning{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24);

    animation:pulse 1s infinite;

}

.timer.danger{

    background:linear-gradient(
        135deg,
        #dc2626,
        #ef4444);

    animation:pulse .7s infinite;

}

/*==============================
        TEST BODY
==============================*/

.test-body{

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:30px;

    align-items:start;

}

/*==============================
        MAIN PANEL
==============================*/

.test-main{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==============================
        SIDE PANEL
==============================*/

.test-sidebar{

    position:sticky;

    top:120px;

}

/*==============================
        GLASS PANEL
==============================*/

.panel{

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    padding:25px;

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

}

/*==============================
        PANEL TITLE
==============================*/

.panel h3{

    font-size:1.3rem;

    margin-bottom:18px;

    color:#fff;

}

/*==============================
        TEST DETAILS
==============================*/

.test-details{

    display:grid;

    gap:12px;

}

.test-details div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.test-details div:last-child{

    border:none;

}

.test-details span{

    color:var(--muted);

}

.test-details strong{

    color:#fff;

}

/*==============================
        PULSE
==============================*/

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

@media(max-width:992px){

    .test-body{

        grid-template-columns:1fr;

    }

    .test-sidebar{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .test-header{

        flex-direction:column;

        text-align:center;

    }

    .timer{

        width:100%;

        font-size:1.6rem;

    }

    .test-info h2{

        font-size:1.5rem;

    }

}

/*==================================================
                PART 2A-2
      QUESTION CARD • PROGRESS • LAYOUT
==================================================*/

/*==============================
        QUESTION WRAPPER
==============================*/

.question-wrapper{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==============================
        QUESTION CARD
==============================*/

.question-card{

    position:relative;

    overflow:hidden;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:24px;

    padding:35px;

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

    animation:fadeUp .5s ease;

}

/*==============================
        TOP SHINE
==============================*/

.question-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

}

.question-card:hover::before{

    animation:shine 1.2s linear;

}

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

.question-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:30px;

}

.question-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(37,99,235,.18);

    color:#7dd3fc;

    font-weight:700;

    font-size:.95rem;

}

.question-mark{

    padding:10px 18px;

    border-radius:50px;

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

    color:#22c55e;

    font-weight:700;

}

/*==============================
        QUESTION TITLE
==============================*/

.question-title{

    font-size:1.6rem;

    line-height:1.7;

    color:#fff;

    font-weight:600;

    margin-bottom:30px;

}

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

.progress-wrapper{

    margin-bottom:30px;

}

.progress-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.progress-top span{

    color:var(--muted);

    font-size:.9rem;

}

.progress-bar{

    width:100%;

    height:12px;

    border-radius:30px;

    overflow:hidden;

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

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    animation:progressFill 1s ease forwards;

}

/*==============================
        QUESTION INFO
==============================*/

.question-info{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

.question-info span{

    padding:8px 14px;

    border-radius:40px;

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

    color:#cbd5e1;

    font-size:.82rem;

}

/*==============================
        QUESTION IMAGE
==============================*/

.question-image{

    width:100%;

    border-radius:18px;

    overflow:hidden;

    margin-top:20px;

}

.question-image img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:.4s;

}

.question-image img:hover{

    transform:scale(1.03);

}

/*==============================
        QUESTION DIVIDER
==============================*/

.question-divider{

    height:1px;

    margin:30px 0;

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

}

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

@keyframes progressFill{

    from{

        width:0;

    }

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .question-card{

        padding:22px;

    }

    .question-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .question-title{

        font-size:1.25rem;

        line-height:1.6;

    }

    .progress-top{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}

/*==================================================
                PART 2B-1
        PREMIUM MCQ OPTIONS
==================================================*/

/*==============================
        OPTIONS CONTAINER
==============================*/

.options{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:10px;

}

/*==============================
        OPTION CARD
==============================*/

.option{

    position:relative;

    display:flex;
    align-items:center;
    gap:18px;

    width:100%;

    padding:18px 22px;

    border-radius:18px;

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

    border:2px solid rgba(255,255,255,.08);

    cursor:pointer;

    transition:all .35s ease;

    overflow:hidden;

}

.option:hover{

    transform:translateX(8px);

    border-color:var(--secondary);

    background:rgba(37,99,235,.10);

    box-shadow:0 15px 30px rgba(37,99,235,.18);

}

/*==============================
        SHINE EFFECT
==============================*/

.option::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent);

}

.option:hover::before{

    animation:shine 1s linear;

}

/*==============================
        HIDE RADIO
==============================*/

.option input[type="radio"]{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

/*==============================
        CUSTOM RADIO
==============================*/

.radio{

    width:24px;

    height:24px;

    border-radius:50%;

    border:3px solid var(--secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.3s;

}

.radio::after{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--secondary);

    transform:scale(0);

    transition:.3s;

}

/*==============================
        OPTION TEXT
==============================*/

.option-text{

    flex:1;

    color:#fff;

    font-size:1rem;

    line-height:1.7;

    font-weight:500;

}

/*==============================
        OPTION LETTER
==============================*/

.option-letter{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#7dd3fc;

    font-weight:700;

    transition:.35s;

}

/*==============================
        SELECTED OPTION
==============================*/

.option input:checked + .radio{

    border-color:#22c55e;

}

.option input:checked + .radio::after{

    transform:scale(1);

    background:#22c55e;

}

.option:has(input:checked){

    border-color:#22c55e;

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

    box-shadow:0 15px 35px rgba(34,197,94,.18);

}

.option:has(input:checked) .option-letter{

    background:#22c55e;

    color:#fff;

}

/*==============================
        KEYBOARD FOCUS
==============================*/

.option:focus-within{

    outline:3px solid rgba(56,189,248,.4);

    outline-offset:2px;

}

/*==============================
        DISABLED
==============================*/

.option.disabled{

    opacity:.6;

    pointer-events:none;

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .option{

        padding:16px;

        gap:14px;

    }

    .option-text{

        font-size:.95rem;

    }

    .option-letter{

        width:36px;

        height:36px;

        font-size:.9rem;

    }

}

/*==================================================
                PART 2B-2
     ANSWER STATES • NAVIGATION • ACTION BUTTONS
==================================================*/

/*==============================
        CORRECT OPTION
==============================*/

.option.correct{

    border-color:#22c55e;

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

    animation:correctPop .45s ease;

}

.option.correct .option-letter{

    background:#22c55e;

    color:#fff;

}

.option.correct .radio{

    border-color:#22c55e;

}

.option.correct .radio::after{

    transform:scale(1);

    background:#22c55e;

}

/*==============================
        WRONG OPTION
==============================*/

.option.wrong{

    border-color:#ef4444;

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

    animation:shake .45s ease;

}

.option.wrong .option-letter{

    background:#ef4444;

    color:#fff;

}

.option.wrong .radio{

    border-color:#ef4444;

}

.option.wrong .radio::after{

    transform:scale(1);

    background:#ef4444;

}

/*==============================
        ANSWERED OPTION
==============================*/

.option.answered{

    opacity:.9;

    pointer-events:none;

}

/*==============================
        OPTION NUMBER
==============================*/

.option-number{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    font-weight:600;

    flex-shrink:0;

}

/*==============================
        ACTION BAR
==============================*/

.action-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}

/*==============================
        LEFT BUTTONS
==============================*/

.action-left{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*==============================
        RIGHT BUTTONS
==============================*/

.action-right{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*==============================
        PREVIOUS BUTTON
==============================*/

.btn-prev{

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

    color:#fff;

    border:1px solid rgba(255,255,255,.12);

}

.btn-prev:hover{

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

    transform:translateY(-3px);

}

/*==============================
        NEXT BUTTON
==============================*/

.btn-next{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

}

.btn-next:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(37,99,235,.35);

}

/*==============================
        SAVE BUTTON
==============================*/

.btn-save{

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e);

    color:#fff;

}

.btn-save:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(34,197,94,.35);

}

/*==============================
        SUBMIT BUTTON
==============================*/

.btn-submit{

    background:linear-gradient(
        135deg,
        #dc2626,
        #ef4444);

    color:#fff;

}

.btn-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(239,68,68,.35);

}

/*==============================
        BUTTON ICON
==============================*/

.btn i{

    font-size:18px;

}

/*==============================
        QUESTION STATUS
==============================*/

.question-status{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--muted);

    font-size:.9rem;

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes shake{

    0%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-5px);}
    80%{transform:translateX(5px);}
    100%{transform:translateX(0);}

}

@keyframes correctPop{

    0%{

        transform:scale(.95);

    }

    60%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .action-bar{

        flex-direction:column;

        align-items:stretch;

    }

    .action-left,
    .action-right{

        width:100%;

        flex-direction:column;

    }

    .action-left .btn,
    .action-right .btn{

        width:100%;

    }

    .question-status{

        justify-content:center;

    }

}

/*==================================================
                PART 2C-1A
      QUESTION PALETTE • CONTAINER • HEADER
==================================================*/

/*==============================
        QUESTION NAV
==============================*/

.question-nav{

    position:sticky;

    top:110px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    padding:25px;

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

}

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

.question-nav-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.question-nav-header h3{

    font-size:1.25rem;

    color:#fff;

}

.question-nav-header span{

    color:var(--muted);

    font-size:.9rem;

}

/*==============================
        DIVIDER
==============================*/

.question-nav hr{

    border:none;

    height:1px;

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

    margin:18px 0;

}

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

.question-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;

}

/*==============================
        GROUP TITLE
==============================*/

.palette-title{

    margin:20px 0 15px;

    font-size:1rem;

    font-weight:600;

    color:#fff;

}

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

.palette-summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.08);

}

.palette-summary span{

    color:var(--muted);

    font-size:.88rem;

}

.palette-summary strong{

    color:#fff;

}

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

.question-nav{

    max-height:calc(100vh - 140px);

    overflow-y:auto;

}

/*==============================
        SCROLLBAR
==============================*/

.question-nav::-webkit-scrollbar{

    width:7px;

}

.question-nav::-webkit-scrollbar-track{

    background:transparent;

}

.question-nav::-webkit-scrollbar-thumb{

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

    border-radius:20px;

}

.question-nav::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/*==============================
        MOBILE
==============================*/

@media(max-width:992px){

    .question-nav{

        position:relative;

        top:0;

        max-height:none;

    }

}

@media(max-width:768px){

    .question-grid{

        grid-template-columns:repeat(5,1fr);

        gap:10px;

    }

    .question-nav{

        padding:18px;

    }

    .question-nav-header{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}

@media(max-width:480px){

    .question-grid{

        grid-template-columns:repeat(4,1fr);

    }

}

/*==================================================
                PART 2C-1B
     QUESTION BUTTONS • STATES • ANIMATIONS
====================================================*/

/*==============================
        QUESTION BUTTON
==============================*/

.question-btn{

    position:relative;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:16px;

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

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:all .35s ease;

    overflow:hidden;

    user-select:none;

}

/*==============================
        SHINE EFFECT
==============================*/

.question-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.20),
        transparent
    );

}

.question-btn:hover::before{

    animation:shine .9s linear;

}

/*==============================
        DEFAULT
==============================*/

.question-btn:hover{

    transform:translateY(-4px);

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

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

}

/*==============================
        CURRENT
==============================*/

.question-btn.current{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 15px 30px rgba(37,99,235,.35);

}

/*==============================
        ANSWERED
==============================*/

.question-btn.answered{

    background:#22c55e;

    color:#fff;

}

.question-btn.answered:hover{

    background:#16a34a;

}

/*==============================
        REVIEW
==============================*/

.question-btn.review{

    background:#f59e0b;

    color:#fff;

}

.question-btn.review:hover{

    background:#d97706;

}

/*==============================
        NOT VISITED
==============================*/

.question-btn.not-visited{

    background:#334155;

    color:#cbd5e1;

}

/*==============================
        SKIPPED
==============================*/

.question-btn.skipped{

    background:#ef4444;

    color:#fff;

}

/*==============================
        DISABLED
==============================*/

.question-btn.disabled{

    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;

}

/*==============================
        FLAG ICON
==============================*/

.question-btn.flag::after{

    content:"⚑";

    position:absolute;

    top:3px;

    right:5px;

    font-size:10px;

    color:#fff;

}

/*==============================
        BADGE DOT
==============================*/

.question-btn .dot{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    bottom:6px;

    right:6px;

    background:#22c55e;

}

/*==============================
        CLICK EFFECT
==============================*/

.question-btn:active{

    transform:scale(.94);

}

/*==============================
        LEGEND
==============================*/

.palette-legend{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:25px;

}

.palette-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--muted);

    font-size:.88rem;

}

.palette-color{

    width:18px;

    height:18px;

    border-radius:6px;

}

.palette-color.current{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

}

.palette-color.answered{

    background:#22c55e;

}

.palette-color.review{

    background:#f59e0b;

}

.palette-color.skipped{

    background:#ef4444;

}

.palette-color.not-visited{

    background:#334155;

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes pulseCurrent{

    0%{

        box-shadow:0 0 0 0 rgba(37,99,235,.45);

    }

    70%{

        box-shadow:0 0 0 14px rgba(37,99,235,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,99,235,0);

    }

}

.question-btn.current{

    animation:pulseCurrent 2s infinite;

}

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

@media(max-width:768px){

    .question-btn{

        width:46px;

        height:46px;

        font-size:14px;

        border-radius:12px;

    }

    .palette-legend{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .question-btn{

        width:42px;

        height:42px;

        font-size:13px;

    }

}

/*==================================================
                PART 2C-2A-1
      SIDEBAR SUMMARY • TIMER PANEL • STATS
====================================================*/

/*==============================
        SIDEBAR CARD
==============================*/

.sidebar-card{

    position:relative;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:22px;

    padding:25px;

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

    overflow:hidden;

}

/*==============================
        SHINE
==============================*/

.sidebar-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent);

}

.sidebar-card:hover::before{

    animation:shine 1s linear;

}

/*==============================
        TITLE
==============================*/

.sidebar-title{

    font-size:1.3rem;

    font-weight:700;

    color:#fff;

    margin-bottom:22px;

}

/*==============================
        SUMMARY LIST
==============================*/

.summary-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/*==============================
        ITEM
==============================*/

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.summary-item:last-child{

    border-bottom:none;

}

.summary-item span{

    color:var(--muted);

}

.summary-item strong{

    color:#fff;

    font-size:1rem;

}

/*==============================
        TIMER BOX
==============================*/

.timer-box{

    margin-top:25px;

    padding:18px;

    text-align:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

    box-shadow:0 15px 35px rgba(37,99,235,.30);

}

.timer-box h2{

    font-size:2rem;

    margin-bottom:6px;

}

.timer-box p{

    color:#fff;

    opacity:.9;

    font-size:.9rem;

}

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

.progress-ring{

    width:120px;

    height:120px;

    margin:25px auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    conic-gradient(
        var(--secondary) 75%,
        rgba(255,255,255,.08) 0);

    position:relative;

}

.progress-ring::before{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:#0f172a;

}

.progress-ring span{

    position:relative;

    z-index:2;

    color:#fff;

    font-weight:700;

    font-size:1.2rem;

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .sidebar-card{

        padding:20px;

    }

    .timer-box h2{

        font-size:1.6rem;

    }

    .progress-ring{

        width:100px;

        height:100px;

    }

    .progress-ring::before{

        width:75px;

        height:75px;

    }

}

/*==================================================
                PART 2C-2A-2
     INSTRUCTIONS • EXAM STATS • SUBMIT PANEL
====================================================*/

/*==============================
        INSTRUCTIONS CARD
==============================*/

.instructions-card{

    margin-top:25px;

    padding:25px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

}

.instructions-card h3{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:18px;

}

.instructions-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.instructions-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:var(--text);

    line-height:1.7;

}

.instructions-list li::before{

    content:"✓";

    width:24px;

    height:24px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#22c55e;

    font-weight:700;

}

/*==============================
        EXAM STATS
==============================*/

.exam-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:25px;

}

.exam-stat{

    padding:18px;

    border-radius:18px;

    text-align:center;

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

    border:1px solid rgba(255,255,255,.08);

    transition:all .35s ease;

}

.exam-stat:hover{

    transform:translateY(-6px);

    border-color:var(--secondary);

    box-shadow:0 15px 30px rgba(37,99,235,.20);

}

.exam-stat h2{

    font-size:1.8rem;

    color:var(--secondary);

    margin-bottom:8px;

}

.exam-stat p{

    color:var(--muted);

    font-size:.88rem;

}

/*==============================
        SUBMIT PANEL
==============================*/

.submit-panel{

    margin-top:30px;

    padding:22px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.18),
        rgba(14,165,233,.15));

    border:1px solid rgba(56,189,248,.25);

}

.submit-panel h4{

    margin-bottom:10px;

    color:#fff;

}

.submit-panel p{

    margin-bottom:18px;

    color:var(--muted);

}

.submit-panel .btn{

    width:100%;

}

/*==============================
        WARNING BOX
==============================*/

.warning-box{

    margin-top:18px;

    padding:14px 16px;

    border-radius:14px;

    background:rgba(245,158,11,.12);

    border:1px solid rgba(245,158,11,.30);

    color:#fcd34d;

    font-size:.9rem;

    line-height:1.6;

}

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

@media(max-width:768px){

    .exam-stats{

        grid-template-columns:1fr;

    }

    .instructions-card{

        padding:20px;

    }

    .submit-panel{

        padding:18px;

    }

}

/*==================================================
                PART 2C-2B
     STICKY SUBMIT • MOBILE NAV • FINAL POLISH
====================================================*/

/*==============================
        EXAM SIDEBAR
==============================*/

.exam-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==============================
        QUICK ACTIONS
==============================*/

.quick-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.quick-actions .btn{

    width:100%;

}

/*==============================
        STICKY SUBMIT
==============================*/

.sticky-submit{

    position:sticky;

    bottom:20px;

    background:rgba(15,23,42,.95);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border-radius:20px;

    padding:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.30);

    z-index:50;

}

.sticky-submit h4{

    margin-bottom:10px;

    color:#fff;

}

.sticky-submit p{

    margin-bottom:18px;

    color:var(--muted);

    font-size:.9rem;

}

/*==============================
        STATUS BAR
==============================*/

.exam-status{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.08);

}

.exam-status strong{

    color:#fff;

}

.exam-status span{

    color:var(--secondary);

    font-weight:600;

}

/*==============================
        FLOATING MOBILE NAV
==============================*/

.mobile-nav{

    display:none;

    position:fixed;

    left:12px;

    right:12px;

    bottom:12px;

    z-index:999;

    padding:12px;

    border-radius:20px;

    background:rgba(15,23,42,.96);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.10);

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

}

.mobile-nav .nav-buttons{

    display:flex;

    gap:12px;

}

.mobile-nav .btn{

    flex:1;

}

/*==============================
        SAVE INDICATOR
==============================*/

.save-indicator{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    color:#22c55e;

    font-size:.88rem;

    font-weight:500;

}

.save-indicator::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    animation:blinkSave 1.2s infinite;

}

/*==============================
        FINAL ANIMATIONS
==============================*/

@keyframes blinkSave{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.25;

    }

}

@keyframes slideUpMobile{

    from{

        opacity:0;

        transform:translateY(80px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .sticky-submit{

        position:relative;

        bottom:0;

    }

}

@media(max-width:768px){

    .mobile-nav{

        display:block;

        animation:slideUpMobile .4s ease;

    }

    .sticky-submit{

        display:none;

    }

    .exam-status{

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

    body{

        padding-bottom:95px;

    }

}

@media(max-width:480px){

    .mobile-nav{

        left:8px;

        right:8px;

        bottom:8px;

        padding:10px;

    }

    .mobile-nav .nav-buttons{

        gap:8px;

    }

}

/*==================================================
        PREMIUM JUMP TO QUESTIONS
==================================================*/

.question-nav{

    position:sticky;
    top:20px;

    background:rgba(15,23,42,.92);
    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:24px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.30);

}

/*--------------------*/

.question-nav h3{

    color:#fff;

    font-size:22px;

    margin-bottom:6px;

}

.question-nav p{

    color:#94a3b8;

    font-size:14px;

    margin-bottom:22px;

}

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

.palette-progress{

    width:100%;

    height:10px;

    background:#1e293b;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:25px;

}

.palette-progress span{

    display:block;

    width:65%;      /* JS se change krna */

    height:100%;

    border-radius:30px;

    background:linear-gradient(
    90deg,
    #2563eb,
    #38bdf8);

}

/*==================================================
              QUESTION GRID
==================================================*/

.question-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:14px;

}

/*==================================================
            QUESTION BUTTON
==================================================*/

.question-btn{

    width:50px;

    height:50px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    color:#fff;

    background:#1e293b;

    transition:.30s;

    position:relative;

    overflow:hidden;

}

/* Hover */

.question-btn:hover{

    transform:
    translateY(-4px)
    scale(1.05);

    background:#334155;

}

/* Shine */

.question-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

}

.question-btn:hover::before{

    left:150%;

    transition:.7s;

}

/*==================================================
        CURRENT
==================================================*/

.question-btn.current{

    background:

    linear-gradient(

    135deg,

    #2563eb,

    #38bdf8);

    transform:scale(1.1);

    box-shadow:

    0 15px 30px rgba(37,99,235,.45);

}

/*==================================================
        ANSWERED
==================================================*/

.question-btn.answered{

    background:#22c55e;

}

/*==================================================
        REVIEW
==================================================*/

.question-btn.review{

    background:#f59e0b;

}

/*==================================================
        SKIPPED
==================================================*/

.question-btn.skipped{

    background:#ef4444;

}

/*==================================================
        LEGEND
==================================================*/

.palette-legend{

    margin-top:28px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.legend{

    display:flex;

    align-items:center;

    gap:10px;

    color:#cbd5e1;

    font-size:14px;

}

.legend span{

    width:18px;

    height:18px;

    border-radius:6px;

}

.legend .blue{

    background:#2563eb;

}

.legend .green{

    background:#22c55e;

}

.legend .orange{

    background:#f59e0b;

}

.legend .red{

    background:#ef4444;

}

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

.palette-summary{

    margin-top:30px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.08);

}

.summary-box{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

    color:#cbd5e1;

}

.summary-box strong{

    color:#fff;

}

/*==================================================
        MOBILE
==================================================*/

@media(max-width:768px){

.question-nav{

position:relative;

top:0;

}

.question-grid{

grid-template-columns:repeat(5,1fr);

gap:10px;

}

.question-btn{

width:45px;

height:45px;

font-size:14px;

}

.palette-legend{

grid-template-columns:1fr;

}

}

/*==================================================
                PART 3A-1
        RESULT PAGE • HEADER • SCORE CARD
====================================================*/

/*==============================
        RESULT CONTAINER
==============================*/

.result-container{

    width:95%;

    max-width:1100px;

    margin:40px auto 80px;

    animation:fadeUp .6s ease;

}

/*==============================
        RESULT CARD
==============================*/

.result-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}

.result-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(56,189,248,.08);

}

.result-card::after{

    content:"";

    position:absolute;

    bottom:-100px;

    left:-100px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

}

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

.result-header{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:35px;

}

.result-header h1{

    font-size:2.4rem;

    color:#fff;

    margin-bottom:10px;

}

.result-header p{

    color:var(--muted);

    font-size:1rem;

}

/*==============================
        SCORE WRAPPER
==============================*/

.score-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:40px 0;

}

/*==============================
        SCORE CIRCLE
==============================*/

.score-circle{

    position:relative;

    width:220px;

    height:220px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
    conic-gradient(
        var(--secondary) 82%,
        rgba(255,255,255,.08) 0);

    animation:rotateScore 1.2s ease;

}

.score-circle::before{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:#0f172a;

}

.score-circle h2{

    position:relative;

    z-index:2;

    font-size:3rem;

    color:#fff;

}

.score-circle span{

    position:relative;

    z-index:2;

    color:var(--muted);

    font-size:.95rem;

}

/*==============================
        PASS FAIL
==============================*/

.result-status{

    text-align:center;

    margin-top:25px;

}

.result-status .pass{

    display:inline-block;

    padding:12px 28px;

    border-radius:50px;

    background:#22c55e;

    color:#fff;

    font-weight:700;

    box-shadow:0 15px 35px rgba(34,197,94,.35);

}

.result-status .fail{

    display:inline-block;

    padding:12px 28px;

    border-radius:50px;

    background:#ef4444;

    color:#fff;

    font-weight:700;

    box-shadow:0 15px 35px rgba(239,68,68,.35);

}

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

@keyframes rotateScore{

    from{

        transform:scale(.8) rotate(-90deg);

        opacity:0;

    }

    to{

        transform:scale(1) rotate(0deg);

        opacity:1;

    }

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .result-card{

        padding:28px;

    }

    .result-header h1{

        font-size:2rem;

    }

    .score-circle{

        width:180px;

        height:180px;

    }

    .score-circle::before{

        width:135px;

        height:135px;

    }

    .score-circle h2{

        font-size:2.4rem;

    }

}
/*==================================================
                PART 3A-2
      RESULT STATS • ANALYTICS • PERFORMANCE
====================================================*/

/*==============================
        RESULT STATS
==============================*/

.result-stats{

    display:grid;

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

    gap:22px;

    margin-top:45px;

}

/*==============================
        STAT CARD
==============================*/

.result-stat{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    transition:all .35s ease;

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

}

.result-stat:hover{

    transform:translateY(-8px);

    border-color:var(--secondary);

    box-shadow:0 25px 55px rgba(37,99,235,.25);

}

/*==============================
        ICON
==============================*/

.result-icon{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    margin-bottom:18px;

    font-size:26px;

    color:#fff;

}

.result-icon.correct{

    background:#22c55e;

}

.result-icon.wrong{

    background:#ef4444;

}

.result-icon.time{

    background:#2563eb;

}

.result-icon.score{

    background:#f59e0b;

}

/*==============================
        VALUE
==============================*/

.result-value{

    font-size:2rem;

    font-weight:700;

    color:#fff;

    margin-bottom:8px;

}

/*==============================
        LABEL
==============================*/

.result-label{

    color:var(--muted);

    font-size:.92rem;

}

/*==============================
        ACCURACY BAR
==============================*/

.accuracy{

    margin-top:45px;

}

.accuracy-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.accuracy-header h4{

    color:#fff;

}

.accuracy-header span{

    color:var(--secondary);

    font-weight:600;

}

.accuracy-bar{

    width:100%;

    height:14px;

    border-radius:50px;

    overflow:hidden;

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

}

.accuracy-fill{

    width:0;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #22c55e,
        #38bdf8);

    animation:accuracyFill 1.4s ease forwards;

}

/*==============================
        PERFORMANCE BOX
==============================*/

.performance-box{

    margin-top:35px;

    padding:25px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.15),
        rgba(14,165,233,.12));

    border:1px solid rgba(56,189,248,.25);

}

.performance-box h3{

    color:#fff;

    margin-bottom:12px;

}

.performance-box p{

    color:var(--muted);

    line-height:1.8;

}

/*==============================
        GRADE
==============================*/

.grade{

    margin-top:22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24);

    color:#fff;

    font-weight:700;

    letter-spacing:.5px;

}

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

@keyframes accuracyFill{

    from{

        width:0;

    }

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .result-stats{

        grid-template-columns:1fr;

    }

    .accuracy-header{

        flex-direction:column;

        gap:6px;

    }

    .result-value{

        font-size:1.7rem;

    }

    .performance-box{

        padding:20px;

    }

}

/*==================================================
                PART 3A-3
     RESULT ACTIONS • SUMMARY • FOOTER • EFFECTS
====================================================*/

/*==============================
        RESULT SUMMARY
==============================*/

.result-summary{

    margin-top:40px;

    padding:28px;

    border-radius:22px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

}

.result-summary h3{

    color:#fff;

    margin-bottom:18px;

}

.result-summary p{

    color:var(--muted);

    line-height:1.9;

}

/*==============================
        ACTION BUTTONS
==============================*/

.result-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}

.result-actions .btn{

    min-width:220px;

}

/*==============================
        CERTIFICATE BUTTON
==============================*/

.btn-certificate{

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e);

    color:#fff;

}

.btn-certificate:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(34,197,94,.35);

}

/*==============================
        RETAKE BUTTON
==============================*/

.btn-retake{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

}

.btn-retake:hover{

    transform:translateY(-5px);

}

/*==============================
        SHARE BUTTON
==============================*/

.btn-share{

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

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

}

.btn-share:hover{

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

}

/*==============================
        CONGRATS BADGE
==============================*/

.congrats{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:14px 28px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #f59e0b,
        #fbbf24);

    color:#fff;

    font-weight:700;

    animation:floatBadge 3s ease-in-out infinite;

}

/*==============================
        PARTICLES
==============================*/

.result-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.result-particles span{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

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

    animation:particleFloat 8s linear infinite;

}

/*==============================
        FOOTER
==============================*/

.result-footer{

    margin-top:45px;

    text-align:center;

    color:var(--muted);

    font-size:.92rem;

}

.result-footer a{

    color:var(--secondary);

    text-decoration:none;

}

.result-footer a:hover{

    color:#fff;

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes floatBadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes particleFloat{

    from{

        transform:translateY(100px);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:translateY(-600px);

        opacity:0;

    }

}

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

@media(max-width:768px){

    .result-actions{

        flex-direction:column;

    }

    .result-actions .btn{

        width:100%;

    }

    .result-summary{

        padding:20px;

    }

    .congrats{

        width:100%;

        justify-content:center;

    }

}

/*==================================================
                PART 3B-1
        REVIEW PAGE • QUESTION CARDS
====================================================*/

/*==============================
        REVIEW CONTAINER
==============================*/

.review-container{

    width:95%;

    max-width:1200px;

    margin:40px auto 80px;

    animation:fadeUp .6s ease;

}

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

.review-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    padding:30px;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:0 18px 45px rgba(0,0,0,.25);

}

.review-header h1{

    color:#fff;

    font-size:2.2rem;

}

.review-header p{

    color:var(--muted);

    margin-top:8px;

}

/*==============================
        REVIEW CARD
==============================*/

.review-card{

    position:relative;

    overflow:hidden;

    margin-bottom:28px;

    padding:35px;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    transition:all .35s ease;

}

.review-card:hover{

    transform:translateY(-6px);

    border-color:var(--secondary);

    box-shadow:0 20px 45px rgba(37,99,235,.20);

}

/*==============================
        QUESTION TOP
==============================*/

.review-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.review-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:#fff;

    font-weight:700;

}

.review-mark{

    padding:8px 18px;

    border-radius:50px;

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

    color:#fff;

    font-size:.9rem;

}

/*==============================
        QUESTION
==============================*/

.review-question{

    font-size:1.35rem;

    line-height:1.8;

    color:#fff;

    font-weight:600;

    margin-bottom:25px;

}

/*==============================
        REVIEW OPTIONS
==============================*/

.review-options{

    display:flex;

    flex-direction:column;

    gap:15px;

}

/*==============================
        OPTION CARD
==============================*/

.review-option{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 20px;

    border-radius:18px;

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

    border:2px solid transparent;

    transition:.3s;

}

.review-option:hover{

    transform:translateX(6px);

}

/*==============================
        OPTION LETTER
==============================*/

.review-letter{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#7dd3fc;

    font-weight:700;

    flex-shrink:0;

}

.review-text{

    flex:1;

    color:#fff;

    line-height:1.7;

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .review-header{

        flex-direction:column;

        text-align:center;

    }

    .review-card{

        padding:22px;

    }

    .review-question{

        font-size:1.15rem;

    }

    .review-top{

        flex-direction:column;

        align-items:flex-start;

    }

}

/*==================================================
                PART 3B-2
     ANSWER STATES • EXPLANATION • SOLUTION
====================================================*/

/*==============================
        CORRECT OPTION
==============================*/

.review-option.correct{

    border:2px solid #22c55e;

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

    box-shadow:0 10px 25px rgba(34,197,94,.18);

}

.review-option.correct .review-letter{

    background:#22c55e;

    color:#fff;

}

/*==============================
        WRONG OPTION
==============================*/

.review-option.wrong{

    border:2px solid #ef4444;

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

    box-shadow:0 10px 25px rgba(239,68,68,.18);

}

.review-option.wrong .review-letter{

    background:#ef4444;

    color:#fff;

}

/*==============================
        USER ANSWER
==============================*/

.review-option.user{

    border:2px solid var(--secondary);

    background:rgba(56,189,248,.10);

}

.review-option.user .review-letter{

    background:var(--secondary);

    color:#fff;

}

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

.answer-icon{

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:15px;

    font-weight:700;

    flex-shrink:0;

}

.answer-icon.correct{

    background:#22c55e;

    color:#fff;

}

.answer-icon.wrong{

    background:#ef4444;

    color:#fff;

}

.answer-icon.user{

    background:var(--secondary);

    color:#fff;

}

/*==============================
        ANSWER LABEL
==============================*/

.answer-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:12px;

    padding:8px 16px;

    border-radius:30px;

    font-size:.82rem;

    font-weight:600;

}

.answer-label.correct{

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

    color:#22c55e;

}

.answer-label.wrong{

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

    color:#ef4444;

}

.answer-label.user{

    background:rgba(56,189,248,.15);

    color:var(--secondary);

}

/*==============================
        EXPLANATION BOX
==============================*/

.explanation-box{

    margin-top:28px;

    padding:22px;

    border-radius:20px;

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

    border-left:5px solid var(--secondary);

}

.explanation-box h4{

    color:#fff;

    margin-bottom:12px;

}

.explanation-box p{

    color:var(--muted);

    line-height:1.8;

}

/*==============================
        SOLUTION CARD
==============================*/

.solution-card{

    margin-top:20px;

    padding:22px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.14),
        rgba(14,165,233,.10));

    border:1px solid rgba(56,189,248,.20);

}

.solution-card h5{

    color:#fff;

    margin-bottom:10px;

}

.solution-card p{

    color:var(--muted);

    line-height:1.8;

}

/*==============================
        MARKS INFO
==============================*/

.marks-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.08);

}

.marks-info span{

    color:var(--muted);

}

.marks-info strong{

    color:#fff;

}

/*==============================
        ANIMATIONS
==============================*/

.review-option.correct{

    animation:correctGlow .45s ease;

}

.review-option.wrong{

    animation:wrongShake .45s ease;

}

@keyframes correctGlow{

    0%{

        transform:scale(.96);

        opacity:.6;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes wrongShake{

    0%{transform:translateX(0);}
    20%{transform:translateX(-5px);}
    40%{transform:translateX(5px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
    100%{transform:translateX(0);}

}

/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

    .marks-info{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .solution-card,
    .explanation-box{

        padding:18px;

    }

}

/*==================================================
                PART 3B-3
      REVIEW NAVIGATION • FILTERS • SUMMARY
====================================================*/

/*==============================
        REVIEW ACTION BAR
==============================*/

.review-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}

/*==============================
        FILTER BUTTONS
==============================*/

.review-filters{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.filter-btn{

    padding:10px 18px;

    border:none;

    border-radius:40px;

    cursor:pointer;

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

    color:#fff;

    transition:all .3s ease;

    font-weight:600;

}

.filter-btn:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}

.filter-btn.active{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

}

/*==============================
        REVIEW NAVIGATION
==============================*/

.review-navigation{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:40px;

    flex-wrap:wrap;

}

.review-navigation .btn{

    min-width:180px;

}

/*==============================
        QUESTION SUMMARY
==============================*/

.review-summary{

    margin-top:45px;

    padding:30px;

    border-radius:24px;

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

}

.review-summary h3{

    margin-bottom:20px;

    color:#fff;

}

/*==============================
        SUMMARY GRID
==============================*/

.summary-grid{

    display:grid;

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

    gap:18px;

}

.summary-box{

    padding:22px;

    border-radius:18px;

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

    text-align:center;

    transition:.3s;

}

.summary-box:hover{

    transform:translateY(-6px);

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

}

.summary-box h2{

    font-size:2rem;

    color:var(--secondary);

    margin-bottom:8px;

}

.summary-box p{

    color:var(--muted);

}

/*==============================
        PERFORMANCE
==============================*/

.performance-meter{

    margin-top:35px;

}

.performance-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:#fff;

}

.performance-track{

    width:100%;

    height:12px;

    border-radius:30px;

    overflow:hidden;

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

}

.performance-fill{

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #22c55e,
        var(--secondary));

    animation:performanceLoad 1.3s ease forwards;

}

/*==============================
        REVIEW FOOTER
==============================*/

.review-footer{

    margin-top:45px;

    text-align:center;

    color:var(--muted);

}

/*==============================
        ANIMATIONS
==============================*/

@keyframes performanceLoad{

    from{

        width:0;

    }

}

.summary-box{

    animation:fadeUp .5s ease both;

}

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

@media(max-width:768px){

    .review-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .review-filters{

        justify-content:center;

    }

    .review-navigation{

        flex-direction:column;

    }

    .review-navigation .btn{

        width:100%;

    }

    .summary-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
                PART 3D-1
      FINAL UTILITIES • ANIMATIONS • ACCESSIBILITY
====================================================*/

/*==============================
        GLOBAL TRANSITIONS
==============================*/

*{
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

/*==============================
        FOCUS STATES
==============================*/

:focus-visible{

    outline:3px solid rgba(56,189,248,.55);

    outline-offset:3px;

    border-radius:8px;

}

/*==============================
        GLASS UTILITIES
==============================*/

.glass{

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.glass-hover:hover{

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

}

/*==============================
        FLEX UTILITIES
==============================*/

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

/*==============================
        GRID UTILITIES
==============================*/

.grid{

    display:grid;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}

.grid-gap{

    gap:22px;

}

/*==============================
        SPACING
==============================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}

.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}
.p-40{padding:40px;}

/*==============================
        TEXT
==============================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-muted{

    color:var(--muted);

}

.text-primary{

    color:var(--secondary);

}

.text-success{

    color:#22c55e;

}

.text-danger{

    color:#ef4444;

}

/*==============================
        BORDER RADIUS
==============================*/

.rounded{

    border-radius:18px;

}

.rounded-lg{

    border-radius:24px;

}

.circle{

    border-radius:50%;

}

/*==============================
        SHADOW
==============================*/

.shadow{

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

}

.shadow-lg{

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*==============================
        HOVER EFFECT
==============================*/

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

/*==============================
        FADE
==============================*/

.fade-in{

    animation:fadeIn .6s ease;

}

.slide-up{

    animation:slideUp .6s ease;

}

.zoom-in{

    animation:zoomIn .45s ease;

}

.float{

    animation:floating 4s ease-in-out infinite;

}

/*==============================
        KEYFRAMES
==============================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomIn{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:40px;

    font-size:.8rem;

    font-weight:600;

}

.badge.success{

    background:#22c55e;

    color:#fff;

}

.badge.warning{

    background:#f59e0b;

    color:#fff;

}

.badge.danger{

    background:#ef4444;

    color:#fff;

}

.badge.primary{

    background:var(--primary);

    color:#fff;

}

/*==================================================
                PART 3D-2
      FINAL RESPONSIVE • PERFORMANCE • CLEANUP
====================================================*/

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

@media (max-width:1200px){

    .container,
    .test-container,
    .result-container,
    .review-container{

        width:96%;

    }

}

@media (max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .stats-grid,
    .tests-grid,
    .summary-grid,
    .result-stats{

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

    }

}

@media (max-width:768px){

    *{

        -webkit-tap-highlight-color:transparent;

    }

    body{

        overflow-x:hidden;

    }

    img{

        max-width:100%;

        height:auto;

    }

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .btn{

        min-height:48px;

    }

    input,
    select,
    textarea{

        min-height:48px;

    }

}

@media (max-width:480px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.3rem;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

}

/*==============================
        IMAGE OPTIMIZATION
==============================*/

img{

    display:block;

    max-width:100%;

    object-fit:cover;

}

/*==============================
        BUTTON IMPROVEMENT
==============================*/

.btn{

    user-select:none;

    -webkit-user-select:none;

    touch-action:manipulation;

}

button{

    font-family:inherit;

}

/*==============================
        INPUT IMPROVEMENT
==============================*/

input,
select,
textarea{

    font-family:inherit;

    appearance:none;

}

/*==============================
        SCROLL FIX
==============================*/

html{

    scroll-padding-top:90px;

}

/*==============================
        REDUCED MOTION
==============================*/

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==============================
        PRINT (RESULT ONLY)
==============================*/

@media print{

    body{

        background:#fff !important;

        color:#000 !important;

    }

    .navigation,
    .mobile-nav,
    .fab,
    .toast,
    .question-nav,
    header,
    footer{

        display:none !important;

    }

    .result-card{

        box-shadow:none;

        border:1px solid #ddd;

        background:#fff;

    }

}

/*==============================
        SELECTION
==============================*/

::selection{

    background:rgba(37,99,235,.35);

    color:#fff;

}

/*==============================
        PLACEHOLDER
==============================*/

::placeholder{

    color:#94a3b8;

}

/*==============================
        SMOOTH GPU
==============================*/

.card,
.review-card,
.result-card,
.test-card,
.question-card,
.option{

    transform:translateZ(0);

    will-change:transform;

}

/*==============================
        FINAL SHINE
==============================*/

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/* ==========================================
        PREMIUM JUMP TO QUESTIONS
========================================== */

.question-nav{

    background:rgba(15,23,42,.95);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:24px;

    box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.question-nav h3{

    font-size:20px;

    color:#fff;

    margin-bottom:8px;

}

.question-nav p{

    color:#94a3b8;

    font-size:14px;

    margin-bottom:20px;

}

/* ==========================================
        QUESTION GRID
========================================== */

.question-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(48px,1fr));

    gap:12px;

}

/* ==========================================
        QUESTION BUTTON
========================================== */

.question-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#1e293b;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

    display:flex;

    justify-content:center;

    align-items:center;

}

.question-btn:hover{

    transform:translateY(-4px);

    background:#2563eb;

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}

/* ==========================================
        CURRENT QUESTION
========================================== */

.question-btn.current{

    background:linear-gradient(135deg,#2563eb,#38bdf8);

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 15px 30px rgba(37,99,235,.40);

}

/* ==========================================
        ANSWERED
========================================== */

.question-btn.answered{

    background:#22c55e;

}

.question-btn.answered:hover{

    background:#16a34a;

}

/* ==========================================
        REVIEW
========================================== */

.question-btn.review{

    background:#f59e0b;

}

/* ==========================================
        NOT VISITED
========================================== */

.question-btn.not-visited{

    background:#334155;

}

/* ==========================================
        LEGEND
========================================== */

.palette-legend{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-top:25px;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#cbd5e1;

}

.legend-dot{

    width:16px;

    height:16px;

    border-radius:5px;

}

.legend-dot.current{

    background:#2563eb;

}

.legend-dot.answered{

    background:#22c55e;

}

.legend-dot.review{

    background:#f59e0b;

}

.legend-dot.not-visited{

    background:#334155;

}

/* ==========================================
        MOBILE
========================================== */

@media(max-width:768px){

    .question-grid{

        grid-template-columns:repeat(5,1fr);

    }

}
/*==============================
        END
==============================*/