/* ════════════════════════════════════════════════════════════════════
   EXAM SYSTEM (STUDENT) — "اختبر نفسك" + الخدمات + زر الخروج العلوي.
   موديول مستقل قابل للإزالة: احذف <link>+<script>+ملفي exam-system-student.*
   هوية: أزرق جامعي + لمسة ذهبية. بساطة ووضوح وحركة ناعمة.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --exs-b:#0a3d62;--exs-b2:#12598c;--exs-b3:#1b7fb8;--exs-gold:#c9a227;
  --exs-grad:linear-gradient(135deg,#0a3d62 0%,#12598c 55%,#1b7fb8 100%);
}
/* زر الخروج: داخل شريط التنقل بجانب زر الثيم — متناسق، لا يغطّي شيئًا */
#exsLogoutTop{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#c0392b,#e74c3c);color:#fff;font-size:15px;
  flex-shrink:0;transition:transform .15s,box-shadow .2s;
  box-shadow:0 2px 8px rgba(231,76,60,.35);
}
#exsLogoutTop:hover{transform:scale(1.07);box-shadow:0 4px 14px rgba(231,76,60,.5)}
#exsLogoutTop:active{transform:scale(.93)}
/* fallback فقط لو لم يوجد شريط تنقل (نادر) */
#exsLogoutTop.exs-float{position:fixed;top:11px;left:11px;z-index:1000}

.exss-ov{position:fixed;inset:0;z-index:10000;background:#0a0f17;overflow:auto;display:none;
  padding:18px 16px 48px;font-family:inherit;color:#e8eaed;direction:rtl}
.exss-ov.on{display:block;animation:exsFade .25s ease}
@keyframes exsFade{from{opacity:0}to{opacity:1}}
@keyframes exsSlide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.exss-box{max-width:780px;margin:0 auto}
.exss-screen{animation:exsSlide .22s ease}
.exss-x{position:fixed;top:14px;right:16px;width:38px;height:38px;border-radius:50%;border:none;
  background:#1e2a3a;color:#fff;font-size:18px;cursor:pointer;z-index:10001}
.exss-back{background:none;border:none;color:#7fc7ee;cursor:pointer;font-family:inherit;font-size:.9rem;
  font-weight:700;padding:8px 0;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.exss-hero{background:var(--exs-grad);border-radius:18px;padding:22px;margin-bottom:16px;position:relative;overflow:hidden}
.exss-hero::after{content:"";position:absolute;top:-50px;left:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 65%)}
.exss-hero h2{margin:0 0 4px;font-size:1.35rem}.exss-hero p{margin:0;opacity:.85;font-size:.85rem}
.exss-sec-title{font-weight:800;font-size:1rem;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.exss-card{background:#111a27;border:1px solid #1e2a3a;border-radius:16px;padding:16px;margin-bottom:12px;
  transition:border-color .18s,transform .18s}
.exss-card.tap{cursor:pointer}.exss-card.tap:hover{border-color:var(--exs-b3);transform:translateY(-2px)}
.exss-card h3{margin:0 0 6px;font-size:1.02rem}
.exss-meta{font-size:.78rem;color:#8b95a5;line-height:1.7}
.exss-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.exss-badge{font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:12px}
.exss-grad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:8px 0}
.exss-mini{background:#0d1622;border:1px solid #1e2a3a;border-radius:12px;padding:12px;text-align:center}
.exss-mini .v{font-size:1.4rem;font-weight:900}.exss-mini .l{font-size:.68rem;color:#8b95a5;margin-top:2px}
.exss-btn{padding:11px 20px;border-radius:11px;border:none;cursor:pointer;font-family:inherit;font-weight:800;
  color:#fff;background:var(--exs-grad);font-size:.9rem;transition:filter .15s,transform .12s}
.exss-btn:hover{filter:brightness(1.08)}.exss-btn:active{transform:scale(.97)}
.exss-btn.g{background:transparent;border:1px solid var(--exs-b3);color:#7fc7ee}
.exss-btn.sm{padding:7px 14px;font-size:.8rem}
.exss-btn:disabled{opacity:.45;cursor:not-allowed}
.exss-svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.exss-svc a,.exss-svc div{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;
  background:#0d1622;border:1px solid #1e2a3a;border-radius:14px;color:#e8eaed;text-decoration:none;
  font-size:.82rem;font-weight:700;transition:border-color .18s,transform .15s}
.exss-svc a:hover{border-color:var(--exs-gold);transform:translateY(-3px)}
.exss-svc .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;background:var(--exs-grad)}

/* Runner */
.exss-rhead{position:sticky;top:0;background:#0a0f17;padding:10px 0;z-index:5;border-bottom:1px solid #1e2a3a;margin-bottom:14px}
.exss-rtitle{font-weight:800;font-size:.95rem}.exss-rsub{font-size:.74rem;color:#8b95a5}
.exss-timer{font-weight:900;font-size:1rem}.exss-timer.warn{color:#f59e0b}.exss-timer.bad{color:#ff6b6b}
.exss-prog{height:7px;background:#1e2a3a;border-radius:6px;overflow:hidden;margin:8px 0}
.exss-prog>i{display:block;height:100%;background:var(--exs-grad);transition:width .3s}
.exss-nav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.exss-nav button{width:34px;height:34px;border-radius:9px;border:1px solid #1e2a3a;background:#0d1622;
  color:#8b95a5;font-weight:800;cursor:pointer;font-family:inherit;font-size:.8rem}
.exss-nav button.ans{background:#143a23;border-color:#2e7d4f;color:#7ee0a3}
.exss-nav button.flag{background:#3a3413;border-color:#9a8a2a;color:#f5d76b}
.exss-nav button.cur{background:var(--exs-b3);border-color:#7fc7ee;color:#fff}
.exss-q{background:#111a27;border:1px solid #1e2a3a;border-radius:16px;padding:20px;margin-bottom:14px}
.exss-q.focus{padding:32px 24px}
.exss-qt{font-weight:700;font-size:1.05rem;margin-bottom:6px;white-space:pre-wrap}
.exss-trans{font-size:.85rem;color:#9aa6b6;margin:4px 0 12px}
.exss-opt{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid #1e2a3a;border-radius:12px;
  margin-bottom:10px;cursor:pointer;background:#0d1622;font-size:.92rem;transition:all .15s}
.exss-opt:hover{border-color:var(--exs-b3)}
.exss-opt.sel{border-color:var(--exs-b3);background:#12283c}
.exss-opt .mk{width:22px;height:22px;border-radius:50%;border:2px solid #3a4658;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.7rem}
.exss-opt.sel .mk{background:var(--exs-b3);border-color:var(--exs-b3);color:#fff}
.exss-tf{display:flex;gap:12px}.exss-tf .exss-opt{flex:1;justify-content:center;font-size:1.05rem;font-weight:800}
.exss-in{width:100%;padding:12px;border-radius:10px;border:1px solid #1e2a3a;background:#0d1622;color:#e8eaed;
  font-family:inherit;box-sizing:border-box;font-size:.95rem}
.exss-in:focus{outline:none;border-color:var(--exs-b3)}
.exss-acc{margin-top:12px;border:1px solid #1e2a3a;border-radius:10px;overflow:hidden}
.exss-acc summary{padding:10px 14px;cursor:pointer;font-size:.85rem;font-weight:700;color:#f5d76b;list-style:none}
.exss-acc summary::-webkit-details-marker{display:none}
.exss-acc .bd{padding:0 14px 12px;font-size:.85rem;color:#cfd6e0}
.exss-save{font-size:.74rem;color:#8b95a5;display:flex;align-items:center;gap:6px}
.exss-save.ok{color:#7ee0a3}.exss-save.busy{color:#f59e0b}.exss-save.err{color:#ff6b6b}
.exss-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 40px}
.exss-bar .sp{flex:1}
.exss-offline{position:fixed;top:0;left:0;right:0;background:#7a1f1f;color:#fff;text-align:center;
  font-size:.78rem;padding:6px;z-index:10002;display:none}
.exss-offline.on{display:block}
.exss-res{text-align:center;padding:34px 18px;border-radius:18px;margin-bottom:16px}
.exss-res .pct{font-size:3.2rem;font-weight:900;line-height:1}
.exss-res .msg{margin-top:10px;font-size:.95rem}
.exss-skel{height:96px;border-radius:16px;margin-bottom:12px;
  background:linear-gradient(90deg,#111a27 25%,#16202f 50%,#111a27 75%);
  background-size:400% 100%;animation:exsShim 1.3s infinite}
@keyframes exsShim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.exss-empty{text-align:center;padding:50px 20px;color:#8b95a5}
.exss-empty .ic{font-size:2.6rem;margin-bottom:12px;opacity:.7}
.exss-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10005;display:flex;
  align-items:center;justify-content:center;padding:20px}
.exss-modal .bx{background:#111a27;border:1px solid #1e2a3a;border-radius:16px;padding:22px;max-width:380px;width:100%}
.exss-conf{position:fixed;inset:0;pointer-events:none;z-index:10006;overflow:hidden}
.exss-conf i{position:absolute;width:8px;height:14px;top:-20px;animation:exsFall linear forwards}
@keyframes exsFall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
/* تسلسل الخدمات الجامعية داخل overlay مستقل */
#exsSvcOv .exss-box{max-width:680px}
.exss-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.exss-svc-grid .svc-card{cursor:pointer}
@media(max-width:560px){
  .exss-hero{padding:18px}.exss-q{padding:16px}.exss-btn{flex:1;text-align:center}
  .exss-svc{grid-template-columns:repeat(2,1fr)}
  .exss-svc-grid{grid-template-columns:repeat(2,1fr)}
}

/* بطاقات «قريباً» في جامعة حائل — شارة ذهبية صغيرة + تعتيم لطيف.
   تعريف مكتفٍ ذاتياً (موضع + لون) بأسبقية أعلى من .svc-card-badge العام. */
.exss-svc-grid .svc-card.is-coming-soon{opacity:.92;cursor:pointer}
.exss-svc-grid .svc-card.is-coming-soon .svc-icon{opacity:.85}
.exss-svc-grid .svc-card-badge.soon{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  min-width:auto;
  height:auto;
  padding:3px 9px;
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#172554;
  font-size:.68rem;
  font-weight:800;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(251,191,36,.35);
  animation:none;
  z-index:2;
  letter-spacing:0;
}