:root{
  --c1:#0ea5e9; --c2:#22d3ee; --c3:#10b981;
  --text:#0f172a; --muted:#64748b;
  --card:#ffffff; --bd:#e5e7eb; --bg:#f8fafc;
}
.qg-eval-wrapper{
  font-family:"Tajawal",system-ui,Segoe UI,Arial,sans-serif;
  direction:rtl; color:var(--text);
  max-width:920px; margin:0 auto; padding:14px;
}
.qg-hero{
  background:linear-gradient(135deg,var(--c2),var(--c3));
  border-radius:20px; color:#fff; padding:24px; text-align:center;
  box-shadow:0 18px 34px rgba(16,185,129,.18); margin-bottom:16px
}
.qg-badge{font-weight:800;font-size:20px}
.qg-sub{opacity:.95;margin:.35rem 0 0}

.qg-card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.qg-form label{display:block;margin-bottom:6px;font-weight:700;color:var(--muted)}
.qg-form input{
  width:100%;padding:13px 14px;border:1px solid var(--bd);border-radius:14px;
  transition:border .2s, box-shadow .2s; background:#fff
}
.qg-form input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 4px rgba(14,165,233,.15)}
.qg-form input.qg-invalid{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.qg-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.qg-grid-3{grid-template-columns:1fr}}

.qg-btn{border:none;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;background:#e2e8f0}
.qg-btn:disabled{opacity:.6;cursor:not-allowed}
.qg-primary{background:var(--c1);color:#fff;box-shadow:0 12px 20px rgba(14,165,233,.25)}
.qg-primary:hover{filter:brightness(.97)}

.qg-quiz{margin-top:16px;position:relative}
.qg-progress{height:12px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.qg-bar{height:100%;background:linear-gradient(90deg,var(--c2),var(--c3));transition:width .25s ease}

.qg-qbox{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.qg-qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.qg-step{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:6px 12px;font-weight:800}
.qg-title{margin:0;font-size:22px}

.qg-qcontent .qg-choice{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--bd);
  border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer;
  transition:border .2s, transform .06s, box-shadow .2s; background:#fff
}
.qg-qcontent .qg-choice:hover{border-color:var(--c1);transform:translateY(-1px);box-shadow:0 8px 16px rgba(2,6,23,.05)}
.qg-qcontent input[type=radio]{
  appearance:none;width:18px;height:18px;border:2px solid var(--bd);border-radius:50%;margin-top:2px;position:relative;flex:0 0 auto
}
.qg-qcontent input[type=radio]:checked{border-color:var(--c1)}
.qg-qcontent input[type=radio]:checked::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c1)
}

.qg-actions{display:flex;justify-content:space-between;margin-top:12px;gap:10px}
.qg-actions .qg-btn{flex:1}
@media (max-width:600px){.qg-actions{flex-direction:column}}

.qg-result{margin-top:16px}
.qg-result .qg-score{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.qg-result .qg-score{grid-template-columns:1fr}}
.qg-score-card .qg-score-head{display:flex;justify-content:space-between;margin-bottom:6px}

.qg-meter{background:#f1f5f9;border-radius:12px;overflow:hidden}
.qg-meter .bar{height:12px;transition:width .3s ease}
.qg-meter .bar.traditional{background:#ef4444}
.qg-meter .bar.interactive{background:#f59e0b}
.qg-meter .bar.discovery{background:#22c55e}

.qg-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px dashed #cbd5e1;padding:10px 12px;border-radius:14px}
.qg-list{margin:0;padding-inline-start:1.2rem}
.qg-list li{margin:6px 0}

.qg-result-card .qg-h2{margin:0 0 6px}
.qg-h3{margin:10px 0 6px}
.qg-note{
  background:#ecfeff;border:1px solid #cffafe;color:#0c4a6e;
  padding:10px;border-radius:12px;margin:4px 0 12px
}

/* احترام إعدادات تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .qg-bar,.qg-qcontent .qg-choice,.qg-meter .bar{transition:none}
}

/* --- New Styles for Instructions & Footer --- */
.qg-instructions-block {
  background: #fff;
  border: 1px solid #fcd34d;
  border-top: 4px solid #fbbf24;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: right;
  line-height: 1.6;
}
.qg-inst-title {
  font-weight: 800;
  color: #92400e;
  font-size: 1.1em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qg-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.qg-check-list li {
  position: relative;
  padding-right: 28px;
  margin-bottom: 8px;
  color: #334155;
}
.qg-check-list li::before {
  content: "✔";
  position: absolute;
  right: 0;
  color: #10b981; /* Green */
  font-weight: bold;
}
.qg-inst-blue {
  background: #eff6ff;
  border-right: 4px solid #3b82f6;
  padding: 12px 16px;
  border-radius: 4px;
  color: #1e3a8a;
  font-size: 0.95em;
  line-height: 1.6;
}
.qg-inst-blue strong { color: #172554; display: block; margin-bottom: 4px; }

.qg-footer-copy {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: #94a3b8;
  opacity: 0.8;
}

/* --- New Result Layout --- */
.qg-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .qg-results-grid { grid-template-columns: 1fr; }
}

.qg-res-col {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.qg-h-small {
  margin: 0 0 16px;
  font-size: 1.1em;
  color: #0f172a;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 8px;
}

.qg-icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.qg-icon-list li {
  position: relative;
  padding-right: 26px;
  margin-bottom: 12px;
  font-size: 0.95em;
  color: #475569;
}
/* Positive List (Right/Check) */
.qg-icon-list.positive li::before {
  content: "✔";
  position: absolute;
  right: 0;
  top: 0;
  width: 18px; height: 18px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
}
/* Negative List (Left/Dot) */
.qg-icon-list.negative li::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 7px;
  width: 6px; height: 6px;
  background: #ef4444;
  border-radius: 50%;
}

.qg-tips-box {
  background: #fff1f2; /* Light red/pink bg from screenshot */
  border: 1px solid #fecdd3;
  border-radius: 16px;
  padding: 24px;
  margin-top: 24px;
}
.qg-tips-box h3 {
  color: #881337;
  margin-top: 0;
}