/* OnlineExam — shared design layer on top of Bootstrap 5.3 RTL */
:root {
    --brand: #0f5c4d;
    --brand-600: #0b4a3e;
    --brand-700: #083a31;
    --brand-50: #e9f4f1;
    --brand-100: #cfe7e0;
    --accent: #c9a227;
    --accent-50: #fbf5e2;
    --ink: #17252b;
    --muted: #64748b;
    --line: #e4e9ee;
    --bg: #f3f6f8;
    --card: #fff;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --sidebar-w: 264px;

    --bs-primary: #0f5c4d;
    --bs-primary-rgb: 15, 92, 77;
    --bs-primary-bg-subtle: #e9f4f1;
    --bs-primary-text-emphasis: #0b4a3e;
    --bs-primary-border-subtle: #b6dbd1;
    --bs-link-color: #0f5c4d;
    --bs-link-color-rgb: 15, 92, 77;
    --bs-link-hover-color: #083a31;
    --bs-link-hover-color-rgb: 8, 58, 49;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-body-font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Arial", sans-serif;
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .8rem;
}

body { background: var(--bg); font-size: .95rem; }
.validation-summary-valid { display: none !important; }   /* the empty error box of a form with no errors */
.validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }
a { text-decoration: none; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -.17em; flex-shrink: 0; }
.btn .ic { margin-inline-end: .15rem; }
.fw-semi { font-weight: 600; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted) !important; }
.mw-0 { min-width: 0; }

/* ---------- buttons & forms ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600);
}
.btn-light { --bs-btn-bg: #eef2f5; --bs-btn-border-color: #eef2f5; --bs-btn-hover-bg: #e2e8ee; --bs-btn-hover-border-color: #e2e8ee; }
.btn-soft { background: var(--brand-50); color: var(--brand-600); border: 0; }
.btn-soft:hover { background: var(--brand-100); color: var(--brand-700); }
.btn-icon { width: 2.1rem; height: 2.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon .ic { margin: 0; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #7fbcae; box-shadow: 0 0 0 .2rem rgba(15, 92, 77, .15); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.form-text { font-size: .8rem; }
.input-icon { position: relative; }
.input-icon > .ic { position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.input-icon > .form-control { padding-left: 2.6rem; padding-right: 2.6rem; }
.input-icon > .input-reveal { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; padding: .35rem; }
.form-control[dir=ltr] { text-align: right; }
.form-control[dir=ltr]:not(:placeholder-shown) { text-align: left; }

/* searchable dropdown (app.js combo): a button that looks like the select + a popup list with a search box */
.combo { position: relative; min-width: 0; }
.combo > select.combo-native { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; min-width: 0; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.combo-btn { display: block; width: 100%; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.combo-btn.is-placeholder { color: var(--muted); }
.combo-btn:disabled { color: #94a3b8; cursor: not-allowed; }
.combo.open > .combo-btn { border-color: #7fbcae; box-shadow: 0 0 0 .2rem rgba(15, 92, 77, .15); }
.combo-pop { position: fixed; z-index: 1075; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.combo-pop[hidden], .combo-search[hidden], .combo-empty[hidden] { display: none; }
.combo-search { position: relative; padding: .5rem; border-bottom: 1px solid var(--line); background: #fafbfc; }
.combo-search > .ic { position: absolute; inset-inline-start: 1.05rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.combo-search > .form-control { padding-inline-start: 2.1rem; }
.combo-list { position: relative; list-style: none; margin: 0; padding: .3rem; max-height: 290px; overflow-y: auto; outline: 0; }
.combo-opt { padding: .45rem .7rem; border-radius: 8px; cursor: pointer; line-height: 1.4; font-size: .92rem; }
.combo-opt.active { background: var(--brand-50); color: var(--brand-700); }
.combo-opt[aria-selected=true] { font-weight: 700; color: var(--brand); }
.combo-opt[aria-selected=true]::after { content: "✓"; float: left; margin-inline-start: .5rem; }
.combo-opt.is-placeholder { color: var(--muted); }
.combo-group { padding: .5rem .7rem .2rem; font-size: .76rem; font-weight: 700; color: var(--muted); }
.combo-empty { padding: .9rem; text-align: center; color: var(--muted); font-size: .9rem; }
.stage-badge { background: var(--brand-50); color: var(--brand-600); font-weight: 600; margin: .1rem 0 .1rem .25rem; white-space: normal; text-align: start; }
.stage-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .15rem .75rem; max-height: 220px; overflow-y: auto; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .6rem; background: #fafbfc; }
.stage-checks .form-check { margin: 0; font-size: .9rem; }

/* ---------- cards ---------- */
.card-app { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.card-app > .card-header { background: transparent; border-bottom: 1px solid var(--line); padding: .9rem 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.card-app > .card-body { padding: 1.15rem; }
.section-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .45rem; }

/* stat tiles */
.stat { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; }
.stat-icon { width: 2.9rem; height: 2.9rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon .ic { width: 1.35rem; height: 1.35rem; }
.stat-value { font-size: 1.55rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .82rem; }
.tone-brand { background: var(--brand-50); color: var(--brand); }
.tone-gold { background: var(--accent-50); color: #9a7a12; }
.tone-blue { background: #e8f0fe; color: #2557c7; }
.tone-red { background: #fdecec; color: #c0392b; }
.tone-violet { background: #f1ecfd; color: #6941c6; }
.tone-gray { background: #eef2f5; color: #475569; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); margin-bottom: .75rem; }
.empty-icon .ic { width: 1.6rem; height: 1.6rem; }

/* ---------- tables ---------- */
.table-app { margin: 0; --bs-table-bg: transparent; }
.table-app > thead th { background: #f7f9fb; color: #475569; font-weight: 600; font-size: .8rem; white-space: nowrap; border-bottom: 1px solid var(--line); padding: .65rem .75rem; position: sticky; top: 0; z-index: 1; }
.table-app > tbody td { padding: .65rem .75rem; vertical-align: middle; border-color: #eef2f5; }
.table-app > tbody tr:hover { background: #fafcfd; }
.table-wrap { overflow: auto; max-height: 70vh; border-radius: 0 0 var(--radius) var(--radius); }
.table-wrap.tall { max-height: none; }
.sort-btn, .sort-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; color: inherit; }
.sort-btn::after, .sort-link::after { content: "⇅"; opacity: .35; font-size: .75em; }
[aria-sort=ascending] > .sort-btn::after, .sort-link[aria-sort=ascending]::after { content: "▲"; opacity: .8; }
[aria-sort=descending] > .sort-btn::after, .sort-link[aria-sort=descending]::after { content: "▼"; opacity: .8; }
.row-actions { display: flex; gap: .25rem; justify-content: flex-end; flex-wrap: nowrap; }

.badge { font-weight: 600; }
.badge-status { border: 1px solid transparent; font-size: .75rem; padding: .32em .6em; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: #eef2f5; font-size: .8rem; color: #334155; }

/* ---------- admin shell ---------- */
.shell-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); z-index: 1040;
    background: linear-gradient(185deg, #0f5c4d 0%, #0a4237 55%, #08352d 100%); color: #d9ece7;
    display: flex; flex-direction: column; transition: transform .25s ease;
}
.shell-brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.2rem; color: #fff; }
.shell-brand img { width: 40px; height: 40px; border-radius: 11px; }
.shell-brand strong { display: block; font-size: 1rem; line-height: 1.2; }
.shell-brand small { color: #9fcfc3; font-size: .75rem; }
.shell-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.shell-nav .nav-group { font-size: .7rem; color: #8cc4b6; letter-spacing: .02em; margin: 1rem .6rem .35rem; font-weight: 700; }
.shell-nav a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; color: #d9ece7; font-weight: 500; margin-bottom: 2px; }
.shell-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.shell-nav a.active { background: #fff; color: var(--brand-700); font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.shell-nav a.active .ic { color: var(--brand); }
.shell-nav a.danger { color: #ffc9c2; }
.shell-nav a.danger.active { color: #b42318; }
.shell-foot { padding: .9rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .78rem; color: #8cc4b6; }
.shell-main { margin-inline-start: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.shell-top {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.5rem; background: rgba(243, 246, 248, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.shell-top h1 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.shell-top .crumb { font-size: .78rem; color: var(--muted); }
.shell-content { padding: 1.5rem; flex: 1; }
.user-chip { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: #fff; border-radius: 999px; padding: .3rem .4rem .3rem .9rem; box-shadow: var(--shadow); }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.shell-backdrop { display: none; }
@media (max-width: 991.98px) {
    .shell-sidebar { transform: translateX(100%); }
    .sidebar-open .shell-sidebar { transform: none; }
    .sidebar-open .shell-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 1035; }
    .shell-main { margin-inline-start: 0; }
    .shell-content { padding: 1rem; }
    .shell-top { padding: .6rem 1rem; }
}

.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head .grow { flex: 1; min-width: 0; }
.page-head h2 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.page-head p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.filters .form-select, .filters .form-control { min-width: 150px; }

.nav-tabs-app { border-bottom: 1px solid var(--line); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-app .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; padding: .7rem 1rem; white-space: nowrap; display: flex; align-items: center; gap: .4rem; }
.nav-tabs-app .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: transparent; }

/* key/value strip */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.25rem; }
.kv dt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; }

/* dropzone */
.dropzone { border: 2px dashed #c7d3dc; border-radius: var(--radius); padding: 2rem 1rem; text-align: center; background: #fbfcfd; cursor: pointer; transition: .15s; position: relative; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-50); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .ic { width: 2.2rem; height: 2.2rem; color: var(--brand); }
.dropzone .file-name { font-weight: 700; color: var(--brand-700); }

.steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.steps .step { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 600; font-size: .88rem; }
.steps .step b { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #e2e8ee; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.steps .step.on { color: var(--brand-700); }
.steps .step.on b { background: var(--brand); color: #fff; }
.steps .sep { flex: 0 0 2rem; height: 2px; background: #e2e8ee; align-self: center; }

/* question bank */
.q-card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: #fff; }
.q-card + .q-card { margin-top: .6rem; }
.q-card.off { background: #fafafa; opacity: .75; }
.q-text { font-weight: 600; white-space: pre-wrap; }
.q-choices { list-style: none; padding: 0; margin: .55rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem .75rem; }
.q-choices li { font-size: .88rem; color: #475569; display: flex; gap: .4rem; align-items: baseline; }
.q-choices li.ok { color: #067647; font-weight: 700; }
.model-answer { margin-top: .6rem; padding: .7rem .9rem; border-radius: 10px; background: var(--accent-50); border: 1px solid #efe0b0; white-space: pre-wrap; font-size: .92rem; }
.student-answer { margin-top: .5rem; padding: .6rem .8rem; border-radius: 10px; background: #f7f9fb; border: 1px solid var(--line); white-space: pre-wrap; }
.qtype-group > .btn { flex: 1 1 8rem; }

/* pictures of questions and choices */
.img-preview { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.img-preview[hidden] { display: none; }
.img-preview img { max-width: 100%; max-height: 220px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .35rem; }
.img-preview-sm img { max-height: 110px; }
.q-img { display: block; max-width: 100%; max-height: 360px; margin: .4rem 0 .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: .4rem; cursor: zoom-in; }
.choice-img { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; background: #fff; margin-top: .2rem; }
.q-thumb { display: block; max-width: 100%; max-height: 160px; margin: .4rem 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .3rem; }
.q-choices img { max-height: 70px; max-width: 160px; border: 1px solid var(--line); border-radius: 6px; background: #fff; vertical-align: middle; }
.img-zoom { position: fixed; inset: 0; z-index: 1080; background: rgba(15, 23, 42, .78); display: flex; align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; }
.img-zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 12px; padding: .6rem; }

/* essay grading */
.grade-card { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; background: #fff; }
.grade-card + .grade-card { margin-top: .7rem; }
.grade-card.is-graded { border-color: #b6dbd1; background: #fbfdfc; }
.grade-card.is-blank { background: #fafafa; color: var(--muted); }
.hide-graded .grade-card.is-graded, .hide-graded .grade-card.is-blank { display: none; }
.grade-card .answer-text { white-space: pre-wrap; line-height: 1.9; font-size: 1.02rem; }
.grade-box { display: flex; align-items: center; gap: .4rem; }
.grade-input { width: 4.5rem; text-align: center; font-weight: 700; }
.grade-state { min-width: 1.2rem; font-size: .85rem; font-weight: 700; }
.accepted-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: #e7f6ef; color: #067647; font-weight: 600; font-size: .9rem; }
.plan-table th, .plan-table td { white-space: nowrap; }
.plan-table .plan-empty { opacity: .45; }
.q-choices li .ic { width: .95em; height: .95em; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; padding: .12rem .5rem; border-radius: 6px; background: #f1f5f9; color: #475569; }

/* danger zone */
.danger-zone { border: 1px solid #fecdca; background: #fffbfa; }
/* option cards (a checkbox / radio inside a bordered label). scope-option = reset page (red), role-option = user roles */
.scope-option, .role-option { border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; background: #fff; margin: 0; }
.scope-option:has(input:checked), .role-option.is-danger:has(input:checked) { border-color: #f04438; background: #fff5f4; box-shadow: 0 0 0 3px rgba(240, 68, 56, .1); }
.role-option:has(input:checked) { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(15, 92, 77, .1); }
.role-option:hover, .scope-option:hover { border-color: #9cc9bd; }

/* ---------- login ---------- */
.auth-body { background: #fff; }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-brand {
    background: radial-gradient(1200px 500px at 110% -10%, rgba(201, 162, 39, .25), transparent 60%),
                linear-gradient(160deg, #11695a 0%, #0a4237 60%, #072f28 100%);
    color: #e2f1ed; display: flex; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden;
}
.auth-brand::after { content: ""; position: absolute; inset: auto -120px -120px auto; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .04); }
.auth-brand-inner { max-width: 440px; position: relative; z-index: 1; }
.auth-logo { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); margin-bottom: 1.5rem; }
.auth-brand h1 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: .4rem; }
.auth-faculty { color: #f1dc9a; font-weight: 600; margin-bottom: 1rem; }
.auth-tagline { color: #b9ddd4; font-size: 1.02rem; }
.auth-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .85rem; }
.auth-points li { display: flex; gap: .7rem; align-items: center; color: #d6ebe5; }
.auth-points .ic { width: 2.1rem; height: 2.1rem; padding: .48rem; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #f1dc9a; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: #fff; }
.auth-card { width: 100%; max-width: 410px; }
.auth-foot { margin-top: 2.5rem; color: #94a3b8; font-size: .8rem; }
@media (max-width: 991.98px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { padding: 2rem 1.25rem; }
    .auth-brand h1 { font-size: 1.5rem; }
    .auth-points, .auth-tagline { display: none; }
    .auth-logo { width: 56px; height: 56px; margin-bottom: 1rem; }
}

/* ---------- toasts ---------- */
.toast-container { z-index: 2000; }
.app-toast { border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 300px; }

/* ---------- student portal ---------- */
.portal-top { background: #fff; border-bottom: 1px solid var(--line); }
.portal-top .inner { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; }
.portal-top img { width: 38px; height: 38px; border-radius: 10px; }
.portal-hero { background: linear-gradient(140deg, #11695a, #0a4237); color: #e2f1ed; border-radius: 18px; padding: 1.4rem 1.5rem; position: relative; overflow: hidden; }
.portal-hero::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .05); }
.portal-hero h1 { color: #fff; font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem; }
.exam-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .8rem; height: 100%; transition: .15s; }
.exam-card.is-live { border-color: #7fbcae; box-shadow: 0 0 0 4px rgba(15, 92, 77, .08), var(--shadow); }
.exam-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.exam-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: #475569; font-size: .85rem; }
.exam-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

/* the running exam */
.exam-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.exam-bar { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
.exam-bar .inner { display: flex; align-items: center; gap: 1rem; padding: .65rem 0; }
.exam-bar .title { min-width: 0; }
.exam-bar .title strong { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exam-bar .title small { color: var(--muted); }
.timer { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; direction: ltr; }
.timer.warn { background: #fff4e5; color: #b54708; }
.timer.danger { background: #fdecec; color: #b42318; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(240, 68, 56, .15); } }
.exam-progress { height: 4px; background: #e9eef2; }
.exam-progress > div { height: 100%; background: var(--brand); transition: width .3s; }
.save-state { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.save-state.err { color: #b42318; font-weight: 700; }
.exam-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; padding: 1.25rem 0 6rem; }
.q-pane { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 1.5rem 1.6rem; user-select: none; -webkit-user-select: none; }
.q-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.q-no { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.q-statement { font-size: 1.18rem; font-weight: 700; line-height: 1.9; margin-bottom: 1.25rem; white-space: pre-wrap; }
.choices { display: grid; gap: .65rem; }
.choice { display: flex; align-items: center; gap: .85rem; border: 2px solid var(--line); border-radius: 14px; padding: .85rem 1rem; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; font-size: 1.04rem; }
.choice:hover { border-color: #9cc9bd; background: #fbfdfc; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .key { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #64748b; flex-shrink: 0; font-size: .9rem; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.choice:has(input:checked) .key { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid rgba(15, 92, 77, .35); outline-offset: 2px; }
.q-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.q-pane .answer-input { user-select: text; -webkit-user-select: text; border-width: 2px; border-radius: 14px; font-size: 1.05rem; }
.q-pane textarea.answer-input { line-height: 1.9; min-height: 12rem; resize: vertical; }
.btn-flag.on { background: var(--accent-50); color: #8a6a0c; border-color: #ead48f; }
.nav-pane { position: sticky; top: 5.5rem; align-self: start; }
.qnav { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: .4rem; }
.qnav button { position: relative; height: 2.5rem; border-radius: 10px; border: 1px solid #b42318; background: #b42318; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }   /* not answered yet: red */
.qnav button:hover { background: #962018; border-color: #962018; }
.qnav button.answered { background: var(--brand); border-color: var(--brand); color: #fff; }
.qnav button.answered:hover { background: var(--brand-600); border-color: var(--brand-600); }
.qnav button.current { outline: 3px solid var(--accent); outline-offset: 2px; }
.qnav button.flagged::after { content: ""; position: absolute; top: -4px; inset-inline-end: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.qnav button.unsaved { border-color: #f04438; border-style: dashed; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: var(--muted); }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 4px; border: 1px solid #b42318; background: #b42318; vertical-align: -.1em; margin-inline-end: .25rem; }
.legend i.a { background: var(--brand); border-color: var(--brand); }
.legend i.f { background: var(--accent); border-color: var(--accent); border-radius: 50%; }
.offline-bar { background: #b42318; color: #fff; text-align: center; padding: .45rem; font-weight: 600; display: none; }
.offline .offline-bar { display: block; }
/* desktop: the questions panel fits the screen; smaller numbers, and only the numbers scroll (exam.js keeps the current one in view) */
@media (min-width: 992px) {
    .nav-pane .card-app { max-height: calc(100vh - 9.5rem); display: flex; flex-direction: column; }
    .nav-pane .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .nav-pane .card-body > * { flex-shrink: 0; }
    .nav-pane .qnav { flex-shrink: 1; min-height: 4rem; overflow-y: auto; scrollbar-width: thin; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: .3rem; padding: .4rem; margin-inline: -.4rem; }
    .nav-pane .qnav button { height: 2rem; border-radius: 8px; font-size: .85rem; }
    .nav-pane .qnav button.flagged::after { top: -3px; inset-inline-end: -3px; width: 9px; height: 9px; }
}
@media (max-width: 991.98px) {
    .exam-body { grid-template-columns: 1fr; padding-bottom: 7rem; }
    .nav-pane { position: static; }
    .q-pane { padding: 1.1rem; }
    .q-statement { font-size: 1.08rem; }
}
.mobile-dock { display: none; }
@media (max-width: 991.98px) {
    .mobile-dock { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; gap: .5rem; padding: .6rem .8rem; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
    .mobile-dock .btn { flex: 1; }
}
.done-mark { width: 5rem; height: 5rem; border-radius: 50%; background: #e7f6ef; color: #067647; display: inline-flex; align-items: center; justify-content: center; }
.done-mark .ic { width: 2.6rem; height: 2.6rem; }

/* ---------- printing ---------- */
.print-only { display: none; }
@media print {
    @page { margin: 12mm; }
    body { background: #fff; font-size: 11pt; }
    .no-print, .shell-sidebar, .shell-top, .toast-container { display: none !important; }
    .print-only { display: block; }
    .shell-main { margin: 0; }
    .shell-content { padding: 0; }
    .card-app { box-shadow: none; border: 1px solid #ddd; }
    .q-card { break-inside: avoid; }
    a { color: inherit; }
}
.cred-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
.cred-card { border: 1px dashed #94a3b8; border-radius: 10px; padding: 4mm 5mm; break-inside: avoid; font-size: 10.5pt; }
.cred-card .site { font-size: 8.5pt; color: #64748b; display: flex; align-items: center; gap: 2mm; }
.cred-card .site img { width: 16px; height: 16px; }
.cred-card .name { font-weight: 800; margin: 1.5mm 0 2mm; }
.cred-card .row-kv { display: flex; justify-content: space-between; gap: 2mm; border-top: 1px solid #eef2f5; padding-top: 1mm; margin-top: 1mm; }
.cred-card .row-kv b { font-family: Consolas, "Courier New", monospace; letter-spacing: .03em; direction: ltr; }
@media screen and (max-width: 767.98px) { .cred-cards { grid-template-columns: 1fr; } }