/* =====================================================================
   2026-09-19 (thirty-second follow-up) - GCE exams: the builder
   (public/gce/builder.php + gce-builder.js) and the student's digital exam
   paper (public/student/gce_sitting.php + gce-paper.js). Loaded after
   template-exact.css / app-extra.css, so it reuses the app's tokens
   (--brand-*, --text, --text-muted, --surface) and the .tone-N palette.
   ===================================================================== */
body.gce-page { margin: 0 !important; padding: 0 !important; min-height: 100vh; background: #F5F4FB; color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html[data-theme="dark"] body.gce-page { background: #121124; }
.gce-page * { box-sizing: border-box; }
.gce-page [hidden] { display: none !important; }
.gce-page button { font-family: inherit; }

/* ---------- shared top bar ---------- */
.gce-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; color: #fff;
    background: radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--brand-500, #6C63FF), var(--brand-600, #5849D6)); box-shadow: 0 6px 20px rgba(40, 30, 120, .18); }
.gce-top-back { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .18); color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: 0 0 auto; cursor: pointer; }
.gce-top-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.gce-top-kicker { font-size: 11.5px; font-weight: 600; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gce-top-title { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gce-top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gce-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .2); color: #fff; white-space: nowrap; }
.gce-chip.warn { background: #FFE8CC; color: #C24E0A; }
.gce-chip.danger { background: #FFE3E3; color: #C92A2A; animation: gcePulse 1s ease-in-out infinite; }
@keyframes gcePulse { 50% { transform: scale(1.06); } }
.gce-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 14px; border: none; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; transition: transform .1s ease, filter .15s ease, background .15s; white-space: nowrap; }
.gce-btn:active:not(:disabled) { transform: translateY(1px); }
.gce-btn:disabled { opacity: .5; cursor: default; }
.gce-btn-primary { color: #fff; background: linear-gradient(135deg, var(--brand-500, #6C63FF), var(--brand-600, #5849D6)); box-shadow: 0 4px 0 #4336B8; }
.gce-btn-light { background: #fff; color: var(--brand-600, #5849D6); }
.gce-btn-ghost { background: #F0EFFA; color: var(--brand-600, #5849D6); }
.gce-btn-ok { color: #fff; background: linear-gradient(135deg, #38D9A9, #12B886); box-shadow: 0 4px 0 #0B8A63; }
.gce-btn-danger { background: #FFF0F0; color: #C92A2A; }
.gce-btn-sm { min-height: 34px; padding: 0 12px; border-radius: 11px; font-size: 12.5px; }
.gce-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: #F0EFFA; color: var(--brand-600, #5849D6); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.gce-icon-btn.danger { background: #FFF0F0; color: #C92A2A; }
.gce-icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- builder ---------- */
.gceb-wrap { max-width: 1040px; margin: 0 auto; padding: 16px 16px 120px; }
.gceb-steps { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.gceb-steps::-webkit-scrollbar { display: none; }
.gceb-step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 2px solid transparent; background: #fff; color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(30, 22, 90, .05); }
.gceb-step b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #F0EFFA; color: var(--brand-600); font-size: 12px; }
.gceb-step.active { border-color: var(--brand-500); background: var(--brand-50, #F4F2FF); }
.gceb-step.active b { background: var(--brand-600); color: #fff; }
.gceb-step.done b { background: #12B886; color: #fff; }
.gceb-card { background: var(--surface, #fff); border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 28px rgba(30, 22, 90, .06); }
.gceb-card h3 { margin: 0 0 4px; font-size: 16px; font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 10px; }
.gceb-card h3 .gceb-h-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; background: var(--tg, linear-gradient(135deg, #7C73FF, #5849D6)); }
.gceb-card > p.gceb-sub { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; }
.gceb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gceb-field { display: block; margin-bottom: 12px; }
.gceb-field > span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.gceb-field input, .gceb-field select, .gceb-field textarea { width: 100%; border: 2px solid #E7E5F4; border-radius: 14px; padding: 11px 13px; font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.gceb-field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.gceb-field input:focus, .gceb-field select:focus, .gceb-field textarea:focus { outline: none; border-color: var(--brand-500); }
.gceb-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.gceb-seg { display: inline-flex; background: #F0EFFA; border-radius: 14px; padding: 4px; gap: 4px; }
.gceb-seg button { border: none; background: transparent; padding: 8px 16px; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.gceb-seg button.on { background: #fff; color: var(--brand-600); box-shadow: 0 3px 10px rgba(30, 22, 90, .1); }
.gceb-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gceb-option { position: relative; text-align: center; padding: 20px 12px 16px; border-radius: 20px; border: 2px solid transparent; background: var(--brand-20, #FAF9FF); cursor: pointer; transition: all .25s ease; }
.gceb-option:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(88, 73, 214, .12); }
.gceb-option.on { border-color: var(--brand-500); background: var(--brand-50, #F4F2FF); box-shadow: 0 8px 25px rgba(88, 73, 214, .15); }
.gceb-option .gceb-oi { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: var(--tg); }
.gceb-option strong { display: block; font-size: 14px; }
.gceb-option small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.gceb-option .gceb-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; opacity: 0; transform: scale(.5); transition: all .25s; }
.gceb-option.on .gceb-check { opacity: 1; transform: none; }
.gceb-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.gceb-rules li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 10px; border-radius: 14px; background: #F7F6FD; }
.gceb-rules li i { color: var(--brand-600); margin-top: 2px; }

.gceb-subjects { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; align-items: center; }
.gceb-subjects::-webkit-scrollbar { display: none; }
.gceb-subj { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 2px solid transparent; background: var(--tl, #F0EEFF); font-weight: 700; font-size: 13px; cursor: pointer; color: var(--text); }
.gceb-subj i.ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--tg); font-size: 12px; }
.gceb-subj.on { border-color: var(--t, #5849D6); box-shadow: 0 6px 16px rgba(30, 22, 90, .1); }
.gceb-addsubj { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.gceb-addsubj select { border: 2px dashed #D6D2F5; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; background: #fff; max-width: 200px; }

.gceb-papers { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.gceb-paper-tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 16px; border: 2px solid transparent; background: #fff; cursor: pointer; min-width: 120px; box-shadow: 0 4px 12px rgba(30, 22, 90, .05); }
.gceb-paper-tab strong { font-size: 14px; }
.gceb-paper-tab small { font-size: 11.5px; color: var(--text-muted); }
.gceb-paper-tab.on { border-color: var(--brand-500); background: var(--brand-50, #F4F2FF); }
.gceb-paper-tab.add { border: 2px dashed #D6D2F5; background: transparent; align-items: center; justify-content: center; color: var(--brand-600); font-weight: 700; }

.gceb-section { border-radius: 20px; background: var(--tl, #F0EEFF); padding: 14px; margin-bottom: 12px; }
.gceb-sec-head { display: flex; align-items: center; gap: 12px; }
.gceb-sec-letter { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-family: 'Poppins', sans-serif; font-size: 18px; background: var(--tg); flex: 0 0 auto; box-shadow: 0 6px 14px rgba(30, 22, 90, .12); }
.gceb-sec-titles { flex: 1 1 auto; min-width: 0; }
.gceb-sec-titles strong { display: block; font-size: 15px; }
.gceb-sec-titles small { color: var(--text-muted); font-size: 12px; }
.gceb-sec-actions { display: flex; gap: 6px; }
.gceb-sec-actions .gce-icon-btn { background: rgba(255, 255, 255, .9); color: var(--t, #5849D6); }
.gceb-sec-ins { margin: 10px 0 0; font-size: 12.5px; color: var(--text); background: rgba(255, 255, 255, .7); border-radius: 12px; padding: 8px 10px; white-space: pre-line; }
.gceb-sec-form { margin-top: 12px; background: rgba(255, 255, 255, .85); border-radius: 16px; padding: 12px; }
.gceb-qlist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gceb-q { display: flex; align-items: flex-start; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 10px 10px 12px; }
.gceb-qn { flex: 0 0 auto; font-weight: 800; color: var(--t, #5849D6); min-width: 22px; }
.gceb-qt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.gceb-qt .gceb-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gceb-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F0EFFA; color: var(--brand-600); }
.gceb-badge.past { background: #E7F3FF; color: #1971C2; }
.gceb-badge.pending { background: #FFF4E6; color: #C24E0A; }
.gceb-badge.private { background: #F1F3F5; color: #495057; }
.gceb-qm { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--text-muted); white-space: nowrap; padding-top: 2px; }
.gceb-qa { display: flex; gap: 4px; flex: 0 0 auto; }
.gceb-qa .gce-icon-btn { width: 28px; height: 28px; font-size: 11px; }
.gceb-sec-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gceb-sec-foot .gce-btn { background: #fff; color: var(--t, #5849D6); }
.gceb-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 14px; background: rgba(255, 255, 255, .6); border-radius: 14px; margin-top: 10px; }
.gceb-addsec { width: 100%; border: 2px dashed #D6D2F5; background: transparent; color: var(--brand-600); border-radius: 18px; padding: 14px; font-weight: 800; cursor: pointer; }

.gceb-classes { display: flex; flex-wrap: wrap; gap: 8px; }
.gceb-class { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; border: 2px solid #E7E5F4; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.gceb-class.on { border-color: var(--brand-500); background: var(--brand-50, #F4F2FF); color: var(--brand-600); }
.gceb-class i { font-size: 12px; }

.gceb-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; }
.gceb-table th { text-align: left; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 10px; }
.gceb-table td { background: #F7F6FD; padding: 10px; }
.gceb-table td:first-child { border-radius: 12px 0 0 12px; }
.gceb-table td:last-child { border-radius: 0 12px 12px 0; }
.gceb-problems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gceb-problems li { background: #FFF0F0; color: #C92A2A; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.gceb-ready { background: #E6F9F0; color: #087F5B; border-radius: 14px; padding: 14px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.gceb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid #ECEBF5; }
.gceb-bar > * { max-width: 360px; flex: 1 1 0; }
.gceb-list-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--tl); margin-bottom: 10px; cursor: pointer; text-decoration: none; color: var(--text); }
.gceb-list-card:hover { box-shadow: 0 10px 22px rgba(30, 22, 90, .08); }
.gceb-list-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--tg); font-size: 18px; flex: 0 0 auto; }
.gceb-list-text { flex: 1 1 auto; min-width: 0; }
.gceb-list-text strong { display: block; font-size: 15px; }
.gceb-list-text small { color: var(--text-muted); font-size: 12px; }
.gceb-status { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--t, #5849D6); text-transform: uppercase; letter-spacing: .03em; }
.gceb-status.PUBLISHED { color: #087F5B; }
.gceb-status.CLOSED { color: #868E96; }

/* modal (picker / write) */
.gceb-modal { position: fixed; inset: 0; z-index: 6000; background: rgba(20, 16, 50, .45); display: flex; align-items: flex-end; justify-content: center; animation: gceFade .2s ease; }
@keyframes gceFade { from { opacity: 0; } }
.gceb-modal-box { width: 100%; max-width: 780px; max-height: 92vh; background: #F5F4FB; border-radius: 26px 26px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: gceUp .28s cubic-bezier(.32, .72, 0, 1); }
@keyframes gceUp { from { transform: translateY(40px); opacity: .6; } }
@media (min-width: 769px) { .gceb-modal { align-items: center; } .gceb-modal-box { border-radius: 26px; max-height: 86vh; } }
.gceb-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; background: #fff; }
.gceb-modal-head strong { flex: 1 1 auto; font-size: 16px; font-family: 'Poppins', sans-serif; }
.gceb-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; }
.gceb-modal-foot { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #ECEBF5; }
.gceb-modal-foot .gce-btn { flex: 1 1 0; }
.gceb-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.gceb-chips::-webkit-scrollbar { display: none; }
.gceb-chipbtn { flex: 0 0 auto; border: 2px solid transparent; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--text); }
.gceb-chipbtn.on { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50, #F4F2FF); }
.gceb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.gceb-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 2px solid transparent; }
.gceb-toggle.on { border-color: #1971C2; color: #1971C2; background: #E7F3FF; }
.gceb-toggle.locked { opacity: .8; cursor: default; }
.gceb-search { flex: 1 1 160px; border: 2px solid #E7E5F4; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; }
.gceb-cand { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; border: 2px solid transparent; }
.gceb-cand.on { border-color: var(--brand-500); background: #FBFAFF; }
.gceb-cand.done { opacity: .55; cursor: default; }
.gceb-cand .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #CFCBEF; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; margin-top: 1px; }
.gceb-cand.on .box, .gceb-cand.done .box { background: var(--brand-500); border-color: var(--brand-500); }
.gceb-opts-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gceb-opt-row { display: flex; gap: 8px; align-items: center; }
.gceb-opt-row .l { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: #F0EFFA; color: var(--brand-600); flex: 0 0 auto; cursor: pointer; border: 2px solid transparent; }
.gceb-opt-row .l.on { background: #12B886; color: #fff; }
.gceb-opt-row input { flex: 1 1 auto; border: 2px solid #E7E5F4; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; }
.gceb-res-row td small { display: block; color: var(--text-muted); }
.gceb-vlog { margin: 6px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: #C92A2A; }

@media (max-width: 680px) {
    .gceb-grid2, .gceb-options, .gceb-rules { grid-template-columns: 1fr; }
    .gceb-q { flex-wrap: wrap; }
    .gceb-qa { margin-left: auto; }
    .gceb-table { font-size: 12px; }
}

/* ---------- the student's exam paper ---------- */
.gcep-shell { min-height: 100vh; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.gcep-shell textarea { user-select: text; -webkit-user-select: text; }
.gcep-body { flex: 1 1 auto; padding: 18px 14px 130px; position: relative; }
.gcep-paper { position: relative; max-width: 860px; margin: 0 auto; background: #fff; border-radius: 6px; box-shadow: 0 1px 0 #ECEAF6, 0 18px 50px rgba(30, 22, 90, .10); padding: 34px 38px 40px; overflow: hidden; }
html[data-theme="dark"] .gcep-paper { background: #1C1B30; box-shadow: none; }
.gcep-watermark { position: absolute; inset: 0; pointer-events: none; opacity: .055; background-repeat: repeat; z-index: 0; }
.gcep-paper > *:not(.gcep-watermark) { position: relative; z-index: 1; }
.gcep-letterhead { text-align: center; border-bottom: 3px double #2B2A3D; padding-bottom: 14px; margin-bottom: 16px; }
html[data-theme="dark"] .gcep-letterhead { border-color: #D6D2F5; }
.gcep-logo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; background: var(--brand-50); }
.gcep-logo-fallback { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); }
.gcep-school { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.gcep-board { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 0; }
.gcep-exam { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; margin: 10px 0 0; }
.gcep-subject { font-size: 22px; font-weight: 800; font-family: 'Poppins', sans-serif; margin: 10px 0 2px; color: var(--brand-600); }
.gcep-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; font-weight: 700; margin-top: 8px; }
.gcep-meta span { display: inline-flex; align-items: center; gap: 6px; }
.gcep-meta i { color: var(--brand-600); }
.gcep-candidate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.gcep-candidate div { border: 1.5px solid #E7E5F4; border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.gcep-candidate div small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gcep-candidate div strong { font-size: 13.5px; }
.gcep-instructions { border: 2px solid #2B2A3D; border-radius: 10px; padding: 12px 16px; margin: 0 0 22px; }
html[data-theme="dark"] .gcep-instructions { border-color: #6E6A99; }
.gcep-instructions h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.gcep-instructions ol { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.gcep-section { margin: 26px 0 0; }
.gcep-sec-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #2B2A3D; color: #fff; padding: 9px 14px; border-radius: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13.5px; }
html[data-theme="dark"] .gcep-sec-band { background: #3B3770; }
.gcep-sec-band small { font-weight: 700; letter-spacing: 0; text-transform: none; opacity: .85; font-size: 12.5px; }
.gcep-sec-ins { margin: 8px 0 0; font-size: 13px; font-style: italic; color: var(--text-muted); white-space: pre-line; }
.gcep-q { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 10px; padding: 16px 0; border-bottom: 1px dashed #E2DFF2; scroll-margin-top: 90px; }
.gcep-q:last-child { border-bottom: none; }
.gcep-qn { font-weight: 800; font-size: 15px; }
.gcep-stem { font-size: 15px; line-height: 1.6; white-space: pre-line; }
.gcep-marks { font-size: 12px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.gcep-photo { max-width: 100%; border-radius: 8px; margin-top: 8px; }
.gcep-q > .gcep-answer { grid-column: 2 / 4; }
.gcep-optlist { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; font-size: 14px; }
.gcep-optlist li { display: flex; gap: 8px; line-height: 1.45; }
.gcep-optlist li b { flex: 0 0 auto; }
.gcep-toggle { display: inline-flex; margin-top: 12px; border-radius: 14px; background: #F0EFFA; padding: 4px; gap: 4px; }
.gcep-toggle button { min-width: 48px; height: 42px; padding: 0 12px; border: none; border-radius: 11px; background: transparent; font-weight: 800; font-size: 15px; color: var(--text-muted); cursor: pointer; transition: all .15s ease; }
.gcep-toggle button:hover { color: var(--brand-600); }
.gcep-toggle button.on { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: 0 4px 12px rgba(88, 73, 214, .35); }
.gcep-toggle.multi button.on { background: linear-gradient(135deg, #38D9A9, #12B886); box-shadow: 0 4px 12px rgba(18, 184, 134, .35); }
.gcep-toggle-hint { font-size: 11.5px; color: var(--text-muted); margin-left: 8px; }
.gcep-written { width: 100%; margin-top: 10px; min-height: 130px; border: 2px solid #E7E5F4; border-radius: 12px; padding: 12px; font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; background: repeating-linear-gradient(#fff, #fff 27px, #EEF0FA 28px); background-attachment: local; }
.gcep-written.essay { min-height: 260px; }
.gcep-written:focus { outline: none; border-color: var(--brand-500); }
html[data-theme="dark"] .gcep-written { background: #15142A; color: var(--text); border-color: #34315A; }
.gcep-wc { font-size: 11.5px; color: var(--text-muted); text-align: right; margin-top: 4px; }
.gcep-saved { font-size: 11px; color: #12B886; font-weight: 700; margin-left: 8px; opacity: 0; transition: opacity .3s; }
.gcep-saved.on { opacity: 1; }
.gcep-end { text-align: center; margin-top: 28px; font-weight: 800; letter-spacing: .3em; color: var(--text-muted); font-size: 12px; }

.gcep-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid #ECEBF5; }
html[data-theme="dark"] .gcep-bar { background: rgba(28, 27, 48, .97); border-color: #2A2848; }
.gcep-bar-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gcep-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.gcep-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gcep-ring circle { fill: none; stroke-width: 4.5; }
.gcep-ring .trk { stroke: #ECEAF6; }
.gcep-ring .bar { stroke: var(--brand-500); stroke-linecap: round; transition: stroke-dasharray .4s; }
.gcep-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.gcep-bar-text { font-size: 12.5px; line-height: 1.3; }
.gcep-bar-text strong { display: block; font-size: 13.5px; }
.gcep-nav { display: flex; gap: 6px; overflow-x: auto; max-width: 42vw; scrollbar-width: none; }
.gcep-nav::-webkit-scrollbar { display: none; }
.gcep-nav button { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #E3E1FF; background: #fff; font-size: 11.5px; font-weight: 800; color: var(--text-muted); cursor: pointer; }
.gcep-nav button.done { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
@media (max-width: 680px) {
    .gcep-paper { padding: 22px 16px 28px; border-radius: 0; margin: 0 -14px; }
    .gcep-candidate { grid-template-columns: 1fr 1fr; }
    .gcep-optlist { grid-template-columns: 1fr; }
    .gcep-q { grid-template-columns: 26px 1fr auto; }
    .gcep-school { font-size: 16px; }
    .gcep-subject { font-size: 18px; }
    .gcep-nav { display: none; }
}

/* cover / lobby cards */
.gcep-lobby { max-width: 860px; margin: 0 auto; }
.gcep-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gcep-subj { border-radius: 20px; background: var(--tl, #F0EEFF); padding: 14px; }
.gcep-subj-head { display: flex; align-items: center; gap: 12px; }
.gcep-subj-icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--tg); font-size: 18px; flex: 0 0 auto; }
.gcep-subj-head strong { font-size: 15.5px; flex: 1 1 auto; }
.gcep-paper-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gcep-paper-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; }
.gcep-paper-row .pn { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: #F0EFFA; color: var(--brand-600); flex: 0 0 auto; }
.gcep-paper-row.cur .pn { background: var(--brand-600); color: #fff; }
.gcep-paper-row.ok .pn { background: #12B886; color: #fff; }
.gcep-paper-row .pt { flex: 1 1 auto; min-width: 0; }
.gcep-paper-row .pt small { display: block; color: var(--text-muted); font-size: 11.5px; }
.gcep-pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #F0EFFA; color: var(--brand-600); white-space: nowrap; }
.gcep-pill.ok { background: #E6F9F0; color: #087F5B; }
.gcep-pill.cur { background: var(--brand-600); color: #fff; }
.gcep-pill.warn { background: #FFF4E6; color: #C24E0A; }
.gcep-rules { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #FFF8EC; border: 1.5px solid #FFD8A8; font-size: 13px; }
.gcep-rules strong { color: #C24E0A; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gcep-rules ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.gcep-agree { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gcep-agree input { width: 20px; height: 20px; accent-color: var(--brand-600); margin-top: 1px; }

/* anti-cheat overlays */
.gcep-guard { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 16, 50, .92); backdrop-filter: blur(10px); color: #fff; text-align: center; }
.gcep-guard-box { max-width: 420px; }
.gcep-guard-icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #FA5252; box-shadow: 0 0 0 10px rgba(250, 82, 82, .2); }
.gcep-guard h2 { font-family: 'Poppins', sans-serif; margin: 0 0 8px; font-size: 22px; }
.gcep-guard p { opacity: .85; margin: 0 0 18px; line-height: 1.5; }
.gcep-guard .count { display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 800; }
.gcep-toast { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 400; background: #2B2A3D; color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: gceFade .2s ease; max-width: 90vw; }
.gcep-toast.warn { background: #C24E0A; }
.gcep-toast.danger { background: #C92A2A; }
.gcep-confirm .gcep-guard-icon { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: 0 0 0 10px rgba(108, 99, 255, .25); }
.gcep-confirm table { width: 100%; font-size: 13px; margin: 0 0 16px; border-collapse: collapse; }
.gcep-confirm td { padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); text-align: left; }
.gcep-confirm td:last-child { text-align: right; font-weight: 800; }
.gcep-guard .gce-btn { width: 100%; margin-top: 8px; }
@media print { body.gce-page * { display: none !important; } }

/* ---------- Question Studio (fd-question-studio.js) ---------- */
.gceb-modal-box.wide { max-width: 960px; }
.fdqs .gceb-modal-head strong small { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.fdqs-hicon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; background: linear-gradient(135deg, #7C73FF, #5849D6); flex: 0 0 auto; }
.fdqs-steps { padding: 4px 18px 10px; margin: 0; background: #fff; border-bottom: 1px solid #ECEBF5; }
.fdqs-wrap { flex-wrap: wrap; overflow: visible; }
.fdqs-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fdqs-preview { font-size: 15px; line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.fdqs-preview .gceb-qm { margin-left: auto; }
.fdqs .gceb-modal-body { background: #F5F4FB; }
html[data-theme="dark"] .fdqs .gceb-modal-box, html[data-theme="dark"] .fdqs .gceb-modal-body { background: #15142A; }
html[data-theme="dark"] .fdqs .gceb-modal-head, html[data-theme="dark"] .fdqs .gceb-modal-foot, html[data-theme="dark"] .fdqs-steps { background: #1C1B30; border-color: #2A2848; }
@media (max-width: 680px) { .fdqs-kinds { grid-template-columns: 1fr; } .gceb-modal-box.wide { max-height: 96vh; } .fdqs .gceb-modal-foot .gce-btn { padding: 0 10px; font-size: 13px; } }
/* studio launch card used on the admin / teacher pages */
.fdqs-launch { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; background: var(--tl, #F0EEFF); margin-bottom: 16px; }
.fdqs-launch .fdqs-hicon { width: 56px; height: 56px; font-size: 22px; }
.fdqs-launch-text { flex: 1 1 auto; min-width: 0; }
.fdqs-launch-text strong { display: block; font-size: 16px; font-family: 'Poppins', sans-serif; }
.fdqs-launch-text small { color: var(--text-muted); font-size: 12.5px; }
@media (max-width: 576px) { .fdqs-launch { flex-wrap: wrap; } .fdqs-launch .gce-btn { width: 100%; } }
.ss-subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ss-subj-grid .gceb-option { font: inherit; }
.gceb-modal.fdqs { z-index: 9500; }
/* 2026-09-20: shared FDModal pop-ups (Accounts, Billing, Academic structure). */
.gceb-modal.fdm { z-index: 9400; }
.fdm .gceb-modal-head strong { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fdm .gceb-modal-head strong small { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdm .gceb-modal-foot[hidden] { display: none !important; }
/* 2026-09-20: Your plan (billing/subscribe.php) + Billing plan cards. */
.gceb-h { margin: 0 0 12px; font-size: 15px; font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 8px; }
.gceb-h i { color: var(--brand-600, #5849D6); }
.fd-sub-hero { display: flex; align-items: center; gap: 16px; }
.fd-sub-hero .fd-note-icon { width: 58px; height: 58px; font-size: 22px; }
.fd-sub-hero h2 { margin: 0 0 4px; font-size: 20px; font-family: 'Poppins', sans-serif; }
.fd-sub-hero p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.fd-sub-hero.ok .fd-note-icon { background: linear-gradient(135deg, #38D9A9, #0CA678); }
.fd-sub-hero.due .fd-note-icon { background: linear-gradient(135deg, #FFA94D, #F76707); }
.fd-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.fd-plan-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 22px; background: var(--tl, #F0EEFF); border: 2px solid transparent; cursor: pointer; margin: 0; }
.fd-plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.fd-plan-card.on { border-color: var(--t, #5849D6); background: #fff; box-shadow: 0 10px 24px rgba(30, 22, 90, .08); }
.fd-plan-card .fd-sec-tick { position: absolute; top: 12px; right: 12px; color: #D0CEE6; font-size: 18px; }
.fd-plan-card.on .fd-sec-tick { color: var(--t, #5849D6); }
.fd-plan-dur { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--tg, #5849D6); color: #fff; }
.fd-plan-card b { font-size: 15px; }
.fd-plan-price { font-size: 20px; font-weight: 800; font-family: 'Poppins', sans-serif; color: var(--t, #5849D6); }
.fd-plan-card small { font-size: 12px; color: var(--text-muted); }
.fd-pay-list { display: flex; flex-direction: column; gap: 10px; }
.fd-pay-row { background: #F7F6FD; border-radius: 18px; padding: 14px; margin: 0; }
.fd-pay-row strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fd-pay-in { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fd-pay-in input { flex: 1 1 200px; border: 1.5px solid #E6E4F3; border-radius: 14px; padding: 10px 12px; font: inherit; }
html[data-theme="dark"] .fd-pay-row, html[data-theme="dark"] .fd-plan-card.on { background: rgba(255, 255, 255, .05); }
.fd-plan-card.off { opacity: .55; }
button.fd-plan-card { font: inherit; text-align: left; color: var(--text); }
.fd-bill-dot { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FA5252; color: #fff; font-size: 11px; align-items: center; justify-content: center; }
.fd-pay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fd-pay-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface, #fff); border-radius: 22px; padding: 16px; box-shadow: 0 8px 22px rgba(30, 22, 90, .05); }
.fd-pay-card b { font-size: 14.5px; }
.fd-pay-card small { color: var(--text-muted); font-size: 12px; margin-bottom: 6px; }
.fd-pay-card .gceb-seg { margin-top: auto; }
.fd-payer-seg { margin-left: auto; }
.fd-payer-teachers { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin: 0 0 0 8px; }
.fd-payer-teachers[hidden] { display: none; }
@media (max-width: 640px) { .fd-payer-seg { margin-left: 58px; } }
/* 2026-09-20: Academic structure builder (structure-builder.js). */
.sb-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.sb-add input, .sb-select { flex: 1 1 200px; min-width: 0; border: 1.5px solid #E6E4F3; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.sb-select { flex: 0 1 180px; }
.sb-add .gce-btn { flex: 0 0 auto; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 6px; }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--tl, #F0EEFF); min-width: 0; }
.sb-item .fd-note-icon { width: 40px; height: 40px; font-size: 15px; }
.sb-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sb-item-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-text small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.sb-item.editing { flex-wrap: wrap; background: #fff; border: 2px solid var(--t, #7C73FF); }
.sb-item.editing input { flex: 1 1 160px; border: 1.5px solid #E6E4F3; border-radius: 12px; padding: 8px 10px; font: inherit; }
.sb-type-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--tl, #F0EEFF); margin-bottom: 14px; }
.sb-type-head .fd-note-icon { width: 54px; height: 54px; font-size: 20px; }
.sb-type-head h2 { margin: 0; font-size: 20px; font-family: 'Poppins', sans-serif; }
.sb-type-head p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
.sb-type-actions { margin-left: auto; display: flex; gap: 6px; }
.sb-lessons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-lessons li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 8px 10px; font-size: 13.5px; flex-wrap: wrap; }
.sb-lessons li > i { color: var(--t, #5849D6); }
.sb-lessons li span { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.sb-lessons li em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--t, #5849D6); background: var(--tl, #F0EEFF); padding: 3px 8px; border-radius: 999px; }
.sb-classchips { margin-bottom: 10px; }
.sb-addstep { border-style: dashed; border-color: #D0CEE6; background: transparent; }
.sb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.sb-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; background: var(--tl, #F0EEFF); }
.sb-stat i { color: var(--t, #5849D6); font-size: 18px; }
.sb-stat b { font-size: 22px; font-family: 'Poppins', sans-serif; }
.sb-stat span { font-size: 12px; color: var(--text-muted); font-weight: 700; }
html[data-theme="dark"] .sb-lessons li, html[data-theme="dark"] .sb-add input, html[data-theme="dark"] .sb-select, html[data-theme="dark"] .sb-item.editing { background: rgba(255, 255, 255, .05); }
/* 2026-09-20 audit A12: radio labels styled like segment buttons */
.gceb-seg label { border: none; background: transparent; padding: 8px 16px; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.gceb-seg label.on { background: #fff; color: var(--brand-600); box-shadow: 0 3px 10px rgba(30, 22, 90, .1); }