/* ═══════════════════════════════════════════════════════════════════════════
   MathExam Pro — Public Styles
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --mep-blue:       #1a5fb4;
    --mep-blue-light: #d0e4f5;
    --mep-green:      #2d8a4e;
    --mep-red:        #c01c28;
    --mep-yellow:     #f5c211;
    --mep-grey-bg:    #f6f8fa;
    --mep-border:     #d0d7de;
    --mep-text:       #1f2328;
    --mep-radius:     8px;
}

.mep-list-container,
.mep-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
.mep-list-container *, .mep-container * { box-sizing: border-box !important; }

/* ── Back link ────────────────────────────────────────────────────────────── */
.mep-back-bar  { margin-bottom: 24px; }
.mep-back-link {
    display: inline-block !important;
    padding: 9px 18px !important;
    border: 2px solid var(--mep-border) !important;
    border-radius: var(--mep-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mep-text) !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}
.mep-back-link:hover { background: var(--mep-grey-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXAMS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.mep-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--mep-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.09);
    border: 1px solid var(--mep-border);
    background: #fff;
}

.mep-exams-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 15px !important;
    background: #fff !important;
}

.mep-table-wrap .mep-exams-table thead tr,
.mep-exams-table thead tr {
    background: #1a5fb4 !important;
    background-color: #1a5fb4 !important;
}

.mep-table-wrap .mep-exams-table thead th,
.mep-exams-table thead th {
    padding: 14px 18px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #ffffff !important;
    background: #1a5fb4 !important;
    background-color: #1a5fb4 !important;
    border: none !important;
    border-bottom: none !important;
    white-space: nowrap !important;
}

.mep-exams-table tbody tr {
    border-bottom: 1px solid #eaecef !important;
    transition: background 0.12s !important;
}
.mep-exams-table tbody tr:last-child { border-bottom: none !important; }
.mep-exams-table tbody tr:hover { background: #f3f8ff !important; }

.mep-exams-table tbody td {
    padding: 16px 18px !important;
    color: var(--mep-text) !important;
    vertical-align: middle !important;
    border: none !important;
}

.mep-td-num   { color: #888 !important; font-weight: 600 !important; width: 40px !important; }
.mep-td-title strong { display: block !important; font-size: 16px !important; font-weight: 700 !important; color: var(--mep-text) !important; }
.mep-td-desc  { display: block !important; font-size: 13px !important; color: #777 !important; margin-top: 3px !important; }
.mep-not-taken { color: #aaa !important; }

/* Score badge */
.mep-score-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.mep-grade-a { background: #d4edda !important; color: #155724 !important; }
.mep-grade-b { background: #cce5ff !important; color: #004085 !important; }
.mep-grade-c { background: #fff3cd !important; color: #856404 !important; }
.mep-grade-f { background: #f8d7da !important; color: #721c24 !important; }

/* Action buttons */
.mep-td-action {
    white-space: nowrap !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.mep-start-link {
    display: inline-block !important;
    padding: 9px 20px !important;
    background: #1a5fb4 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.15s !important;
    cursor: pointer !important;
}
.mep-start-link:hover { background: #1248a0 !important; color: #fff !important; text-decoration: none !important; }

.mep-review-link-btn {
    display: inline-block !important;
    padding: 9px 16px !important;
    background: #ffffff !important;
    color: #1a5fb4 !important;
    border: 2px solid #1a5fb4 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    line-height: 1 !important;
}
.mep-review-link-btn:hover,
.mep-review-link-btn:focus {
    background: #1a5fb4 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.mep-row-active { background: #f0f6ff !important; }
.mep-history-tr { background: #f6f8fa !important; }

/* ── Expanded history row ─────────────────────────────────────────────────── */
.mep-history-tr { background: #f6f8fa !important; }
.mep-history-td { padding: 0 !important; }
.mep-history-inner { padding: 20px 24px !important; }
.mep-history-inner > strong { display: block !important; margin-bottom: 14px !important; font-size: 15px !important; }

.mep-attempts-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    background: #fff !important;
    border-radius: var(--mep-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--mep-border) !important;
    margin-bottom: 16px !important;
}
.mep-attempts-table th {
    background: #eaecef !important;
    padding: 10px 14px !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #444 !important;
    border: none !important;
}
.mep-attempts-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #eaecef !important;
    color: var(--mep-text) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
.mep-attempts-table tr:last-child td { border-bottom: none !important; }

.mep-btn-review {
    padding: 6px 14px !important;
    background: #fff !important;
    border: 1px solid var(--mep-border) !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mep-blue) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}
.mep-btn-review:hover { background: var(--mep-blue) !important; color: #fff !important; border-color: var(--mep-blue) !important; }
.mep-btn-review:disabled { opacity: 0.5 !important; cursor: default !important; }

.mep-view-report-btn {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: #1a5fb4 !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.15s !important;
}
.mep-view-report-btn:hover { background: #1248a0 !important; color: #fff !important; text-decoration: none !important; }

.mep-list-report {
    border-top: 1px solid var(--mep-border) !important;
    padding-top: 20px !important;
}
.mep-close-report {
    display: inline-block !important;
    margin-bottom: 16px !important;
    padding: 7px 16px !important;
    background: #fff !important;
    border: 1px solid var(--mep-border) !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: var(--mep-text) !important;
}
.mep-close-report:hover { background: var(--mep-grey-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXAM TAKING UI
   ═══════════════════════════════════════════════════════════════════════════ */

.mep-container { max-width: 860px; margin: 0 auto; }

/* Start screen */
.mep-start-card {
    background: #fff;
    border: 1px solid var(--mep-border);
    border-radius: var(--mep-radius);
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.mep-start-card h2 { font-size: 26px !important; margin: 0 0 10px !important; }
.mep-desc          { color: #555; margin-bottom: 16px; }
.mep-meta-list     { list-style:none; padding:0; margin:0 0 16px; display:flex; justify-content:center; gap:24px; font-size:15px; }
.mep-instructions  { background:var(--mep-grey-bg); border-radius:var(--mep-radius); padding:12px 16px; font-size:14px; color:#555; margin-bottom:24px; text-align:left; }

/* Logged-in info */
.mep-logged-in-info {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: var(--mep-radius);
    padding: 12px 16px;
    margin: 16px 0 24px;
    font-size: 15px;
    color: #1b5e20;
}

/* Guest form */
.mep-guest-form    { display:flex; flex-direction:column; gap:14px; margin:20px 0 24px; text-align:left; }
.mep-guest-field label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.mep-guest-field input { width:100%; padding:10px 14px; border:2px solid var(--mep-border); border-radius:var(--mep-radius); font-size:15px; }
.mep-guest-field input:focus { outline:none; border-color:var(--mep-blue); }
.mep-required { color:var(--mep-red); }
.mep-start-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; border-radius:5px; padding:10px 14px; font-size:14px; font-weight:600; }

/* Buttons */
.mep-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    transition: background 0.15s !important;
    text-decoration: none !important;
}
.mep-btn:disabled { opacity:.45 !important; cursor:default !important; }
.mep-btn-primary  { background:#1a5fb4 !important; color:#fff !important; }
.mep-btn-primary:hover:not(:disabled) { background:#1248a0 !important; color:#fff !important; }
.mep-btn-secondary { background:#fff !important; color:var(--mep-text) !important; border:1px solid var(--mep-border) !important; }
.mep-btn-secondary:hover:not(:disabled) { background:var(--mep-grey-bg) !important; }
.mep-btn-submit   { background:#2d8a4e !important; color:#fff !important; }
.mep-btn-submit:hover:not(:disabled) { background:#226b3d !important; }

/* Exam header */
.mep-exam-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 2px solid var(--mep-border);
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; padding: 10px 20px; margin-bottom: 16px;
}
.mep-exam-title   { font-weight:700; font-size:16px; }
.mep-header-right { text-align:right; font-size:14px; color:#555; }
.mep-timer        { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:700; }
.mep-timer svg    { width:20px; height:20px; }
.mep-timer-warn   { color:var(--mep-red) !important; animation:mep-pulse 1s infinite; }
@keyframes mep-pulse { 0%,100%{opacity:1}50%{opacity:.5} }

/* Navigator */
.mep-nav-panel { display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px; background:var(--mep-grey-bg); border-radius:var(--mep-radius); margin-bottom:20px; }
.mep-nav-btn { width:36px; height:36px; border-radius:50%; border:2px solid var(--mep-border); background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; position:relative; }
.mep-nav-btn.mep-nav-active   { background:var(--mep-blue); color:#fff; border-color:var(--mep-blue); }
.mep-nav-btn.mep-nav-answered { background:var(--mep-blue-light); border-color:var(--mep-blue); color:var(--mep-blue); }
.mep-nav-btn.mep-nav-flagged::after { content:''; position:absolute; top:-3px; right:-3px; width:10px; height:10px; background:var(--mep-yellow); border-radius:50%; border:2px solid #fff; }

/* Question area */
.mep-question-area { background:#fff; border:1px solid var(--mep-border); border-radius:var(--mep-radius); padding:28px 32px; min-height:280px; }
.mep-question-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.mep-q-label { font-size:13px; font-weight:600; color:#555; text-transform:uppercase; letter-spacing:.05em; }

.mep-flag-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--mep-border); border-radius:5px; padding:5px 12px; font-size:13px; cursor:pointer; color:#555; }
.mep-flag-btn svg { width:14px; height:14px; }
.mep-flag-btn.mep-flagged { border-color:var(--mep-yellow); color:#8a6000; background:#fffbe6; }
.mep-flag-btn.mep-flagged svg { stroke:var(--mep-yellow); fill:var(--mep-yellow); }

.mep-question-text { font-size:18px; line-height:1.7; margin-bottom:28px; }

/* MC options */
.mep-mc-options { display:flex; flex-direction:column; gap:10px; }
.mep-option { display:flex; align-items:flex-start; gap:14px; padding:14px 18px; border:2px solid var(--mep-border); border-radius:var(--mep-radius); cursor:pointer; transition:border-color .15s, background .15s; font-size:16px; line-height:1.5; }
.mep-option:hover { border-color:var(--mep-blue); background:#f3f8ff; }
.mep-option.mep-selected { border-color:var(--mep-blue); background:var(--mep-blue-light); }
.mep-option-letter { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; min-width:28px; border-radius:50%; border:2px solid var(--mep-border); font-weight:700; font-size:14px; }
.mep-option.mep-selected .mep-option-letter { border-color:var(--mep-blue); background:var(--mep-blue); color:#fff; }

/* Grid-in */
.mep-grid-label { display:block; font-size:15px; margin-bottom:10px; }
.mep-grid-input { width:180px; font-size:24px; padding:10px 14px; border:2px solid var(--mep-border); border-radius:var(--mep-radius); text-align:center; font-weight:700; letter-spacing:.1em; }
.mep-grid-input:focus { border-color:var(--mep-blue); outline:none; }

/* Bottom nav */
.mep-nav-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 0; gap:12px; }

/* Submitting overlay */
.mep-submitting-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; display:flex; align-items:center; justify-content:center; }
.mep-submitting-box { background:#fff; border-radius:12px; padding:40px 48px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.mep-submitting-box p { margin:16px 0 0; font-size:16px; font-weight:600; }
.mep-spinner { width:44px; height:44px; border:4px solid var(--mep-blue-light); border-top-color:var(--mep-blue); border-radius:50%; animation:mep-spin .8s linear infinite; margin:0 auto; }
@keyframes mep-spin { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT
   ═══════════════════════════════════════════════════════════════════════════ */
.mep-report { max-width:820px; margin:0 auto; padding:20px 0; }
.mep-report-title { font-size:26px !important; text-align:center; margin-bottom:24px !important; }

.mep-score-panel { display:flex; align-items:center; gap:32px; justify-content:center; background:#fff; border:1px solid var(--mep-border); border-radius:var(--mep-radius); padding:28px 40px; margin-bottom:32px; flex-wrap:wrap; }
.mep-score-circle { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:6px solid var(--mep-blue); background:var(--mep-blue-light); }
.mep-score-num    { font-size:30px; font-weight:800; }
.mep-pct-sign     { font-size:15px; font-weight:400; }
.mep-score-fraction { font-size:22px; font-weight:700; margin-bottom:8px; }
.mep-grade-label  { display:inline-block; padding:4px 14px; border-radius:20px; font-weight:600; font-size:15px; }

.mep-review-heading { font-size:18px !important; margin-bottom:14px !important; }
.mep-review-list    { display:flex; flex-direction:column; gap:12px; }

.mep-review-item { background:#fff; border:1px solid var(--mep-border); border-left:5px solid var(--mep-border); border-radius:var(--mep-radius); overflow:hidden; }
.mep-r-correct   { border-left-color:var(--mep-green) !important; }
.mep-r-wrong     { border-left-color:var(--mep-red) !important; }

.mep-review-header { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--mep-grey-bg); border-bottom:1px solid var(--mep-border); font-size:14px; }
.mep-r-num  { font-weight:700; }
.mep-r-icon { font-size:16px; }
.mep-r-correct .mep-r-icon { color:var(--mep-green); }
.mep-r-wrong   .mep-r-icon { color:var(--mep-red); }
.mep-r-time  { margin-left:auto; color:#777; }
.mep-r-flag  { color:#8a6000; }

.mep-review-body    { padding:16px 20px; }
.mep-r-question     { font-size:16px; line-height:1.6; margin-bottom:14px; }
.mep-r-opt          { padding:8px 12px; margin:4px 0; border-radius:5px; font-size:15px; display:flex; gap:10px; }
.mep-r-opt span     { font-weight:700; min-width:20px; }
.mep-r-opt-correct  { background:#d4edda !important; }
.mep-r-opt-wrong    { background:#f8d7da !important; text-decoration:line-through; }
.mep-r-your-ans     { margin:8px 0 4px; font-size:14px; color:var(--mep-red); }
.mep-r-correct-ans  { margin:4px 0 8px; font-size:14px; color:var(--mep-green); }
.mep-r-unanswered   { color:#777; font-style:italic; font-size:14px; }
.mep-r-explanation  { background:#fffbe6; border-left:3px solid var(--mep-yellow); padding:10px 14px; border-radius:4px; font-size:14px; margin-top:10px; line-height:1.6; }

.mep-btn-back-to-exams { margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
    .mep-exams-table thead th:nth-child(3),
    .mep-exams-table tbody td:nth-child(3),
    .mep-exams-table thead th:nth-child(4),
    .mep-exams-table tbody td:nth-child(4) { display:none; }
    .mep-question-area { padding:18px; }
    .mep-question-text { font-size:16px; }
    .mep-start-card    { padding:24px 16px; }
    .mep-score-panel   { flex-direction:column; gap:16px; }
    .mep-td-action     { flex-direction:column; }
}