/* MARKS-style fullscreen test engine — standalone test-series page */
body.marks-test-active { overflow: hidden; background: #0f1117; }
body.marks-test-active #app-main { padding: 0; min-height: 100vh; }

.marks-countdown-overlay { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; align-items: center; justify-content: center; }
.marks-countdown-inner { text-align: center; }
.marks-countdown-grab { color: #f1f5f9; font-size: 28px; font-weight: 600; margin-bottom: 28px; letter-spacing: .01em; }
.marks-countdown-label { color: #e2e8f0; font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.marks-countdown-num { font-family: 'Kanit', sans-serif; font-size: 140px; font-weight: 800; color: #2DD4BF; line-height: 1; animation: mtk-pulse 1s ease infinite; }
@keyframes mtk-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }

.mtk-test-root { min-height: 100vh; background: #12151c; color: #e8eaed; display: flex; flex-direction: column; }
.mtk-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #12151c; border-bottom: 1px solid #2a2f3d; gap: 12px; }
.mtk-header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mtk-close-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3b4254; background: transparent; color: #94a3b8; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.mtk-close-btn:hover { color: #fff; border-color: #64748b; }
.mtk-brand { display: flex; align-items: center; gap: 8px; }
.mtk-logo { width: 32px; height: 32px; border-radius: 6px; background: var(--qx-gradient, linear-gradient(135deg, #2563eb, #1d4ed8)); color: #fff; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mtk-brand-text { font-weight: 800; font-size: 15px; color: #f1f5f9; letter-spacing: .02em; }
.mtk-timer { font-family: 'Kanit', monospace; font-size: 20px; font-weight: 800; color: #f1f5f9; display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
.mtk-timer-ic { font-size: 18px; opacity: .85; }
.mtk-timer.warn { color: #fbbf24; }
.mtk-timer.danger { color: #ef4444; animation: pulse 1s infinite; }
.mtk-submit-top { background: #dc2626; color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.mtk-submit-top:hover { background: #b91c1c; }
.mtk-sec-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #161922; border-bottom: 1px solid #2a2f3d; overflow: hidden; }
.mtk-sec-nav { background: #2a2f3d; border: none; color: #94a3b8; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 18px; flex-shrink: 0; }
.mtk-sec-nav:hover { background: #3b4254; color: #fff; }
.mtk-sec-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.mtk-sec-tabs::-webkit-scrollbar { display: none; }
.mtk-sec-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: #94a3b8; padding: 10px 14px; border-radius: 0; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.mtk-sec-tab.active { color: #f1f5f9; border-bottom-color: #2DD4BF; background: rgba(45,212,191,.1); }
.mtk-sec-tab:hover { color: #e2e8f0; }
.mtk-body { display: grid; grid-template-columns: 1fr 300px; flex: 1; min-height: 0; }
.mtk-main { padding: 14px 20px; overflow-y: auto; }
.mtk-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mtk-q-num { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.mtk-pos-mark { background: #16a34a; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.mtk-neg-mark { background: #dc2626; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.mtk-color-strip { display: flex; height: 5px; width: 100%; flex-shrink: 0; }
.mtk-strip-seg { flex: 1; }
.mtk-strip-math { background: #3b82f6; }
.mtk-strip-phys { background: #22c55e; }
.mtk-strip-chem { background: #a855f7; }
.mtk-strip-acc { background: linear-gradient(90deg, #f59e0b, #ef4444, #ec4899); }
.mtk-sec-tab.mtk-sec-math.active { border-bottom-color: #3b82f6; background: rgba(59,130,246,.12); color: #93c5fd; }
.mtk-sec-tab.mtk-sec-phys.active { border-bottom-color: #22c55e; background: rgba(34,197,94,.12); color: #86efac; }
.mtk-sec-tab.mtk-sec-chem.active { border-bottom-color: #a855f7; background: rgba(168,85,247,.12); color: #d8b4fe; }
.mtk-opt-empty { color: #94a3b8; font-size: 13px; font-style: italic; }
.mtk-opt-text .qx-img-wrap img:not(.qx-pool-fig), .mtk-opt-text img:not(.qx-pool-fig) { max-height: 180px; width: auto; max-width: 100%; border-radius: 8px; }
.mtk-opt-text img.qx-pool-fig, .mtk-opt-text .qx-opt-diagram-slot img { max-height: none !important; width: auto; max-width: 100%; border-radius: 0; }
.mtk-q-text img.qx-pool-fig:not([data-qx-display-w]),
.mtk-main #qxDiagramSlot img:not([data-qx-display-w]),
.mtk-main .qx-diagram-slot img:not([data-qx-display-w]),
.mtk-main .qx-fig img:not([data-qx-display-w]),
.mtk-main .qx-fig-img:not([data-qx-display-w]) {
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  overflow: visible !important;
}
.mtk-main .qx-question-body .qx-diagram-slot {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.mtk-options.qx-opts-img { gap: 8px; margin-bottom: 12px; }
.mtk-options.qx-opts-img .mtk-opt {
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 10px;
  gap: 8px;
}
.mtk-options.qx-opts-img .mtk-opt-radio { margin-top: 2px; }
.mtk-options.qx-opts-img .mtk-opt-letter { min-width: 16px; font-size: 14px; }
.mtk-options.qx-opts-img .mtk-opt-text {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: center;
  line-height: 0;
}
.mtk-options.qx-opts-img .mtk-opt-text .qx-opt-diagram-slot,
.mtk-options.qx-opts-img .mtk-opt-text .qx-opt-fig,
.mtk-options.qx-opts-img .mtk-opt-text .qx-fig,
.mtk-options.qx-opts-img .mtk-opt-text .qx-fig-inner {
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.mtk-options.qx-opts-img .mtk-opt-text img.qx-pool-fig,
.mtk-options.qx-opts-img .mtk-opt-text .qx-opt-diagram-slot img {
  display: block !important;
  max-width: 100% !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: #fff !important;
}
.mtk-options.qx-opts-img .mtk-opt-text .qx-premium-wm-sheet,
.mtk-options.qx-opts-img .mtk-opt-text canvas.qx-wm-canvas,
.mtk-options.qx-opts-img .mtk-opt-text img.qx-quantrex-wm-overlay,
.mtk-options.qx-opts-img .mtk-opt-text canvas.qx-premium-wm-canvas {
  display: none !important;
}
.mtk-q-text { margin-bottom: 8px; }
.qx-question-body .mtk-q-text { margin-bottom: 4px !important; }
.mtk-main .mtk-q-text.qx-marks-native,
.mtk-main .mtk-q-text.qx-marks-native-q { margin-bottom: 4px !important; padding: 0; }
.mtk-main .qx-marks-native img:only-child,
.mtk-main .qx-marks-native-q img:only-child { display: block; margin: 0 auto 4px !important; max-width: min(100%, 420px); }
.mtk-main .mtk-q-head { margin-bottom: 6px; }
.mtk-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mtk-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtk-options-exam-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtk-options-exam { display: flex; flex-direction: column; gap: 10px; }
.mtk-options-match-col .mtk-opt { min-height: auto; }
@media (max-width: 900px) {
  .mtk-options-grid,
  .mtk-options-exam-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .mtk-options-grid { grid-template-columns: 1fr; } }
.mtk-opt { display: flex; align-items: center; gap: 14px; background: #1e2128; border: 1px solid #3d4455; border-radius: 10px; padding: 14px 16px; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif; color: #f1f5f9; transition: border-color .12s, background .12s, box-shadow .12s; width: 100%; min-height: 52px; }
.mtk-opt:hover { border-color: #60a5fa; background: #232733; }
.mtk-opt.selected { border-color: #3b82f6; background: rgba(37,99,235,.12); box-shadow: 0 0 0 1px rgba(59,130,246,.35); }
/* Single MCQ: hide empty radio — letter badge is the selector (screenshots 507/508) */
.mtk-test-root .mtk-opt:not(.mtk-opt-multi) .mtk-opt-radio { display: none !important; }
.mtk-opt-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #6b7280; flex-shrink: 0; margin-top: 0; position: relative; background: #12151c; }
.mtk-opt.selected .mtk-opt-radio { border-color: #3b82f6; }
.mtk-opt.selected .mtk-opt-radio::after { content: ''; position: absolute; inset: 3px; background: #3b82f6; border-radius: 50%; }
.mtk-opt-check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #4b5563; flex-shrink: 0; margin-top: 2px; position: relative; }
.mtk-opt.selected .mtk-opt-check { border-color: #3b82f6; background: #3b82f6; }
.mtk-opt.selected .mtk-opt-check::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mtk-numerical-wrap { display: block; }
/* numerical keypad — see assets/qx-num-keypad.css */
/* A/B/C/D solid blue circle — always visible (practice + CBT + light/dark) */
.mtk-test-root .mtk-opt-letter,
.mtk-opt-letter,
.qx-opt-circle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}
.mtk-test-root .mtk-opt.selected .mtk-opt-letter,
.mtk-opt.selected .mtk-opt-letter {
  background: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.45) !important;
}
.mtk-test-root[data-test-theme="light"] .mtk-opt-letter {
  background: #2563eb !important;
  color: #fff !important;
}
.mtk-test-root .mtk-opt-multi .mtk-opt-letter {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 13px;
}
.mtk-opt-text { flex: 1; }
.mtk-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid #2a2f3d; }
.mtk-btn { padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; border: none; transition: background .15s, opacity .15s; }
.mtk-btn:disabled { opacity: .45; cursor: not-allowed; }
.mtk-btn-clear { background: #374151; color: #e5e7eb; border: 1px solid #4b5563; }
.mtk-btn-clear:hover:not(:disabled) { background: #4b5563; }
.mtk-btn-review { background: #7c3aed; color: #fff; }
.mtk-btn-review:hover:not(:disabled) { background: #6d28d9; }
.mtk-btn-prev { background: #374151; color: #e5e7eb; border: 1px solid #4b5563; }
.mtk-btn-prev:hover:not(:disabled) { background: #4b5563; }
.mtk-btn-save { background: #f8fafc; color: #0f172a; margin-left: auto; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mtk-btn-save:hover:not(:disabled) { background: #fff; }
.mtk-btn-ghost { background: #374151; border: 1px solid #4b5563; color: #e5e7eb; padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mtk-btn-ghost:hover:not(:disabled) { background: #4b5563; color: #fff; }
.mtk-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.mtk-palette { background: #1a1d26; border-left: 1px solid #2a2f3d; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; }
.mtk-pal-head { font-size: 18px; font-weight: 800; margin-bottom: 12px; color: #f1f5f9; }
.mtk-pal-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.mtk-pal-head-row strong { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.mtk-font-tools { display: flex; align-items: center; gap: 4px; }
.mtk-font-btn, .mtk-font-gear { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #3b4254; background: #12151c; color: #cbd5e1; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.mtk-font-btn:hover, .mtk-font-gear:hover { border-color: #2DD4BF; color: #5EEAD4; }
.mtk-font-lbl { font-size: 10px; font-weight: 700; color: #64748b; min-width: 28px; text-align: center; }
.mtk-stop-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid #f59e0b; background: rgba(245,158,11,.12); color: #fbbf24; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mtk-stop-btn:hover { background: rgba(245,158,11,.22); }
.mtk-qview-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.55); display: flex; justify-content: flex-end; }
.mtk-qview-panel { width: min(360px, 92vw); height: 100%; background: #12151c; border-left: 1px solid #2a2f3d; padding: 20px; overflow-y: auto; color: #e2e8f0; }
.mtk-qview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mtk-qview-head strong { font-size: 17px; }
.mtk-qview-close { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
.mtk-qview-sec h4 { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #64748b; margin: 0 0 12px; }
.mtk-qview-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #cbd5e1; }
.mtk-font-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtk-font-preset { padding: 10px 12px; border-radius: 8px; border: 1px solid #3b4254; background: #1a1d26; color: #cbd5e1; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left; }
.mtk-font-preset.on { border-color: #2563eb; background: rgba(37,99,235,.18); color: #93c5fd; }
.mtk-qview-hint { font-size: 12px; color: #64748b; margin-top: 12px; line-height: 1.5; }
.mtk-pal-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #94a3b8; line-height: 1.4; }
.mtk-pal-legend span { display: flex; align-items: center; gap: 6px; }
.mtk-pal-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-size: 13px; color: #cbd5e1; border-bottom: 1px solid #2a2f3d; padding-bottom: 14px; }
.mtk-stat { display: flex; align-items: center; gap: 8px; }
.mtk-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mtk-dot.answered { background: #28a745; }
.mtk-dot.not-answered { background: #dc3545; }
.mtk-dot.unvisited { background: #6c757d; }
.mtk-dot.rev-ans { background: #6f42c1; }
.mtk-dot.rev-skip { background: #9b59b6; }
.mtk-pal-groups { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.mtk-pal-group { margin-bottom: 14px; }
.mtk-pal-grp-label { font-size: 12px; font-weight: 800; color: #94a3b8; letter-spacing: .06em; margin-bottom: 10px; text-transform: uppercase; }
.mtk-pal-grp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mtk-pal-grp-grid.flat { grid-template-columns: repeat(6, 1fr); }
.mtk-pal-cell { aspect-ratio: 1; border: 1px solid #3b4254; border-radius: 6px; background: #12151c; color: #cbd5e1; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .1s; }
.mtk-pal-cell.answered { background: #155724; border-color: #28a745; color: #d4edda; }
.mtk-pal-cell.not-answered { background: #721c24; border-color: #dc3545; color: #f8d7da; }
.mtk-pal-cell.unvisited { background: #2a2f3d; border-color: #6c757d; color: #adb5bd; }
.mtk-pal-cell.rev-ans { background: #4a235a; border-color: #6f42c1; color: #e8daef; }
.mtk-pal-cell.rev-skip { background: #5b2c6f; border-color: #9b59b6; color: #f5eef8; }
.mtk-pal-cell.cur { box-shadow: 0 0 0 2px #2563eb; border-color: #3b82f6; }
.mtk-pal-cell:hover { transform: scale(1.06); }
.mtk-submit-btn { width: 100%; background: #dc2626; color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.mtk-submit-btn:hover { background: #b91c1c; }
.mtk-header-tools {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 4px 8px; border-radius: 10px; border: 1px solid #3b4254; background: rgba(18,21,28,.85);
}
.mtk-theme-btn { background: none; border: 1px solid #3b4254; color: #94a3b8; border-radius: 8px; padding: 6px 10px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.mtk-theme-btn:hover { border-color: #2DD4BF; color: #e2e8f0; }
.mtk-theme-lbl { font-size: 11px; font-weight: 700; color: #94a3b8; min-width: 32px; text-align: center; }
.mtk-test-root[data-test-theme="light"] .mtk-header-tools { background: rgba(255,255,255,.9); border-color: #e2e8f0; }
.mtk-test-root[data-test-theme="light"] .mtk-theme-lbl { color: #64748b; }

.mtk-test-root .mtk-q-text,
.mtk-test-root .mtk-q-text .qx-content,
.mtk-test-root .mtk-opt-text,
.mtk-test-root .mtk-opt-text .qx-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #e8eaed;
}
.mtk-test-root[data-font-scale="small"] .mtk-q-text, .mtk-test-root[data-font-scale="small"] .mtk-q-text .qx-content { font-size: 14px; }
.mtk-test-root[data-font-scale="small"] .mtk-opt-text, .mtk-test-root[data-font-scale="small"] .mtk-opt-text .qx-content { font-size: 13px; }
.mtk-test-root[data-font-scale="large"] .mtk-q-text, .mtk-test-root[data-font-scale="large"] .mtk-q-text .qx-content { font-size: 18px; }
.mtk-test-root[data-font-scale="large"] .mtk-opt-text, .mtk-test-root[data-font-scale="large"] .mtk-opt-text .qx-content { font-size: 17px; }
.mtk-test-root[data-font-scale="xlarge"] .mtk-q-text, .mtk-test-root[data-font-scale="xlarge"] .mtk-q-text .qx-content { font-size: 20px; }
.mtk-test-root[data-font-scale="xlarge"] .mtk-opt-text, .mtk-test-root[data-font-scale="xlarge"] .mtk-opt-text .qx-content { font-size: 18px; }
.mtk-test-root .mtk-opt-text,
.mtk-test-root .mtk-opt-text .qx-content { font-size: 15px; line-height: 1.6; }
.mtk-test-root .mtk-q-text p,
.mtk-test-root .mtk-opt-text p { margin: 4px 0; }
.mtk-test-root .qx-content .MathJax { font-size: 1.02em !important; }

.mtk-test-root[data-test-theme="light"] { background: #f8fafc; color: #0f172a; }
.mtk-test-root[data-test-theme="light"] .mtk-header { background: #fff; border-bottom-color: #e2e8f0; }
.mtk-test-root[data-test-theme="light"] .mtk-brand-text, .mtk-test-root[data-test-theme="light"] .mtk-timer, .mtk-test-root[data-test-theme="light"] .mtk-q-num { color: #0f172a; }
.mtk-test-root[data-test-theme="light"] .mtk-sec-bar { background: #f1f5f9; border-bottom-color: #e2e8f0; }
.mtk-test-root[data-test-theme="light"] .mtk-sec-tab { color: #64748b; }
.mtk-test-root[data-test-theme="light"] .mtk-sec-tab.active { color: #0f172a; }
.mtk-test-root[data-test-theme="light"] .mtk-q-text, .mtk-test-root[data-test-theme="light"] .mtk-opt { color: #334155; }
.mtk-test-root[data-test-theme="light"] .mtk-opt { background: #f8fafc; border-color: #d1d5db; }
.mtk-test-root[data-test-theme="light"] .mtk-opt:hover { background: #fff; border-color: #93c5fd; }
.mtk-test-root[data-test-theme="light"] .mtk-opt.selected { background: #eff6ff; border-color: #2563eb; }
.mtk-test-root[data-test-theme="light"] .mtk-opt-letter { background: #2563eb; color: #fff !important; }
.mtk-test-root[data-test-theme="light"] .mtk-opt.selected .mtk-opt-letter { background: #1d4ed8; }
.mtk-test-root[data-test-theme="light"] .mtk-palette { background: #fff; border-left-color: #e2e8f0; }
.mtk-test-root[data-test-theme="light"] .mtk-pal-head { color: #0f172a; }
.mtk-test-root[data-test-theme="light"] .mtk-btn-ghost { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }
.mtk-test-root[data-test-theme="light"] .mtk-btn-save { background: #0f172a; color: #fff; }
.mtk-test-root[data-test-theme="light"] .mtk-q-text,
.mtk-test-root[data-test-theme="light"] .mtk-q-text .qx-content,
.mtk-test-root[data-test-theme="light"] .mtk-opt-text,
.mtk-test-root[data-test-theme="light"] .mtk-opt-text .qx-content { color: #1e293b; }

.mtk-opt-match { align-items: center; }
/* figures — see assets/qx-figure.css */
.mtk-options.qx-opts-multi, .mtk-options.qx-opts-match { display: flex; flex-direction: column; gap: 10px; }
.mtk-options.qx-opts-match .mtk-opt { min-height: auto; }
.mtk-options.qx-opts-img { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .mtk-options.qx-opts-img { grid-template-columns: 1fr; } }
.mtk-q-text table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
.mtk-q-text table th, .mtk-q-text table td { border: 1px solid #2a2f3d; padding: 8px 10px; vertical-align: top; }
.mtk-q-text table th { background: #1a1d26; font-weight: 700; }

.marks-modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.marks-modal { background: #1a1d26; border: 1px solid #2a2f3d; border-radius: 16px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; color: #e2e8f0; }
.marks-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #2a2f3d; }
.marks-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.marks-modal-body { padding: 18px 20px; }
.marks-modal-foot { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid #2a2f3d; }
.marks-modal-cancel { flex: 1; background: #2a2f3d; border: none; color: #cbd5e1; padding: 12px; border-radius: 10px; font-weight: 600; cursor: pointer; font-family: inherit; }
.marks-modal-apply { flex: 1; background: #f1f5f9; border: none; color: #0f172a; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; font-family: inherit; }
.marks-resume-secondary { width: 100%; margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid #3b4254; background: transparent; color: #cbd5e1; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.marks-resume-secondary:hover { border-color: #64748b; background: rgba(255,255,255,.04); }
.marks-resume-modal { background: #1e2230; border: 1px solid #3b4254; border-radius: 16px; padding: 32px 28px 24px; width: 100%; max-width: 400px; text-align: center; position: relative; color: #f1f5f9; }
.marks-resume-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
.marks-resume-icon { font-size: 40px; margin-bottom: 12px; }
.marks-resume-modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.marks-resume-sub { font-size: 14px; font-weight: 600; color: #cbd5e1; margin: 0 0 8px; }
.marks-resume-hint { font-size: 13px; color: #94a3b8; line-height: 1.5; margin: 0 0 20px; }
.marks-resume-btn { width: 100%; padding: 12px 16px; border-radius: 10px; border: none; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; }
.marks-resume-cancel { width: 100%; margin-top: 10px; padding: 10px; border: none; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.marks-submit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 18px; text-align: left; font-size: 13px; color: #cbd5e1; }
.marks-submit-stats span { background: rgba(255,255,255,.04); border: 1px solid #3b4254; border-radius: 8px; padding: 8px 10px; }
.marks-submit-stats strong { color: #f8fafc; margin-right: 4px; }

.qx-content { line-height: 1.65; word-wrap: break-word; }
.qx-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; display: block; }
.qx-content table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
.qx-content td, .qx-content th { border: 1px solid #2a2f3d; padding: 8px 10px; }
.qx-content p { margin: 6px 0; }

@media (max-width: 900px) {
  .mtk-body { grid-template-columns: 1fr; }
  .mtk-palette { border-left: none; border-top: 1px solid #2a2f3d; max-height: 280px; }
  .mtk-main { padding: 16px; }
}