/* الدراسات الإسلامية – الصف السادس: ورق عاجي، أخضر زمردي، ذهبي، ونقش نجمة ثمانية خفيف */
:root{
  --paper:#fbf7ee; --sheet:#ffffff; --ink:#1f3530; --muted:#66756f; --rule:#e8dfcb;
  --em:#0f6b5c; --em-soft:#e2f1ec; --gold:#b98a2e; --gold-soft:#f8eed5; --sky:#2c6e9b; --sky-soft:#e3eff7;
  --rose:#b2475a; --rose-soft:#f8e4e7; --plum:#6b4f9a; --plum-soft:#eee8f7; --ok:#1f8a5c; --ok-soft:#ddf3e8; --bad:#c2453b; --bad-soft:#fbe3e0;
  --shadow:0 1px 2px rgba(30,50,40,.06),0 10px 26px rgba(30,50,40,.08);
  --u:var(--em); --u-soft:var(--em-soft);
  --f:"Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif; --fq:"Amiri","Amiri Quran","Traditional Arabic",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111a18; --sheet:#18231f; --ink:#ecf3ef; --muted:#9fb2aa; --rule:#2b3a35;
  --em:#4fc2a8; --em-soft:#173a33; --gold:#e3b75c; --gold-soft:#3a2f17; --sky:#7fb7e0; --sky-soft:#1a3044;
  --rose:#ec8b9b; --rose-soft:#3e1f26; --plum:#b9a2e8; --plum-soft:#2c2442; --ok:#5fd39c; --ok-soft:#173a2a; --bad:#ff8f84; --bad-soft:#40201d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111a18; --sheet:#18231f; --ink:#ecf3ef; --muted:#9fb2aa; --rule:#2b3a35;
  --em:#4fc2a8; --em-soft:#173a33; --gold:#e3b75c; --gold-soft:#3a2f17; --sky:#7fb7e0; --sky-soft:#1a3044;
  --rose:#ec8b9b; --rose-soft:#3e1f26; --plum:#b9a2e8; --plum-soft:#2c2442; --ok:#5fd39c; --ok-soft:#173a2a; --bad:#ff8f84; --bad-soft:#40201d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.3); color-scheme:dark}
*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b98a2e' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M60 20l11.7 28.3L100 60 71.7 71.7 60 100 48.3 71.7 20 60l28.3-11.7z'/%3E%3Crect x='38' y='38' width='44' height='44' transform='rotate(45 60 60)'/%3E%3Crect x='38' y='38' width='44' height='44'/%3E%3Cpath d='M0 0l20 20M120 0l-20 20M0 120l20-20M120 120l-20-20'/%3E%3C/g%3E%3C/svg%3E");background-size:120px 120px}
body[data-br="t"]{--u:var(--em);--u-soft:var(--em-soft)} body[data-br="h"]{--u:var(--sky);--u-soft:var(--sky-soft)} body[data-br="f"]{--u:var(--plum);--u-soft:var(--plum-soft)} body[data-br="q"]{--u:var(--gold);--u-soft:var(--gold-soft)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{white-space:nowrap;border:0;border-radius:14px;padding:8px 16px;font-weight:700;background:var(--u);color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.4}
:root[data-theme="dark"] .btn{color:#0d1513}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0d1513}}
.btn.ghost{background:var(--u-soft);color:var(--u)}
.btn.sm{padding:4px 12px;font-size:15px;border-radius:10px}
.btn.big{font-size:19px;padding:12px 24px;border-radius:18px}
.btn[disabled]{opacity:.5;cursor:default}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance}
select,input[type=text],input[type=email],input[type=password],input[type=date],textarea{border:1.5px solid var(--rule);border-radius:12px;padding:7px 12px;background:var(--sheet);max-width:100%}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:14px;z-index:90;font-weight:700;max-width:90vw;text-align:center}
.pill{display:inline-block;border-radius:999px;padding:0 10px;font-size:13px;font-weight:700;background:var(--u-soft);color:var(--u)}
.stars{color:var(--gold);letter-spacing:2px}
.opt{border:2px solid var(--rule);background:var(--sheet);border-radius:16px;padding:12px 14px;font-weight:700;text-align:center}
.opt.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.opt.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}
.pop{animation:pop .35s}@keyframes pop{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.bar{height:12px;border-radius:999px;background:var(--rule);overflow:hidden;width:100%}.bar i{display:block;height:100%;background:var(--u);transition:width .3s}
/* lesson content */
.lx p{margin:.4em 0}
.lx .ay{font-family:var(--fq);font-size:1.25em;color:var(--em);line-height:2}
.lx .hd{background:var(--gold-soft);border-inline-start:5px solid var(--gold);border-radius:12px;padding:10px 14px;font-family:var(--fq);font-size:1.15em;line-height:2}
.lx .hd small,.lx small{font-family:var(--f);font-size:.72em;color:var(--muted)}
.lx .hifz{border-inline-start-color:var(--rose);position:relative}
.lx .note{font-size:.9em;color:var(--muted)}
.lx .box{background:var(--sky-soft);border-radius:12px;padding:10px 14px}
.lx ol,.lx ul{padding-inline-start:1.4em;margin:.4em 0}
.lx li{margin:.25em 0}
.lx .tb{width:100%;border-collapse:collapse;margin:.4em 0}
.lx .tb th,.lx .tb td{border:1px solid var(--rule);padding:8px 10px;text-align:start;vertical-align:top}
.lx .tb th{background:var(--u-soft);color:var(--u);width:32%;font-weight:800}
.lx .tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.lx .tri>div{background:var(--u-soft);border-radius:14px;padding:12px}
.lx .tri b{display:block;color:var(--u);font-size:1.05em;margin-bottom:4px}
.lx .six{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;list-style:none;padding:0;counter-reset:s}
.lx .six li{counter-increment:s;background:var(--gold-soft);border-radius:12px;padding:8px 12px;font-weight:800}
.lx .six li::before{content:counter(s,arabic-indic) ". ";color:var(--gold)}
.lx .chips6{display:flex;flex-wrap:wrap;gap:8px}.lx .chips6 span{background:var(--u-soft);color:var(--u);border-radius:999px;padding:4px 14px;font-weight:800}
.lx .steps li{margin:.4em 0}
/* mushaf */
.mushaf{display:grid;gap:12px;justify-items:center}
.mushaf img{width:100%;max-width:640px;background:#fff;border-radius:14px;border:3px solid var(--gold-soft);box-shadow:var(--shadow)}
:root[data-theme="dark"] .mushaf img{filter:invert(.92) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mushaf img{filter:invert(.92) hue-rotate(180deg)}}
.thumb{border-radius:12px;border:1px solid var(--rule);display:block}
dialog{border:0;border-radius:24px;padding:20px;max-width:min(520px,94vw);background:var(--sheet);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(10,25,20,.5)}
.credit{font-size:14px;color:var(--muted);text-align:center}
.credit b{color:var(--ink)}