/* Ilm for Kids — Qaida: one simple path through al-Qa'idah an-Nuraniyyah */
.qj{--q-night:#1F3A5C;--q-gold:#E2A93B;--q-gold-d:#B9821E;--q-cream:#FBF5E9;--q-paper:#fff;--q-teal:#2F7A6B;--q-soft:#6B7280;--q-line:#E8DFCC;
  max-width:900px;margin:0 auto;padding:10px 16px 50px;font-family:Nunito,system-ui,sans-serif}
.qj-hero{text-align:center;padding:26px 0 8px}
.qj-eyebrow{display:inline-block;background:var(--q-teal);color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:.82rem;letter-spacing:.02em}
.qj-hero h1{font-family:Nunito,system-ui,sans-serif;font-weight:900;color:var(--q-night);font-size:clamp(1.9rem,6vw,2.8rem);margin:12px 0 6px}
.qj-hero h1 span{color:var(--q-gold-d)}
.qj-hero p{color:var(--q-soft);font-weight:600;max-width:560px;margin:0 auto;font-size:1.05rem}
.qj-prog{margin:18px auto 0;max-width:340px}
.qj-prog b{color:var(--q-night);font-weight:800}
.qj-bar{height:14px;border-radius:99px;background:var(--q-line);overflow:hidden;margin-top:6px}
.qj-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--q-gold),#F0C566);border-radius:99px;transition:width .5s}
.qj-next{display:inline-block;margin-top:18px;background:var(--q-gold);color:#fff;text-decoration:none;font-weight:900;font-size:1.1rem;border-radius:999px;padding:14px 28px;box-shadow:0 6px 0 var(--q-gold-d);transition:transform .15s}
.qj-next:hover{transform:translateY(-2px)}
.qj-next:active{transform:translateY(4px);box-shadow:0 2px 0 var(--q-gold-d)}
.qj-key{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:24px 0 6px;font-weight:700;font-size:.85rem;color:var(--q-soft)}
.qj-key i{display:none}
.qj-stage{margin-top:26px}
.qj-stage h2{font-family:Nunito,system-ui,sans-serif;font-weight:900;color:var(--q-night);font-size:1.2rem;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.qj-stage h2 span{width:38px;height:38px;border-radius:50%;background:var(--q-cream);display:grid;place-items:center;font-size:1.2rem}
.qj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;position:relative}
.qj-card{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--q-night);background:var(--q-paper);border-radius:22px;padding:14px;
  box-shadow:0 6px 0 var(--q-line);border:2px solid transparent;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;overflow:hidden}
.qj-card:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--q-line)}
.qj-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--q-line)}
.qj-num{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.25rem;background:var(--q-cream);color:var(--q-night)}
.qj-card.int .qj-num{background:linear-gradient(135deg,#2F7A6B,#3A6EA5);color:#fff}
.qj-card.done .qj-num{background:#FCEFC9}
.qj-txt{flex:1;min-width:0}
.qj-txt small{display:block;font-weight:800;color:var(--q-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.qj-txt b{display:block;font-size:1.02rem;line-height:1.25}
.qj-ar{display:block;font-family:'Amiri',serif;font-size:1.05rem;color:var(--q-gold-d);direction:rtl;text-align:left}
.qj-tag{display:inline-block;margin-top:5px;font-style:normal;font-weight:800;font-size:.72rem;border-radius:999px;padding:3px 9px;background:var(--q-cream);color:var(--q-soft)}
.qj-card.int .qj-tag{background:#DCEFE2;color:#22603A}
.qj-sample{position:absolute;right:10px;bottom:-6px;font-family:'Amiri',serif;font-size:2.4rem;line-height:1;color:var(--q-night);opacity:.07;pointer-events:none;direction:rtl}
.qj-card.next{border-color:var(--q-gold);box-shadow:0 6px 0 var(--q-gold-d)}
.qj-here{position:absolute;top:8px;right:10px;background:var(--q-gold);color:#fff;font-weight:900;font-size:.68rem;border-radius:999px;padding:3px 8px}
.qj-credit{text-align:center;color:var(--q-soft);font-size:.8rem;margin-top:34px}
@media (max-width:560px){.qj-list{grid-template-columns:1fr}.qj-hero p{font-size:.98rem}}
@media (prefers-reduced-motion:reduce){.qj-card,.qj-next{transition:none}}

.qj-marks{background:var(--q-paper);border-radius:22px;box-shadow:0 6px 0 var(--q-line);margin:22px 0 4px;padding:4px 16px 14px}
.qj-marks summary{cursor:pointer;font-weight:900;color:var(--q-night);font-size:1.1rem;padding:10px 0}
.qj-marks p{margin:0 0 10px;color:var(--q-soft);font-weight:600;font-size:.9rem}
.qj-mk{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;direction:rtl}
.qj-mk a{direction:ltr;text-decoration:none;background:var(--q-cream);border-radius:16px;padding:6px 6px 10px;text-align:center;color:var(--q-night);box-shadow:0 3px 0 var(--q-line);transition:transform .15s}
.qj-mk a:hover{transform:translateY(-3px)}
.qj-mk b{display:block;font:400 2.2rem/1.5 'Amiri',serif}
.qj-mk span{display:block;font-weight:900;font-size:.88rem}
.qj-mk small{display:block;color:var(--q-soft);font-weight:700;font-size:.74rem}