/*======================================================
PREMIUM HERO
======================================================*/

.oas-hero{

    background:linear-gradient(135deg,#162033,#1d2940);
    border-radius:24px;
    padding:18px 30px;
    margin-bottom:45px;

    position:relative;
    overflow:hidden;

    box-shadow:0 18px 45px rgba(15,23,42,.12);

}

/* Decorative Glow */

.oas-hero::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

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

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

}

.oas-hero::after{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

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

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

}


/*======================================================
TOP BAR
======================================================*/

.hero-top{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.hero-badge{

    padding:8px 16px;

    border-radius:40px;

    background:linear-gradient(135deg,#10b981,#059669);

    color:#fff;

    font-size:13px;

    font-weight:700;

}

.hero-badge i{

    margin-right:6px;

}

.hero-label{

    padding:8px 16px;

    border-radius:40px;

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

    color:#fbbf24;

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

}


/*======================================================
LAYOUT
======================================================*/

.hero-wrapper{

    display:grid;

    grid-template-columns:2fr 330px;

    gap:35px;

    align-items:center;

    position:relative;

    z-index:2;

}


/*======================================================
LEFT CONTENT
======================================================*/

.hero-content h1{

    color:#fff;

    font-size:34px;

    line-height:1.15;

    margin-bottom:14px;

    font-weight:800;

}

.hero-content h1 span{

    display:block;

    color:#fbbf24;

}

.hero-content p{

    color:#cbd5e1;

    font-size:15px;

    line-height:1.75;

    margin-bottom:10px;

    max-width:650px;

}


/*======================================================
FEATURES
======================================================*/

.hero-features{

    display:grid;

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

    gap:12px;

    margin:24px 0;

    max-width:640px;

}

.hero-features div{

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

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

    border-radius:14px;

    padding:12px 16px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.hero-features div:hover{

    transform:translateY(-2px);

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

}

.hero-features i{

    color:#fbbf24;

    margin-right:10px;

}


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

.hero-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 26px;

    border-radius:40px;

    background:#fff;

    color:#2563eb;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.hero-btn:hover{

    color:#2563eb;

    transform:translateY(-3px);

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

}

.hero-btn i{

    transition:.3s;

}

.hero-btn:hover i{

    transform:translateX(3px);

}


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

.hero-sidebar{

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

    backdrop-filter:blur(14px);

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

    border-radius:20px;

    padding:20px;

}

.featured-tag{

    display:inline-block;

    padding:5px 12px;

    border-radius:8px;

    background:#ef4444;

    color:#fff;

    font-size:11px;

    font-weight:700;

    margin-bottom:14px;

}

.hero-sidebar h3{

    color:#fff;

    font-size:24px;

    margin-bottom:6px;

}

.hero-sidebar h4{

    color:#fbbf24;

    font-size:17px;

    line-height:1.45;

    margin-bottom:18px;

}

.hero-meta{

    display:grid;

    gap:10px;

    margin-bottom:18px;

}

.hero-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:12px;

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

    color:#dbeafe;

    font-size:13px;

}

.hero-meta i{

    width:18px;

    color:#fbbf24;

}


/*======================================================
SIDEBAR BUTTON
======================================================*/

.sidebar-btn{

    display:block;

    width:100%;

    text-align:center;

    padding:12px;

    border-radius:12px;

    background:#fff;

    color:#2563eb;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.sidebar-btn:hover{

    background:#f8fafc;

    color:#2563eb;

}


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

@media(max-width:992px){

    .hero-wrapper{

        grid-template-columns:1fr;

    }

    .hero-sidebar{

        margin-top:20px;

    }

}

@media(max-width:768px){

    .oas-hero{

        padding:22px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .hero-btn{

        width:100%;

        justify-content:center;

    }

}


/*======================================================
FILTER BAR
======================================================*/

.quiz-filter-wrap{

    margin:35px 0 18px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    padding:22px 26px;

    box-shadow:0 10px 25px rgba(15,23,42,.06);

}

.quiz-filter{

    display:grid;

    grid-template-columns:180px 220px 1fr;

    gap:20px;

    align-items:end;

}


/*======================================================
LABELS
======================================================*/

.filter-item label,
.filter-search label{

    display:block;

    margin-bottom:8px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    color:#2563eb;

}


/*======================================================
SELECT BOX
======================================================*/

.filter-item select{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid #dbeafe;

    border-radius:12px;

    background:#fff;

    font-size:15px;

    font-weight:600;

    color:#1e293b;

    outline:none;

    transition:.25s;

}

.filter-item select:focus{

    border-color:#2563eb;

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

}


/*======================================================
SEARCH BOX
======================================================*/

.search-box{

    display:flex;

    align-items:center;

    height:52px;

    padding:0 16px;

    border:1px solid #dbeafe;

    border-radius:12px;

    background:#fff;

    transition:.25s;

}

.search-box:focus-within{

    border-color:#2563eb;

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

}

.search-box i{

    color:#2563eb;

    font-size:17px;

    margin-right:12px;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font-size:15px;

    color:#1e293b;

}

.search-box input::placeholder{

    color:#94a3b8;

}


/*======================================================
RESULT BAR
======================================================*/

.quiz-result-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    padding:0 4px;

}

.quiz-result-bar h4{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#0f172a;

}

.quiz-result-bar span{

    color:#2563eb;

    font-size:24px;

    font-weight:800;

}


/*======================================================
OPTIONAL SMALL STATUS CHIP
======================================================*/

.quiz-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:#eff6ff;

    color:#2563eb;

    font-size:13px;

    font-weight:700;

}

.quiz-status i{

    font-size:13px;

}


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

@media(max-width:992px){

    .quiz-filter{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .quiz-filter-wrap{

        padding:18px;

    }

    .quiz-result-bar{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .quiz-result-bar h4{

        font-size:16px;

    }

    .quiz-result-bar span{

        font-size:20px;

    }

    .search-box{

        height:48px;

    }

}


/*======================================================
QUIZ LIST
======================================================*/

.quiz-list{

    display:flex;
    flex-direction:column;
    gap:16px;

    margin:18px 0 50px;

}


/*======================================================
QUIZ CARD
======================================================*/

.quiz-card{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 24px;

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:18px;

    box-shadow:0 8px 24px rgba(15,23,42,.05);

    transition:all .28s ease;

    overflow:hidden;

}

.quiz-card:hover{

    transform:translateY(-3px);

    border-color:#bfdbfe;

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

}


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

.quiz-left{

    display:flex;

    align-items:center;

    gap:18px;

    flex:1;

}


/*======================================================
QUIZ NUMBER
======================================================*/

.quiz-number{

    width:72px;
    height:72px;

    flex-shrink:0;

    border-radius:16px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}

.quiz-number span{

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;

    opacity:.9;

}

.quiz-number strong{

    font-size:24px;

    line-height:1;

    font-weight:800;

}


/*======================================================
CONTENT
======================================================*/

.quiz-content{

    flex:1;

}

.quiz-content h3{

    margin:0 0 8px;

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    line-height:1.35;

}


/*======================================================
META
======================================================*/

.quiz-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    align-items:center;

    font-size:13px;

    color:#64748b;

}

.quiz-meta span{

    display:flex;

    align-items:center;

}

.quiz-meta i{

    color:#2563eb;

    margin-right:6px;

    width:16px;

}


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

.quiz-btn{

    min-width:160px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    transition:.28s;

}

.quiz-btn:hover{

    color:#fff;

    transform:translateY(-2px);

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

}


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

.empty-quiz{

    padding:65px 30px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    text-align:center;

}

.empty-quiz i{

    font-size:55px;

    color:#94a3b8;

    margin-bottom:18px;

}

.empty-quiz h3{

    margin-bottom:10px;

    font-size:24px;

    color:#0f172a;

}

.empty-quiz p{

    color:#64748b;

    margin:0;

}


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

.quiz-card{

    opacity:1;

    transform:translateY(0);

}

.quiz-card.show{

    opacity:1;

    transform:translateY(0);

}

.quiz-card.hide{

    opacity:0;

    transform:translateY(12px);

    pointer-events:none;

}


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

.quiz-card:hover .quiz-number{

    transform:scale(1.05);

}

.quiz-number{

    transition:.25s;

}

.quiz-card:hover .quiz-content h3{

    color:#2563eb;

}


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

@media(max-width:768px){

    .quiz-card{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:18px;

    }

    .quiz-left{

        width:100%;

    }

    .quiz-content h3{

        font-size:18px;

    }

    .quiz-meta{

        gap:12px;

    }

    .quiz-btn{

        width:100%;

    }

    .quiz-number{

        width:60px;

        height:60px;

    }

    .quiz-number strong{

        font-size:20px;

    }

}



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

.oas-hero,
.quiz-filter-wrap,
.quiz-result-bar,
.quiz-card{

    animation:fadeUp .45s ease both;

}

.quiz-card:nth-child(2){

    animation-delay:.05s;

}

.quiz-card:nth-child(3){

    animation-delay:.10s;

}

.quiz-card:nth-child(4){

    animation-delay:.15s;

}

.quiz-card:nth-child(5){

    animation-delay:.20s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#f8fafc;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


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

.hero-btn:focus,
.sidebar-btn:focus,
.quiz-btn:focus{

    outline:none;

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

}

select:focus,
input:focus{

    outline:none;

}


/*======================================================
BETTER TRANSITIONS
======================================================*/

.hero-btn,
.sidebar-btn,
.quiz-btn,
.quiz-card,
.quiz-number,
.hero-features div,
.search-box,
.filter-item select{

    transition:all .28s ease;

}


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

::selection{

    background:#2563eb;

    color:#fff;

}


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

@media(max-width:768px){

    .hero-top{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .hero-label,
    .hero-badge{

        font-size:11px;

    }

    .hero-content p{

        font-size:14px;

    }

    .hero-sidebar{

        padding:18px;

    }

    .hero-sidebar h3{

        font-size:20px;

    }

    .hero-sidebar h4{

        font-size:16px;

    }

}


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

@media(max-width:480px){

    .oas-hero{

        padding:18px;

        border-radius:18px;

    }

    .hero-content h1{

        font-size:24px;

    }

    .hero-content p{

        font-size:13px;

        line-height:1.7;

    }

    .hero-features{

        gap:8px;

    }

    .hero-features div{

        padding:10px 12px;

        font-size:13px;

    }

    .quiz-card{

        padding:16px;

        border-radius:16px;

    }

    .quiz-number{

        width:56px;

        height:56px;

    }

    .quiz-number strong{

        font-size:18px;

    }

    .quiz-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .quiz-btn{

        height:46px;

        font-size:14px;

    }

}


/*======================================================
LARGE DESKTOP
======================================================*/

@media(min-width:1400px){

    .oas-hero{

        padding:30px 40px;

    }

    .hero-content h1{

        font-size:40px;

    }

    .hero-content p{

        font-size:16px;

    }

    .quiz-content h3{

        font-size:24px;

    }

}


/*======================================================
UTILITY
======================================================*/

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}

.w-100{

    width:100%;

}





/* =========================================================
   DAILY QUIZ CSS (Professional Version)
   Replace your existing daily-quiz.css with this file.
   ========================================================= */

:root{
    --primary:#0f4c81;
    --primary-dark:#0a3559;
    --green:#16a34a;
    --green-bg:#ecfdf5;
    --red:#dc2626;
    --orange:#f59e0b;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
    --bg:#f6f8fc;
    --white:#fff;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Segoe UI,Arial,sans-serif;
}

/* ==========================
   ATTEMPT PAGE
========================== */

.quiz-attempt{
    width:min(1050px,94%);
    margin:40px auto 80px;
}

.quiz-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    background:#fff;
    padding:28px;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.07);
    position:sticky;
    top:15px;
    z-index:100;
}

.quiz-header h1{
    font-size:30px;
    margin:0 0 16px;
}

.quiz-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.quiz-meta span{
    background:#eef5ff;
    color:var(--primary);
    padding:8px 14px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

.quiz-meta .positive{
    background:#ecfdf5;
    color:var(--green);
}

.quiz-meta .negative{
    background:#fef2f2;
    color:var(--red);
}

.quiz-timer{
    min-width:160px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,#0f4c81,#1d70b8);
    font-size:22px;
    font-weight:700;
}

.question-card{
    background:#fff;
    margin-top:24px;
    padding:28px;
    border-radius:18px;
    border:1px solid #edf1f7;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.question-title{
    display:inline-flex;
    align-items:center;
    background:#eef5ff;
    color:var(--primary);
    border-radius:30px;
    padding:8px 16px;
    font-size:13px;
    font-weight:700;
    margin-bottom:20px;
}

/* CKEditor Output */

.question-content{
    font-size:18px;
    line-height:1.85;
    color:#222;
    margin-bottom:28px;
}

.question-content p{
    margin:0 0 14px;
    font-weight:400;
}

.question-content ol,
.question-content ul{
    margin:0 0 18px 26px;
}

.question-content li{
    margin-bottom:10px;
    font-weight:400;
}

.question-content strong,
.question-content b{
    font-weight:700;
}

.question-content table{
    width:100%;
    border-collapse:collapse;
    margin:18px 0;
}

.question-content table td,
.question-content table th{
    border:1px solid #ddd;
    padding:8px;
}

.options{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.option{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 18px;
    border:1px solid #d9e2ec;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
    background:#fff;
}

.option:hover{
    border-color:var(--primary);
    background:#f8fbff;
}

.option.selected{
    border-color:var(--green);
    background:var(--green-bg);
}

.option input{
    margin-top:5px;
    transform:scale(1.2);
}

.option span{
    font-size:16px;
    line-height:1.7;
    color:#374151;
}

.option strong{
    color:var(--primary);
}

.quiz-footer{
    margin-top:35px;
    background:#fff;
    border-radius:18px;
    padding:24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.attempt-info{
    font-size:18px;
    font-weight:600;
}

.attempt-info strong{
    color:var(--green);
    font-size:24px;
}

.submit-btn{
    border:none;
    padding:16px 36px;
    border-radius:12px;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.submit-btn:hover{
    transform:translateY(-2px);
}

/* Review page helpers */

.review-card .question-content{
    margin-bottom:16px;
}

.answer-explanation{
    margin-top:18px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
}

.answer-explanation h4{
    margin:0 0 12px;
}

/* Responsive */

@media(max-width:992px){
    .quiz-header{
        flex-direction:column;
        align-items:flex-start;
    }
    .quiz-timer{
        width:100%;
    }
}

@media(max-width:768px){
    .quiz-header{
        padding:20px;
    }

    .quiz-header h1{
        font-size:26px;
    }

    .question-card{
        padding:20px;
    }

    .question-content{
        font-size:16px;
    }

    .question-content li{
        font-size:16px;
    }

    .quiz-footer{
        flex-direction:column;
        gap:18px;
    }

    .submit-btn{
        width:100%;
    }
}










/*=========================================================
QUIZ RESULT PAGE
=========================================================*/

.result-page{

    width:min(900px,94%);

    margin:50px auto 80px;

}

.result-card{

    background:linear-gradient(135deg,#0f4c81,#1d70b8);

    color:#fff;

    border-radius:25px;

    padding:50px;

    text-align:center;

    box-shadow:0 20px 45px rgba(15,76,129,.25);

    margin-bottom:35px;

}

.result-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

}

.result-card h1{

    font-size:40px;

    margin-bottom:12px;

}

.result-card p{

    font-size:18px;

    opacity:.9;

    margin-bottom:35px;

}

.score-circle{

    width:180px;

    height:180px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    color:#0f4c81;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:52px;

    font-weight:800;

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

}

.score-label{

    display:block;

    margin-top:20px;

    font-size:20px;

    font-weight:700;

}


/*==================================
Statistics
==================================*/

.stats-grid{

    display:grid;

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

    gap:22px;

    margin-bottom:35px;

}

.stat{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.07);

}

.stat h3{

    font-size:42px;

    margin-bottom:10px;

}

.stat p{

    font-size:17px;

    color:#6b7280;

}

.stat.success h3{

    color:#16a34a;

}

.stat.danger h3{

    color:#dc2626;

}

.stat.warning h3{

    color:#f59e0b;

}

.stat.primary h3{

    color:#2563eb;

}


/*==================================
Information Card
==================================*/

.result-info{

    background:#fff;

    border-radius:20px;

    padding:30px;

    display:grid;

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

    gap:25px;

    margin-bottom:35px;

    box-shadow:0 12px 30px rgba(0,0,0,.07);

}

.result-info div{

    text-align:center;

}

.result-info span{

    display:block;

    color:#6b7280;

    margin-bottom:10px;

    font-size:16px;

}

.result-info strong{

    font-size:30px;

    color:#111827;

}


/*==================================
Action Buttons
==================================*/

.result-actions{

    display:flex;

    justify-content:center;

    gap:20px;

}

.result-actions a{

    text-decoration:none;

}

.result-actions .primary-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 35px;

    border-radius:15px;

    background:#0f4c81;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.result-actions .primary-btn:hover{

    background:#0a3559;

    transform:translateY(-3px);

}

.result-actions .secondary-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 35px;

    border-radius:15px;

    background:#fff;

    color:#0f4c81;

    font-weight:700;

    border:2px solid #0f4c81;

    transition:.3s;

}

.result-actions .secondary-btn:hover{

    background:#0f4c81;

    color:#fff;

}


/*==================================
Responsive
==================================*/

@media(max-width:992px){

.stats-grid{

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

}

}

@media(max-width:768px){

.result-card{

padding:35px 25px;

}

.result-card h1{

font-size:32px;

}

.score-circle{

width:150px;

height:150px;

font-size:42px;

}

.stats-grid{

grid-template-columns:1fr;

}

.result-info{

grid-template-columns:1fr;

}

.result-actions{

flex-direction:column;

}

.result-actions .primary-btn,

.result-actions .secondary-btn{

width:100%;

}

}

@media(max-width:480px){

.result-card h1{

font-size:28px;

}

.result-card p{

font-size:16px;

}

.score-circle{

width:130px;

height:130px;

font-size:36px;

}

.stat h3{

font-size:34px;

}

.result-info strong{

font-size:24px;

}

}










/*==================================
Performance Card
==================================*/

.performance-box{

    display:flex;

    align-items:center;

    gap:25px;

    background:#fff;

    border-radius:20px;

    padding:28px;

    margin-bottom:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.07);

    border-left:8px solid;

}

.performance-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    flex-shrink:0;

}

.performance-content h2{

    margin:0 0 8px;

    font-size:28px;

    font-weight:700;

}

.performance-content p{

    margin:0;

    color:#6b7280;

    font-size:17px;

}

/* Success */

.performance-box.success{

    border-color:#16a34a;

}

.performance-box.success .performance-icon{

    background:#dcfce7;

    color:#16a34a;

}

/* Blue */

.performance-box.primary{

    border-color:#2563eb;

}

.performance-box.primary .performance-icon{

    background:#dbeafe;

    color:#2563eb;

}

/* Yellow */

.performance-box.warning{

    border-color:#f59e0b;

}

.performance-box.warning .performance-icon{

    background:#fef3c7;

    color:#d97706;

}

/* Orange */

.performance-box.orange{

    border-color:#ea580c;

}

.performance-box.orange .performance-icon{

    background:#ffedd5;

    color:#ea580c;

}

/* Red */

.performance-box.danger{

    border-color:#dc2626;

}

.performance-box.danger .performance-icon{

    background:#fee2e2;

    color:#dc2626;

}

@media(max-width:768px){

.performance-box{

flex-direction:column;

text-align:center;

}

.performance-content h2{

font-size:24px;

}

}















/*==================================
Review Page
==================================*/

.review-page{
    max-width:1000px;
    margin:40px auto;
}

.review-header{
    text-align:center;
    margin-bottom:35px;
}

.review-card{
    background:#fff;
    border-radius:30px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.review-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:20px;
}

/* Badge */
.badge-correct,
.badge-wrong{
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
    white-space:nowrap;
}

.badge-correct{
    background:#16a34a;
}

.badge-wrong{
    background:#dc2626;
}

/*==================================
CKEditor Content
==================================*/

.question-content{
    flex:1;
    font-size:18px;
    line-height:1.8;
    color:#222;
    font-weight:400;
}

/* Paragraph */
.question-content p{
    margin:0 0 14px;
    font-weight:400;
}

/* Ordered & Unordered List */
.question-content ol,
.question-content ul{
    margin:0 0 18px 25px;
    padding:0;
}

.question-content li{
    margin-bottom:12px;
    font-weight:400;
}

/* Bold should only appear where CKEditor used it */
.question-content strong,
.question-content b{
    font-weight:700;
}

/* Italic */
.question-content em,
.question-content i{
    font-style:italic;
}

/* Tables */
.question-content table{
    width:100%;
    border-collapse:collapse;
    margin:15px 0;
}

.question-content table th,
.question-content table td{
    border:1px solid #ddd;
    padding:8px;
}

/*==================================
Options
==================================*/

.options-review{
    display:grid;
    gap:15px;
}

.review-option{
    border:1px solid #ddd;
    padding:15px;
    border-radius:12px;
    background:#fff;
}

.correct-option{
    background:#ecfdf5;
    border-color:#16a34a;
    color:#166534;
}

.wrong-option{
    background:#fef2f2;
    border-color:#dc2626;
    color:#991b1b;
}

/*==================================
Answer Summary
==================================*/

.answer-summary{
    margin-top:20px;
    border-top:1px dashed #ddd;
    padding-top:18px;
}

.your-answer{
    padding:14px 18px;
    background:#fef2f2;
    border-left:4px solid #dc2626;
    border-radius:10px;
    margin-bottom:12px;
}

.correct-answer{
    padding:14px 18px;
    background:#ecfdf5;
    border-left:4px solid #16a34a;
    border-radius:10px;
}



/*==================================
Review Actions
==================================*/

.review-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:45px 0 20px;

    flex-wrap:wrap;

}

.review-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:12px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.review-btn:hover{

    transform:translateY(-2px);

}

.review-btn.secondary{

    background:#f3f4f6;

    color:#374151;

}

.review-btn.secondary:hover{

    background:#e5e7eb;

}

.review-btn.info{

    background:#0f4c81;

    color:#fff;

}

.review-btn.info:hover{

    background:#0a3559;

}

.review-btn.success{

    background:#16a34a;

    color:#fff;

}

.review-btn.success:hover{

    background:#15803d;

}

/*==================================
Responsive
==================================*/

@media(max-width:768px){

    .review-top{
        flex-direction:column;
    }

    .question-content{
        font-size:16px;
    }

}



























.leaderboard-box{
    margin-top:40px;
    background:#eef5ff;
    border:1px solid #d9e7ff;
    border-radius:10px;
    padding:25px;
}

.leaderboard-box h2{
    margin-bottom:10px;
}

.leaderboard-form{
    display:flex;
    gap:20px;
    align-items:flex-end;
    flex-wrap:wrap;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
}

.form-group input{
    width:250px;
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
}

.button-group button{
    height:44px;
    padding:0 30px;
}



.leaderboard-table{
    margin-top:40px;
    background:#fff;
    border-radius:10px;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.leaderboard-table table{
    width:100%;
    border-collapse:collapse;
}

.leaderboard-table th,
.leaderboard-table td{
    padding:12px;
    border-bottom:1px solid #eee;
    text-align:center;
}

.leaderboard-table th{
    background:#f8f9fa;
    font-weight:700;
}

.leaderboard-table tr:hover{
    background:#fafafa;
}