/* =========================================================
   Creator Analytics
   Uses your existing theme variables — no hard-coded colors
   ========================================================= */

.exam-builder {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Header */
.ca-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.ca-header h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--body-color);
    line-height: 1.35;
}

.ca-header h1 i {
    margin-right: 8px;
}

.ca-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--body-color);
    background: var(--body-bg);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .2s ease;
}

.ca-back:hover {
    text-decoration: none;
    opacity: .8;
}

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

.ca-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.ca-stat {
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    text-align: center;
}

.ca-stat__value {
    font-size: 1.65rem;
    line-height: 1.2;
    font-weight: 750;
    color: var(--body-color);
    margin-bottom: 7px;
}

.ca-stat__value--muted {
    opacity: .45;
}

.ca-stat__label {
    font-size: .82rem;
    color: var(--body-color);
    opacity: .65;
    font-weight: 500;
}

/* =========================================================
   Charts
   ========================================================= */

.ca-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.ca-chart-box {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.ca-chart-box > div[id] {
    width: 100%;
}

/* Empty states */
.ca-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    color: var(--body-color);
    opacity: .6;
    font-size: .92rem;
}

/* =========================================================
   Question Performance
   ========================================================= */

.exam-builder > h2 {
    color: var(--body-color);
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    margin: 0 0 14px !important;
}

.ca-questions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ca-q-row {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--body-bg);
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.ca-q-row:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.ca-q-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    cursor: pointer;
}

.ca-q-text {
    min-width: 0;
    flex: 1;
    color: var(--body-color);
    font-size: .93rem;
    line-height: 1.55;
}

.ca-q-text strong {
    font-weight: 700;
    margin-right: 5px;
}

.ca-q-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ca-q-pct {
    min-width: 48px;
    text-align: right;
    font-size: .9rem;
    font-weight: 700;
    color: var(--body-color);
}

.ca-flag {
    font-size: .95rem;
}

/* Difficulty badges */
.ca-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Keep these semantic classes tied to your existing theme.
 * If your theme already defines badge colors, these simply inherit.
 */
.ca-badge--easy,
.ca-badge--medium,
.ca-badge--hard,
.ca-badge--muted {
    background: var(--body-bg);
    color: var(--body-color);
    border: 1px solid var(--border-color);
}

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

.ca-q-options {
    display: none;
    border-top: 1px solid var(--border-color);
    padding: 15px 18px 18px;
    background: var(--body-bg);
}

.ca-q-options.open {
    display: block;
}

.ca-opt-loading {
    padding: 12px;
    text-align: center;
    color: var(--body-color);
    opacity: .6;
    font-size: .85rem;
}

.ca-opt-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 55px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    color: var(--body-color);
    font-size: .83rem;
}

.ca-opt-row + .ca-opt-row {
    border-top: 1px solid var(--border-color);
}

.ca-opt-bar-wrap {
    height: 8px;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border-color);
}

.ca-opt-bar {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: .45;
    transition: width .3s ease;
}

.ca-opt-bar.correct {
    opacity: .85;
}

.ca-opt-pct {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   Highcharts
   ========================================================= */

.ca-chart-box .highcharts-container {
    max-width: 100%;
}

.ca-chart-box .highcharts-title,
.ca-chart-box .highcharts-axis-title,
.ca-chart-box .highcharts-axis-labels text,
.ca-chart-box .highcharts-legend-item text {
    fill: var(--body-color) !important;
}

.ca-chart-box .highcharts-grid-line {
    stroke: var(--border-color);
    opacity: .65;
}

.ca-chart-box .highcharts-axis-line,
.ca-chart-box .highcharts-tick {
    stroke: var(--border-color);
}

.ca-chart-box .highcharts-button {
    fill: var(--body-bg);
    stroke: var(--border-color);
}

.ca-chart-box .highcharts-button text {
    fill: var(--body-color) !important;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .ca-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ca-charts {
        grid-template-columns: 1fr;
    }

    .ca-questions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
    .exam-builder {
        padding: 16px 12px;
    }

    .ca-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .ca-header h1 {
        font-size: 1.25rem;
    }

    .ca-back {
        width: 100%;
        justify-content: center;
    }

    .ca-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }

    .ca-stat {
        padding: 16px 10px;
        border-radius: 10px;
    }

    .ca-stat__value {
        font-size: 1.35rem;
    }

    .ca-stat__label {
        font-size: .76rem;
    }

    .ca-charts {
        gap: 12px;
        margin-bottom: 22px;
    }

    .ca-chart-box {
        padding: 12px 8px;
        border-radius: 10px;
    }

    .ca-chart-box > div[id] {
        min-height: 260px;
    }

    .exam-builder > h2 {
        font-size: 1rem !important;
        margin-bottom: 11px !important;
    }

    .ca-questions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ca-q-row {
        border-radius: 10px;
    }

    .ca-q-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .ca-q-text {
        font-size: .88rem;
    }

    .ca-q-meta {
        width: 100%;
        justify-content: space-between;
    }

    .ca-q-pct {
        margin-left: auto;
    }

    .ca-q-options {
        padding: 12px 14px 14px;
    }

    .ca-opt-row {
        grid-template-columns: 1fr auto;
        gap: 7px 10px;
        font-size: .8rem;
    }

    .ca-opt-row > div:first-child {
        width: auto !important;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .ca-opt-bar-wrap {
        grid-column: 1;
    }

    .ca-opt-pct {
        grid-column: 2;
    }
}

/* =========================================================
   Very small phones
   ========================================================= */

@media (max-width: 420px) {
    .exam-builder {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ca-stats {
        gap: 8px;
    }

    .ca-stat {
        padding: 14px 7px;
    }

    .ca-stat__value {
        font-size: 1.2rem;
    }

    .ca-stat__label {
        font-size: .7rem;
    }

    .ca-chart-box {
        padding: 8px 4px;
    }

    .ca-q-top {
        padding: 13px;
    }

    .ca-badge {
        font-size: .68rem;
        padding: 3px 7px;
    }
}
    {/literal}
</style>


<style>
    .exam-share-link-box {
    display: flex;
    gap: 8px;
}
.exam-share-link-box input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
}


/* navbar style begin here */
.exams-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-top: -30px;
    margin-bottom: 16px;
    padding: 30px 0 20px;
    background: var(--body-bg);
    border-radius: 30px 30px 0 0;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.exams-nav::-webkit-scrollbar {
    display: none;
}

.exams-nav-link {
    transform: translateY(14px);
}

.exams-nav-link:first-child {
    margin-left: 10px;
}

.exams-nav {
    overflow-x: auto;
    overflow-y: visible;
}

.exams-nav-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-color);
    background: var(--header-search-bg);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.exams-nav-link:hover {
    background: var(--border-divider-2);
}
.exams-nav-link.active {
    background: var(--main-link);
    color: var(--main-color);
}
.exams-nav-create {
    flex: 0 0 auto;
    margin-left: auto;
}

.exams-nav-create {
    background: var(--main-link) !important;
    color: var(--main-color) !important;
}

.exams-nav-create:hover {
    background: var(--main-link) !important;
    color: var(--main-color) !important;
    opacity: 0.9;
}

@media (max-width: 576px) {
    .exams-nav {
        flex-wrap: nowrap;
    }
    .exams-nav-create {
        margin-left: 0;
    }
}
/*nav bar ends here*/



/*cover image*/



.exams-cover {
    width: 100%;
    height: 530px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
}

@media (max-width: 576px) {
    .exams-cover {
         width: 100%;
    height: 330px;
    }
}

.exams-cover-overlay {
    width: 100%;
    padding: 20px 16px 30px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0)
    );
    color: #fff;
}

.exams-cover-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.exams-cover-subtitle {
    font-size: 1.1rem;
    margin: 4px 0 0;
    opacity: 0.9;
    color: #fff;
}



/*home join exam button*/
.exams-join-box {
    max-width: 480px;
    margin: 48px auto 0;
    text-align: center;
}
.exams-join-box h3 {
    margin-bottom: 6px;
}
.exams-join-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.exams-join-input {
    width: 100%;
    max-width: 280px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-divider);
    background: var(--header-search-bg);
    color: var(--body-color);
}
.exams-join-input:focus {
    outline: none;
    border-color: var(--main-link);
}
.exams-join-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: none;
    background: var(--main-link);
    color: var(--main-color);
    font-weight: 600;
    cursor: pointer;
}
.exams-join-btn:hover {
    opacity: 0.9;
}
.exams-creator-dashboard-link {
    margin-top: 40px;
    margin-bottom: 80px;
}

@media (max-width: 576px) {
   .exams-creator-dashboard-link {
    margin-top: 40px;
    margin-bottom: 40px;
}
}


/* =========================================================
   CIKAMO EXAMS — INSTRUCTIONS PAGE
   ========================================================= */

.exams-instructions {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 50px;
    color: var(--body-color);
    font-family: var(--body-font-family);
    box-sizing: border-box;
}

.exams-instructions *,
.exams-state-error * {
    box-sizing: border-box;
}


/* =========================================================
   HERO / THUMBNAIL
   ========================================================= */

.exams-instructions-thumb-wrap {
    width: 100%;
    margin: 0 0 28px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--header-search-bg);
    border: 1px solid var(--border-divider);
}

.exams-instructions-thumb {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
}

.exams-instructions-thumb-fallback {
    width: 100%;
    height: 340px;

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

    background: var(--header-search-bg);
    color: var(--body-color);

    opacity: .35;
    font-size: 60px;
}


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

.exams-instructions > h2 {
    margin: 0 0 14px;

    font-family: var(--font-family-headline);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.5px;

    color: var(--body-color);
}


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

.exams-instructions-text {
    max-width: 900px;

    margin: 0 0 28px;
    padding: 0;

    background: transparent;
    border: 0;

    color: var(--body-color);

    font-size: 16px;
    line-height: 1.75;
}


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

.exams-instructions-meta {
    width: 100%;

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

    list-style: none;

    padding: 0;
    margin: 0 0 28px;

    background: transparent;

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

    overflow: hidden;
}


/* Normal information items */

.exams-instructions-meta > li {
    position: relative;

    min-width: 0;
    min-height: 76px;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 14px 20px 14px 58px;

    color: var(--body-color);

    font-size: 14px;
    line-height: 1.45;

    border: 0;
}


/* Separators */

.exams-instructions-meta > li:not(.exams-warning):not(:nth-last-child(1)) {
    border-right: 1px solid var(--border-divider);
}


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

.exams-instructions-meta > li::before {
    position: absolute;

    left: 20px;
    top: 50%;

    width: 28px;
    height: 28px;

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

    transform: translateY(-50%);

    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;

    color: var(--main-link);
}


/* Duration */

.exams-instructions-meta > li:nth-child(1)::before {
    content: "\f017";
}


/* Attempts */

.exams-instructions-meta > li:nth-child(2)::before {
    content: "\f2f1";
}


/* Closing date */

.exams-instructions-meta > li:nth-child(3)::before {
    content: "\f073";
}


/* =========================================================
   LOCKDOWN WARNING
   IMPORTANT:
   This is also a LI, so isolate it from the 3-column layout.
   ========================================================= */

.exams-instructions-meta > li.exams-warning {
    grid-column: 1 / -1;

    display: block;

    min-height: auto;

    padding: 14px 18px 14px 48px;

    border-top: 1px solid rgba(201, 151, 31, .18);
    border-right: 0 !important;

    background: rgba(201, 151, 31, .07);

    color: #b58213;

    font-size: 14px;
    line-height: 1.55;
}

.exams-instructions-meta > li.exams-warning::before {
    content: "\f071";

    left: 18px;

    color: #c9971f;
    font-size: 15px;
}

.exams-instructions-meta > li.exams-warning::after {
    display: none;
}


/* =========================================================
   EXISTING ATTEMPT
   ========================================================= */

.exams-notice {
    margin: 0 0 18px;
    padding: 0;

    background: transparent;
    border: 0;

    color: var(--body-color);

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   STUDENT ID / NAME
   ========================================================= */

.exams-identifier-block,
.exams-name-block {
    width: 100%;

    margin: 16px 0;
    padding: 14px 16px;

    background: var(--header-search-bg);
    border: 1px solid var(--border-divider);
    border-radius: 11px;
}

.exams-identifier-confirm,
.exams-name-confirm {
    margin: 0;

    color: var(--body-color);

    font-size: 14px;
    line-height: 1.5;
}

.exams-identifier-confirm strong,
.exams-name-confirm strong {
    font-weight: 700;
}

.exams-identifier-confirm a,
.exams-name-confirm a {
    margin-left: 8px;

    color: var(--main-link);

    font-weight: 600;
    text-decoration: none;
}

.exams-identifier-confirm a:hover,
.exams-name-confirm a:hover {
    text-decoration: underline;
}


/* =========================================================
   OFFICIAL NAME HINT
   ========================================================= */

.exams-name-hint {
    margin: 16px 0;
    padding: 12px 0;

    background: transparent;
    border: 0;

    color: var(--body-color);

    font-size: 13px;
    line-height: 1.6;
}

.exams-name-hint a {
    color: var(--main-link);
    font-weight: 600;
    text-decoration: none;
}

.exams-name-hint a:hover {
    text-decoration: underline;
}


/* =========================================================
   GUEST
   ========================================================= */

.exams-guest-cta {
    margin-top: 20px;
    padding: 0;

    background: transparent;
    border: 0;

    text-align: left;
}

.exams-guest-cta .exams-notice {
    margin-bottom: 14px;
}


/* =========================================================
   BEGIN / RESUME
   ========================================================= */

.exams-instructions form {
    margin-top: 22px;
}

#exams-begin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 165px;
    min-height: 44px;

    padding: 9px 20px;

    border: 0;
    border-radius: 8px;

    background: var(--main-btn);
    color: var(--main-color);

    font-family: var(--body-font-family);
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        opacity .15s ease,
        transform .15s ease;
}

#exams-begin-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

#exams-begin-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   ERROR STATE
   ========================================================= */

.exams-state-error {
    width: 100%;
    max-width: 760px;

    margin: 30px auto;
    padding: 24px;

    background: var(--header-search-bg);
    border: 1px solid var(--border-divider);
    border-radius: 15px;

    color: var(--body-color);

    text-align: center;

    font-size: 14px;
    line-height: 1.6;

    box-sizing: border-box;
}

.exams-state-error p {
    margin: 0 0 14px;
}

.exams-state-error p:last-child {
    margin-bottom: 0;
}

.exams-state-error .exams-error {
    color: #dc3545;
    font-weight: 600;
}


/* =========================================================
   PASSWORD FORM
   ========================================================= */

.exams-state-error form {
    display: flex;
    gap: 10px;

    width: 100%;
    max-width: 440px;

    margin: 18px auto 0;
}

.exams-state-error input[type="password"] {
    flex: 1;
    min-width: 0;

    padding: 10px 13px;

    border: 1px solid var(--border-divider);
    border-radius: 8px;

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

    font-family: var(--body-font-family);
    font-size: 14px;
}

.exams-state-error input[type="password"]:focus {
    outline: none;
    border-color: var(--main-link);
}

.exams-state-error button {
    padding: 9px 17px;

    border: 0;
    border-radius: 8px;

    background: var(--main-btn);
    color: var(--main-color);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .exams-instructions {
        max-width: 100%;
        padding: 22px 20px 45px;
    }

    .exams-instructions-thumb {
        height: 300px;
    }

    .exams-instructions-thumb-fallback {
        height: 300px;
    }

    .exams-instructions > h2 {
        font-size: 30px;
    }

    .exams-instructions-text {
        font-size: 15px;
    }
}


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

@media (max-width: 767px) {

    .exams-instructions {
        width: 100%;
        max-width: 100%;
        padding: 14px 14px 35px;
    }


    /* Hero */

    .exams-instructions-thumb-wrap {
        margin-bottom: 20px;
        border-radius: 14px;
    }

    .exams-instructions-thumb,
    .exams-instructions-thumb-fallback {
        height: 210px;
    }


    /* Title */

    .exams-instructions > h2 {
        margin-bottom: 11px;

        font-size: 25px;
        line-height: 1.2;
        letter-spacing: -.35px;
    }


    /* Instructions */

    .exams-instructions-text {
        margin-bottom: 23px;

        font-size: 15px;
        line-height: 1.7;
    }


    /* Meta becomes vertical */

    .exams-instructions-meta {
        display: block;

        margin-bottom: 23px;
    }

    .exams-instructions-meta > li {
        display: flex;

        width: 100%;
        min-height: 58px;

        padding: 12px 14px 12px 52px;

        border-right: 0 !important;
        border-bottom: 1px solid var(--border-divider);
    }

    .exams-instructions-meta > li:last-child {
        border-bottom: 0;
    }

    .exams-instructions-meta > li::before {
        left: 16px;
        width: 26px;
        height: 26px;

        font-size: 15px;
    }


    /* Lockdown */

    .exams-instructions-meta > li.exams-warning {
        padding: 13px 14px 13px 46px;

        font-size: 13px;
    }

    .exams-instructions-meta > li.exams-warning::before {
        left: 15px;
    }


    /* Notices */

    .exams-notice {
        font-size: 14px;
    }


    /* Identifier / name */

    .exams-identifier-block,
    .exams-name-block {
        margin: 13px 0;
        padding: 13px 14px;
    }

    .exams-identifier-confirm,
    .exams-name-confirm {
        font-size: 14px;
    }


    /* Name hint */

    .exams-name-hint {
        font-size: 13px;
    }


    /* Button */

    .exams-instructions form {
        margin-top: 20px;
    }

    #exams-begin-btn {
        width: 100%;
        min-height: 45px;

        border-radius: 8px;

        font-size: 14px;
    }


    /* Error */

    .exams-state-error {
        width: calc(100% - 24px);

        margin: 22px auto;
        padding: 21px 16px;
    }

    .exams-state-error form {
        flex-direction: column;
    }

    .exams-state-error button {
        width: 100%;
        min-height: 43px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .exams-instructions {
        padding-left: 12px;
        padding-right: 12px;
    }

    .exams-instructions-thumb,
    .exams-instructions-thumb-fallback {
        height: 185px;
    }

    .exams-instructions > h2 {
        font-size: 23px;
    }

    .exams-instructions-text {
        font-size: 14px;
    }
}


/*the students dashboard*/

/*overview*/
.exams-overview-caption {
    font-size: 16px;
    font-weight: 700;
    color: var(--body-color);
    margin-bottom: 10px;
}


.exams-overview {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 6px;
    margin-bottom: 24px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.exams-overview::-webkit-scrollbar {
    display: none;
}

.exams-overview .stat {
    flex: 1 1 160px;
    min-width: 140px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--header-search-bg);
    border-radius: 14px;
    padding: 14px 16px;
}

.exams-overview .stat-icon {
    font-size: 20px;
    color: var(--main-link);
    flex-shrink: 0;
}

.exams-overview .stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.exams-overview .stat-info span {
    font-size: 20px;
    font-weight: 700;
    color: var(--body-color);
    line-height: 1.2;
}

.exams-overview .stat-info small {
    font-size: 12px;
    color: var(--body-color);
    opacity: 0.7;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .exams-overview .stat {
        flex: 1 1 calc(50% - 6px);
    }
}


/*dashboard tabs*/
.exams-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border-divider);
    margin: 0 16px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.exams-tabs::-webkit-scrollbar {
    display: none;
}

.exams-tabs .tab-link {
    padding: 10px 2px;
    font-weight: 600;
    font-size: 15px;
    color: var(--body-color);
    opacity: 0.6;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}

.exams-tabs .tab-link.active {
    color: var(--main-link);
    opacity: 1;
    border-bottom-color: var(--main-link);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}


/* =========================
   EXAM CARDS
   ========================= */

.exams-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin: 24px 18px 32px;
}

/* Give the grid more breathing room on larger screens */
@media (min-width: 992px) {
    .exams-card-grid {
        margin-left: 28px;
        margin-right: 28px;
    }
}

@media (min-width: 1400px) {
    .exams-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
        margin-left: 36px;
        margin-right: 36px;
    }
}


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

.exam-card {
    background: var(--header-search-bg);
    border: 1px solid var(--border-divider);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


/* =========================
   THUMBNAIL
   ========================= */

.exam-card-thumb {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

.exam-card-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 175px;
    background: var(--border-divider);
    color: var(--body-color);
    opacity: 0.5;
    font-size: 40px;
    flex-shrink: 0;
}

.exam-card-thumb--placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================
   CARD BODY
   ========================= */

.exam-card-body {
    padding: 17px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.exam-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--body-color);
}

.exam-card-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--body-color);
    opacity: 0.78;
}


/* =========================
   EXAM INFORMATION
   ========================= */

/*
 * Makes information such as:
 * Objective · Duration
 * Attempts: 1 / 3
 * Opens: ...
 * feel more like structured
 * exam metadata instead of plain text.
 */

.exam-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.exam-card-meta + .exam-card-meta {
    margin-top: 1px;
}


/* =========================
   BADGES / INFORMATION CHIPS
   ========================= */

.exam-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 5px 0 2px;
}

.exam-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-divider);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}


/* Neutral information */

.exam-badge-neutral {
    background: rgba(127, 127, 127, 0.07);
    color: var(--body-color);
}

.exam-badge-neutral:hover {
    background: rgba(127, 127, 127, 0.13);
}


/* Password */

.exam-badge-warning {
    background: rgba(201, 151, 31, 0.12);
    border-color: rgba(201, 151, 31, 0.25);
    color: #c9971f;
}


/* Pending grading */

.exam-badge-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(201, 151, 31, 0.10);
    border: 1px solid rgba(201, 151, 31, 0.20);
    color: #c9971f;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
}

.exam-badge-pending i {
    font-size: 10px;
}


/* =========================
   ATTEMPT STATUS
   ========================= */

.exam-badge-status-submitted,
.exam-badge-status-auto_submitted {
    background: rgba(40, 167, 69, 0.10);
    border-color: rgba(40, 167, 69, 0.20);
    color: #28a745;
}

.exam-badge-status-in_progress {
    background: rgba(0, 123, 255, 0.10);
    border-color: rgba(0, 123, 255, 0.20);
    color: #007bff;
}

.exam-badge-status-terminated {
    background: rgba(220, 53, 69, 0.10);
    border-color: rgba(220, 53, 69, 0.20);
    color: #dc3545;
}


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

.exam-card-btn {
    margin-top: 7px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--main-link);
    color: var(--main-color);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.exam-card-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* Secondary button */

.exam-card-btn-secondary {
    background: var(--header-search-bg);
    color: var(--body-color);
    border: 1px solid var(--border-divider);
}

.exam-card-btn-secondary:hover {
    background: var(--border-divider);
    opacity: 1;
}


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

@media (max-width: 767px) {
    .exams-card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 20px 12px 28px;
    }

    .exam-card-thumb {
        height: 185px;
    }

    .exam-card-body {
        padding: 17px 17px 18px;
    }

    .exam-card-title {
        font-size: 17px;
    }

    .exam-card-meta {
        font-size: 13px;
    }
}


/* Small phones */

@media (max-width: 576px) {
    .exams-card-grid {
        margin-left: 10px;
        margin-right: 10px;
    }

    .exam-card-thumb {
        height: 180px;
    }
}


/* =========================
   EXAM HISTORY INFORMATION
   ========================= */

.exam-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 3px;
}

.exam-history-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--body-color);
    font-size: 14px;
}

.exam-history-info strong {
    font-weight: 700;
}

.exam-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.08);
    font-size: 14px;
}


/* =========================
   HISTORY STATUS
   ========================= */

.exam-history-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.exam-history-status-submitted,
.exam-history-status-auto_submitted {
    background: rgba(40, 167, 69, 0.10);
    color: #28a745;
}

.exam-history-status-terminated {
    background: rgba(220, 53, 69, 0.10);
    color: #dc3545;
}

.exam-history-status-in_progress {
    background: rgba(0, 123, 255, 0.10);
    color: #007bff;
}


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

.exam-history-score {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    color: var(--body-color);
    font-size: 14px;
}

.exam-history-score strong {
    font-weight: 750;
}


/* Awaiting grading */

.exam-history-score-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
}


/* =========================
   VIEW RESULT BUTTON
   ========================= */

.exam-card-btn-result {
    background: #007bff;
    color: #fff;
    border: 1px solid #007bff;
}

.exam-card-btn-result:hover {
    background: #0069d9;
    color: #fff;
    opacity: 1;
}


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

@media (max-width: 576px) {

    .exam-history-row {
        align-items: flex-start;
    }

    .exam-history-status {
        font-size: 10px;
        padding: 5px 8px;
    }

    .exam-history-info,
    .exam-history-score {
        font-size: 13px;
    }
}

/* =========================
   EXAM INFO ITEMS
   ========================= */

.exam-info-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 2px;
}

.exam-info-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    font-size: 13px;
    color: var(--body-color);
    opacity: 0.82;
}

.exam-info-item > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.08);
    font-size: 13px;
}

.exam-info-item strong {
    font-weight: 700;
    opacity: 1;
}


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

.exam-badge {
    gap: 7px;
}

.exam-badge > i {
    font-size: 12px;
    opacity: 0.8;
}

.exam-badge strong {
    font-weight: 750;
}


/* =========================
   HISTORY ICONS
   ========================= */

.exam-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.08);
    font-size: 13px;
}

.exam-info-icon i {
    font-size: 13px;
}


/* =========================
   HISTORY SCORE
   ========================= */

.exam-history-score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 14px;
}

.exam-history-score strong {
    font-weight: 750;
}


/* =========================
   AWAITING GRADING
   ========================= */

.exam-history-score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}


/* =========================
   VIEW RESULT
   ========================= */

.exam-card-btn-result {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.exam-card-btn-result:hover {
    background: #0069d9;
    color: #fff;
    border-color: #0069d9;
}

.exam-card-btn i {
    margin-right: 6px;
}


/*
 * Exam Builder standalone CSS
 * Tailwind CDN removed.
 * Primary brand color follows the site's existing --main-link / --main-btn.
 */

.exam-builder-app,
.exam-builder-app *,
.exam-builder-app *::before,
.exam-builder-app *::after {
  box-sizing: border-box;
}

.exam-builder-app {
  font-family: var(--body-font-family);
  color: var(--body-color);
  background: var(--body-bg);
  min-height: 100vh;
  position: relative;
  letter-spacing: -0.2px;
  padding-bottom: 6rem;
  line-height: 1.5;
}

.exam-builder-app a {
  color: inherit;
  text-decoration: none;
}

.exam-builder-app button,
.exam-builder-app input,
.exam-builder-app select,
.exam-builder-app textarea {
  font: inherit;
}

.exam-builder-app .headline-font {
  font-family: var(--font-family-headline);
}

.exam-builder-app .body-color {
  color: var(--body-color);
}

/* ---------- Layout / spacing ---------- */
.exam-builder-app .min-h-screen { min-height: 100vh; }
.exam-builder-app .w-full { width: 100%; }
.exam-builder-app .h-full { height: 100%; }
.exam-builder-app .max-w-7xl { max-width: 80rem; }
.exam-builder-app .max-w-md { max-width: 28rem; }
.exam-builder-app .max-w-lg { max-width: 32rem; }
.exam-builder-app .min-w-0 { min-width: 0; }
.exam-builder-app .min-h-\[140px\] { min-height: 140px; }
.exam-builder-app .w-4 { width: 1rem; }
.exam-builder-app .w-6 { width: 1.5rem; }
.exam-builder-app .w-7 { width: 1.75rem; }
.exam-builder-app .w-8 { width: 2rem; }
.exam-builder-app .w-10 { width: 2.5rem; }
.exam-builder-app .w-14 { width: 3.5rem; }
.exam-builder-app .w-16 { width: 4rem; }
.exam-builder-app .w-24 { width: 6rem; }
.exam-builder-app .w-32 { width: 8rem; }
.exam-builder-app .w-36 { width: 9rem; }
.exam-builder-app .h-4 { height: 1rem; }
.exam-builder-app .h-6 { height: 1.5rem; }
.exam-builder-app .h-7 { height: 1.75rem; }
.exam-builder-app .h-8 { height: 2rem; }
.exam-builder-app .h-10 { height: 2.5rem; }
.exam-builder-app .h-14 { height: 3.5rem; }
.exam-builder-app .h-16 { height: 4rem; }
.exam-builder-app .h-32 { height: 8rem; }
.exam-builder-app .h-40 { height: 10rem; }

.exam-builder-app .p-1\.5 { padding: .375rem; }
.exam-builder-app .p-2 { padding: .5rem; }
.exam-builder-app .p-2\.5 { padding: .625rem; }
.exam-builder-app .p-3 { padding: .75rem; }
.exam-builder-app .p-4 { padding: 1rem; }
.exam-builder-app .p-5 { padding: 1.25rem; }
.exam-builder-app .p-6 { padding: 1.5rem; }
.exam-builder-app .p-8 { padding: 2rem; }
.exam-builder-app .p-12 { padding: 3rem; }

.exam-builder-app .px-1 { padding-left: .25rem; padding-right: .25rem; }
.exam-builder-app .px-2 { padding-left: .5rem; padding-right: .5rem; }
.exam-builder-app .px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.exam-builder-app .px-3 { padding-left: .75rem; padding-right: .75rem; }
.exam-builder-app .px-3\.5 { padding-left: .875rem; padding-right: .875rem; }
.exam-builder-app .px-4 { padding-left: 1rem; padding-right: 1rem; }
.exam-builder-app .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.exam-builder-app .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.exam-builder-app .py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.exam-builder-app .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.exam-builder-app .py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.exam-builder-app .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.exam-builder-app .py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.exam-builder-app .py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.exam-builder-app .py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }

.exam-builder-app .pt-4 { padding-top: 1rem; }
.exam-builder-app .pt-6 { padding-top: 1.5rem; }
.exam-builder-app .pb-3 { padding-bottom: .75rem; }
.exam-builder-app .pb-4 { padding-bottom: 1rem; }
.exam-builder-app .pb-24 { padding-bottom: 6rem; }
.exam-builder-app .pb-px { padding-bottom: 1px; }
.exam-builder-app .pr-2 { padding-right: .5rem; }

.exam-builder-app .m-0 { margin: 0; }
.exam-builder-app .mx-auto { margin-left: auto; margin-right: auto; }
.exam-builder-app .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.exam-builder-app .mb-1 { margin-bottom: .25rem; }
.exam-builder-app .mb-2 { margin-bottom: .5rem; }
.exam-builder-app .mb-3 { margin-bottom: .75rem; }
.exam-builder-app .mb-4 { margin-bottom: 1rem; }
.exam-builder-app .mb-5 { margin-bottom: 1.25rem; }
.exam-builder-app .mb-6 { margin-bottom: 1.5rem; }
.exam-builder-app .mb-8 { margin-bottom: 2rem; }
.exam-builder-app .mt-0\.5 { margin-top: .125rem; }
.exam-builder-app .mt-1 { margin-top: .25rem; }
.exam-builder-app .mt-3 { margin-top: .75rem; }
.exam-builder-app .ml-auto { margin-left: auto; }
.exam-builder-app .mr-1 { margin-right: .25rem; }
.exam-builder-app .mr-1\.5 { margin-right: .375rem; }
.exam-builder-app .mr-2 { margin-right: .5rem; }

.exam-builder-app .gap-1 { gap: .25rem; }
.exam-builder-app .gap-1\.5 { gap: .375rem; }
.exam-builder-app .gap-2 { gap: .5rem; }
.exam-builder-app .gap-2\.5 { gap: .625rem; }
.exam-builder-app .gap-3 { gap: .75rem; }
.exam-builder-app .gap-4 { gap: 1rem; }
.exam-builder-app .gap-6 { gap: 1.5rem; }

.exam-builder-app .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.exam-builder-app .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.exam-builder-app .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .625rem; }
.exam-builder-app .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.exam-builder-app .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.exam-builder-app .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.exam-builder-app .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.exam-builder-app .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: .5rem; }

.exam-builder-app .grid { display: grid; }
.exam-builder-app .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.exam-builder-app .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exam-builder-app .flex { display: flex; }
.exam-builder-app .inline-flex { display: inline-flex; }
.exam-builder-app .flex-1 { flex: 1 1 0%; }
.exam-builder-app .flex-col { flex-direction: column; }
.exam-builder-app .flex-wrap { flex-wrap: wrap; }
.exam-builder-app .items-center { align-items: center; }
.exam-builder-app .items-start { align-items: flex-start; }
.exam-builder-app .justify-between { justify-content: space-between; }
.exam-builder-app .justify-center { justify-content: center; }
.exam-builder-app .justify-end { justify-content: flex-end; }
.exam-builder-app .shrink-0 { flex-shrink: 0; }

.exam-builder-app .block { display: block; }
.exam-builder-app .hidden { display: none; }
.exam-builder-app .relative { position: relative; }
.exam-builder-app .absolute { position: absolute; }
.exam-builder-app .fixed { position: fixed; }
.exam-builder-app .inset-0 { inset: 0; }
.exam-builder-app .left-0 { left: 0; }
.exam-builder-app .right-0 { right: 0; }
.exam-builder-app .right-3 { right: .75rem; }
.exam-builder-app .top-3 { top: .75rem; }
.exam-builder-app .top-full { top: 100%; }
.exam-builder-app .z-20 { z-index: 20; }
.exam-builder-app .z-\[9999\] { z-index: 9999; }
.exam-builder-app .overflow-hidden { overflow: hidden; }
.exam-builder-app .overflow-x-auto { overflow-x: auto; }
.exam-builder-app .overflow-y-auto { overflow-y: auto; }
.exam-builder-app .whitespace-nowrap { white-space: nowrap; }
.exam-builder-app .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-builder-app .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.exam-builder-app .object-cover { object-fit: cover; }
.exam-builder-app .cursor-pointer { cursor: pointer; }
.exam-builder-app .cursor-not-allowed { cursor: not-allowed; }
.exam-builder-app .min-h-\[140px\] { min-height: 140px; }

/* ---------- Typography ---------- */
.exam-builder-app .text-xs { font-size: .75rem; line-height: 1rem; }
.exam-builder-app .text-sm { font-size: .875rem; line-height: 1.25rem; }
.exam-builder-app .text-base { font-size: 1rem; line-height: 1.5rem; }
.exam-builder-app .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.exam-builder-app .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.exam-builder-app .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.exam-builder-app .font-normal { font-weight: 400; }
.exam-builder-app .font-medium { font-weight: 500; }
.exam-builder-app .font-semibold { font-weight: 600; }
.exam-builder-app .font-bold { font-weight: 700; }
.exam-builder-app .font-extrabold { font-weight: 800; }
.exam-builder-app .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.exam-builder-app .text-center { text-align: center; }
.exam-builder-app .text-left { text-align: left; }
.exam-builder-app .text-right { text-align: right; }
.exam-builder-app .uppercase { text-transform: uppercase; }
.exam-builder-app .capitalize { text-transform: capitalize; }
.exam-builder-app .tracking-tight { letter-spacing: -.025em; }
.exam-builder-app .tracking-wide { letter-spacing: .025em; }
.exam-builder-app .tracking-wider { letter-spacing: .05em; }
.exam-builder-app .leading-relaxed { line-height: 1.625; }
.exam-builder-app .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Borders / radius ---------- */
.exam-builder-app .border { border: 1px solid var(--border-divider-2); }
.exam-builder-app .border-2 { border: 2px solid var(--border-divider-2); }
.exam-builder-app .border-b { border-bottom: 1px solid var(--border-divider); }
.exam-builder-app .border-t { border-top: 1px solid var(--border-divider); }
.exam-builder-app .border-b-2 { border-bottom: 2px solid var(--border-divider); }
.exam-builder-app .border-dashed { border-style: dashed; }
.exam-builder-app .rounded { border-radius: .25rem; }
.exam-builder-app .rounded-md { border-radius: .375rem; }
.exam-builder-app .rounded-lg { border-radius: .5rem; }
.exam-builder-app .rounded-xl { border-radius: .75rem; }
.exam-builder-app .rounded-2xl { border-radius: 1rem; }
.exam-builder-app .rounded-full { border-radius: 9999px; }

/* ---------- Theme colors ---------- */
.exam-builder-app .bg-white { background-color: var(--header-background); }
.exam-builder-app .bg-slate-50 { background-color: var(--header-search-bg); }
.exam-builder-app .bg-slate-50\/80 { background-color: color-mix(in srgb, var(--header-search-bg) 80%, transparent); }
.exam-builder-app .bg-slate-100 { background-color: color-mix(in srgb, var(--header-search-bg) 78%, var(--body-bg)); }
.exam-builder-app .bg-slate-900\/60 { background-color: color-mix(in srgb, var(--body-color) 60%, transparent); }
.exam-builder-app .bg-indigo-50,
.exam-builder-app .bg-indigo-100,
.exam-builder-app .bg-indigo-50\/60 { background-color: color-mix(in srgb, var(--main-link) 10%, var(--body-bg)); }
.exam-builder-app .bg-indigo-600 { background-color: var(--main-btn); }
.exam-builder-app .bg-emerald-50,
.exam-builder-app .bg-emerald-100,
.exam-builder-app .bg-emerald-50\/70,
.exam-builder-app .bg-amber-50,
.exam-builder-app .bg-amber-100,
.exam-builder-app .bg-rose-50 { background-color: color-mix(in srgb, var(--main-link) 10%, var(--body-bg)); }
.exam-builder-app .bg-emerald-500\/90,
.exam-builder-app .bg-amber-500\/90,
.exam-builder-app .bg-rose-500,
.exam-builder-app .bg-rose-600 { background-color: var(--main-btn); }

.exam-builder-app .text-white { color: var(--main-color); }
.exam-builder-app .text-slate-300 { color: color-mix(in srgb, var(--body-color) 42%, transparent); }
.exam-builder-app .text-slate-400 { color: color-mix(in srgb, var(--body-color) 55%, transparent); }
.exam-builder-app .text-slate-500 { color: color-mix(in srgb, var(--body-color) 62%, transparent); }
.exam-builder-app .text-slate-600 { color: color-mix(in srgb, var(--body-color) 72%, transparent); }
.exam-builder-app .text-slate-700 { color: color-mix(in srgb, var(--body-color) 82%, transparent); }
.exam-builder-app .text-slate-800,
.exam-builder-app .text-slate-900 { color: var(--body-color); }
.exam-builder-app .text-indigo-500,
.exam-builder-app .text-indigo-600,
.exam-builder-app .text-indigo-700,
.exam-builder-app .text-indigo-900,
.exam-builder-app .text-emerald-500,
.exam-builder-app .text-emerald-600,
.exam-builder-app .text-emerald-700,
.exam-builder-app .text-emerald-800,
.exam-builder-app .text-emerald-900,
.exam-builder-app .text-amber-500,
.exam-builder-app .text-amber-800,
.exam-builder-app .text-rose-500,
.exam-builder-app .text-rose-700,
.exam-builder-app .text-rose-800 { color: var(--main-link); }

.exam-builder-app .bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--header-search-bg), color-mix(in srgb, var(--main-link) 8%, transparent));
}

/* ---------- Theme borders ---------- */
.exam-builder-app .border-slate-100 { border-color: var(--border-divider); }
.exam-builder-app .border-slate-200 { border-color: var(--border-divider); }
.exam-builder-app .border-slate-300 { border-color: var(--border-divider-2); }
.exam-builder-app .border-indigo-100,
.exam-builder-app .border-indigo-200,
.exam-builder-app .border-indigo-600 { border-color: var(--main-link); }
.exam-builder-app .border-emerald-200,
.exam-builder-app .border-rose-200,
.exam-builder-app .border-amber-200 { border-color: var(--border-divider); }
.exam-builder-app .border-t-transparent { border-top-color: transparent; }

/* ---------- Shadows / effects ---------- */
.exam-builder-app .shadow-sm { box-shadow: 0 1px 2px color-mix(in srgb, var(--body-color) 7%, transparent); }
.exam-builder-app .shadow-md { box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--body-color) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--body-color) 10%, transparent); }
.exam-builder-app .shadow-lg { box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--body-color) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--body-color) 10%, transparent); }
.exam-builder-app .shadow-2xl { box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--body-color) 25%, transparent); }
.exam-builder-app .shadow-indigo-600\/20 { box-shadow: 0 4px 12px color-mix(in srgb, var(--main-link) 20%, transparent); }
.exam-builder-app .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.exam-builder-app .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.exam-builder-app .transform { transform: translateZ(0); }

/* ---------- Transitions / hover / focus ---------- */
.exam-builder-app .transition,
.exam-builder-app .transition-all { transition: all .15s ease; }
.exam-builder-app .duration-150 { transition-duration: .15s; }
.exam-builder-app .duration-200 { transition-duration: .2s; }
.exam-builder-app .duration-300 { transition-duration: .3s; }
.exam-builder-app .hover\:bg-white:hover { background-color: var(--header-background); }
.exam-builder-app .hover\:bg-slate-50:hover { background-color: var(--header-search-bg); }
.exam-builder-app .hover\:bg-slate-100:hover,
.exam-builder-app .hover\:bg-slate-200:hover,
.exam-builder-app .hover\:bg-slate-50\/50:hover { background-color: color-mix(in srgb, var(--header-search-bg) 85%, var(--body-bg)); }
.exam-builder-app .hover\:bg-indigo-100:hover,
.exam-builder-app .hover\:bg-indigo-700:hover { background-color: color-mix(in srgb, var(--main-btn) 88%, var(--body-bg)); }
.exam-builder-app .hover\:bg-emerald-50:hover,
.exam-builder-app .hover\:bg-rose-100:hover { background-color: color-mix(in srgb, var(--main-link) 12%, var(--body-bg)); }
.exam-builder-app .hover\:bg-rose-700:hover { background-color: var(--main-btn); }
.exam-builder-app .hover\:text-slate-900:hover { color: var(--body-color); }
.exam-builder-app .hover\:text-indigo-800:hover,
.exam-builder-app .hover\:text-emerald-800:hover,
.exam-builder-app .hover\:text-rose-600:hover { color: var(--main-link); }
.exam-builder-app .hover\:underline:hover { text-decoration: underline; }
.exam-builder-app .hover\:border-slate-300:hover { border-color: var(--border-divider-2); }
.exam-builder-app .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--body-color) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--body-color) 10%, transparent); }
.exam-builder-app .focus\:ring-2:focus,
.exam-builder-app .focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-link) 18%, transparent); }
.exam-builder-app .focus\:border-indigo-500:focus { border-color: var(--main-link); }
.exam-builder-app .active\:scale-95:active { transform: scale(.95); }
.exam-builder-app .active\:scale-\[0\.98\]:active { transform: scale(.98); }
.exam-builder-app .disabled\:opacity-50:disabled { opacity: .5; }
.exam-builder-app .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.exam-builder-app .group-hover\:scale-105 { transition: transform .3s ease; }
.exam-builder-app .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.exam-builder-app .group-hover\:text-indigo-600 { transition: color .15s ease; }
.exam-builder-app .group:hover .group-hover\:text-indigo-600 { color: var(--main-link); }
.exam-builder-app .placeholder-slate-400::placeholder { color: color-mix(in srgb, var(--body-color) 55%, transparent); }
.exam-builder-app .empty\:hidden:empty { display: none; }

/* ---------- Components ---------- */
.exam-builder-app .exam-card {
  min-height: 0;
}

.exam-builder-app input,
.exam-builder-app select,
.exam-builder-app textarea {
  color: var(--body-color);
  background-color: var(--main-color);
}

.exam-builder-app input:focus,
.exam-builder-app select:focus,
.exam-builder-app textarea:focus {
  outline: 0;
}

.exam-builder-app .btn-secondary {
  color: var(--body-color);
  background: var(--header-background);
  border: 1px solid var(--border-divider-2);
}

.exam-builder-app .loader {
  border-style: solid;
}

.exam-builder-app .loader_small {
  width: 1.5rem;
  height: 1.5rem;
}

.exam-builder-app .inline-form {
  display: inline;
}

.exam-builder-app .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top: 1px solid var(--body-color);
}

.exam-builder-app .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-divider);
}

/* ---------- Animation ---------- */
@keyframes exam-spin {
  to { transform: rotate(360deg); }
}
.exam-builder-app .animate-spin {
  animation: exam-spin 1s linear infinite;
}

@keyframes exam-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.exam-builder-app .fade-in {
  animation: exam-fade-in .15s ease-out both;
}

@keyframes exam-zoom-in {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.exam-builder-app .zoom-in-95 {
  animation: exam-zoom-in .15s ease-out both;
}

.exam-builder-app .animate-in {
  animation-duration: .15s;
  animation-fill-mode: both;
}

/* ---------- Responsive equivalents ---------- */
@media (min-width: 640px) {
  .exam-builder-app .sm\:flex-row { flex-direction: row; }
  .exam-builder-app .sm\:items-center { align-items: center; }
  .exam-builder-app .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-builder-app .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-builder-app .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exam-builder-app .sm\:gap-6 { gap: 1.5rem; }
  .exam-builder-app .sm\:p-8 { padding: 2rem; }
  .exam-builder-app .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .exam-builder-app .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .exam-builder-app .sm\:w-80 { width: 20rem; }
}

@media (min-width: 768px) {
  .exam-builder-app .md\:flex-row { flex-direction: row; }
  .exam-builder-app .md\:items-center { align-items: center; }
  .exam-builder-app .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-builder-app .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-builder-app .md\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1024px) {
  .exam-builder-app .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-builder-app .lg\:pb-12 { padding-bottom: 3rem; }
  .exam-builder-app .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* ---------- Mobile card sizing ----------
 * Cards are intentionally larger on phones as requested.
 */
@media (max-width: 767.98px) {
  .exam-builder-app {
    padding-bottom: 6rem;
  }

  .exam-builder-app .exam-card {
    min-height: 420px;
    border-radius: 1.125rem;
  }

  .exam-builder-app .exam-card > div:first-child {
    flex: 1;
  }

  .exam-builder-app .exam-card .h-40 {
    height: 12rem;
  }

  .exam-builder-app .exam-card .h-32 {
    height: 10rem;
  }

  .exam-builder-app .exam-card .p-5 {
    padding: 1.5rem;
  }

  .exam-builder-app .exam-card .px-5 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .exam-builder-app .exam-card .py-3\.5 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .exam-builder-app .exam-card h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }

  .exam-builder-app .exam-card .text-xs {
    font-size: .8rem;
    line-height: 1.15rem;
  }

  .exam-builder-app .exam-card .flex-wrap {
    gap: .5rem;
  }
}

/* Night mode */
body.night-mode .exam-builder-app {
  background: var(--body-bg);
  color: var(--body-color-dark);
}

body.night-mode .exam-builder-app .bg-white,
body.night-mode .exam-builder-app input,
body.night-mode .exam-builder-app select,
body.night-mode .exam-builder-app textarea {
  background-color: var(--body-bg);
  color: var(--body-color-dark);
}

body.night-mode .exam-builder-app .bg-slate-50 {
  background-color: var(--header-search-bg);
}

body.night-mode .exam-builder-app .bg-slate-100 {
  background-color: var(--header-search-bg);
}

body.night-mode .exam-builder-app .text-slate-900,
body.night-mode .exam-builder-app .text-slate-800 {
  color: var(--body-color);
}

body.night-mode .exam-builder-app .text-slate-700,
body.night-mode .exam-builder-app .text-slate-600 {
  color: var(--body-color-dark);
}

body.night-mode .exam-builder-app .border-slate-100,
body.night-mode .exam-builder-app .border-slate-200,
body.night-mode .exam-builder-app .border-slate-300 {
  border-color: var(--border-divider);
}

/* ---------------------------------------------------------
   Exam Builder semantic accents
   Primary UI remains the site's purple variables.
   Green/red are reserved for success and danger states.
   --------------------------------------------------------- */

.exam-builder-app {
    --exam-success: #198754;
    --exam-success-soft: #eaf7ef;
    --exam-danger: #dc3545;
    --exam-danger-soft: #fceced;
}

/* Correct-answer / success states */
.exam-builder-app .exam-correct,
.exam-builder-app .correct-answer,
.exam-builder-app .is-correct {
    color: var(--exam-success);
}

.exam-builder-app .exam-correct-bg,
.exam-builder-app .correct-answer-bg,
.exam-builder-app .is-correct-bg {
    background-color: var(--exam-success-soft);
    border-color: var(--exam-success);
}

/* Editing mode */
.exam-builder-app .editing-mode,
.exam-builder-app .edit-mode {
    color: var(--exam-success);
    border-color: var(--exam-success);
}

/* Regenerate key — positive action, but deliberately not a filled green button */
.exam-builder-app .js-exam-regenerate-key,
.exam-builder-app #exam-regenerate-key-btn,
.exam-builder-app .exam-regenerate-key {
    color: var(--exam-success);
    border-color: var(--exam-success);
    background-color: transparent;
}

.exam-builder-app .js-exam-regenerate-key:hover,
.exam-builder-app #exam-regenerate-key-btn:hover,
.exam-builder-app .exam-regenerate-key:hover {
    color: #fff;
    background-color: var(--exam-success);
    border-color: var(--exam-success);
}

/* Published / active success indicators */
.exam-builder-app .exam-success,
.exam-builder-app .success-state,
.exam-builder-app .status-success {
    color: var(--exam-success);
}

/* Destructive actions — red only where appropriate */
.exam-builder-app .exam-danger,
.exam-builder-app .danger-state,
.exam-builder-app .js-exam-delete,
.exam-builder-app .js-question-delete,
.exam-builder-app .delete-question,
.exam-builder-app .remove-question {
    color: var(--exam-danger);
}

.exam-builder-app .exam-danger:hover,
.exam-builder-app .js-exam-delete:hover,
.exam-builder-app .js-question-delete:hover,
.exam-builder-app .delete-question:hover,
.exam-builder-app .remove-question:hover {
    color: var(--exam-danger);
    background-color: var(--exam-danger-soft);
}

/* Error feedback */
.exam-builder-app .exam-error,
.exam-builder-app .error-state {
    color: var(--exam-danger);
}

/* Keep primary actions tied to the existing site variables */
.exam-builder-app .btn-primary,
.exam-builder-app .exam-primary-btn {
    background-color: var(--main-btn);
    border-color: var(--main-btn);
    color: var(--main-color);
}

/* ---------------------------------------------------------
   Exam Builder visual hierarchy
   Purple = primary actions
   Green = positive / edit / correct
   Red = destructive / error
   Secondary actions stay outlined or ghost-style.
   --------------------------------------------------------- */

.exam-builder-app {
    --exam-success: #198754;
    --exam-success-soft: #eaf7ef;
    --exam-danger: #dc3545;
    --exam-danger-soft: #fceced;
}

/* Main filled action: keep the site's purple */
.exam-builder-app .btn-primary,
.exam-builder-app .exam-primary-btn,
.exam-builder-app .exam-main-action {
    background-color: var(--main-btn);
    border: 1px solid var(--main-btn);
    color: var(--main-color);
}

/* Secondary/import actions: outlined or ghost, never filled */
.exam-builder-app .btn-secondary,
.exam-builder-app .exam-secondary-btn,
.exam-builder-app .exam-outline-btn,
.exam-builder-app .exam-ghost-btn,
.exam-builder-app .js-exam-import,
.exam-builder-app .exam-import-btn,
.exam-builder-app .import-btn {
    background-color: transparent;
    border: 1px solid var(--border-divider-2);
    color: var(--body-color);
}

/* Correct answer */
.exam-builder-app .exam-correct,
.exam-builder-app .correct-answer,
.exam-builder-app .is-correct,
.exam-builder-app .correct-option {
    color: var(--exam-success);
}

.exam-builder-app .exam-correct-bg,
.exam-builder-app .correct-answer-bg,
.exam-builder-app .is-correct-bg {
    background-color: var(--exam-success-soft);
    border-color: var(--exam-success);
}

/* Edit mode */
.exam-builder-app .editing-mode,
.exam-builder-app .edit-mode,
.exam-builder-app .exam-edit-mode {
    color: var(--exam-success);
    border: 1px solid var(--exam-success);
    background-color: var(--exam-success-soft);
}

/* Regenerate key */
.exam-builder-app .js-exam-regenerate-key,
.exam-builder-app #exam-regenerate-key-btn,
.exam-builder-app .exam-regenerate-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .5rem .85rem;
    border: 1px solid var(--exam-success);
    border-radius: .5rem;
    background: transparent;
    color: var(--exam-success);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.exam-builder-app .js-exam-regenerate-key:hover,
.exam-builder-app #exam-regenerate-key-btn:hover,
.exam-builder-app .exam-regenerate-key:hover {
    background-color: var(--exam-success);
    border-color: var(--exam-success);
    color: #fff;
}

/* Destructive actions */
.exam-builder-app .exam-danger-btn,
.exam-builder-app .js-exam-delete,
.exam-builder-app .js-question-delete,
.exam-builder-app .delete-question,
.exam-builder-app .remove-question,
.exam-builder-app .exam-delete-btn {
    background: transparent;
    border: 1px solid var(--exam-danger);
    color: var(--exam-danger);
}

.exam-builder-app .exam-danger-btn:hover,
.exam-builder-app .js-exam-delete:hover,
.exam-builder-app .js-question-delete:hover,
.exam-builder-app .delete-question:hover,
.exam-builder-app .remove-question:hover,
.exam-builder-app .exam-delete-btn:hover {
    background-color: var(--exam-danger-soft);
    color: var(--exam-danger);
}

/* Standalone icon controls */
.exam-builder-app .icon-btn,
.exam-builder-app .exam-icon-btn,
.exam-builder-app .js-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-divider-2);
    border-radius: .5rem;
    background: var(--body-bg);
    color: var(--body-color);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.exam-builder-app .icon-btn:hover,
.exam-builder-app .exam-icon-btn:hover,
.exam-builder-app .js-icon-btn:hover {
    background: var(--header-search-bg);
    border-color: var(--main-link);
    color: var(--main-link);
}

/* Secondary button hover */
.exam-builder-app .btn-secondary:hover,
.exam-builder-app .exam-secondary-btn:hover,
.exam-builder-app .exam-outline-btn:hover,
.exam-builder-app .exam-ghost-btn:hover,
.exam-builder-app .js-exam-import:hover,
.exam-builder-app .exam-import-btn:hover,
.exam-builder-app .import-btn:hover {
    background-color: var(--header-search-bg);
    border-color: var(--main-link);
    color: var(--main-link);
}

/* Do not let browser-default button styling show through. */
.exam-builder-app button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------------------------------------------------------
   Exam Builder finishing details
   --------------------------------------------------------- */

/* Marks are a positive/success accent, not purple. */
.exam-builder-app .marks,
.exam-builder-app .mark,
.exam-builder-app .question-marks,
.exam-builder-app .marks-value,
.exam-builder-app .exam-marks,
.exam-builder-app .points,
.exam-builder-app .question-points {
    color: var(--exam-success);
    font-weight: 600;
}

/* Common exact Tailwind-generated marks wrappers/classes if present. */
.exam-builder-app .text-emerald-500,
.exam-builder-app .text-emerald-600,
.exam-builder-app .text-emerald-700,
.exam-builder-app .text-emerald-800 {
    color: var(--exam-success);
}

.exam-builder-app .bg-emerald-50,
.exam-builder-app .bg-emerald-100 {
    background-color: var(--exam-success-soft);
}

.exam-builder-app .border-emerald-200,
.exam-builder-app .border-emerald-300,
.exam-builder-app .border-emerald-500 {
    border-color: var(--exam-success);
}

/* Make ordinary action icons look like designed controls. */
.exam-builder-app .question-actions button,
.exam-builder-app .question-actions a,
.exam-builder-app .exam-actions button,
.exam-builder-app .exam-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-divider-2);
    border-radius: .5rem;
    background: var(--body-bg);
    color: var(--body-color);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.exam-builder-app .question-actions button:hover,
.exam-builder-app .question-actions a:hover,
.exam-builder-app .exam-actions button:hover,
.exam-builder-app .exam-actions a:hover {
    background: var(--header-search-bg);
    border-color: var(--main-link);
    color: var(--main-link);
}

/* Delete icons/actions use red, but remain outlined. */
.exam-builder-app .question-actions .delete,
.exam-builder-app .question-actions .remove,
.exam-builder-app .question-actions .danger,
.exam-builder-app .exam-actions .delete,
.exam-builder-app .exam-actions .remove,
.exam-builder-app .exam-actions .danger {
    color: var(--exam-danger);
    border-color: var(--exam-danger);
    background: transparent;
}

.exam-builder-app .question-actions .delete:hover,
.exam-builder-app .question-actions .remove:hover,
.exam-builder-app .question-actions .danger:hover,
.exam-builder-app .exam-actions .delete:hover,
.exam-builder-app .exam-actions .remove:hover,
.exam-builder-app .exam-actions .danger:hover {
    background: var(--exam-danger-soft);
    color: var(--exam-danger);
}

/* Prevent browser-default button appearance anywhere in this component. */
.exam-builder-app button {
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Buttons which are intended to be text/icon links should stay light. */
.exam-builder-app button.btn-link,
.exam-builder-app .btn-link,
.exam-builder-app .text-action,
.exam-builder-app .icon-action {
    border: 0;
    background: transparent;
    color: var(--main-link);
    padding: .35rem .5rem;
    box-shadow: none;
}

.exam-builder-app button.btn-link:hover,
.exam-builder-app .btn-link:hover,
.exam-builder-app .text-action:hover,
.exam-builder-app .icon-action:hover {
    background: var(--header-search-bg);
    color: var(--main-link);
}


{literal}
/* =========================================================
   EXAM CREATOR / RESULTS / SUBMISSIONS / BRANDING
   Unified standalone stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   Shared variables
   --------------------------------------------------------- */




/* ---------------------------------------------------------
   Shared reset / typography
   --------------------------------------------------------- */

.er-wrap,
.creator-dashboard,
.sub-wrap {
    font-family: var(--body-font-family, inherit);
    color: var(--exam-text);
    letter-spacing: -0.15px;
}

.er-wrap *,
.creator-dashboard *,
.sub-wrap * {
    box-sizing: border-box;
}

.er-wrap a,
.creator-dashboard a,
.sub-wrap a {
    text-decoration: none;
}

.er-wrap button,
.creator-dashboard button,
.sub-wrap button,
.creator-dashboard input,
.creator-dashboard select,
.creator-dashboard textarea,
.sub-wrap input,
.sub-wrap select,
.sub-wrap textarea {
    font-family: inherit;
}

.er-wrap button,
.creator-dashboard button,
.sub-wrap button {
    -webkit-appearance: none;
    appearance: none;
}

.er-wrap h1,
.er-wrap h2,
.creator-dashboard h1,
.creator-dashboard h2,
.sub-wrap h1,
.sub-wrap h2 {
    font-family: var(--font-family-headline, inherit);
    color: var(--exam-text);
}


/* =========================================================
   FILE 1 — EXAM RESULTS
   Actual wrapper: .er-wrap
   ========================================================= */

.er-wrap {
    width: 100%;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 24px 20px 80px !important;
    box-sizing: border-box;
    color: var(--exam-text);
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.er-wrap > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    margin-bottom: 20px !important;
}

.er-wrap > div:first-child h1 {
    margin: 0 !important;
    color: var(--exam-text) !important;
    font-size: 1.35rem !important;
    line-height: 1.35;
    font-weight: 700;
}

.er-wrap > div:first-child a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .45rem .7rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: transparent;
    color: var(--exam-primary) !important;
    font-size: .84rem !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.er-wrap > div:first-child a:hover {
    background: var(--exam-surface-soft) !important;
    border-color: var(--exam-primary);
    color: var(--exam-primary) !important;
}


/* ---------------------------------------------------------
   Stats
   --------------------------------------------------------- */

.er-wrap .er-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.er-wrap .er-stat-tile {
    min-width: 0;
    padding: 16px !important;
    border: 1px solid var(--exam-border) !important;
    border-radius: var(--exam-radius-md) !important;
    background: var(--exam-surface) !important;
    text-align: center;
    box-shadow: 0 1px 2px color-mix(
        in srgb,
        var(--exam-text) 5%,
        transparent
    );
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.er-wrap .er-stat-tile:hover {
    transform: translateY(-1px);
    border-color: var(--exam-border-strong) !important;
    box-shadow: 0 4px 10px color-mix(
        in srgb,
        var(--exam-text) 7%,
        transparent
    );
}

.er-wrap .er-stat-tile > div:first-child {
    margin-bottom: 3px;
    color: var(--exam-text) !important;
    font-size: 1.4rem !important;
    line-height: 1.25;
    font-weight: 700 !important;
}

.er-wrap .er-stat-tile > div:last-child {
    color: var(--exam-muted) !important;
    font-size: .78rem !important;
    line-height: 1.3;
}


/* Passed */

.er-wrap .er-stat-tile:nth-child(5) > div:first-child {
    color: var(--exam-success) !important;
}


/* Failed */

.er-wrap .er-stat-tile:nth-child(6) > div:first-child {
    color: var(--exam-danger) !important;
}


/* ---------------------------------------------------------
   Section headings
   --------------------------------------------------------- */

.er-wrap > h2 {
    margin: 0 0 11px !important;
    color: var(--exam-text) !important;
    font-size: 1.05rem !important;
    line-height: 1.4;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Leaderboard
   --------------------------------------------------------- */

.er-wrap .er-leaderboard-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 28px !important;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    box-shadow: 0 1px 2px color-mix(
        in srgb,
        var(--exam-text) 4%,
        transparent
    );
    -webkit-overflow-scrolling: touch;
}

.er-wrap .er-leaderboard-wrap table {
    width: 100% !important;
    min-width: 600px;
    border-collapse: separate !important;
    border-spacing: 0;
}

.er-wrap .er-leaderboard-wrap thead tr {
    background: var(--exam-surface-soft) !important;
}

.er-wrap .er-leaderboard-wrap th {
    padding: 11px 12px !important;
    border-bottom: 1px solid var(--exam-border) !important;
    background: var(--exam-surface-soft) !important;
    color: var(--exam-text) !important;
    font-size: .76rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.er-wrap .er-leaderboard-wrap td {
    padding: 12px !important;
    border-bottom: 1px solid var(--exam-border) !important;
    color: var(--exam-text) !important;
    font-size: .86rem;
    vertical-align: middle;
}

.er-wrap .er-leaderboard-wrap tbody tr:last-child td {
    border-bottom: 0 !important;
}

.er-wrap .er-leaderboard-wrap tbody tr:hover {
    background: color-mix(
        in srgb,
        var(--exam-surface-soft) 70%,
        transparent
    ) !important;
}


/* Leaderboard student */

.er-wrap .er-leaderboard-wrap td > div {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.er-wrap .er-leaderboard-wrap img {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.er-wrap .er-leaderboard-wrap td > div > div {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--exam-surface-soft) !important;
}


/* ---------------------------------------------------------
   Empty results
   --------------------------------------------------------- */

.er-wrap > p {
    margin: 0 0 28px !important;
    padding: 16px;
    border: 1px dashed var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface-soft);
    color: var(--exam-muted) !important;
    font-size: .9rem !important;
}


/* ---------------------------------------------------------
   Student submissions
   --------------------------------------------------------- */

.er-wrap .er-submissions-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    box-shadow: 0 1px 2px color-mix(
        in srgb,
        var(--exam-text) 4%,
        transparent
    );
    -webkit-overflow-scrolling: touch;
}

.er-wrap .er-submissions-wrap table {
    width: 100% !important;
    min-width: 850px;
    border-collapse: separate !important;
    border-spacing: 0;
}

.er-wrap .er-submissions-wrap thead tr {
    background: var(--exam-surface-soft) !important;
}

.er-wrap .er-submissions-wrap th {
    padding: 11px 12px !important;
    border-bottom: 1px solid var(--exam-border) !important;
    background: var(--exam-surface-soft) !important;
    color: var(--exam-text) !important;
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.er-wrap .er-submissions-wrap td {
    padding: 12px !important;
    border-bottom: 1px solid var(--exam-border) !important;
    color: var(--exam-text) !important;
    font-size: .84rem;
    vertical-align: middle;
}

.er-wrap .er-submissions-wrap tbody tr:last-child td {
    border-bottom: 0 !important;
}

.er-wrap .er-submissions-wrap tbody tr:hover {
    background: color-mix(
        in srgb,
        var(--exam-surface-soft) 70%,
        transparent
    ) !important;
}


/* Submission student */

.er-wrap .er-submissions-wrap td:first-child > div {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.er-wrap .er-submissions-wrap td:first-child img {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.er-wrap .er-submissions-wrap td:first-child > div > div {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--exam-surface-soft) !important;
}

.er-wrap .er-submissions-wrap td:first-child span {
    font-weight: 600;
}


/* Date */

.er-wrap .er-submissions-wrap td:nth-child(6) {
    color: var(--exam-muted) !important;
    font-size: .8rem !important;
    white-space: nowrap;
}


/* Action */

.er-wrap .er-submissions-wrap td:last-child a {
    color: var(--exam-primary) !important;
    font-size: .8rem !important;
    font-weight: 600;
    text-decoration: none !important;
}

.er-wrap .er-submissions-wrap td:last-child a:hover {
    color: var(--exam-primary) !important;
    text-decoration: underline !important;
}


/* ---------------------------------------------------------
   Status badges
   --------------------------------------------------------- */

.er-wrap .sub-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: .25rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
}

.er-wrap .sub-badge--in_progress {
    color: var(--exam-primary) !important;
    background: color-mix(
        in srgb,
        var(--exam-primary) 10%,
        var(--exam-surface)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--exam-primary) 22%,
        var(--exam-border)
    ) !important;
}

.er-wrap .sub-badge--pass {
    color: var(--exam-success) !important;
    background: var(--exam-success-soft) !important;
    border-color: color-mix(
        in srgb,
        var(--exam-success) 28%,
        var(--exam-border)
    ) !important;
}

.er-wrap .sub-badge--fail {
    color: var(--exam-danger) !important;
    background: var(--exam-danger-soft) !important;
    border-color: color-mix(
        in srgb,
        var(--exam-danger) 25%,
        var(--exam-border)
    ) !important;
}

.er-wrap .sub-badge--submitted,
.er-wrap .sub-badge--pending {
    color: var(--exam-muted) !important;
    background: var(--exam-surface-soft) !important;
    border-color: var(--exam-border) !important;
}


/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.er-wrap .er-pagination {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px !important;
    margin-top: 16px !important;
}

.er-wrap .er-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 5px 9px !important;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm) !important;
    background: var(--exam-surface) !important;
    color: var(--exam-text) !important;
    font-size: .82rem !important;
    font-weight: 600;
    text-decoration: none !important;
}

.er-wrap .er-pagination a:hover {
    border-color: var(--exam-primary);
    background: var(--exam-surface-soft) !important;
    color: var(--exam-primary) !important;
}


/* Active page — detects existing inline primary style */

.er-wrap .er-pagination a[style*="background:var(--primary"] {
    border-color: var(--exam-primary-btn) !important;
    background: var(--exam-primary-btn) !important;
    color: var(--main-color, #fff) !important;
}


/* =========================================================
   FILE 2 — CREATOR DASHBOARD
   Actual wrapper: .creator-dashboard
   ========================================================= */

.creator-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.creator-dashboard .cd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.creator-dashboard .cd-heading {
    min-width: 0;
}

.creator-dashboard .cd-header h1 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.35;
    font-weight: 700;
}

.creator-dashboard .cd-heading p {
    margin: 5px 0 0;
    color: var(--exam-muted);
    font-size: .86rem;
}

.creator-dashboard .cd-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.creator-dashboard .cd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .8rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: transparent;
    color: var(--exam-text);
    font-size: .8rem;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.creator-dashboard .cd-btn:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
}

.creator-dashboard .cd-btn:active {
    transform: scale(.98);
}

.creator-dashboard .cd-btn--primary {
    background: var(--exam-primary-btn);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.creator-dashboard .cd-btn--primary:hover {
    background: color-mix(
        in srgb,
        var(--exam-primary-btn) 88%,
        #000
    );
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.creator-dashboard .cd-btn--secondary {
    background: transparent;
    color: var(--exam-text);
}

.creator-dashboard .cd-btn--danger {
    background: transparent;
    border-color: var(--exam-danger);
    color: var(--exam-danger);
}

.creator-dashboard .cd-btn--danger:hover {
    background: var(--exam-danger-soft);
    border-color: var(--exam-danger);
    color: var(--exam-danger);
}

.creator-dashboard .cd-btn--publish {
    background: var(--exam-success);
    border-color: var(--exam-success);
    color: #fff;
}

.creator-dashboard .cd-btn--publish:hover {
    background: color-mix(in srgb, var(--exam-success) 88%, #000);
    border-color: var(--exam-success);
    color: #fff;
}

.creator-dashboard .cd-btn--unpublish {
    background: transparent;
    border-color: var(--exam-danger);
    color: var(--exam-danger);
}

.creator-dashboard .cd-btn--unpublish:hover {
    background: var(--exam-danger-soft);
    color: var(--exam-danger);
}


/* ---------------------------------------------------------
   Dashboard stats
   --------------------------------------------------------- */

.creator-dashboard .cd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.creator-dashboard .cd-stat {
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--exam-text) 5%, transparent);
    text-align: center;
}

.creator-dashboard .cd-stat__value {
    margin-bottom: 3px;
    color: var(--exam-text);
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
}

.creator-dashboard .cd-stat__label {
    color: var(--exam-muted);
    font-size: .72rem;
    line-height: 1.25;
}

.creator-dashboard .cd-stat__value--warn {
    color: #b7791f;
}

.creator-dashboard .cd-stat__value--muted {
    color: var(--exam-muted);
}


/* ---------------------------------------------------------
   Top scorer stat
   --------------------------------------------------------- */

.creator-dashboard .cd-stat > div:first-child:has(.tpl2-inline-3854b94b),
.creator-dashboard .tpl2-inline-10927be5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 47px;
}

.creator-dashboard .tpl2-inline-3854b94b {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}

.creator-dashboard .tpl2-inline-05f32762 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border: 1px solid var(--exam-border);
    border-radius: 50%;
    background: var(--exam-surface-soft);
}

.creator-dashboard .tpl2-inline-05262f60 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
}

.creator-dashboard .tpl2-inline-e363eb98 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--exam-muted);
    font-size: .68rem;
}

.creator-dashboard .tpl2-inline-ff6eee77 {
    margin-top: 4px;
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.creator-dashboard .cd-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    padding: 5px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface-soft);
}

.creator-dashboard .cd-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .4rem .75rem;
    border-radius: var(--exam-radius-sm);
    color: var(--exam-muted);
    font-size: .78rem;
    font-weight: 600;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.creator-dashboard .cd-filter-btn:hover {
    background: var(--exam-surface);
    color: var(--exam-text);
}

.creator-dashboard .cd-filter-btn.active {
    background: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}


/* ---------------------------------------------------------
   Exam list
   --------------------------------------------------------- */

.creator-dashboard .cd-exam-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.creator-dashboard .cd-exam-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.creator-dashboard .cd-exam-card:hover {
    border-color: var(--exam-border-strong);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--exam-text) 7%, transparent);
    transform: translateY(-1px);
}


/* Thumbnail */

.creator-dashboard .cd-exam-thumb,
.creator-dashboard .cd-exam-thumb--placeholder {
    width: 180px;
    min-width: 180px;
    height: 180px;
}

.creator-dashboard .cd-exam-thumb {
    display: block;
    object-fit: cover;
}

.creator-dashboard .cd-exam-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--exam-surface-soft),
            color-mix(in srgb, var(--exam-primary) 7%, var(--exam-surface))
        );
}

.creator-dashboard .cd-exam-thumb--placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Exam body */

.creator-dashboard .cd-exam-body {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
}

.creator-dashboard .cd-exam-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--exam-text);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
}

.creator-dashboard .cd-exam-meta {
    margin-bottom: 14px;
    color: var(--exam-muted);
    font-size: .78rem;
}


/* Badges */

.creator-dashboard .cd-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .68rem;
    line-height: 1;
    font-weight: 600;
}

.creator-dashboard .cd-badge--published {
    color: var(--exam-success);
    background: var(--exam-success-soft);
    border-color: color-mix(in srgb, var(--exam-success) 25%, var(--exam-border));
}

.creator-dashboard .cd-badge--draft {
    color: var(--exam-muted);
    background: var(--exam-surface-soft);
    border-color: var(--exam-border);
}

.creator-dashboard .cd-grade-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: .2rem .5rem;
    border: 1px solid color-mix(in srgb, var(--exam-primary) 22%, var(--exam-border));
    border-radius: 999px;
    color: var(--exam-primary);
    background: color-mix(in srgb, var(--exam-primary) 8%, var(--exam-surface));
    font-size: .68rem;
    font-weight: 600;
}


/* Exam stats */

.creator-dashboard .cd-exam-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.creator-dashboard .cd-exam-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: .3rem .55rem;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface-soft);
    color: var(--exam-muted);
    font-size: .7rem;
}

.creator-dashboard .cd-exam-stats strong {
    color: var(--exam-text);
    font-size: .78rem;
}


/* Top scorer */

.creator-dashboard .cd-top-scorer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
    color: var(--exam-muted);
    font-size: .77rem;
}

.creator-dashboard .cd-top-scorer img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.creator-dashboard .cd-top-scorer strong {
    color: var(--exam-text);
}


/* Actions */

.creator-dashboard .cd-exam-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--exam-border);
}


/* Empty */

.creator-dashboard .cd-empty {
    padding: 50px 25px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface-soft);
    text-align: center;
}

.creator-dashboard .cd-empty__icon {
    margin-bottom: 8px;
    font-size: 2rem;
}

.creator-dashboard .cd-empty__text {
    color: var(--exam-muted);
    font-size: .9rem;
}


/* =========================================================
   FILE 3 — REPORT BRANDING
   ========================================================= */

.ca-back {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 18px 0 8px 0;
    padding: .45rem .7rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    color: var(--exam-primary) !important;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.ca-back:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
}


/* Branding page container */

.container .card {
    overflow: hidden;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.container .card.mb15 {
    margin-bottom: 18px;
}

.container .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--exam-border);
    background: var(--exam-surface-soft);
}

.container .card-header h4 {
    margin: 0;
    color: var(--exam-text);
    font-size: 1rem;
    font-weight: 700;
}

.container .card-body {
    padding: 20px;
}


/* Forms */

.container .form-group {
    margin-bottom: 18px;
}

.container .form-group > label {
    display: block;
    margin-bottom: 7px;
    color: var(--exam-text);
    font-size: .82rem;
    font-weight: 600;
}

.container .form-control {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: .55rem .75rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface);
    color: var(--exam-text);
    font-size: .84rem;
    line-height: 1.4;
    box-shadow: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.container .form-control:focus {
    border-color: var(--exam-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--exam-primary) 15%,
        transparent
    );
}

.container .text-muted {
    display: block;
    margin-top: 6px;
    color: var(--exam-muted) !important;
    font-size: .75rem;
    line-height: 1.45;
}


/* Branding buttons */

.container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .85rem;
    border-radius: var(--exam-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.container .btn-primary {
    background: var(--exam-primary-btn);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.container .btn-primary:hover {
    background: color-mix(in srgb, var(--exam-primary-btn) 88%, #000);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.container .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--exam-border-strong);
    color: var(--exam-text);
}

.container .btn-outline-secondary:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
}

.container .btn-sm {
    min-height: 34px;
    padding: .4rem .7rem;
    font-size: .76rem;
}


/* Alerts */

.container .alert {
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--exam-radius-sm);
    font-size: .8rem;
    line-height: 1.4;
}

.container .alert-success {
    color: var(--exam-success);
    background: var(--exam-success-soft);
    border-color: color-mix(
        in srgb,
        var(--exam-success) 25%,
        var(--exam-border)
    );
}

.container .alert-danger {
    color: var(--exam-danger);
    background: var(--exam-danger-soft);
    border-color: color-mix(
        in srgb,
        var(--exam-danger) 25%,
        var(--exam-border)
    );
}


/* Logo uploader */

.container .x-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    min-height: 160px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface-soft);
    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.container .x-image:hover {
    border-color: var(--exam-primary);
    background: color-mix(
        in srgb,
        var(--exam-primary) 4%,
        var(--exam-surface-soft)
    );
}

.container .x-image--has-logo {
    border-style: solid;
    border-color: var(--exam-border);
    background: var(--exam-surface);
}

.container .x-image-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--exam-surface) 82%, transparent);
    z-index: 3;
}

.container .x-image-success {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--exam-success);
    color: #fff;
    z-index: 4;
}

.container .js_x-uploader {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.container .js_x-image-remover {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--exam-danger);
    border-radius: 50%;
    background: var(--exam-surface);
    color: var(--exam-danger);
    cursor: pointer;
}

.container .js_x-image-remover:hover {
    background: var(--exam-danger-soft);
}

.container .x-image-remover--hidden {
    display: none !important;
}


/* =========================================================
   FILE 4 — ALL SUBMISSIONS
   ========================================================= */

.sub-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.sub-header h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Toolbar
   --------------------------------------------------------- */

.sub-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
}

.sub-toolbar form {
    display: flex;
    flex: 1 1 260px;
    min-width: 240px;
    gap: 7px;
}

.sub-search {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: .5rem .75rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    outline: 0;
    background: var(--exam-surface);
    color: var(--exam-text);
    font-size: .82rem;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.sub-search::placeholder {
    color: var(--exam-muted);
}

.sub-search:focus {
    border-color: var(--exam-primary);
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--exam-primary) 14%,
        transparent
    );
}

.sub-toolbar form button {
    height: 38px;
    padding: .5rem .8rem;
    border: 1px solid var(--exam-primary-btn);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-primary-btn);
    color: var(--main-color, #fff);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.sub-toolbar form button:hover {
    background: color-mix(in srgb, var(--exam-primary-btn) 88%, #000);
}


/* ---------------------------------------------------------
   Filter buttons
   --------------------------------------------------------- */

.sub-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: .45rem .7rem;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface);
    color: var(--exam-muted);
    font-size: .77rem;
    font-weight: 600;
    white-space: nowrap;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.sub-filter-btn:hover {
    border-color: var(--exam-primary);
    background: var(--exam-surface-soft);
    color: var(--exam-primary);
}

.sub-filter-btn.active {
    border-color: var(--exam-primary-btn);
    background: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}


/* ---------------------------------------------------------
   Export bar
   --------------------------------------------------------- */

.sub-export-bar {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.sub-export-dropdown {
    position: relative;
}

.sub-export-dropdown .exams-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: .45rem .75rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface);
    color: var(--exam-text);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.sub-export-dropdown .exams-btn:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
}

.sub-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    display: none;
    min-width: 220px;
    max-width: 320px;
    overflow: hidden;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    box-shadow: 0 12px 30px color-mix(
        in srgb,
        var(--exam-text) 14%,
        transparent
    );
}

.sub-export-menu.open {
    display: block;
}

.sub-export-menu a {
    display: block;
    padding: 9px 12px;
    color: var(--exam-text);
    font-size: .78rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--exam-border);
}

.sub-export-menu a:last-child {
    border-bottom: 0;
}

.sub-export-menu a:hover {
    background: var(--exam-surface-soft);
    color: var(--exam-primary);
}

.sub-export-menu > div {
    padding: 10px 12px;
    color: var(--exam-muted);
    font-size: .78rem;
}


/* ---------------------------------------------------------
   Count
   --------------------------------------------------------- */

.sub-wrap > .tpl3-inline-8a77aaa6 {
    margin-bottom: 9px;
    color: var(--exam-muted);
    font-size: .78rem;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Table
   --------------------------------------------------------- */

.sub-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.sub-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.sub-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--exam-border);
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .73rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.sub-table th a {
    color: inherit;
}

.sub-table th a:hover {
    color: var(--exam-primary);
}

.sub-table td {
    padding: 12px;
    border-bottom: 1px solid var(--exam-border);
    color: var(--exam-text);
    font-size: .8rem;
    vertical-align: middle;
}

.sub-table tbody tr:last-child td {
    border-bottom: 0;
}

.sub-table tbody tr {
    transition: background-color .15s ease;
}

.sub-table tbody tr:hover {
    background: color-mix(
        in srgb,
        var(--exam-surface-soft) 65%,
        transparent
    );
}


/* Student */

.sub-student {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 155px;
}

.sub-student img,
.sub-student-avatar {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
}

.sub-student img {
    object-fit: cover;
}

.sub-student-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--exam-border);
    background: var(--exam-surface-soft);
    font-size: .8rem;
}

.sub-student-name {
    font-weight: 600;
}


/* Scores */

.sub-score {
    font-weight: 700;
    color: var(--exam-text);
}

.sub-score--none {
    color: var(--exam-muted);
}

.sub-wrap .tpl3-inline-e363eb98 {
    color: var(--exam-muted);
    font-size: .72rem;
}

.sub-wrap .tpl3-inline-dd3b24ce {
    color: var(--exam-muted);
}

.sub-wrap .tpl3-inline-79424e3e {
    color: var(--exam-muted);
    font-size: .76rem;
    white-space: nowrap;
}


/* Table actions */

.sub-wrap .tpl3-inline-2cc4cb92 {
    color: var(--exam-primary);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sub-wrap .tpl3-inline-2cc4cb92:hover {
    text-decoration: underline;
}

.sub-wrap .tpl3-inline-56de8aaa {
    margin: 0 4px;
    color: var(--exam-border-strong);
}


/* Empty */

.sub-empty {
    padding: 55px 25px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface-soft);
    color: var(--exam-muted);
    text-align: center;
    font-size: .88rem;
}

.sub-empty__icon {
    margin-bottom: 8px;
    font-size: 2rem;
}


/* Pagination */

.sub-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.sub-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 5px 9px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface);
    color: var(--exam-text);
    font-size: .77rem;
    font-weight: 600;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.sub-page-btn:hover {
    border-color: var(--exam-primary);
    background: var(--exam-surface-soft);
    color: var(--exam-primary);
}

.sub-page-btn.active {
    border-color: var(--exam-primary-btn);
    background: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.sub-page-btn.disabled {
    opacity: .45;
    pointer-events: none;
}


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

@media (max-width: 991.98px) {

    .creator-dashboard .cd-header {
        flex-direction: column;
    }

    .creator-dashboard .cd-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .creator-dashboard .cd-exam-thumb,
    .creator-dashboard .cd-exam-thumb--placeholder {
        width: 150px;
        min-width: 150px;
        height: 150px;
    }

    .creator-dashboard .cd-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {

    .er-wrap,
    .sub-wrap {
        padding: 18px 14px 60px !important;
    }

    .er-wrap > div:first-child,
    .sub-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .er-wrap > div:first-child h1,
    .sub-header h1 {
        font-size: 1.2rem;
    }

    .er-wrap > div:first-child a {
        align-self: flex-start;
    }


    /* Results stats */

    .er-wrap .er-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .er-wrap .er-stat-tile {
        padding: 14px !important;
    }

    .er-wrap .er-stat-tile > div:first-child {
        font-size: 1.25rem !important;
    }


    /* Dashboard */

    .creator-dashboard {
        padding-bottom: 55px;
    }

    .creator-dashboard .cd-header h1 {
        font-size: 1.25rem;
    }

    .creator-dashboard .cd-header-actions {
        gap: 6px;
    }

    .creator-dashboard .cd-btn {
        min-height: 36px;
        padding: .45rem .65rem;
        font-size: .75rem;
    }

    .creator-dashboard .cd-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .creator-dashboard .cd-stat {
        padding: 12px 8px;
    }

    .creator-dashboard .cd-stat__value {
        font-size: 1.2rem;
    }


    /* Exam cards */

    .creator-dashboard .cd-exam-card {
        flex-direction: column;
    }

    .creator-dashboard .cd-exam-thumb,
    .creator-dashboard .cd-exam-thumb--placeholder {
        width: 100%;
        min-width: 0;
        height: 190px;
    }

    .creator-dashboard .cd-exam-body {
        padding: 16px;
    }

    .creator-dashboard .cd-exam-title {
        font-size: .95rem;
    }

    .creator-dashboard .cd-exam-actions {
        gap: 6px;
    }

    .creator-dashboard .cd-exam-actions .cd-btn {
        flex: 1 1 auto;
    }


    /* Submission toolbar */

    .sub-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 8px;
    }

    .sub-toolbar form {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .sub-filter-btn {
        flex: 1 1 auto;
    }

    .sub-export-bar {
        width: 100%;
    }

    .sub-export-dropdown {
        flex: 1 1 0;
    }

    .sub-export-dropdown .exams-btn {
        width: 100%;
    }


    /* Branding */

    .ca-back {
        margin-left: 14px;
    }

    .container .card-body {
        padding: 16px;
    }

    .container .card-header {
        padding: 14px 16px;
    }

    .container .x-image {
        max-width: 100%;
    }
}


@media (max-width: 480px) {

    .er-wrap .er-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .creator-dashboard .cd-header-actions .cd-btn {
        width: 100%;
    }

    .creator-dashboard .cd-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .creator-dashboard .cd-exam-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .creator-dashboard .cd-exam-actions .cd-btn {
        width: 100%;
    }

    .sub-filter-btn {
        flex: 1 1 calc(50% - 5px);
    }

    .sub-toolbar form {
        flex-direction: column;
    }

    .sub-toolbar form button {
        width: 100%;
    }

    .sub-export-bar {
        flex-direction: column;
    }

    .sub-export-dropdown {
        width: 100%;
    }

    .sub-export-menu {
        width: 100%;
        max-width: none;
    }
}


/* =========================================================
   EXAM RESULTS — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .er-wrap {
        padding: 20px 16px 60px !important;
    }

    .er-wrap .er-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   EXAM RESULTS — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .er-wrap {
        padding: 16px 12px 50px !important;
    }

    .er-wrap > div:first-child {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px;
    }

    .er-wrap > div:first-child h1 {
        font-size: 1.15rem !important;
    }

    .er-wrap > div:first-child a {
        width: 100%;
        justify-content: center;
    }


    /* Stats */

    .er-wrap .er-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .er-wrap .er-stat-tile {
        padding: 13px 8px !important;
    }

    .er-wrap .er-stat-tile > div:first-child {
        font-size: 1.2rem !important;
    }

    .er-wrap .er-stat-tile > div:last-child {
        font-size: .7rem !important;
    }


    /* Headings */

    .er-wrap > h2 {
        font-size: .98rem !important;
    }


    /* Tables remain scrollable */

    .er-wrap .er-leaderboard-wrap,
    .er-wrap .er-submissions-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .er-wrap .er-leaderboard-wrap table {
        min-width: 600px;
    }

    .er-wrap .er-submissions-wrap table {
        min-width: 850px;
    }
}


/* =========================================================
   EXAM RESULTS — SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .er-wrap {
        padding: 12px 10px 40px !important;
    }

    .er-wrap .er-stats {
        gap: 6px !important;
    }

    .er-wrap .er-stat-tile {
        padding: 11px 5px !important;
    }

    .er-wrap .er-stat-tile > div:first-child {
        font-size: 1.05rem !important;
    }

    .er-wrap .er-stat-tile > div:last-child {
        font-size: .65rem !important;
    }

    .er-wrap .er-pagination a {
        min-width: 32px;
        height: 32px;
        padding: 4px 7px !important;
    }
}


/* =========================================================
   NIGHT MODE
   ========================================================= */

body.night-mode .er-wrap,
body.night-mode .creator-dashboard,
body.night-mode .sub-wrap {
    color: var(--body-color-dark, var(--body-color));
}

body.night-mode .er-stat-tile,
body.night-mode .er-leaderboard-wrap,
body.night-mode .er-submissions-wrap,
body.night-mode .creator-dashboard .cd-stat,
body.night-mode .creator-dashboard .cd-exam-card,
body.night-mode .container .card,
body.night-mode .sub-toolbar,
body.night-mode .sub-table-wrap,
body.night-mode .sub-export-menu {
    background: var(--body-bg) !important;
}

body.night-mode .er-leaderboard-wrap th,
body.night-mode .er-submissions-wrap th,
body.night-mode .container .card-header,
body.night-mode .creator-dashboard .cd-filters,
body.night-mode .sub-table th {
    background: var(--header-search-bg) !important;
}

body.night-mode .er-leaderboard-wrap td,
body.night-mode .er-submissions-wrap td,
body.night-mode .er-leaderboard-wrap th,
body.night-mode .er-submissions-wrap th,
body.night-mode .creator-dashboard .cd-exam-actions,
body.night-mode .container .card-header,
body.night-mode .sub-toolbar,
body.night-mode .sub-table-wrap {
    border-color: var(--border-divider) !important;
}

body.night-mode .er-stat-tile > div:first-child,
body.night-mode .er-wrap > div:first-child h1,
body.night-mode .er-wrap > h2,
body.night-mode .creator-dashboard h1,
body.night-mode .creator-dashboard .cd-exam-title,
body.night-mode .creator-dashboard .cd-stat__value,
body.night-mode .creator-dashboard .cd-exam-stats strong,
body.night-mode .sub-header h1,
body.night-mode .sub-table td,
body.night-mode .er-leaderboard-wrap td,
body.night-mode .er-submissions-wrap td,
body.night-mode .container .card-header h4,
body.night-mode .container .form-group > label {
    color: var(--body-color-dark, var(--body-color)) !important;
}

body.night-mode .sub-search,
body.night-mode .container .form-control,
body.night-mode .sub-export-dropdown .exams-btn,
body.night-mode .sub-page-btn,
body.night-mode .er-pagination a,
body.night-mode .cd-btn {
    background: var(--body-bg);
    color: var(--body-color-dark, var(--body-color));
}

body.night-mode .er-leaderboard-wrap tbody tr:hover,
body.night-mode .er-submissions-wrap tbody tr:hover,
body.night-mode .sub-table tbody tr:hover {
    background: var(--header-search-bg);
}


/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */

.er-wrap a:focus-visible,
.creator-dashboard a:focus-visible,
.creator-dashboard button:focus-visible,
.sub-wrap a:focus-visible,
.sub-wrap button:focus-visible,
.sub-search:focus-visible,
.container .form-control:focus-visible {
    outline: 2px solid var(--exam-primary);
    outline-offset: 2px;
}


/* =========================================================
   SMALL FINISHING DETAILS
   ========================================================= */

.er-wrap img,
.creator-dashboard img,
.sub-wrap img {
    max-width: 100%;
}

.creator-dashboard .cd-exam-actions a,
.creator-dashboard .cd-exam-actions button {
    text-decoration: none;
}

.creator-dashboard .cd-exam-actions a:hover,
.creator-dashboard .cd-exam-actions button:hover {
    text-decoration: none;
}

.er-wrap .sub-badge,
.sub-wrap .sub-badge {
    vertical-align: middle;
}

.creator-dashboard .cd-exam-card a,
.sub-wrap a,
.er-wrap a {
    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease;
}


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

/* =========================================================
   CIKAMO EXAMS — FIX PATCH
   Follow the numbered steps in the comments.
   ========================================================= */


/* =========================================================
   1. VARIABLES  (replaces every  :root { --exam-… }  block
      and the two  .exam-builder-app { --exam-success … }  blocks)

   Declared on the wrappers, not :root, so they resolve inside <body>
   and follow body.night-mode. On :root they were resolved once at the
   top of the page, which is why cards lost borders/backgrounds
   whenever the variables were not ready yet.
   ========================================================= */

.exam-builder-app,
.er-wrap,
.creator-dashboard,
.sub-wrap,
.exams-wrapper,
.exam-branding {
    --exam-success: #198754;
    --exam-success-soft: #eaf7ef;
    --exam-danger: #dc3545;
    --exam-danger-soft: #fceced;

    --exam-radius-sm: .45rem;
    --exam-radius-md: .65rem;
    --exam-radius-lg: .85rem;
    --exam-radius-xl: 1rem;

    --exam-border: var(--border-divider, #e5e7eb);
    --exam-border-strong: var(--border-divider-2, #d1d5db);
    --exam-muted: var(--text-muted, #6b7280);

    --exam-primary: var(--main-link, #7c3aed);
    --exam-primary-btn: var(--main-btn, #7c3aed);

    --exam-surface: var(--header-background, #fff);
    --exam-surface-soft: var(--header-search-bg, #f8fafc);
    --exam-background: var(--body-bg, #f5f7fb);
    --exam-text: var(--body-color, #1f2937);
}


/* =========================================================
   2. CREATOR DASHBOARD — layout fix
   Header, stats, filters and cards were sitting side by side
   in one row. Force a normal vertical block layout.
   Add this AFTER the existing .creator-dashboard rules.
   ========================================================= */

.creator-dashboard {
    display: block !important;
    float: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 70px;
}

.creator-dashboard > .cd-header,
.creator-dashboard > .cd-stats,
.creator-dashboard > .cd-filters,
.creator-dashboard > .cd-exam-list,
.creator-dashboard > .cd-empty {
    float: none;
    flex: none;
    width: 100%;
    max-width: 100%;
}

/* Broken placeholder image: hide the "Exam" alt text, keep the gradient tile */
.creator-dashboard .cd-exam-thumb--placeholder img {
    font-size: 0;
    color: transparent;
}

@media (max-width: 767.98px) {
    .creator-dashboard {
        padding: 0 14px 55px;
    }
}


/* =========================================================
   3. MANUAL GRADING — full replacement
   Delete the whole second <style> block ("MANUAL GRADING")
   and use this instead.

   Fixes:
   - white-on-white heading (it used prefers-color-scheme: dark,
     which follows the phone/PC setting, not your site theme)
   - cards stacked and centred (global .exam-card sets
     flex-direction: column)
   - hardcoded colours and !important buttons
   ========================================================= */

.exams-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    color: var(--exam-text);
    font-family: var(--body-font-family, inherit);
    text-align: left;
}

.exams-wrapper *,
.exams-wrapper *::before,
.exams-wrapper *::after {
    box-sizing: border-box;
}

.exams-wrapper .hide {
    display: none !important;
}

.exams-wrapper h2 {
    margin: 0 0 6px;
    color: var(--exam-text);
    font-family: var(--font-family-headline, inherit);
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 700;
}

.exams-grading-subheader {
    margin: 0 0 20px;
    color: var(--exam-muted);
    font-size: .86rem;
    line-height: 1.55;
}


/* Back link */

.exams-wrapper .exams-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0 0 16px;
    padding: .45rem .7rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    color: var(--exam-primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.exams-wrapper .exams-back-link:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    text-decoration: none;
}


/* Flash messages */

.exams-wrapper .exams-flash {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--exam-radius-sm);
    font-size: .82rem;
    line-height: 1.45;
}

.exams-wrapper .exams-flash-success {
    color: var(--exam-success);
    background: var(--exam-success-soft);
    border-color: color-mix(in srgb, var(--exam-success) 25%, var(--exam-border));
}

.exams-wrapper .exams-flash-error {
    color: var(--exam-danger);
    background: var(--exam-danger-soft);
    border-color: color-mix(in srgb, var(--exam-danger) 25%, var(--exam-border));
}


/* Locked modal */

.exams-wrapper .exams-locked-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 280px;
    padding: 30px 15px;
}

.exams-wrapper .exams-locked-modal-inner {
    width: 100%;
    max-width: 480px;
    padding: 28px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--exam-text) 10%, transparent);
    text-align: center;
}

.exams-wrapper .exams-locked-modal-inner h3 {
    margin: 0 0 8px;
    color: var(--exam-text);
    font-size: 1.15rem;
}

.exams-wrapper .exams-locked-modal-inner p {
    margin: 0 0 20px;
    color: var(--exam-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.exams-wrapper .exams-locked-modal-inner .btn {
    margin: 4px;
}


/* Empty state */

.exams-wrapper .exams-state-empty {
    width: 100%;
    padding: 42px 24px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface-soft);
    text-align: center;
}

.exams-wrapper .exams-state-empty p {
    margin: 0;
    color: var(--exam-muted);
    font-size: .9rem;
    line-height: 1.6;
}


/* Queue */

.exams-wrapper .exams-grading-queue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Explicit row direction: global .exam-card is a column flex box */
.exams-wrapper .exam-card.exams-grading-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    overflow: visible;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
    text-align: left;
    transform: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.exams-wrapper .exam-card.exams-grading-card:hover {
    border-color: var(--exam-border-strong);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--exam-text) 7%, transparent);
    transform: none;
}

.exams-wrapper .exams-grading-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.exams-wrapper .exams-grading-card-main > strong {
    display: block;
    margin: 0 0 4px;
    color: var(--exam-text);
    font-size: .98rem;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.exams-wrapper .exams-grading-card-meta {
    display: block;
    color: var(--exam-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.exams-wrapper .exams-grading-card-graded {
    background: var(--exam-surface-soft);
}

.exams-wrapper .exams-grade-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    margin-right: 6px;
    padding: .2rem .5rem;
    border: 1px solid color-mix(in srgb, var(--exam-success) 25%, var(--exam-border));
    border-radius: 999px;
    background: var(--exam-success-soft);
    color: var(--exam-success);
    font-size: .68rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}


/* Buttons — same language as the creator dashboard */

.exams-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .85rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: transparent;
    color: var(--exam-text);
    font-family: inherit;
    font-size: .8rem;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.exams-wrapper .btn:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
    text-decoration: none;
}

.exams-wrapper .btn-primary {
    background: var(--exam-primary-btn);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exams-wrapper .btn-primary:hover {
    background: color-mix(in srgb, var(--exam-primary-btn) 88%, #000);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exams-wrapper .btn-secondary {
    background: transparent;
    color: var(--exam-text);
}

.exams-wrapper .btn-link {
    border-color: transparent;
    color: var(--exam-primary);
}

.exams-wrapper .btn-link:hover {
    border-color: transparent;
    background: var(--exam-surface-soft);
}


/* Grade one attempt */

.exams-wrapper form.builder-form {
    width: 100%;
}

.exams-wrapper .exams-grade-question {
    width: 100%;
    margin: 0 0 14px;
    padding: 18px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.exams-wrapper .exams-grade-question-graded {
    background: var(--exam-surface-soft);
}

.exams-wrapper .exams-grade-question-text {
    margin: 0 0 12px;
    color: var(--exam-text);
    font-size: .95rem;
    line-height: 1.55;
    font-weight: 600;
}

.exams-wrapper .exams-grade-max-marks {
    display: inline-block;
    margin-left: 6px;
    color: var(--exam-success);
    font-size: .74rem;
    font-weight: 600;
}

.exams-wrapper .exams-grade-answer-text {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .86rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.exams-wrapper .exams-grade-answer-text em {
    color: var(--exam-muted);
}

.exams-wrapper .exams-grade-inputs {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(240px, 1fr);
    gap: 16px;
    align-items: start;
}

.exams-wrapper .exams-grade-inputs label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--exam-text);
    font-size: .78rem;
    font-weight: 600;
}

.exams-wrapper .exams-grade-inputs input[type="number"],
.exams-wrapper .exams-grade-inputs textarea {
    width: 100%;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface);
    color: var(--exam-text);
    font-family: inherit;
    font-size: .84rem;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.exams-wrapper .exams-grade-inputs input[type="number"] {
    min-height: 40px;
    padding: .55rem .75rem;
}

.exams-wrapper .exams-grade-inputs textarea {
    min-height: 76px;
    padding: .55rem .75rem;
    line-height: 1.5;
    resize: vertical;
}

.exams-wrapper .exams-grade-inputs input[type="number"]:focus,
.exams-wrapper .exams-grade-inputs textarea:focus {
    border-color: var(--exam-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-primary) 15%, transparent);
}

.exams-wrapper a:focus-visible,
.exams-wrapper button:focus-visible {
    outline: 2px solid var(--exam-primary);
    outline-offset: 2px;
}


/* Night mode — same pattern as the rest of the module */

body.night-mode .exams-wrapper,
body.night-mode .exams-wrapper h2,
body.night-mode .exams-wrapper .exams-grading-card-main > strong,
body.night-mode .exams-wrapper .exams-grade-question-text,
body.night-mode .exams-wrapper .exams-grade-answer-text,
body.night-mode .exams-wrapper .btn-secondary,
body.night-mode .exams-wrapper .btn:not(.btn-primary) {
    color: var(--body-color-dark, var(--body-color));
}

body.night-mode .exams-wrapper .exam-card.exams-grading-card,
body.night-mode .exams-wrapper .exams-grade-question,
body.night-mode .exams-wrapper .exams-locked-modal-inner,
body.night-mode .exams-wrapper .exams-grade-inputs input[type="number"],
body.night-mode .exams-wrapper .exams-grade-inputs textarea {
    background: var(--body-bg);
    color: var(--body-color-dark, var(--body-color));
}


/* Mobile */

@media (max-width: 767.98px) {
    .exams-wrapper {
        padding: 18px 12px 45px;
    }

    .exams-wrapper h2 {
        font-size: 1.2rem;
    }

    .exams-wrapper .exam-card.exams-grading-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }

    .exams-wrapper .exam-card.exams-grading-card > .btn {
        width: 100%;
    }

    .exams-wrapper .exams-grade-question {
        padding: 14px;
    }

    .exams-wrapper .exams-grade-inputs {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .exams-wrapper .exams-locked-modal-inner .btn {
        width: 100%;
        margin: 4px 0;
    }
}


/* =========================================================
   4. EXAM BUILDER — mobile squeeze
   Page container padding + builder padding + card padding +
   inner box padding were all stacking on a phone.
   Tune the 12px values to match your theme's container padding.
   ========================================================= */

@media (max-width: 767.98px) {

    /* cancel the theme container's side padding */
    .exam-builder-app {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
    }

    /* less padding inside nested cards / boxes */
    .exam-builder-app .p-12 { padding: 1.5rem; }
    .exam-builder-app .p-8,
    .exam-builder-app .p-6,
    .exam-builder-app .p-5 { padding: 1rem; }

    .exam-builder-app .px-6,
    .exam-builder-app .px-5 {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* "Manual Grading" style buttons must not wrap letter by letter */
    .exam-builder-app .bg-indigo-600,
    .exam-builder-app .btn-primary,
    .exam-builder-app .btn-secondary {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


   
   
   
/* =========================================================
   CIKAMO EXAMS — REPORT BRANDING PAGE
   Scope: everything lives under .exam-branding

   Needs the shared variables block (the one that lists
   .exam-branding next to .exam-builder-app, .er-wrap, etc.).
   If that block is not in your sheets yet, add it first.
   Paste inside the same {literal}...{/literal} <style> as the
   other exam CSS.
   ========================================================= */

.exam-branding {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 16px 70px;
    color: var(--exam-text);
    font-family: var(--body-font-family, inherit);
    text-align: left;
}

.exam-branding *,
.exam-branding *::before,
.exam-branding *::after {
    box-sizing: border-box;
}


/* Back link */

.exam-branding a.eb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0 0 16px;
    padding: .45rem .7rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    color: var(--exam-primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.exam-branding a.eb-back:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    text-decoration: none;
}


/* Page heading */

.exam-branding .eb-title {
    margin: 0 0 4px;
    color: var(--exam-text);
    font-family: var(--font-family-headline, inherit);
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 700;
}

.exam-branding .eb-subtitle {
    margin: 0 0 20px;
    color: var(--exam-muted);
    font-size: .86rem;
    line-height: 1.55;
}


/* Two cards: stacked on mobile/tablet, side by side on desktop */

.exam-branding .eb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
}

@media (min-width: 992px) {
    .exam-branding .eb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Cards */

.exam-branding .card.eb-card {
    width: 100%;
    margin: 0;
    overflow: visible;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.exam-branding .eb-card .card-header {
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg) var(--exam-radius-lg) 0 0;
    background: transparent;
}

.exam-branding .eb-card .card-header h4 {
    margin: 0;
    color: var(--exam-text);
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
}

.exam-branding .eb-card .card-body {
    padding: 20px;
    background: transparent;
}


/* Form groups, labels, help text */

.exam-branding .form-group {
    margin: 0 0 18px;
}

.exam-branding .form-group > label {
    display: block;
    margin: 0 0 8px;
    color: var(--exam-text);
    font-size: .8rem;
    font-weight: 600;
}

.exam-branding small.text-muted {
    display: block;
    margin-top: 8px;
    color: var(--exam-muted) !important;
    font-size: .76rem;
    line-height: 1.5;
}


/* Select */

.exam-branding select.form-control {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background-color: var(--exam-surface);
    color: var(--exam-text);
    font-family: inherit;
    font-size: .86rem;
    line-height: 1.4;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.exam-branding select.form-control:focus {
    border-color: var(--exam-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-primary) 15%, transparent);
}


/* Alerts — no display rule here on purpose, so Sngine's .x-hidden
   and the JS show/hide keep working */

.exam-branding .alert {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--exam-radius-sm);
    font-size: .82rem;
    line-height: 1.45;
}

.exam-branding .alert-success {
    color: var(--exam-success);
    background: var(--exam-success-soft);
    border-color: color-mix(in srgb, var(--exam-success) 25%, var(--exam-border));
}

.exam-branding .alert-danger {
    color: var(--exam-danger);
    background: var(--exam-danger-soft);
    border-color: color-mix(in srgb, var(--exam-danger) 25%, var(--exam-border));
}


/* Logo uploader (.x-image) — skin only.
   Sizing/positioning of the file trigger, loader and remover button is
   left to Sngine's own CSS so the file picker keeps opening. */

.exam-branding .x-image {
    max-width: 320px;
    border: 2px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-md);
    background-color: var(--exam-surface-soft);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.exam-branding .x-image:hover {
    border-color: var(--exam-primary);
}

.exam-branding .x-image.x-image--has-logo {
    border-style: solid;
    border-color: var(--exam-border);
}

.exam-branding .x-image .js_x-image-remover.x-image-remover--hidden {
    display: none;
}


/* Buttons */

.exam-branding .eb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.exam-branding .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: .5rem 1rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: transparent;
    color: var(--exam-text);
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.exam-branding .btn:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
    text-decoration: none;
}

.exam-branding .btn-primary {
    background: var(--exam-primary-btn);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exam-branding .btn-primary:hover {
    background: color-mix(in srgb, var(--exam-primary-btn) 88%, #000);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exam-branding .btn[disabled],
.exam-branding .btn.disabled {
    opacity: .6;
    pointer-events: none;
}

.exam-branding a:focus-visible,
.exam-branding button:focus-visible,
.exam-branding select:focus-visible {
    outline: 2px solid var(--exam-primary);
    outline-offset: 2px;
}


/* Night mode */

body.night-mode .exam-branding,
body.night-mode .exam-branding .eb-title,
body.night-mode .exam-branding .eb-card .card-header h4,
body.night-mode .exam-branding .form-group > label,
body.night-mode .exam-branding .btn:not(.btn-primary) {
    color: var(--body-color-dark, var(--body-color));
}

body.night-mode .exam-branding .card.eb-card,
body.night-mode .exam-branding select.form-control {
    background-color: var(--body-bg);
    color: var(--body-color-dark, var(--body-color));
}


/* Mobile */

@media (max-width: 767.98px) {
    .exam-branding {
        padding: 18px 12px 55px;
    }

    .exam-branding .eb-title {
        font-size: 1.2rem;
    }

    .exam-branding .eb-card .card-header,
    .exam-branding .eb-card .card-body {
        padding: 14px;
    }

    .exam-branding .x-image {
        max-width: 100%;
    }

    .exam-branding .eb-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .exam-branding .eb-actions .btn {
        width: 100%;
    }

    /* 16px stops iOS zooming into the select */
    .exam-branding select.form-control {
        font-size: 16px;
    }
}









/* =========================================================
   CIKAMO EXAMS — STUDENT RESULTS PAGE  (exams-results.tpl)
   Scope: everything lives under .exams-results-page
   Existing class names are unchanged. Paste inside the same
   {literal}...{/literal} <style> as the other exam CSS.

   Variables: declared here on the wrapper so this file works on its
   own. If you prefer one source of truth, add .exams-results-page to
   the selector list of the shared variables block and delete section 0.
   ========================================================= */


/* 0. Variables */

.exams-results-page {
    --exam-success: #198754;
    --exam-success-soft: #eaf7ef;
    --exam-danger: #dc3545;
    --exam-danger-soft: #fceced;

    --exam-radius-sm: .45rem;
    --exam-radius-md: .65rem;
    --exam-radius-lg: .85rem;

    --exam-border: var(--border-divider, #e5e7eb);
    --exam-border-strong: var(--border-divider-2, #d1d5db);
    --exam-muted: var(--text-muted, #6b7280);

    --exam-primary: var(--main-link, #7c3aed);
    --exam-primary-btn: var(--main-btn, #7c3aed);

    --exam-surface: var(--header-background, #fff);
    --exam-surface-soft: var(--header-search-bg, #f8fafc);
    --exam-text: var(--body-color, #1f2937);
}


/* 1. Page shell — full width, left aligned */

.exams-results-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 16px 70px;
    color: var(--exam-text);
    font-family: var(--body-font-family, inherit);
    text-align: left;
}

.exams-results-page *,
.exams-results-page *::before,
.exams-results-page *::after {
    box-sizing: border-box;
}

.exams-results-page h1,
.exams-results-page h2 {
    color: var(--exam-text);
    font-family: var(--font-family-headline, inherit);
    line-height: 1.3;
    font-weight: 700;
}

.exams-results-page h2 {
    margin: 0 0 14px;
    font-size: 1.15rem;
}


/* 2. Header */

.exams-results-header {
    margin: 0 0 20px;
}

.exams-results-thumbnail {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 180px;
    margin: 0 0 14px;
    object-fit: cover;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
}

.exams-results-header h1 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    overflow-wrap: anywhere;
}

.exams-results-subtitle {
    margin: 0;
    color: var(--exam-muted);
    font-size: .86rem;
    line-height: 1.55;
}


/* 3. Buttons */

.exams-results-page .exams-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: .5rem 1rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-sm);
    background: transparent;
    color: var(--exam-text);
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.exams-results-page .exams-btn:hover {
    background: var(--exam-surface-soft);
    border-color: var(--exam-primary);
    color: var(--exam-primary);
    text-decoration: none;
}

.exams-results-page .exams-btn.btn-primary {
    background: var(--exam-primary-btn);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exams-results-page .exams-btn.btn-primary:hover {
    background: color-mix(in srgb, var(--exam-primary-btn) 88%, #000);
    border-color: var(--exam-primary-btn);
    color: var(--main-color, #fff);
}

.exams-results-page a:focus-visible,
.exams-results-page button:focus-visible {
    outline: 2px solid var(--exam-primary);
    outline-offset: 2px;
}

.exams-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}


/* Report buttons: View = blue, Download = green.
   Matched by href, so no template change is needed. */

.exams-results-page .exams-results-actions a.exams-btn[href*="view=report&"] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.exams-results-page .exams-results-actions a.exams-btn[href*="view=report&"]:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.exams-results-page .exams-results-actions a.exams-btn[href*="report-pdf"] {
    background: var(--exam-success);
    border-color: var(--exam-success);
    color: #fff;
}

.exams-results-page .exams-results-actions a.exams-btn[href*="report-pdf"]:hover {
    background: #146c43;
    border-color: #146c43;
    color: #fff;
}


/* 4. Empty / hidden states */

.exams-results-page .exams-empty-state {
    width: 100%;
    padding: 42px 24px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface-soft);
    text-align: center;
}

.exams-results-page .exams-empty-state h2 {
    margin: 0 0 8px;
}

.exams-results-page .exams-empty-state p {
    margin: 0 0 18px;
    color: var(--exam-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.exams-results-page .exams-hidden-state {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--exam-border-strong);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface-soft);
    color: var(--exam-muted);
    font-size: .84rem;
    line-height: 1.55;
}


/* 5. Score summary */

.exams-results-summary-card {
    width: 100%;
    margin: 0 0 24px;
    padding: 18px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.exams-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.exams-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface-soft);
}

.exams-summary-label {
    color: var(--exam-muted);
    font-size: .74rem;
    line-height: 1.3;
    font-weight: 600;
}

.exams-summary-value {
    color: var(--exam-text);
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.exams-summary-value.exams-status-pass,
.exams-summary-value.exams-status-passed {
    color: var(--exam-success);
}

.exams-summary-value.exams-status-fail,
.exams-summary-value.exams-status-failed {
    color: var(--exam-danger);
}

.exams-summary-secondary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--exam-border);
    color: var(--exam-text);
    font-size: .9rem;
    line-height: 1.5;
    font-weight: 700;
}


/* 6. Answer review */

.exams-review-section,
.exams-leaderboard-section {
    width: 100%;
    margin: 0 0 28px;
}

.exams-review-question {
    width: 100%;
    margin: 0 0 12px;
    padding: 16px 18px;
    border: 1px solid var(--exam-border);
    border-left: 4px solid var(--exam-border-strong);
    border-radius: var(--exam-radius-lg);
    background: var(--exam-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--exam-text) 5%, transparent);
}

.exams-review-question.is-correct {
    border-left-color: var(--exam-success);
}

.exams-review-question.is-incorrect {
    border-left-color: var(--exam-danger);
}

.exams-review-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.exams-review-qnum {
    color: var(--exam-muted);
    font-size: .76rem;
    font-weight: 700;
}

.exams-review-marks {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border: 1px solid var(--exam-border);
    border-radius: 999px;
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .72rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.exams-review-question.is-correct .exams-review-marks {
    border-color: color-mix(in srgb, var(--exam-success) 25%, var(--exam-border));
    background: var(--exam-success-soft);
    color: var(--exam-success);
}

.exams-review-question.is-incorrect .exams-review-marks {
    border-color: color-mix(in srgb, var(--exam-danger) 25%, var(--exam-border));
    background: var(--exam-danger-soft);
    color: var(--exam-danger);
}

.exams-review-qtext {
    margin: 0 0 12px;
    color: var(--exam-text);
    font-size: .95rem;
    line-height: 1.6;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.exams-review-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exams-review-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .86rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.exams-review-option.is-selected {
    border-color: var(--exam-primary);
}

.exams-review-option.is-correct-option {
    border-color: color-mix(in srgb, var(--exam-success) 45%, var(--exam-border));
    background: var(--exam-success-soft);
}

.exams-option-tag {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border: 1px solid var(--exam-border-strong);
    border-radius: 999px;
    background: var(--exam-surface);
    color: var(--exam-muted);
    font-size: .68rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}

.exams-option-tag.exams-option-tag-correct {
    border-color: color-mix(in srgb, var(--exam-success) 35%, var(--exam-border));
    color: var(--exam-success);
}

.exams-review-your-answer {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .86rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.exams-review-your-answer em {
    color: var(--exam-muted);
}

.exams-review-explanation {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: var(--exam-radius-sm);
    background: var(--exam-surface-soft);
    color: var(--exam-text);
    font-size: .84rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* 7. Leaderboard */

.exams-leaderboard-own-rank {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--exam-border);
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    font-size: .9rem;
    font-weight: 600;
}

.exams-rank-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--exam-primary-btn);
    color: var(--main-color, #fff);
    font-size: .85rem;
    line-height: 1;
    font-weight: 700;
}

.exams-leaderboard-table {
    width: 100%;
    border: 1px solid var(--exam-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--exam-radius-md);
    background: var(--exam-surface);
    font-size: .84rem;
}

.exams-leaderboard-table th,
.exams-leaderboard-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--exam-border);
    text-align: left;
    vertical-align: middle;
}

.exams-leaderboard-table th {
    background: var(--exam-surface-soft);
    color: var(--exam-muted);
    font-size: .74rem;
    font-weight: 700;
}

.exams-leaderboard-table tbody tr:last-child td {
    border-bottom: 0;
}

.exams-leaderboard-table .exams-leaderboard-you {
    background: color-mix(in srgb, var(--exam-primary) 10%, transparent);
    font-weight: 600;
}

.exams-leaderboard-table .exams-leaderboard-below-cutoff td {
    border-top: 2px dashed var(--exam-border-strong);
}

.exams-leaderboard-total {
    margin: 10px 0 0;
    color: var(--exam-muted);
    font-size: .78rem;
}


/* 8. Night mode */

body.night-mode .exams-results-page,
body.night-mode .exams-results-page h1,
body.night-mode .exams-results-page h2,
body.night-mode .exams-summary-value,
body.night-mode .exams-review-qtext,
body.night-mode .exams-review-option,
body.night-mode .exams-review-your-answer,
body.night-mode .exams-review-explanation,
body.night-mode .exams-review-marks,
body.night-mode .exams-results-page .exams-btn:not(.btn-primary):not([href*="view=report"]) {
    color: var(--body-color-dark, var(--body-color));
}

body.night-mode .exams-summary-value.exams-status-pass,
body.night-mode .exams-summary-value.exams-status-passed {
    color: var(--exam-success);
}

body.night-mode .exams-summary-value.exams-status-fail,
body.night-mode .exams-summary-value.exams-status-failed {
    color: var(--exam-danger);
}

body.night-mode .exams-results-summary-card,
body.night-mode .exams-review-question,
body.night-mode .exams-leaderboard-own-rank,
body.night-mode .exams-leaderboard-table {
    background: var(--body-bg);
}

body.night-mode .exams-review-option.is-correct-option {
    background: color-mix(in srgb, var(--exam-success) 18%, var(--body-bg));
}


/* 9. Mobile */

@media (max-width: 767.98px) {
    .exams-results-page {
        padding: 18px 12px 55px;
    }

    .exams-results-header h1 {
        font-size: 1.25rem;
    }

    .exams-results-thumbnail {
        max-width: 100%;
    }

    .exams-results-summary-card {
        padding: 14px;
    }

    /* two per row on phones */
    .exams-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .exams-summary-value {
        font-size: 1.2rem;
    }

    .exams-results-actions {
        flex-direction: column;
    }

    .exams-results-actions .exams-btn {
        width: 100%;
    }

    .exams-review-question {
        padding: 14px;
    }

    /* wide leaderboard scrolls inside itself, page never scrolls sideways */
    .exams-leaderboard-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .exams-leaderboard-own-rank {
        display: flex;
        width: 100%;
    }
}