body.cbt-portal-page{background:#eef3f8;min-height:100vh}
.portal-wrap{width:min(1180px,calc(100% - 34px));margin:32px auto 70px}
.portal-card{background:#fff;border:1px solid #dfe7ef;border-radius:22px;box-shadow:0 18px 48px rgba(25,53,85,.08)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr);gap:18px}
.intro-main{padding:30px}.intro-main .course-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e8f6f8;color:#257987;font-size:.66rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.intro-main h1{margin:13px 0 8px;color:#173653;font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.04em}.intro-main>p{color:#6f7f94;font-size:.82rem;line-height:1.7}.exam-summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.exam-summary-item{border:1px solid #e0e7ef;border-radius:14px;padding:13px;background:#f9fbfd}.exam-summary-item strong{display:block;color:#193650;font-size:1.05rem}.exam-summary-item span{display:block;margin-top:2px;color:#7d899a;font-size:.62rem;font-weight:700}.registration-form{display:grid;gap:10px;margin-top:18px}.registration-form label{font-size:.68rem;color:#586b81;font-weight:800}.registration-form input{width:100%;height:46px;border:1px solid #d8e2ec;border-radius:12px;padding:0 13px;font:600 .8rem 'Plus Jakarta Sans';outline:0}.registration-form input:focus{border-color:#5eb6c4;box-shadow:0 0 0 3px rgba(45,185,201,.11)}.start-note{display:flex;gap:9px;margin:11px 0 2px;padding:11px 12px;border-radius:12px;background:#f2f7fb;color:#5e7086;font-size:.69rem;line-height:1.5}.start-note i{color:#2a7d8a;margin-top:2px}.start-btn{width:100%;height:48px;border:0;border-radius:13px;background:linear-gradient(100deg,#244d7c,#2f668e);color:#fff;font:850 .8rem 'Plus Jakarta Sans';cursor:pointer;margin-top:6px}.start-btn:hover{filter:brightness(1.04)}
.intro-side{display:grid;gap:14px}.side-card{padding:20px}.side-card h2{margin:0 0 11px;color:#1b3955;font-size:.95rem}.side-card ul{margin:0;padding-left:18px;color:#738095;font-size:.72rem;line-height:1.75}.leaderboard-table{width:100%;border-collapse:collapse}.leaderboard-table td{padding:9px 3px;border-bottom:1px solid #edf1f5;font-size:.68rem}.leaderboard-table tr:last-child td{border:0}.rank{font-weight:900;color:#244d7c}.lb-score{text-align:right;font-weight:900;color:#173653}.lb-time{text-align:right;color:#8290a2}
.exam-shell{display:none}.exam-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}.exam-sidebar{position:sticky;top:88px;padding:18px}.exam-course-label{font-size:.61rem;text-transform:uppercase;letter-spacing:.08em;color:#6c7c8f;font-weight:900}.exam-sidebar h2{margin:7px 0 14px;color:#183653;font-size:.96rem}.legend{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 13px}.legend span{font-size:.58rem;color:#748197;display:flex;align-items:center;gap:4px}.dot{width:8px;height:8px;border-radius:3px;background:#eef2f6;border:1px solid #cdd7e2}.dot.answered{background:#dff6eb;border-color:#78c8a1}.dot.flagged{background:#fff1c7;border-color:#ddb653}.question-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.palette-btn{aspect-ratio:1;border:1px solid #dce4ed;background:#f8fafc;color:#5f7085;border-radius:9px;font:800 .67rem 'Plus Jakarta Sans';cursor:pointer}.palette-btn.answered{background:#e5f7ee;border-color:#9dd8b8;color:#14704c}.palette-btn.flagged{box-shadow:inset 0 0 0 2px #e2b443;background:#fff8de}.palette-btn.current{background:#244d7c;border-color:#244d7c;color:#fff}.sidebar-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.sidebar-stat{background:#f5f8fb;border-radius:10px;padding:9px}.sidebar-stat strong{display:block;color:#1d3b58;font-size:.88rem}.sidebar-stat span{font-size:.57rem;color:#7e8b9c}
.exam-main{overflow:hidden}.exam-toolbar{padding:15px 18px;border-bottom:1px solid #e5ebf1;display:flex;align-items:center;justify-content:space-between;gap:16px}.q-position{font-size:.72rem;font-weight:850;color:#1c3956}.exam-progress{flex:1;max-width:380px;height:7px;background:#edf2f6;border-radius:999px;overflow:hidden}.exam-progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2db9c9,#25a86b);transition:.22s}.timer{min-width:86px;text-align:center;padding:8px 10px;border-radius:11px;background:#edf5f7;color:#247686;font-size:.85rem;font-weight:900}.timer.urgent{background:#fff0f0;color:#c74343}.question-area{padding:30px clamp(20px,4vw,48px) 24px}.question-area h3{font-size:clamp(1.08rem,2vw,1.4rem);line-height:1.55;color:#172f49;margin:0 0 22px;letter-spacing:-.02em}.options-list{display:grid;gap:10px}.option-label{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:11px;padding:13px 15px;border:1.5px solid #dce4ed;border-radius:14px;background:#fff;cursor:pointer;color:#41536a;font-size:.8rem;line-height:1.5;transition:.16s}.option-label:hover{border-color:#9ec4d1;background:#f9fcfd}.option-marker{width:30px;height:30px;border-radius:9px;background:#f0f4f8;color:#5b6e84;display:grid;place-items:center;font-size:.7rem;font-weight:900}.option-label.selected-box{border-color:#63be91;background:#f0fbf5;box-shadow:0 0 0 3px rgba(18,166,106,.08)}.option-label.selected-box .option-marker{background:#12a66a;color:#fff}.option-label input{position:absolute;opacity:0;pointer-events:none}.exam-actions{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:15px 18px;border-top:1px solid #e6ecf2;background:#fbfcfd}.action-group{display:flex;gap:8px}.exam-btn{min-height:42px;padding:0 14px;border-radius:11px;border:1px solid #dbe4ed;background:#fff;color:#42566e;font:800 .7rem 'Plus Jakarta Sans';cursor:pointer}.exam-btn.primary{background:#244d7c;border-color:#244d7c;color:#fff}.exam-btn.submit{background:#10a86c;border-color:#10a86c;color:#fff}.exam-btn.flag.active{background:#fff4cf;border-color:#ddb653;color:#7d5c0b}.exam-btn:disabled{opacity:.45;cursor:not-allowed}
.results-shell{display:none;padding:28px}.result-hero{text-align:center;max-width:660px;margin:auto}.result-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e6f7f0;color:#14734e;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.result-score{width:140px;height:140px;margin:18px auto 13px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#244d7c,#2f718b);color:#fff;box-shadow:0 14px 34px rgba(36,77,124,.22)}.result-score strong{font-size:2.1rem;line-height:1}.result-score span{font-size:.63rem;margin-top:3px;opacity:.8}.result-hero h1{margin:10px 0 5px;color:#173653}.result-hero p{margin:0;color:#748197;font-size:.78rem;line-height:1.6}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px auto;max-width:720px}.result-stat{border:1px solid #e0e7ef;border-radius:13px;padding:12px;background:#fafcfd}.result-stat strong{display:block;color:#183653;font-size:1rem}.result-stat span{font-size:.6rem;color:#7d8999}.result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.certificate{max-width:720px;margin:26px auto 0;padding:25px;border:2px solid #c9d9e7;border-radius:17px;background:linear-gradient(135deg,#fff,#f5f9fc);text-align:center}.certificate h3{color:#244d7c;margin:0 0 9px}.review-center{max-width:900px;margin:30px auto 0}.review-center>h2{color:#173653;font-size:1.15rem}.review-item{border:1px solid #dfe7ef;border-radius:15px;padding:15px;margin:10px 0;background:#fff}.review-item.correct{border-left:5px solid #15a66b}.review-item.wrong{border-left:5px solid #d64c4c}.review-item h3{font-size:.8rem;line-height:1.55;margin:0 0 8px;color:#203b57}.review-answer{font-size:.71rem;line-height:1.65;color:#68778c}.insight{margin-top:9px;background:#edf5fb;border-radius:11px;padding:10px 11px;color:#365c7d;font-size:.7rem;line-height:1.6}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr}.exam-layout{grid-template-columns:1fr}.exam-sidebar{position:static;order:0}.question-palette{display:flex;overflow:auto;padding-bottom:3px}.palette-btn{flex:0 0 38px;aspect-ratio:1}.exam-sidebar h2,.legend{display:none}.sidebar-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.portal-wrap{width:min(100% - 20px,1180px);margin:14px auto 50px}.intro-main{padding:20px}.exam-summary-row{grid-template-columns:1fr 1fr 1fr}.question-area{padding:22px 14px}.exam-toolbar{padding:12px}.exam-progress{display:none}.exam-actions{position:sticky;bottom:68px;z-index:15;padding:10px}.exam-btn{padding:0 10px}.exam-btn .wide-label{display:none}.result-stats{grid-template-columns:1fr 1fr}.results-shell{padding:18px 12px}.sidebar-stats{display:none}}


/* =====================================================================
   MOBILE CBT EXAM WORKSPACE — 2026-08-07
   Purpose:
   - zero page-level horizontal scrolling;
   - all answer options use the full screen width;
   - A, B, C and D remain accessible;
   - question navigation stays inside the viewport;
   - Next/Previous/Review/Clear controls never sit off-screen;
   - the general website bottom nav is hidden only while an exam is active;
   - long questions may scroll vertically INSIDE the question area rather
     than forcing the whole page sideways.
   ===================================================================== */

html,
body.cbt-portal-page{
    max-width:100%;
    overflow-x:hidden;
}

.portal-wrap,
.exam-shell,
.exam-layout,
.exam-main,
.exam-sidebar,
.question-area,
.options-list,
.option-label{
    min-width:0;
    max-width:100%;
}

.question-area h3,
.option-label > span:last-child{
    overflow-wrap:anywhere;
    word-break:normal;
}

/* The active timed test becomes one contained mobile workspace. */
@media(max-width:760px){
    body.cbt-portal-page.cbt-exam-active{
        padding-bottom:0 !important;
        overflow:hidden !important;
        width:100%;
        height:100dvh;
        min-height:100dvh;
        background:#eaf1f7;
    }

    body.cbt-portal-page.cbt-exam-active .mobile-bottom-bar{
        display:none !important;
    }

    body.cbt-portal-page.cbt-exam-active .fbb-site-header{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:2147482000;
    }

    body.cbt-portal-page.cbt-exam-active .portal-wrap{
        position:fixed;
        top:64px;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        max-width:none;
        margin:0;
        padding:8px;
        overflow:hidden;
    }

    body.cbt-portal-page.cbt-exam-active .exam-shell{
        width:100%;
        height:100%;
        min-height:0;
        overflow:hidden;
    }

    body.cbt-portal-page.cbt-exam-active .exam-layout{
        width:100%;
        height:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        gap:8px;
        overflow:hidden;
    }

    /* Compact question navigator: no horizontal page scrolling.
       20 questions appear as 10 x 2 on a normal phone. */
    body.cbt-portal-page.cbt-exam-active .exam-sidebar{
        position:relative;
        top:auto;
        flex:0 0 auto;
        width:100%;
        padding:9px 10px 10px;
        border-radius:15px;
        overflow:hidden;
        box-shadow:0 8px 24px rgba(25,53,85,.06);
    }

    body.cbt-portal-page.cbt-exam-active .exam-course-label{
        display:block;
        margin:0 0 6px;
        font-size:.58rem;
        letter-spacing:.075em;
    }

    body.cbt-portal-page.cbt-exam-active .exam-sidebar h2,
    body.cbt-portal-page.cbt-exam-active .legend,
    body.cbt-portal-page.cbt-exam-active .sidebar-stats{
        display:none !important;
    }

    body.cbt-portal-page.cbt-exam-active .question-palette{
        width:100%;
        display:grid;
        grid-template-columns:repeat(10,minmax(0,1fr));
        gap:4px;
        overflow:visible;
        padding:0;
    }

    body.cbt-portal-page.cbt-exam-active .palette-btn{
        width:100%;
        min-width:0;
        aspect-ratio:1;
        border-radius:8px;
        padding:0;
        font-size:.58rem;
        line-height:1;
    }

    /* Main question card fills the rest of the phone. */
    body.cbt-portal-page.cbt-exam-active .exam-main{
        flex:1 1 auto;
        width:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        border-radius:16px;
    }

    body.cbt-portal-page.cbt-exam-active .exam-toolbar{
        flex:0 0 auto;
        min-width:0;
        padding:9px 11px;
        gap:8px;
    }

    body.cbt-portal-page.cbt-exam-active .q-position{
        font-size:.7rem;
        white-space:nowrap;
    }

    body.cbt-portal-page.cbt-exam-active .exam-progress{
        display:block;
        max-width:none;
        min-width:35px;
        height:5px;
    }

    body.cbt-portal-page.cbt-exam-active .timer{
        min-width:72px;
        padding:7px 8px;
        border-radius:10px;
        font-size:.78rem;
        white-space:nowrap;
    }

    /* Only this middle area scrolls vertically when a question/options
       are unusually long. It can never scroll horizontally. */
    body.cbt-portal-page.cbt-exam-active .question-area{
        flex:1 1 auto;
        min-height:0;
        width:100%;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        padding:17px 12px 14px;
        scrollbar-width:thin;
    }

    body.cbt-portal-page.cbt-exam-active .question-area h3{
        width:100%;
        max-width:100%;
        margin:0 0 14px;
        font-size:clamp(.95rem,4.3vw,1.13rem);
        line-height:1.48;
        letter-spacing:-.018em;
    }

    body.cbt-portal-page.cbt-exam-active .options-list{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    body.cbt-portal-page.cbt-exam-active .option-label{
        width:100%;
        max-width:100%;
        min-width:0;
        grid-template-columns:31px minmax(0,1fr);
        gap:10px;
        padding:10px 11px;
        border-radius:13px;
        font-size:.78rem;
        line-height:1.42;
    }

    body.cbt-portal-page.cbt-exam-active .option-label > span:last-child{
        min-width:0;
        max-width:100%;
        white-space:normal;
    }

    body.cbt-portal-page.cbt-exam-active .option-marker{
        width:29px;
        height:29px;
        border-radius:8px;
        font-size:.68rem;
    }

    /* Bottom control bar stays inside the question card.
       Left controls become compact icons; Next/Submit gets the remaining
       width and is always visible without sideways scrolling. */
    body.cbt-portal-page.cbt-exam-active .exam-actions{
        position:relative;
        bottom:auto;
        flex:0 0 auto;
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:auto minmax(82px,1fr);
        align-items:center;
        gap:7px;
        padding:8px 9px;
        border-top:1px solid #e6ecf2;
        background:rgba(251,252,253,.98);
        box-shadow:0 -8px 22px rgba(25,53,85,.045);
        z-index:20;
    }

    body.cbt-portal-page.cbt-exam-active .action-group{
        min-width:0;
        gap:5px;
    }

    body.cbt-portal-page.cbt-exam-active .action-group:first-child{
        display:grid;
        grid-template-columns:repeat(3,38px);
        flex:0 0 auto;
    }

    body.cbt-portal-page.cbt-exam-active .action-group:last-child{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }

    body.cbt-portal-page.cbt-exam-active .exam-btn{
        min-width:0;
        min-height:40px;
        height:40px;
        padding:0 9px;
        border-radius:10px;
        font-size:.68rem;
        white-space:nowrap;
    }

    body.cbt-portal-page.cbt-exam-active .action-group:first-child .exam-btn{
        width:38px;
        padding:0;
        display:grid;
        place-items:center;
        font-size:.78rem;
    }

    body.cbt-portal-page.cbt-exam-active .action-group:first-child .wide-label{
        display:none !important;
    }

    body.cbt-portal-page.cbt-exam-active #next-btn,
    body.cbt-portal-page.cbt-exam-active #submit-btn{
        width:100%;
        min-width:0;
        justify-content:center;
        font-size:.72rem;
        font-weight:850;
    }
}

/* Extra-tight phones. */
@media(max-width:390px){
    body.cbt-portal-page.cbt-exam-active .portal-wrap{
        padding:6px;
    }

    body.cbt-portal-page.cbt-exam-active .exam-layout{
        gap:6px;
    }

    body.cbt-portal-page.cbt-exam-active .exam-sidebar{
        padding:8px;
    }

    body.cbt-portal-page.cbt-exam-active .question-palette{
        gap:3px;
    }

    body.cbt-portal-page.cbt-exam-active .palette-btn{
        font-size:.54rem;
        border-radius:7px;
    }

    body.cbt-portal-page.cbt-exam-active .question-area{
        padding:14px 10px 12px;
    }

    body.cbt-portal-page.cbt-exam-active .option-label{
        padding:9px 10px;
        gap:8px;
        font-size:.75rem;
    }

    body.cbt-portal-page.cbt-exam-active .exam-actions{
        grid-template-columns:auto minmax(74px,1fr);
        padding:7px;
        gap:5px;
    }

    body.cbt-portal-page.cbt-exam-active .action-group:first-child{
        grid-template-columns:repeat(3,35px);
    }

    body.cbt-portal-page.cbt-exam-active .action-group:first-child .exam-btn{
        width:35px;
        height:38px;
        min-height:38px;
    }

    body.cbt-portal-page.cbt-exam-active #next-btn,
    body.cbt-portal-page.cbt-exam-active #submit-btn{
        height:38px;
        min-height:38px;
        font-size:.68rem;
    }
}