/* ExamKit Engine — Frontend CSS */
:root { --ek-primary: #4F46E5; }

/* ── Dashboard / portal ───────────────────────────────────────── */
.ek-dashboard { max-width:900px; margin:40px auto; font-family:'Segoe UI',system-ui,sans-serif; }
.ek-dashboard-header { text-align:center; margin-bottom:32px; }
.ek-dashboard-header h2 { font-size:2em; font-weight:800; color:#111827; }
.ek-dashboard-header p  { color:#6b7280; margin-top:6px; }
.ek-exam-listing { display:flex; flex-direction:column; gap:12px; }
.ek-listing-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px 24px; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:box-shadow .2s,transform .2s; flex-wrap:wrap; }
.ek-listing-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.1); transform:translateY(-1px); }
.ek-listing-card__left { display:flex; align-items:flex-start; gap:14px; flex:1; min-width:220px; }
.ek-listing-type-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.ek-listing-type { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ek-primary); margin-bottom:4px; }
.ek-free-tag { background:#dcfce7; color:#15803d; padding:1px 6px; border-radius:10px; font-size:10px; }
.ek-listing-card h3 { font-size:16px; font-weight:600; color:#111827; margin:0 0 6px; }
.ek-listing-card p  { font-size:13px; color:#6b7280; margin:0 0 8px; }
.ek-listing-meta { display:flex; gap:16px; font-size:12px; color:#9ca3af; flex-wrap:wrap; }
.ek-btn-portal { display:inline-block; padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; border:none; }
.ek-btn-portal--start  { background:var(--ek-primary); color:#fff; }
.ek-btn-portal--start:hover { opacity:.9; }
.ek-btn-portal--buy    { background:#f59e0b; color:#fff; }
.ek-btn-portal--login  { background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; }
.ek-btn-portal--locked { background:#f3f4f6; color:#9ca3af; cursor:default; }
.ek-empty-portal { text-align:center; padding:40px; color:#9ca3af; }

/* ── Exam wrap ────────────────────────────────────────────────── */
.ek-exam-wrap { max-width:1100px; margin:32px auto; font-family:'Segoe UI',system-ui,sans-serif; }
.ek-screen { animation:ek-fadein .3s ease; }
@keyframes ek-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Intro card ───────────────────────────────────────────────── */
.ek-intro-card { max-width:660px; margin:0 auto; background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:40px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,.07); }
.ek-intro-badge { display:inline-block; padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; background:#ede9fe; color:#6d28d9; margin-bottom:16px; }
.ek-intro-badge--practice { background:#dcfce7; color:#15803d; }
.ek-intro-title { font-size:1.8em; font-weight:800; color:#111827; margin:0 0 12px; }
.ek-intro-desc  { color:#6b7280; margin-bottom:20px; font-size:14px; }
.ek-intro-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:12px; margin:20px 0; }
.ek-intro-stat  { background:#f9fafb; border-radius:10px; padding:14px 10px; }
.ek-intro-stat__val   { display:block; font-size:20px; font-weight:700; color:#111827; }
.ek-intro-stat__label { display:block; font-size:11px; color:#9ca3af; margin-top:3px; }
.ek-intro-info { background:#fef3c7; border:1px solid #fcd34d; border-radius:8px; padding:12px 16px; font-size:12px; color:#92400e; margin:16px 0; text-align:left; line-height:1.5; }
.ek-intro-info--practice { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.ek-guest-email { width:100%; max-width:360px; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:14px; margin:12px 0; }
.ek-btn-start { background:var(--ek-primary); color:#fff; padding:14px 36px; border:none; border-radius:30px; font-size:16px; font-weight:700; cursor:pointer; margin-top:16px; transition:all .2s; }
.ek-btn-start:hover { transform:scale(1.04); box-shadow:0 6px 20px rgba(79,70,229,.3); }

/* ── Exam header ──────────────────────────────────────────────── */
.ek-exam-header { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 18px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.05); gap:12px; flex-wrap:wrap; }
.ek-exam-header__title { font-weight:600; font-size:15px; color:#111827; flex:1; }
.ek-exam-header__meta  { display:flex; align-items:center; gap:12px; font-size:13px; color:#6b7280; }

/* Circular countdown timer */
/* Overall circular timer */
.ek-timer { position:relative; width:62px; height:62px; flex-shrink:0; }
.ek-timer__ring { width:62px; height:62px; }
.ek-timer__bg  { fill:none; stroke:#e5e7eb; stroke-width:3; }
.ek-timer__arc { fill:none; stroke:var(--ek-primary); stroke-width:3; stroke-linecap:round; transition:stroke-dasharray .9s linear; }
.ek-timer__text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#1e293b; letter-spacing:-.3px; }
.ek-timer--warning .ek-timer__arc { stroke:#ef4444; }
.ek-timer--warning .ek-timer__text { color:#ef4444; }

/* Per-question timer — big number + bar */
.ek-per-q-wrap { margin-bottom:18px; }
.ek-per-q-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ek-per-q-label { font-size:12px; color:#6b7280; font-weight:500; }
.ek-per-q-count { font-size:26px; font-weight:800; color:var(--ek-primary); min-width:52px; text-align:right; line-height:1; }
.ek-per-q-count.warn { color:#f59e0b; }
.ek-per-q-count.danger { color:#ef4444; }
.ek-per-q-bar-bg { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; }
.ek-per-q-bar-fill { height:8px; background:var(--ek-primary); border-radius:4px; width:100%; transition:width 1s linear; }
.ek-per-q-bar-fill.warn   { background:#f59e0b; }
.ek-per-q-bar-fill.danger { background:#ef4444; }

/* ── Exam body layout — single column, palette on top ────────── */
.ek-exam-body { display:flex; flex-direction:column; gap:12px; }

/* Question palette — horizontal scrollable bar at top */
.ek-palette-bar { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px; }
.ek-palette-bar__inner { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.ek-palette-bar__legend { display:flex; gap:14px; align-items:center; padding-top:6px; border-top:1px solid #f1f5f9; }

/* Palette buttons — smaller badges */
.ek-palette-btn { width:28px; height:28px; border-radius:6px; border:1.5px solid #e5e7eb; background:#f9fafb; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; color:#374151; display:flex; align-items:center; justify-content:center; padding:0; }
.ek-palette-btn:hover     { border-color:var(--ek-primary); color:var(--ek-primary); }
.ek-palette-btn.current   { background:var(--ek-primary); color:#fff; border-color:var(--ek-primary); }
.ek-palette-btn.answered  { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.ek-palette-btn.skipped   { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }

/* Questions area takes full width */
.ek-questions-area { width:100%; }
.ek-pl { font-size:10px; display:flex; align-items:center; gap:5px; color:#6b7280; }
.ek-pl::before { content:''; width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.ek-pl--current::before  { background:var(--ek-primary); }
.ek-pl--answered::before { background:#d1fae5; border:1px solid #6ee7b7; }
.ek-pl--skipped::before  { background:#fee2e2; border:1px solid #fca5a5; }

/* ── Question card ────────────────────────────────────────────── */
.ek-q-card { display:none; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.06); animation:ek-fadein .25s ease; }
.ek-q-card.active { display:block; }
.ek-q-meta { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ek-q-num  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ek-primary); }
.ek-q-type { font-size:11px; background:#ede9fe; color:#6d28d9; padding:2px 8px; border-radius:10px; }
.ek-q-pts  { font-size:11px; color:#9ca3af; margin-left:auto; }
.ek-q-label { font-size:13px; font-weight:700; color:#374151; margin-bottom:10px; }
.ek-q-media img, .ek-q-media video { max-width:100%; border-radius:8px; margin-bottom:16px; }
.ek-q-text { font-size:16px; font-weight:600; color:#111827; line-height:1.5; margin-bottom:20px; }

/* ── Options ─────────────────────────────────────────────────── */
.ek-option { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid #e5e7eb; border-radius:10px; cursor:pointer; margin-bottom:8px; transition:all .15s; background:#fff; }
.ek-option:hover { border-color:var(--ek-primary); background:#fafbff; }
.ek-option:has(.ek-opt-input:checked) { border-color:var(--ek-primary); background:#ede9fe; }
.ek-opt-input { display:none; }
.ek-option__dot { width:18px; height:18px; border:2px solid #d1d5db; border-radius:50%; flex-shrink:0; transition:all .15s; }
.ek-option:has(.ek-opt-input:checked) .ek-option__dot { border-color:var(--ek-primary); background:var(--ek-primary); }
.ek-option__box { width:18px; height:18px; border:2px solid #d1d5db; border-radius:4px; flex-shrink:0; transition:all .15s; }
.ek-option:has(.ek-opt-input:checked) .ek-option__box { border-color:var(--ek-primary); background:var(--ek-primary); }
.ek-option__text { font-size:14px; color:#374151; flex:1; }
.ek-fill-input, .ek-numeric-input { width:100%; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:14px; margin-top:4px; }
.ek-fill-input:focus, .ek-numeric-input:focus { outline:none; border-color:var(--ek-primary); }

/* Sequence drag */
.ek-sequence-list { display:flex; flex-direction:column; gap:6px; }
.ek-seq-item { display:flex; align-items:center; gap:10px; padding:12px 16px; border:1.5px solid #e5e7eb; border-radius:8px; background:#fff; cursor:grab; transition:box-shadow .15s; }
.ek-seq-item:active { cursor:grabbing; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ek-seq-handle { color:#9ca3af; font-size:16px; user-select:none; }

/* Matching */
/* Matching question — two-column dropdown pairing */
.ek-matching { display:flex; flex-direction:column; gap:6px; }
.ek-match-header { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:6px 10px; background:#f8fafc; border-radius:6px; font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; }
.ek-match-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; transition:.15s; }
.ek-match-row:hover { border-color:#c7d2fe; background:#fafbff; }
.ek-match-prompt { font-size:13px; font-weight:500; color:#1e293b; display:flex; align-items:baseline; gap:6px; }
.ek-match-num { font-size:11px; font-weight:700; color:#9ca3af; flex-shrink:0; min-width:16px; }
.ek-match-select { width:100%; padding:8px 10px; border:1.5px solid #e5e7eb; border-radius:6px; font-size:13px; background:#fff; cursor:pointer; color:#374151; }
.ek-match-select:focus { border-color:var(--ek-primary); outline:none; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.ek-match-select option.ek-match-opt-used { color:#9ca3af; font-style:italic; }

/* Hotspot */
.ek-hotspot { position:relative; display:inline-block; }
.ek-hotspot-img { max-width:100%; cursor:crosshair; border-radius:8px; }
.ek-hotspot-dot { position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(239,68,68,.8); border:3px solid #fff; transform:translate(-50%,-50%); pointer-events:none; }

/* ── Cognitive question styles ────────────────────────────────── */
.ek-cognitive-info { background:#f0f4ff; border:1px solid #c7d2fe; border-radius:8px; padding:12px 14px; font-size:13px; margin-bottom:16px; line-height:1.5; }
.ek-cognitive-start { background:var(--ek-primary); color:#fff; border:none; padding:12px 24px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-top:16px; transition:all .2s; }
.ek-cognitive-start:hover { opacity:.9; transform:scale(1.02); }

/* Spatial grid */
.ek-spatial-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:360px; margin:16px auto; }
.ek-spatial-sq { background:#1e293b; border:3px solid #334155; border-radius:8px; aspect-ratio:1; cursor:default; transition:all .2s; }
.ek-spatial-sq.target   { background:#ef4444 !important; border-color:#b91c1c !important; box-shadow:0 0 12px rgba(239,68,68,.5); }
.ek-spatial-sq.clickable { cursor:pointer; }
.ek-spatial-sq.clickable:hover { background:#334155; }
.ek-spatial-sq.selected  { background:#f59e0b !important; border-color:#d97706 !important; }
.ek-spatial-status { text-align:center; font-weight:600; color:var(--ek-primary); margin-top:10px; font-size:14px; }

/* Stroop */
.ek-stroop { text-align:center; padding:20px 0; }
.ek-stroop-word { font-size:56px; font-weight:900; padding:20px; letter-spacing:2px; }
.ek-stroop-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.ek-stroop-btn { padding:16px 28px; font-size:18px; font-weight:700; color:#fff; border:none; border-radius:8px; cursor:pointer; transition:transform .1s,box-shadow .1s; box-shadow:0 4px 6px rgba(0,0,0,.15); }
.ek-stroop-btn:active { transform:scale(.96); }

/* Go/No-Go */
.ek-gonogo { text-align:center; padding:20px; }
.ek-gonogo-target { width:140px; height:140px; border-radius:50%; margin:0 auto 20px; border:5px solid #e5e7eb; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:900; color:#fff; transition:all .2s; }
.ek-gonogo-react { background:#f59e0b; color:#fff; padding:16px 40px; border:none; border-radius:30px; font-size:22px; font-weight:800; cursor:pointer; margin-top:16px; transition:all .15s; }
.ek-gonogo-react:active { transform:scale(.95); }

/* Memory group */
.ek-memory-group { background:#fffbeb; border:1px solid #fcd34d; border-radius:10px; padding:20px; }
.ek-memory-content { font-size:15px; font-weight:600; color:#92400e; line-height:1.6; white-space:pre-wrap; }

/* ── Practice feedback ────────────────────────────────────────── */
.ek-practice-feedback { margin-top:16px; border-radius:10px; overflow:hidden; }
.ek-pf-result  { padding:12px 16px; font-size:14px; font-weight:600; }
.ek-pf-result--correct { background:#d1fae5; color:#065f46; }
.ek-pf-result--wrong   { background:#fee2e2; color:#991b1b; }
.ek-pf-explanation { background:#f9fafb; padding:12px 16px; font-size:13px; color:#374151; border-top:1px solid #e5e7eb; }
.ek-pf-hint        { background:#fef3c7; padding:12px 16px; font-size:13px; color:#92400e; border-top:1px solid #fcd34d; }

/* ── Nav buttons ──────────────────────────────────────────────── */
.ek-q-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:16px; border-top:1px solid #f3f4f6; }
.ek-btn-prev, .ek-btn-next, .ek-btn-submit, .ek-btn-check-answer { padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .15s; }
.ek-btn-prev   { background:#f3f4f6; color:#374151; }
.ek-btn-next   { background:var(--ek-primary); color:#fff; }
.ek-btn-submit { background:#059669; color:#fff; }
.ek-btn-check-answer { background:#ede9fe; color:#6d28d9; }
.ek-btn-prev:hover   { background:#e5e7eb; }
.ek-btn-next:hover   { opacity:.9; }
.ek-btn-submit:hover { background:#047857; }
.ek-btn-check-answer:hover { background:#ddd6fe; }

/* ── Processing / result ──────────────────────────────────────── */
.ek-processing { text-align:center; padding:60px 20px; }
.ek-processing p { color:#6b7280; margin-top:16px; }
.ek-processing-spinner { width:40px; height:40px; border:4px solid #e5e7eb; border-top-color:var(--ek-primary); border-radius:50%; animation:ek-spin .8s linear infinite; margin:0 auto; }
@keyframes ek-spin { to { transform:rotate(360deg); } }

.ek-result-wrap { max-width:700px; margin:0 auto; }
.ek-result-hero { background:linear-gradient(135deg, var(--hero-color,#4F46E5) 0%, #1e1b4b 100%); border-radius:20px; padding:40px; display:flex; justify-content:center; margin-bottom:20px; }
.ek-result-circle { position:relative; width:150px; height:150px; }
.ek-result-circle::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(white 0% calc(var(--pct,0) * 1%), rgba(255,255,255,.2) calc(var(--pct,0) * 1%) 100%); }
.ek-result-circle-inner { position:absolute; inset:10px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ek-result-pct { font-size:28px; font-weight:800; color:#111827; }
.ek-result-verdict { font-size:12px; font-weight:700; letter-spacing:.5px; margin-top:2px; }

.ek-result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.ek-rs { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; text-align:center; }
.ek-rs span { display:block; font-size:18px; font-weight:700; color:#111827; }
.ek-rs label { font-size:11px; color:#9ca3af; margin-top:3px; }
.ek-result-warning { background:#fef3c7; border:1px solid #fcd34d; border-radius:8px; padding:12px 16px; font-size:13px; color:#92400e; margin-bottom:12px; }
.ek-result-info    { background:#dbeafe; border:1px solid #93c5fd; border-radius:8px; padding:12px 16px; font-size:13px; color:#1e40af; margin-bottom:12px; }
.ek-result-footer  { text-align:center; font-size:12px; color:#9ca3af; padding:12px 0; }

/* Review */
.ek-result-review { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:16px; }
.ek-result-review h3 { margin:0 0 16px; font-size:15px; }
.ek-review-q { padding:14px; border-radius:8px; margin-bottom:10px; }
.ek-review-q--correct { background:#f0fdf4; }
.ek-review-q--wrong   { background:#fef2f2; }
.ek-review-q__head { display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; font-size:13px; font-weight:500; }
.ek-review-q__icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.ek-review-q--correct .ek-review-q__icon { background:#d1fae5; color:#065f46; }
.ek-review-q--wrong   .ek-review-q__icon { background:#fee2e2; color:#991b1b; }
.ek-rv-opt { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; margin:3px; border:1px solid #e5e7eb; color:#6b7280; }
.ek-rv-correct { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.ek-rv-wrong   { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.ek-rv-missed  { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.ek-rv-expl    { background:#f9fafb; padding:8px 12px; border-radius:6px; font-size:12px; color:#6b7280; margin-top:8px; border-left:3px solid #d1d5db; }

/* ── Notice boxes ─────────────────────────────────────────────── */
.ek-notice-box { max-width:600px; margin:40px auto; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:40px; text-align:center; color:#374151; }
.ek-access-gate { max-width:500px; margin:40px auto; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:40px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.ek-access-gate h2 { margin:0 0 10px; }
.ek-access-gate p  { color:#6b7280; margin-bottom:24px; }
.ek-access-btn { background:#f59e0b; color:#fff; padding:14px 30px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; }

/* Vision / Ishihara test */
.ek-vision-test { padding:4px 0; }
.ek-vision-instruction { display:flex;align-items:center;gap:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;color:#1e40af;margin-bottom:12px; }
.ek-vision-plate-wrap { text-align:center;margin-bottom:12px; }
.ek-vision-plate { max-width:280px;width:100%;border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.15);user-select:none;-webkit-user-drag:none;display:block;margin:0 auto; }
.ek-vision-countdown { position:relative;height:32px;background:#f1f5f9;border-radius:20px;overflow:hidden;margin-bottom:6px;display:flex;align-items:center;justify-content:center;max-width:280px;margin-left:auto;margin-right:auto; }
.ek-vision-cdown-bar { position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#4f46e5,#818cf8);border-radius:20px;transition:width 1s linear; }
.ek-vision-cdown-text { position:relative;z-index:1;font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3); }
.ek-vision-phase2 { text-align:center;padding:8px 0; }
.ek-vision-answer-prompt p { margin:6px 0;font-size:14px;font-weight:600;color:#1e293b;text-align:center; }
.ek-vision-answer-prompt p:last-child { font-size:12px;color:#9ca3af;font-weight:400; }
.ek-vision-answer { width:100%;max-width:240px;font-size:28px;font-weight:800;text-align:center;letter-spacing:6px;padding:14px;border:2.5px solid #e5e7eb;border-radius:12px;outline:none;transition:.2s;background:#f9fafb;display:block;margin:12px auto 0; }
.ek-vision-answer:focus { border-color:#4f46e5;background:#fff;box-shadow:0 0 0 4px #4f46e522; }

/* ── Security: hide answer data from casual inspection ─────────── */
/* Correct option IDs stored in data-correct are obfuscated in DOM  */
.ek-option input[type=radio],
.ek-option input[type=checkbox] { pointer-events:auto; }
/* Block text selection during exam to prevent copy-paste */
.ek-q-text, .ek-option__text { user-select:none; -webkit-user-select:none; }
/* Block drag */
.ek-exam-wrap img { -webkit-user-drag:none; user-drag:none; pointer-events:none; }

/* ── Instructions panel ───────────────────────────────────────── */
.ek-intro-instructions { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; margin:20px 0; text-align:left; }
.ek-inst-header { padding:13px 16px; background:#f8fafc; font-weight:700; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:#374151; user-select:none; }
.ek-inst-header:hover { background:#f1f5f9; }
.ek-inst-arrow { font-size:11px; color:#9ca3af; transition:transform .2s; }
.ek-intro-instructions.open .ek-inst-arrow { transform:rotate(180deg); }
.ek-inst-body { display:none; padding:0 16px 16px; }
.ek-intro-instructions.open .ek-inst-body { display:block; }
.ek-inst-section { margin-top:14px; padding:12px 14px; border-radius:8px; background:#f9fafb; border-left:4px solid #e5e7eb; }
.ek-inst-section h4 { margin:0 0 8px; font-size:13px; color:#1e293b; }
.ek-inst-section ul { margin:0; padding-left:18px; }
.ek-inst-section ul li { font-size:12px; color:#374151; margin-bottom:5px; line-height:1.55; }
.ek-inst-section--blue   { border-left-color:#3b82f6; background:#eff6ff; }
.ek-inst-section--amber  { border-left-color:#f59e0b; background:#fffbeb; }
.ek-inst-section--red    { border-left-color:#ef4444; background:#fef2f2; }
.ek-inst-section--green  { border-left-color:#22c55e; background:#f0fdf4; }
.ek-inst-section--purple { border-left-color:#a855f7; background:#faf5ff; }

/* Agreement checkbox */
.ek-inst-agree { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#374151; margin:16px 0 12px; cursor:pointer; text-align:left; line-height:1.5; }
.ek-inst-agree input[type=checkbox] { margin-top:2px; width:16px; height:16px; flex-shrink:0; cursor:pointer; accent-color:var(--ek-primary); }

/* Start button disabled state */
.ek-btn-start--disabled, .ek-btn-start:disabled { opacity:.45; cursor:not-allowed; }

/* ── Offline recovery bar ─────────────────────────────────────── */
.ek-recovery-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:12px 14px; margin-bottom:16px; font-size:13px; color:#92400e; }
.ek-recovery-bar span { flex:1; min-width:200px; }
.ek-recovery-btn { background:#f59e0b; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-weight:700; font-size:12px; cursor:pointer; }
.ek-recovery-btn:hover { background:#d97706; }
.ek-recovery-dismiss { background:none; border:1px solid #fcd34d; color:#92400e; padding:8px 14px; border-radius:6px; font-size:12px; cursor:pointer; }

/* ── Instruction Wizard ───────────────────────────────────────── */
.ek-btn-read-inst { width:100%;padding:12px;margin-top:8px;border-radius:8px;border:2px dashed #4f46e5;background:#eef2ff;color:#4f46e5;font-size:14px;font-weight:700;cursor:pointer;transition:.15s; }
.ek-btn-read-inst:hover { background:#e0e7ff; }
.ek-wizard { border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;margin:16px 0;text-align:left; }
.ek-wiz-progress { height:4px;background:#f1f5f9; }
.ek-wiz-bar { height:4px;background:var(--ek-primary);transition:width .3s; }
.ek-wiz-cards { position:relative; }
.ek-wiz-card { display:none;padding:24px 20px; }
.ek-wiz-card.active { display:block;animation:ek-fadein .2s ease; }
.ek-wiz-icon { font-size:36px;margin-bottom:10px; }
.ek-wiz-card h3 { font-size:16px;font-weight:700;color:#1e293b;margin:0 0 12px; }
.ek-wiz-card ul { margin:0;padding-left:18px; }
.ek-wiz-card ul li { font-size:13px;color:#374151;margin-bottom:7px;line-height:1.55; }
.ek-wiz-agree { display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:#065f46; }
.ek-wiz-agree input { margin-top:1px;accent-color:#22c55e;flex-shrink:0; }
.ek-wiz-nav { display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #f1f5f9;background:#f8fafc; }
.ek-wiz-prev { background:#fff;border:1.5px solid #e5e7eb;color:#374151;padding:8px 16px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer; }
.ek-wiz-next { background:var(--ek-primary);color:#fff;border:none;padding:8px 20px;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s; }
.ek-wiz-next--accept { background:#059669 !important; }
.ek-wiz-step-label { font-size:12px;color:#9ca3af; }
.ek-btn-start--ready { background:#059669 !important;opacity:1 !important; }

/* ── In-exam instruction reference panel ─────────────────────── */
.ek-inst-ref-btn { background:none;border:1px solid #e5e7eb;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:14px;color:#6b7280;transition:.15s; }
.ek-inst-ref-btn:hover { background:#f1f5f9;color:#374151; }
.ek-inst-ref { display:none;background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:14px 16px;margin-bottom:12px; }
.ek-inst-ref.open { display:block;animation:ek-fadein .2s ease; }
.ek-inst-ref__close { text-align:right;font-size:12px;color:#92400e;cursor:pointer;font-weight:600;margin-bottom:8px; }
.ek-inst-ref__grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px; }
.ek-inst-ref__item { font-size:12px;color:#374151;background:#fff;border-radius:6px;padding:8px 10px;border:1px solid #fde68a;line-height:1.5; }
.ek-inst-ref__item strong { display:block;color:#92400e;margin-bottom:2px; }

/* ── Integrity warning strip (tab switch notification) ──────── */
[id^=ek-warn-strip-] { animation:ek-fadein .3s ease; }

/* ── In-exam instructions quick-link ─────────────────────────── */
.ek-q-inst-link { text-align:center;padding:10px 0 4px;font-size:12px;color:#9ca3af;border-top:1px solid #f1f5f9;margin-top:16px; }
.ek-q-inst-btn { background:none;border:none;color:#4f46e5;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;padding:0; }
.ek-q-inst-btn:hover { color:#3730a3; }

/* ── In-exam instruction modal overlay ───────────────────────── */
.ek-inst-modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;align-items:center;justify-content:center;font-family:'Segoe UI',sans-serif; }
.ek-inst-modal-overlay.open { display:flex; }
.ek-inst-modal { background:#fff;border-radius:14px;width:90%;max-width:520px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ek-inst-modal__head { padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.ek-inst-modal__head h3 { margin:0;font-size:15px;color:#1e293b; }
.ek-inst-modal__close { background:none;border:none;font-size:20px;cursor:pointer;color:#9ca3af;line-height:1;padding:0; }
.ek-inst-modal__close:hover { color:#374151; }
.ek-inst-modal__body { overflow-y:auto;padding:0; }

/* ── Footer instructions accordion ───────────────────────────── */
.ek-footer-inst { margin-top:16px; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff; }
.ek-footer-inst__toggle { width:100%; padding:13px 18px; background:#f8fafc; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:#374151; transition:.15s; text-align:left; }
.ek-footer-inst__toggle:hover { background:#f1f5f9; }
.ek-footer-inst__label { display:flex; align-items:center; gap:6px; }
.ek-footer-inst__arrow { font-size:11px; color:#9ca3af; transition:transform .25s; flex-shrink:0; }
.ek-footer-inst.open .ek-footer-inst__arrow { transform:rotate(180deg); }
.ek-footer-inst__body { display:none; border-top:1px solid #f1f5f9; }
.ek-footer-inst.open .ek-footer-inst__body { display:block; }
.ek-footer-inst__inner { padding:4px 16px 16px; max-height:380px; overflow-y:auto; }

/* ── Submit confirmation overlay ─────────────────────────────── */
.ek-confirm-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999998;align-items:center;justify-content:center;font-family:"Segoe UI",sans-serif; }
.ek-confirm-overlay[style*="flex"] { display:flex !important; }
.ek-confirm-box { background:#fff;border-radius:16px;padding:36px 32px;max-width:500px;width:92%;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center; }
.ek-confirm-icon { font-size:48px;margin-bottom:10px; }
.ek-confirm-title { margin:0 0 20px;font-size:20px;color:#1e293b; }
.ek-confirm-stats { display:flex;gap:12px;justify-content:center;margin-bottom:16px; }
.ek-confirm-stat { flex:1;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb; }
.ek-confirm-stat span { display:block;font-size:28px;font-weight:800;line-height:1; }
.ek-confirm-stat label { font-size:11px;color:#6b7280;margin-top:4px;display:block; }
.ek-confirm-stat--total { background:#f8fafc; }
.ek-confirm-stat--done  { background:#f0fdf4; } .ek-confirm-stat--done span { color:#16a34a; }
.ek-confirm-stat--skip  { background:#fef2f2; } .ek-confirm-stat--skip span { color:#dc2626; }
.ek-confirm-skipped { background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;font-size:13px;color:#991b1b;margin-bottom:12px;text-align:left; }
.ek-confirm-skipped--all { background:#f0fdf4;border-color:#86efac;color:#166534; }
.ek-confirm-note { font-size:12px;color:#6b7280;margin:0 0 16px; }
.ek-confirm-check { display:flex;align-items:flex-start;gap:10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:12px;font-size:13px;color:#374151;margin-bottom:20px;cursor:pointer;text-align:left; }
.ek-confirm-check input { margin-top:2px;flex-shrink:0;cursor:pointer; }
.ek-confirm-actions { display:flex;gap:10px;flex-wrap:wrap;justify-content:center; }
.ek-confirm-review { background:#f1f5f9;border:1px solid #cbd5e1;color:#475569;padding:11px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer; }
.ek-confirm-review:hover { background:#e2e8f0; }
.ek-confirm-submit { background:#4f46e5;color:#fff;border:none;padding:11px 24px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s; }
.ek-confirm-submit:disabled { background:#9ca3af;cursor:not-allowed; }
.ek-confirm-submit:not(:disabled):hover { background:#4338ca; }

/* ── Skip button and budget display ─────────────────────────────── */
.ek-btn-skip { display:none;background:#fff;border:1px solid #d1d5db;color:#374151;padding:7px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer; }
.ek-btn-skip--disabled { opacity:.45;cursor:not-allowed; }
.ek-skip-budget { font-size:11px;color:#9ca3af;margin-left:6px; }