/* Quiz Master Pro — واجهة الطالب
   فكرة التصميم: ورقة الإجابة (OMR). الخيارات ودوائر الأسئلة فقاعات تُظلَّل كما في الورقة الحقيقية. */

.qmp-app {
	/* ألوان الهوية (قياس 2030): تُستبدل من الإعدادات ← ألوان الهوية */
	--qmp-brand: #2854a4;
	--qmp-brand-d: #1b3c7a;
	--qmp-accent: #e86820;
	--qmp-dark: #202428;
	--qmp-paper: #f3f5fa;
	--qmp-card: #ffffff;
	--qmp-ink: #1c2230;
	--qmp-muted: #5a6577;
	--qmp-line: #d8deea;
	--qmp-green: var(--qmp-brand);
	--qmp-green-d: var(--qmp-brand-d);
	--qmp-amber: var(--qmp-accent);
	--qmp-red: #b3412f;
	--qmp-ok: #1e7a4c;
	--qmp-sticky-top: 0px;

	direction: rtl;
	text-align: right;
	color: var(--qmp-ink);
	font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	margin: 1.5em 0;
}
.qmp-app *, .qmp-app *::before, .qmp-app *::after { box-sizing: border-box; }
.qmp-app button { font: inherit; cursor: pointer; }
.qmp-app button:disabled { cursor: not-allowed; opacity: .55; }
.qmp-app :focus-visible { outline: 3px solid var(--qmp-green); outline-offset: 2px; }
.qmp-app h2, .qmp-app h3, .qmp-app h4 { margin: 0 0 .5em; line-height: 1.4; color: var(--qmp-ink); }
.qmp-app p { margin: 0 0 .8em; }
.qmp-app ul, .qmp-app ol { margin: 0; padding: 0; list-style: none; }
.qmp-app img { max-width: 100%; height: auto; vertical-align: middle; }
.qmp-app table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.qmp-app th, .qmp-app td { border: 1px solid var(--qmp-line); padding: .3em .7em; }

/* ---------- أزرار ---------- */
.qmp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	background: var(--qmp-green); color: #fff; border: 2px solid var(--qmp-green);
	border-radius: 8px; padding: .5em 1.3em; text-decoration: none; font-weight: 600; line-height: 1.5;
	transition: background-color .15s, color .15s;
}
.qmp-btn:hover:not(:disabled) { background: var(--qmp-green-d); border-color: var(--qmp-green-d); color: #fff; }
.qmp-btn-ghost { background: transparent; color: var(--qmp-green); }
.qmp-btn-ghost:hover:not(:disabled) { background: var(--qmp-green); color: #fff; }
.qmp-btn-alt { background: var(--qmp-ink); border-color: var(--qmp-ink); }
.qmp-btn-alt:hover:not(:disabled) { background: #000; border-color: #000; }
.qmp-btn-lg { font-size: 1.1em; padding: .7em 2em; }
.qmp-btn-flag { background: transparent; color: var(--qmp-amber); border-color: var(--qmp-amber); }
.qmp-btn-flag:hover:not(:disabled), .qmp-btn-flag.is-on { background: var(--qmp-amber); color: #fff; border-color: var(--qmp-amber); }
.qmp-link { background: none; border: 0; padding: 0; color: var(--qmp-green); text-decoration: underline; }
.qmp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- تنبيهات ---------- */
.qmp-boot { color: var(--qmp-muted); padding: 1.5em 0; }
.qmp-note { border-right: 4px solid var(--qmp-muted); background: #fff; padding: .8em 1em; margin: 0 0 1em; }
.qmp-note-error { border-color: var(--qmp-red); }
.qmp-note-info { border-color: var(--qmp-green); }
.qmp-note p:last-child { margin-bottom: 0; }
.qmp-warn { color: var(--qmp-red); font-weight: 600; }
.qmp-disclaimer { font-size: .8em; color: var(--qmp-muted); border-top: 1px solid var(--qmp-line); padding-top: .8em; margin-top: 2em; }

/* ---------- صفحة البداية ---------- */
.qmp-land-head h2 { font-size: 1.7em; }
.qmp-land-head p { color: var(--qmp-muted); max-width: 60ch; }
.qmp-land-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 1em; }
.qmp-spec, .qmp-start { background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 10px; padding: 1.2em 1.4em; }
.qmp-spec-list li { display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; align-items: baseline; padding: .55em 0; border-bottom: 1px dashed var(--qmp-line); }
.qmp-spec-n { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 2px solid var(--qmp-ink); border-radius: 50%; font-size: .85em; font-weight: 700; }
.qmp-spec-m { color: var(--qmp-muted); font-size: .9em; white-space: nowrap; }
.qmp-spec-total { margin: .9em 0 0; font-weight: 700; }
.qmp-modes { border: 0; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.qmp-modes legend { font-weight: 700; margin-bottom: .4em; padding: 0; }
.qmp-mode { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--qmp-line); border-radius: 10px; padding: .7em .9em; cursor: pointer; background: var(--qmp-paper); }
.qmp-mode:has(input:checked) { border-color: var(--qmp-green); background: #fff; }
.qmp-mode input { margin-top: .55em; accent-color: var(--qmp-green); }
.qmp-mode small { display: block; color: var(--qmp-muted); font-size: .85em; line-height: 1.6; }
.qmp-remaining { color: var(--qmp-muted); }
.qmp-lock { text-align: center; }
.qmp-lock-mark { font-size: 2.2em; line-height: 1; }
.qmp-lock .qmp-actions { justify-content: center; }
.qmp-history { margin-top: 2em; }
.qmp-hist-list li { display: grid; grid-template-columns: 7em 1fr 6em 8em; gap: 10px; align-items: center; padding: .55em .2em; border-bottom: 1px solid var(--qmp-line); }
.qmp-history-page .qmp-hist-list li { grid-template-columns: 7em 1fr 5em 6em; }

/* ---------- الامتحان ---------- */
.qmp-exam { position: relative; background: var(--qmp-paper); border: 1px solid var(--qmp-line); border-radius: 12px; overflow: clip; }
.qmp-bar {
	position: sticky; top: var(--qmp-sticky-top); z-index: 5;
	display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
	background: var(--qmp-ink); color: #fff; padding: .6em 1em;
}
.qmp-bar-title { display: flex; flex-direction: column; line-height: 1.4; }
.qmp-bar-title strong { font-size: 1em; }
.qmp-sec-name { font-size: .85em; opacity: .8; }
.qmp-bar-tools { display: flex; align-items: center; gap: 12px; }
.qmp-bar .qmp-btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); padding: .3em 1em; }
.qmp-bar .qmp-btn-ghost:hover:not(:disabled) { background: #fff; color: var(--qmp-ink); }
.qmp-save { font-size: .78em; opacity: .85; }
.qmp-save[data-state="error"] { color: #ffb4a8; opacity: 1; }
.qmp-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25em; letter-spacing: .04em; border: 2px solid rgba(255,255,255,.7); border-radius: 8px; padding: 0 .6em; direction: ltr; }
.qmp-clock.is-warn { color: #ffd27a; border-color: #ffd27a; }
.qmp-clock.is-crit { color: #fff; background: var(--qmp-red); border-color: var(--qmp-red); }

.qmp-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; padding: 18px; align-items: start; }
.qmp-stage { min-width: 0; }
.qmp-split { display: grid; gap: 16px; }
.qmp-split.has-passage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qmp-passage, .qmp-q, .qmp-r-item { background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 10px; padding: 1em 1.2em; }
.qmp-passage { max-height: 72vh; overflow: auto; font-size: .98em; }
.qmp-passage h3 { font-size: 1em; color: var(--qmp-green); }
.qmp-passage-body p { text-align: justify; }

.qmp-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: .6em; flex-wrap: wrap; }
.qmp-q-num { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; padding: 0 .4em; background: var(--qmp-ink); color: #fff; border-radius: 1.1em; font-weight: 700; }
.qmp-q-of { color: var(--qmp-muted); font-size: .85em; }
.qmp-stem { font-size: 1.12em; font-weight: 600; margin-bottom: .9em; white-space: pre-line; }

.qmp-options { display: grid; gap: 10px; }
.qmp-opt {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
	background: var(--qmp-card); color: var(--qmp-ink);
	border: 2px solid var(--qmp-line); border-radius: 10px; padding: .55em .8em;
	transition: border-color .12s;
}
button.qmp-opt:hover:not(:disabled) { border-color: var(--qmp-ink); }
.qmp-opt:disabled { opacity: 1; }
.qmp-opt-text { flex: 1; white-space: pre-line; }
.qmp-bubble {
	flex: none; display: inline-grid; place-items: center; width: 2.3em; height: 2.3em;
	border: 2px solid var(--qmp-ink); border-radius: 50%; font-weight: 700; background: #fff; color: var(--qmp-ink);
}
.qmp-opt.is-picked { border-color: var(--qmp-ink); background: #eff2f8; }
.qmp-opt.is-picked .qmp-bubble { background: var(--qmp-ink); color: #fff; }
.qmp-opt.is-correct { border-color: var(--qmp-ok); background: #eaf6ef; }
.qmp-opt.is-correct .qmp-bubble { background: var(--qmp-ok); border-color: var(--qmp-ok); color: #fff; }
.qmp-opt.is-wrong { border-color: var(--qmp-red); background: #fbeeeb; }
.qmp-opt.is-wrong .qmp-bubble { background: var(--qmp-red); border-color: var(--qmp-red); color: #fff; }
.qmp-opt em { font-style: normal; font-size: .78em; font-weight: 700; color: var(--qmp-muted); white-space: nowrap; }

.qmp-feedback { margin-top: 1em; padding: .8em 1em; border-right: 4px solid var(--qmp-muted); background: var(--qmp-paper); }
.qmp-feedback.is-ok { border-color: var(--qmp-ok); }
.qmp-feedback.is-bad { border-color: var(--qmp-red); }
.qmp-explain { margin-top: .4em; font-size: .95em; }

.qmp-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; }

/* ---------- ورقة الإجابة (الجانب) ---------- */
.qmp-sheet { position: sticky; top: calc(var(--qmp-sticky-top) + 70px); background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 10px; padding: 1em; max-height: calc(100vh - 100px); overflow: auto; }
.qmp-sheet-head { display: flex; justify-content: space-between; margin-bottom: .6em; }
.qmp-sheet-group h4 { font-size: .85em; color: var(--qmp-muted); margin: .8em 0 .4em; }
.qmp-grid { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 6px; }
.qmp-cell {
	display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
	border: 2px solid var(--qmp-ink); border-radius: 50%; background: #fff; color: var(--qmp-ink); font-size: .78em; font-weight: 700; line-height: 1;
}
.qmp-cell.is-answered { background: var(--qmp-ink); color: #fff; }
.qmp-cell.is-right { background: var(--qmp-ok); border-color: var(--qmp-ok); color: #fff; }
.qmp-cell.is-wrong { background: var(--qmp-red); border-color: var(--qmp-red); color: #fff; }
.qmp-cell.is-flag { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--qmp-amber); }
.qmp-cell.is-cur { outline: 3px solid var(--qmp-green); outline-offset: 2px; }
.qmp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 1em; font-size: .78em; color: var(--qmp-muted); }
.qmp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.qmp-legend .qmp-cell { width: 16px; height: 16px; border-width: 2px; }

/* ---------- نافذة التأكيد / انتهاء الوقت ---------- */
.qmp-modal, .qmp-overlay { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: rgba(23,38,43,.62); padding: 16px; }
.qmp-modal-box, .qmp-overlay-box { background: #fff; border-radius: 12px; padding: 1.3em 1.5em; max-width: 520px; width: 100%; max-height: 88vh; overflow: auto; }
.qmp-overlay-box { text-align: center; font-size: 1.1em; }
.qmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .8em; }
.qmp-chip { min-width: 2.4em; padding: .1em .6em; border: 2px solid var(--qmp-ink); background: #fff; border-radius: 1em; font-weight: 700; }
.qmp-chip:hover { background: var(--qmp-ink); color: #fff; }
.qmp-toast { position: absolute; bottom: 16px; right: 50%; transform: translateX(50%); background: var(--qmp-ink); color: #fff; padding: .5em 1.2em; border-radius: 8px; z-index: 6; }

/* ---------- النتيجة ---------- */
.qmp-res-head { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; background: var(--qmp-card); border: 1px solid var(--qmp-line); border-right: 6px solid var(--qmp-green); border-radius: 10px; padding: 1.2em 1.5em; }
.qmp-res-score b { display: block; font-size: 3.4em; line-height: 1.1; color: var(--qmp-green); }
.qmp-res-score span { color: var(--qmp-muted); font-size: .85em; }
.qmp-res-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.qmp-sheetstrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0; }
.qmp-dot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--qmp-ink); font-size: .75em; font-weight: 700; text-decoration: none; color: var(--qmp-ink); background: #fff; }
.qmp-dot.is-right { background: var(--qmp-ok); border-color: var(--qmp-ok); color: #fff; }
.qmp-dot.is-wrong { background: var(--qmp-red); border-color: var(--qmp-red); color: #fff; }
.qmp-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 1.4em 0; }
.qmp-bar-row { margin-bottom: .9em; }
.qmp-bar-label { display: flex; justify-content: space-between; gap: 10px; font-size: .95em; }
.qmp-meter { height: 12px; background: #e3e8f1; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.qmp-meter i { display: block; height: 100%; background: var(--qmp-green); }
.qmp-tag { font-style: normal; font-size: .75em; font-weight: 700; margin-right: .6em; padding: .05em .6em; border-radius: 1em; }
.qmp-tag-weak { background: #fbeeeb; color: var(--qmp-red); }
.qmp-tag-strong { background: #eaf6ef; color: var(--qmp-ok); }
.qmp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1em; }
.qmp-tab { background: #fff; border: 2px solid var(--qmp-line); border-radius: 2em; padding: .15em 1.1em; }
.qmp-tab.is-on { border-color: var(--qmp-ink); background: var(--qmp-ink); color: #fff; }
.qmp-review { display: grid; gap: 14px; }
.qmp-r-item { border-right: 6px solid var(--qmp-line); }
.qmp-r-item.is-right { border-right-color: var(--qmp-ok); }
.qmp-r-item.is-wrong { border-right-color: var(--qmp-red); }
.qmp-r-item.is-skipped { border-right-color: var(--qmp-amber); }
.qmp-r-state { font-weight: 700; font-size: .9em; }
.qmp-chip-static { font-size: .78em; border: 1px solid var(--qmp-line); border-radius: 1em; padding: 0 .7em; color: var(--qmp-muted); }
.qmp-chip-static.is-flag { color: var(--qmp-amber); border-color: var(--qmp-amber); }
.qmp-r-passage { margin-bottom: .8em; background: var(--qmp-paper); padding: .4em .8em; border-radius: 8px; }
.qmp-r-passage summary { cursor: pointer; font-weight: 600; }

/* ---------- شاشات صغيرة ---------- */
@media (max-width: 900px) {
	.qmp-app { font-size: 16px; }
	.qmp-land-grid, .qmp-body, .qmp-split.has-passage { grid-template-columns: minmax(0, 1fr); }
	.qmp-sheet { position: static; max-height: none; }
	.qmp-passage { max-height: 40vh; }
	.qmp-hist-list li, .qmp-history-page .qmp-hist-list li { grid-template-columns: 1fr auto; }
	.qmp-nav .qmp-btn { flex: 1 1 40%; }
	.qmp-res-score b { font-size: 2.6em; }
}

@media (prefers-reduced-motion: reduce) {
	.qmp-app * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.qmp-noprint, .qmp-tabs, .qmp-bar, .qmp-sheet, .qmp-nav { display: none !important; }
	.qmp-app { font-size: 12pt; }
	.qmp-r-item { break-inside: avoid; }
	.qmp-r-passage { display: block; }
}


/* ==================== صفحة الاختبار: عرض كامل + بانر + بوابة ==================== */
body.qmp-test-page .qmp-page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 16px 64px; float: none; }
/* احتياطي لو لم يُستخدم قالب البلاجن (قوالب الكتل أو منشئ الصفحات): نخفي السايدبار والعنوان المكرر */
body.qmp-test-page #secondary,
body.qmp-test-page aside.sidebar,
body.qmp-test-page .sidebar,
body.qmp-test-page .widget-area,
body.qmp-test-page .entry-header,
body.qmp-test-page .entry-meta,
body.qmp-test-page .post-meta,
body.qmp-test-page .page-header,
body.qmp-test-page #comments { display: none !important; }
body.qmp-test-page #primary,
body.qmp-test-page .content-area,
body.qmp-test-page .site-main { width: 100% !important; max-width: 100% !important; float: none !important; flex: 1 1 100% !important; }

/* ---------- البانر ---------- */
.qmp-hero {
	position: relative; overflow: hidden; color: #fff; border-radius: 20px;
	padding: 2.2em 2.2em 1.8em; margin-bottom: 20px;
	background: linear-gradient(135deg, var(--qmp-brand-d) 0%, var(--qmp-brand) 58%, var(--qmp-dark) 145%);
	box-shadow: 0 18px 38px -20px rgba(27, 60, 122, .7);
	border-bottom: 5px solid var(--qmp-accent);
}
.qmp-hero::before, .qmp-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.qmp-hero::before { width: 260px; height: 260px; left: -90px; bottom: -110px; }
.qmp-hero::after { width: 150px; height: 150px; right: -50px; top: -60px; }
.qmp-hero > * { position: relative; z-index: 1; }
.qmp-hero-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1em; }
.qmp-badge {
	display: inline-flex; align-items: center; font-size: .82em; font-weight: 600; line-height: 1.4;
	padding: .2em 1em; border-radius: 999px; color: #fff;
	background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3);
}
.qmp-badge-free { background: rgba(255, 255, 255, .94); color: var(--qmp-brand-d); border-color: transparent; }
.qmp-badge-price { background: var(--qmp-accent); color: #1a1208; border-color: var(--qmp-accent); font-weight: 800; font-size: .92em; }
.qmp-app .qmp-hero h2 { color: #fff; font-size: clamp(1.5em, 3.2vw, 2.3em); margin: 0 0 .35em; }
.qmp-hero-lead { color: rgba(255, 255, 255, .9); max-width: 64ch; font-size: 1.02em; margin-bottom: 0; }

/* ---------- البوابة: القفل أو بدء الاختبار ---------- */
.qmp-gate { margin-bottom: 20px; border-radius: 16px; padding: 1.5em 1.7em; }
.qmp-gate-lock { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; text-align: right; }
.qmp-gate-lock h3 { font-size: 1.35em; margin-bottom: .3em; }
.qmp-gate-lock .qmp-lock-mark { font-size: 1.8em; margin-bottom: .2em; }
.qmp-gate-lock p { color: var(--qmp-muted); max-width: 56ch; }
.qmp-steps { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: .8em 0 1em !important; }
.qmp-steps li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.qmp-steps i { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--qmp-accent); color: #1a1208; font-weight: 800; font-style: normal; font-size: .85em; }
.qmp-price {
	min-width: 190px; text-align: center; padding: 1.1em 1.4em; border-radius: 16px;
	background: var(--qmp-paper); border: 2px dashed var(--qmp-accent);
}
.qmp-price small { display: block; color: var(--qmp-muted); font-size: .82em; }
.qmp-price b { display: block; font-size: 2em; line-height: 1.3; color: var(--qmp-green-d); font-weight: 800; }
.qmp-gate .qmp-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qmp-gate > .qmp-btn-lg { margin-top: .4em; }
.qmp-spec { margin-bottom: 8px; }

@media (max-width: 700px) {
	.qmp-hero { padding: 1.6em 1.2em 1.3em; border-radius: 16px; }
	.qmp-gate-lock { grid-template-columns: minmax(0, 1fr); }
	.qmp-price { min-width: 0; }
	.qmp-gate .qmp-modes { grid-template-columns: minmax(0, 1fr); }
	.qmp-gate .qmp-actions .qmp-btn { width: 100%; }
}

/* ==================== لوحة الطالب ==================== */
.qmp-dash-hero { margin-bottom: 16px; }
.qmp-dash-hi { margin: 0 0 .2em; color: rgba(255, 255, 255, .85); font-weight: 600; }
.qmp-resume {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	background: #fff6ec; border: 1px solid var(--qmp-accent); border-radius: 14px; padding: .9em 1.2em; margin-bottom: 16px;
}
.qmp-resume b { display: block; color: var(--qmp-ink); }
.qmp-resume span { color: var(--qmp-muted); font-size: .9em; }

.qmp-dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--qmp-line); margin-bottom: 18px; }
.qmp-dash-tab {
	appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
	padding: .75em 1.1em; font: inherit; font-weight: 700; color: var(--qmp-muted); cursor: pointer; border-radius: 8px 8px 0 0;
}
.qmp-dash-tab small { background: var(--qmp-paper); color: var(--qmp-ink); border-radius: 999px; padding: .05em .6em; margin-right: .3em; font-size: .78em; }
.qmp-dash-tab:hover { color: var(--qmp-brand); }
.qmp-dash-tab.is-on { color: var(--qmp-brand); border-bottom-color: var(--qmp-accent); }
.qmp-dash-tab:focus-visible, .qmp-fchip:focus-visible { outline: 3px solid var(--qmp-accent); outline-offset: 2px; }

.qmp-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qmp-dash-card { background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 16px; padding: 1.2em 1.4em; }
.qmp-dash-card h3 { margin: 0 0 .8em; font-size: 1.1em; }
.qmp-dash-card-warn { margin-top: 16px; border-color: var(--qmp-accent); background: #fff9f3; }
.qmp-bars { list-style: none; margin: 0; padding: 0; }
.qmp-dash-note { color: var(--qmp-muted); font-size: .85em; margin: .6em 0 0; }
.qmp-empty { color: var(--qmp-muted); }

.qmp-mini-list { list-style: none; margin: 0; padding: 0; }
.qmp-mini-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: .6em 0; border-bottom: 1px solid var(--qmp-line); }
.qmp-mini-list li:last-child { border-bottom: 0; }
.qmp-mini-list a { font-weight: 700; color: var(--qmp-brand); text-decoration: none; }
.qmp-mini-list span { grid-column: 1; color: var(--qmp-muted); font-size: .85em; }
.qmp-mini-list b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--qmp-brand-d); font-size: 1.15em; }

/* حبوب الحالة */
.qmp-pill { display: inline-block; font-size: .78em; font-weight: 700; line-height: 1.5; padding: .15em .8em; border-radius: 999px; background: var(--qmp-paper); color: var(--qmp-ink); }
.qmp-pill-ok { background: #eaf6ef; color: var(--qmp-ok); }
.qmp-pill-warn { background: #fff1e0; color: #9a4a00; }
.qmp-pill-bad { background: #fbeeeb; color: var(--qmp-red); }
.qmp-pill-mute { background: #eceff4; color: var(--qmp-muted); }
.qmp-pill-info { background: #e8eefb; color: var(--qmp-brand-d); }
.qmp-pill-st-completed { background: #eaf6ef; color: var(--qmp-ok); }
.qmp-pill-st-processing { background: #e8eefb; color: var(--qmp-brand-d); }
.qmp-pill-st-on-hold { background: #fff1e0; color: #9a4a00; }
.qmp-pill-st-refunded { background: #eceff4; color: var(--qmp-muted); }

/* بطاقات الاختبارات */
.qmp-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.qmp-tcard { background: var(--qmp-card); border: 1px solid var(--qmp-line); border-top: 4px solid var(--qmp-brand); border-radius: 16px; padding: 1.1em 1.3em 1.3em; display: flex; flex-direction: column; }
.qmp-tcard-expired { border-top-color: var(--qmp-red); }
.qmp-tcard-locked { border-top-color: var(--qmp-muted); }
.qmp-tcard h3 { margin: .5em 0 .2em; font-size: 1.15em; }
.qmp-tcard-meta { color: var(--qmp-muted); margin: 0 0 .8em; font-size: .9em; }
.qmp-kv { list-style: none; margin: 0 0 1em; padding: 0; }
.qmp-kv li { display: flex; justify-content: space-between; gap: 10px; padding: .4em 0; border-bottom: 1px dashed var(--qmp-line); font-size: .92em; }
.qmp-kv span { color: var(--qmp-muted); }
.qmp-tcard .qmp-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* النتائج */
.qmp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.qmp-fchip { appearance: none; border: 1px solid var(--qmp-line); background: var(--qmp-card); color: var(--qmp-ink); border-radius: 999px; padding: .3em 1.1em; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.qmp-fchip.is-on { background: var(--qmp-brand); border-color: var(--qmp-brand); color: #fff; }
.qmp-res-list { list-style: none; margin: 0; padding: 0; }
.qmp-res-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 14px; align-items: center; background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 14px; padding: .8em 1.1em; margin-bottom: 10px; }
.qmp-res-main a { font-weight: 700; color: var(--qmp-ink); text-decoration: none; display: block; }
.qmp-res-main span { color: var(--qmp-muted); font-size: .85em; }
.qmp-res-score b { font-size: 1.3em; color: var(--qmp-brand-d); margin-left: .4em; }
.qmp-res-score small { color: var(--qmp-muted); }

/* المشتريات */
.qmp-order { background: var(--qmp-card); border: 1px solid var(--qmp-line); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.qmp-order > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--qmp-paper); padding: .8em 1.2em; font-size: .92em; }
.qmp-order > header strong { margin-right: auto; color: var(--qmp-brand-d); font-size: 1.05em; }
.qmp-order > ul { list-style: none; margin: 0; padding: 0; }
.qmp-oitem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: .8em 1.2em; border-top: 1px solid var(--qmp-line); }
.qmp-oitem img, .qmp-oitem-ph { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--qmp-paper); display: grid; place-items: center; font-size: 1.6em; }
.qmp-oitem-main a, .qmp-oitem-main span { font-weight: 700; color: var(--qmp-ink); text-decoration: none; }
.qmp-oitem-main small { display: block; color: var(--qmp-muted); }
.qmp-oitem-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qmp-btn-sm { padding: .3em 1em; font-size: .88em; }

@media (max-width: 760px) {
	.qmp-dash-grid { grid-template-columns: minmax(0, 1fr); }
	.qmp-dash-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.qmp-dash-tab { white-space: nowrap; }
	.qmp-res-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.qmp-oitem { grid-template-columns: 48px minmax(0, 1fr); }
	.qmp-oitem img, .qmp-oitem-ph { width: 48px; height: 48px; }
	.qmp-oitem-act { grid-column: 1 / -1; justify-content: flex-start; }
	.qmp-order > header strong { margin-right: 0; }
}

/* ---------- مربعات الإحصاء في البانر (نص أبيض صريح فوق أي ستايل للقالب) ---------- */
.qmp-app .qmp-hero,
.qmp-app .qmp-hero .qmp-hero-lead,
.qmp-app .qmp-hero .qmp-dash-hi { color: #fff; }
.qmp-app .qmp-hero .qmp-hero-lead { color: rgba(255, 255, 255, .92); }
.qmp-app .qmp-hero .qmp-dash-hi { color: rgba(255, 255, 255, .88); }
.qmp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 1.6em; }
.qmp-hero-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qmp-app .qmp-stat {
	display: flex; align-items: center; gap: 14px; min-width: 0;
	padding: 14px 16px; border-radius: 16px; color: #fff;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(2px); transition: background .2s, transform .2s;
}
.qmp-app .qmp-stat:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.qmp-app .qmp-stat-ic {
	flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	background: rgba(255, 255, 255, .16); color: #fff;
}
.qmp-app .qmp-stat-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qmp-app .qmp-stat .qmp-stat-v { display: block; color: #fff; font-size: 1.2em; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.qmp-app .qmp-stat .qmp-stat-l { display: block; color: rgba(255, 255, 255, .82); font-size: .82em; font-weight: 500; line-height: 1.4; }
.qmp-hero-skills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1.3em; padding-top: 1.1em; border-top: 1px solid rgba(255, 255, 255, .2); }
.qmp-app .qmp-hero .qmp-hero-skills b { color: #fff; font-size: .9em; margin-left: 6px; }
.qmp-app .qmp-hero .qmp-hero-skills em {
	font-style: normal; font-size: .82em; font-weight: 600; color: #fff;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; padding: .1em .9em;
}
@media (max-width: 900px) {
	.qmp-hero-stats, .qmp-hero-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.qmp-hero-stats, .qmp-hero-stats-4 { grid-template-columns: minmax(0, 1fr); }
	.qmp-app .qmp-stat { padding: 12px 14px; }
}