/* ==========================================================
   MY EXAMS - HOME
========================================================== */

.em-container{

    max-width:1200px;
    margin:40px auto;
    padding:0 20px;

}

/* ==========================================================
   MY EXAMS HERO HEADER
========================================================== */

.em-my-exams-header{

    background:linear-gradient(135deg,#0d47a1,#1565c0);

    border-radius:20px;

    padding:35px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:35px 0 45px;

    box-shadow:0 12px 35px rgba(13,71,161,.18);

    color:#ffffff;

}

.em-my-exams-header-left{

    display:flex;

    align-items:center;

    gap:25px;

}

.em-my-header-icon{

    width:90px;

    height:90px;

    border-radius:20px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

}

.em-my-header-content h2{

    margin:0;

    color:#ffffff;

    font-size:38px;

    font-weight:700;

}

.em-my-header-tagline{

    margin-top:8px;

    font-size:17px;

    color:rgba(255,255,255,.85);

}

.em-my-header-content p{

    margin-top:18px;

    max-width:650px;

    line-height:1.8;

    font-size:17px;

    color:rgba(255,255,255,.92);

}

.em-my-exams-header-right{

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

    padding:22px 28px;

    border-radius:16px;

    text-align:center;

    min-width:170px;

}

.em-my-exams-header-right span{

    display:block;

    font-size:15px;

    color:rgba(255,255,255,.85);

}

.em-my-exams-header-right h3{

    margin:8px 0 0;

    font-size:42px;

    color:#ffffff;

}

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

.em-my-exams-home-grid{

    display:grid;

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

    gap:30px;

}

/* ==========================================================
   HOME CARDS
========================================================== */

.em-my-exam-home-card{

    background:#ffffff;

    border-radius:18px;

    padding:35px;

    border:1px solid #e5e7eb;

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

    transition:all .30s ease;

    display:flex;

    flex-direction:column;

    min-height:320px;

}

.em-my-exam-home-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

/* ==========================================================
   CARD TOP
========================================================== */

.em-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

/* ==========================================================
   CARD ARROW
========================================================== */

.em-card-arrow{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#f3f7ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

    transition:.30s;

}

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

.em-card-footer{

    margin-top:auto;

    padding-top:18px;

    border-top:1px solid #eef2f7;

    color:#2563eb;

    font-weight:600;

    font-size:15px;

}

/* ==========================================================
   CLICKABLE CARD
========================================================== */

.em-my-exam-home-card{

    cursor:pointer;

}

.em-my-exam-home-card:hover .em-card-arrow{

    transform:translateX(8px);

    background:#2563eb;

    color:#ffffff;

}

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

.em-home-card-icon{

    width:80px;

    height:80px;

    border-radius:18px;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

   font-size:40px;
    margin-bottom:25px;

}

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

.em-my-exam-home-card h3{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:#111827;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.em-my-exam-home-card p{

    margin-top:18px;

    color:#6b7280;

    font-size:17px;

    line-height:1.8;

    margin-bottom:20px;

}


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

@media (max-width:768px){

    .em-container{

        padding:0 15px;

        margin:25px auto;

    }

    /* Header */

    .em-my-exams-header{

        flex-direction:column;

        align-items:flex-start;

        padding:25px;

        gap:25px;

    }

    .em-my-exams-header-left{

        width:100%;

        align-items:flex-start;

    }

    .em-my-header-icon{

        width:65px;

        height:65px;

        font-size:30px;

        border-radius:16px;

    }

    .em-my-header-content h2{

        font-size:28px;

    }

    .em-my-header-tagline{

        font-size:14px;

    }

    .em-my-header-content p{

        font-size:15px;

        line-height:1.7;

    }

    .em-my-exams-header-right{

        width:100%;

        min-width:auto;

        text-align:center;

        padding:18px;

    }

    .em-my-exams-header-right h3{

        font-size:32px;

    }

    /* Cards */

    .em-my-exams-home-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .em-my-exam-home-card{

        padding:25px;

        min-height:auto;

    }

    .em-home-card-icon{

        width:60px;

        height:60px;

        font-size:28px;

        margin-bottom:18px;

    }

    .em-my-exam-home-card h3{

        font-size:24px;

    }

    .em-my-exam-home-card p{

        font-size:15px;

        line-height:1.6;

    }

    .em-my-exam-home-card .teacher-btn{

        width:100%;

        margin-top:20px;

    }

    /* Back Button */

    .em-page-top{

        margin-bottom:15px;

    }

    .em-page-top .teacher-btn{

        width:100%;

    }

}

/* ==========================================
CATEGORY & SUBJECT GRID
========================================== */

.em-category-browser-grid,
.em-subject-browser-grid,
.em-topic-browser-grid,
.em-exam-browser-grid{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}

/* ==========================================
CATEGORY & SUBJECT CARD
========================================== */

.em-category-card{

    min-height:120px;

    padding:20px;

}

.em-category-card h3{

    margin:0 0 8px;

    font-size:22px;

    line-height:1.3;

    word-break:break-word;

}

.em-category-card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.5;

}


/* ==========================================
SUBJECT CARD
========================================== */

.em-subject-card{

    min-height:180px;

    padding:20px;

}

.em-subject-card h3{

    margin:0 0 10px;

    font-size:22px;

    line-height:1.3;

    word-break:break-word;

}

.em-subject-card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.6;

}

.em-subject-card .em-card-top{

    margin-bottom:18px;

}

.em-subject-card .em-home-card-icon{

    width:60px;

    height:60px;

    font-size:30px;

    margin-bottom:0;

}

.em-subject-card .em-card-arrow{

    width:44px;

    height:44px;

    font-size:22px;

}

.em-subject-card .em-card-footer{

    margin-top:auto;

    font-size:14px;

}

/* ==========================================
TOPIC & EXAM CARD
========================================== */

.em-topic-card,
.em-exam-card{

    min-height:130px;

    padding:18px;

    border-radius:16px;

}

.em-topic-card h3,
.em-exam-card h3{

    margin:0 0 8px;

    font-size:20px;

    line-height:1.3;

    word-break:break-word;

}

.em-topic-card p,
.em-exam-card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.6;

}

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

.em-browser-header{

    background:linear-gradient(135deg,#eef4ff,#f8fbff);

    border:1px solid #dbeafe;

    border-left:6px solid #2563eb;

    border-radius:16px;

    padding:24px 28px;

    margin-bottom:30px;

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

}

.em-browser-header h2{

    margin:0;

    font-size:28px;

    color:#1e3a8a;

    font-weight:700;

}

.em-browser-header p{

    margin:8px 0 0;

    color:#64748b;

    font-size:15px;

}

/* ==========================================
BREADCRUMB
========================================== */

.em-browser-breadcrumb{

    display:inline-flex;

    align-items:center;

    margin:12px 0 16px;

    padding:10px 18px;

    background:#ffffff;

    border:1px solid #bfdbfe;

    border-radius:30px;

    color:#2563eb;

    font-size:15px;

    font-weight:600;

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

}

/* ==========================================
BROWSER SCREEN BACKGROUND
========================================== */

.em-my-exams-screen{

    background:#f8fafc;

    border-radius:20px;

    padding:20px;

}

/* ==========================================
   EXAM CARD META
========================================== */

.em-exam-description{

    min-height:38px;

    margin-bottom:12px !important;

}

.em-exam-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

    font-size:13px;

    font-weight:600;

}

.em-question-count{

    color:#475569;

}

.em-status{

    padding:3px 8px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.em-status.draft{

    background:#fef3c7;

    color:#92400e;

}

.em-status.published{

    background:#dcfce7;

    color:#166534;

}

.em-exam-date{

    margin-top:8px;

    font-size:12px;

    color:#94a3b8;

}

/* =====================================================
   EXAM TYPE BADGES
===================================================== */

.em-exam-type-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    margin:2px 0 12px;
    padding:5px 10px;

    border-radius:6px;

    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* Objective / MCQ */
.em-exam-type-objective{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
}

/* Subjective */
.em-exam-type-subjective{
    background:#f5f3ff;
    border:1px solid #ddd6fe;
    color:#6d28d9;
}

/* Mixed */
.em-exam-type-mixed{
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#c2410c;
}