/* DCT CBT interface + result page */
:root {
	--dct-blue: #1d4ed8;
	--dct-green: #16a34a;
	--dct-red: #dc2626;
	--dct-purple: #7c3aed;
	--dct-grey: #e5e7eb;
	--dct-ink: #111827;
	--dct-muted: #6b7280;
	--dct-bg: #ffffff;
	--dct-soft: #f8fafc;
}

/* ---------- landing ---------- */
.dct-landing, .dct-result { max-width: 900px; margin: 0 auto; font-size: 16px; line-height: 1.6; }
.dct-facts { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0 0 16px; }
.dct-facts li { background: var(--dct-soft); border: 1px solid var(--dct-grey); border-radius: 8px; padding: 8px 14px; }
.dct-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
.dct-table th, .dct-table td { border: 1px solid var(--dct-grey); padding: 8px 10px; text-align: left; }
.dct-table th { background: var(--dct-soft); }
.dct-instructions { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.dct-start { background: var(--dct-blue); color: #fff; border: 0; border-radius: 8px; padding: 12px 28px; font-size: 17px; font-weight: 600; cursor: pointer; }
.dct-start:disabled { opacity: .6; }
.dct-msg { background: var(--dct-soft); border-left: 4px solid var(--dct-blue); padding: 10px 14px; }
.dct-past li { margin: 4px 0; }

/* ---------- OTP login ---------- */
.dct-login { max-width: 420px; margin: 24px auto; padding: 24px; border: 1px solid var(--dct-grey); border-radius: 12px; background: #fff; font-size: 16px; }
.dct-login h2 { margin-top: 0; }
.dct-login-help { color: var(--dct-muted); font-size: 15px; }
.dct-login label { display: block; font-weight: 600; margin: 12px 0 6px; }
.dct-login input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px 12px; border: 1px solid #9ca3af; border-radius: 8px; }
.dct-phone-row { display: flex; align-items: center; gap: 8px; }
.dct-phone-row span { font-size: 18px; font-weight: 600; }
.dct-login .dct-start { width: 100%; margin-top: 14px; }
.dct-link { background: none; border: 0; color: var(--dct-blue); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.dct-link:disabled { color: var(--dct-muted); text-decoration: none; cursor: default; }
.dct-login-error { color: var(--dct-red); min-height: 1.2em; margin-top: 10px; }

/* ---------- protected PDF viewer ---------- */
.dct-pdf { border: 1px solid var(--dct-grey); border-radius: 10px; background: #e5e7eb; max-width: 1140px; margin: 16px auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dct-pdf:fullscreen { overflow: auto; border-radius: 0; }
.dct-pdf-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #0f172a; color: #fff; border-radius: 10px 10px 0 0; font: 14px system-ui, sans-serif; }
.dct-pdf-bar button { background: #1e293b; color: #fff; border: 0; border-radius: 6px; padding: 4px 12px; font-size: 16px; cursor: pointer; }
.dct-pdf-pages { margin-left: auto; color: #cbd5e1; }
.dct-pdf-pagesbox { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow-x: auto; }
.dct-pdf-page { position: relative; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); max-width: 100%; }
.dct-pdf-page canvas { display: block; max-width: none; }
.dct-pdf-num { position: absolute; right: 8px; top: 6px; font: 12px system-ui, sans-serif; color: #6b7280; background: rgba(255, 255, 255, .8); padding: 1px 6px; border-radius: 4px; }
.dct-pdf-loading { padding: 40px; color: #6b7280; }
@media print { .dct-pdf { display: none !important; } }

/* ---------- exam shell ---------- */
html.dct-exam-open, html.dct-exam-open body { overflow: hidden; }
.dct-shell { position: fixed; inset: 0; z-index: 99999; background: var(--dct-bg); color: var(--dct-ink); display: flex; flex-direction: column; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dct-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #0f172a; color: #fff; }
.dct-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dct-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; background: #1e293b; padding: 4px 12px; border-radius: 6px; }
.dct-timer.is-low { background: var(--dct-red); }
.dct-student { color: #cbd5e1; font-size: 14px; }
.dct-tabs { display: flex; gap: 4px; padding: 6px 12px 0; background: var(--dct-soft); border-bottom: 1px solid var(--dct-grey); overflow-x: auto; }
.dct-tab { border: 1px solid var(--dct-grey); border-bottom: 0; background: #fff; padding: 6px 14px; border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; font: inherit; }
.dct-tab.is-active { background: var(--dct-blue); color: #fff; border-color: var(--dct-blue); }
.dct-tab.is-locked { color: var(--dct-muted); cursor: not-allowed; }
.dct-body { flex: 1; display: flex; min-height: 0; }
.dct-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dct-qhead { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--dct-grey); flex-wrap: wrap; }
.dct-qno { font-weight: 700; }
.dct-marks { color: var(--dct-green); font-weight: 600; }
.dct-qtype { color: var(--dct-muted); margin-left: auto; font-size: 14px; }
.dct-qbody { flex: 1; overflow-y: auto; padding: 16px; }
.dct-q img, .dct-sol img, .dct-q-img { max-width: 100%; height: auto; }
.dct-q-table { border-collapse: collapse; margin: 8px 0; }
.dct-q-table td { border: 1px solid var(--dct-grey); padding: 4px 8px; }
.dct-options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dct-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--dct-grey); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.dct-option:has(input:checked) { border-color: var(--dct-blue); background: #eff6ff; }
.dct-option input { margin-top: 5px; }
.dct-letter { font-weight: 700; color: var(--dct-muted); }
.dct-opt-html p { margin: 0; }
.dct-numeric input { font-size: 18px; padding: 10px 12px; border: 1px solid #9ca3af; border-radius: 8px; width: 240px; max-width: 100%; margin-top: 14px; }
.dct-actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--dct-grey); flex-wrap: wrap; background: var(--dct-soft); }
.dct-spacer { flex: 1; }
.dct-btn { border: 1px solid #9ca3af; background: #fff; color: var(--dct-ink); border-radius: 6px; padding: 8px 14px; cursor: pointer; font: inherit; }
.dct-btn:hover { background: #f3f4f6; }
.dct-primary { background: var(--dct-blue); border-color: var(--dct-blue); color: #fff; }
.dct-primary:hover { background: #1e40af; }
.dct-side { width: 300px; border-left: 1px solid var(--dct-grey); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--dct-soft); }
.dct-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dct-pal { aspect-ratio: 1; border: 1px solid #9ca3af; border-radius: 6px; cursor: pointer; font: 600 13px/1 system-ui, sans-serif; background: #fff; }
.dct-pal.is-current { outline: 3px solid #f59e0b; outline-offset: 1px; }
.st-ans { background: var(--dct-green) !important; color: #fff; border-color: var(--dct-green) !important; }
.st-not { background: var(--dct-red) !important; color: #fff; border-color: var(--dct-red) !important; }
.st-nv { background: #fff; }
.st-rev { background: var(--dct-purple) !important; color: #fff; border-color: var(--dct-purple) !important; }
.st-ansrev { background: var(--dct-purple) !important; color: #fff; box-shadow: inset 0 -5px 0 var(--dct-green); }
.dct-legend { display: grid; gap: 4px; font-size: 13px; color: var(--dct-muted); }
.dct-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #9ca3af; vertical-align: -2px; margin-right: 6px; }
.dct-submit { background: var(--dct-green); border-color: var(--dct-green); color: #fff; font-weight: 600; }
.dct-savestate { font-size: 13px; color: var(--dct-muted); min-height: 1.2em; }

@media (max-width: 760px) {
	.dct-body { flex-direction: column; }
	.dct-side { width: auto; border-left: 0; border-top: 1px solid var(--dct-grey); max-height: 38vh; }
	.dct-palette { grid-template-columns: repeat(8, 1fr); }
	.dct-student, .dct-qtype { display: none; }
	.dct-actions .dct-btn { flex: 1 1 45%; }
	.dct-spacer { display: none; }
}

/* ---------- dialogs ---------- */
.dct-modal-back { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dct-modal { background: #fff; color: var(--dct-ink); border-radius: 10px; padding: 20px; max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); font: 15px/1.5 system-ui, sans-serif; }
.dct-modal h3 { margin: 0 0 10px; }
.dct-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- results ---------- */
.dct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 20px; }
.dct-cards div { border: 1px solid var(--dct-grey); border-radius: 10px; padding: 12px; background: var(--dct-soft); }
.dct-cards span { display: block; font-size: 13px; color: var(--dct-muted); }
.dct-cards strong { font-size: 20px; }
.dct-sol { border: 1px solid var(--dct-grey); border-left-width: 5px; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.dct-sol.dct-correct { border-left-color: var(--dct-green); }
.dct-sol.dct-wrong { border-left-color: var(--dct-red); }
.dct-sol.dct-skipped { border-left-color: #9ca3af; }
.dct-sol-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.dct-badge { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: var(--dct-grey); }
.dct-correct .dct-badge { background: #dcfce7; color: #166534; }
.dct-wrong .dct-badge { background: #fee2e2; color: #991b1b; }
.dct-opts li { padding: 4px 8px; border-radius: 6px; margin: 3px 0; }
.dct-opts li p { margin: 0; display: inline; }
.dct-opts li.is-correct { background: #dcfce7; }
.dct-opts li.is-chosen:not(.is-correct) { background: #fee2e2; }
.dct-opts li.is-chosen::after { content: "  ← your answer"; font-size: 13px; color: var(--dct-muted); }
.dct-solution { background: var(--dct-soft); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }

/* Passage shared by several questions (imported from Classplus comprehension items) */
.dct-passage{background:#f6f7f9;border-left:3px solid #c9ced6;padding:10px 12px;margin:0 0 12px;max-height:40vh;overflow:auto}
.dct-q img,.dct-opt-html img,.dct-solution img{max-width:100%;height:auto;vertical-align:middle}