:root{
  --teal:#1A8A85; --teal-d:#0F4B47; --teal-x:#0B2E2C; --gold:#C9962B; --gold-l:#F0C75E;
  --ink:#132B29; --paper:#F6FAF9; --card:#FFFFFF; --line:#DCE9E7; --gray:#5B7A77;
  --gpt:#10A37F; --gem:#4285F4; --claude:#D97757; --nlm:#E8A100;
  --pc:var(--teal); --r:20px; --sh:0 12px 34px rgba(15,75,71,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.9;overflow-x:hidden}
a{color:var(--teal)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
img{max-width:100%}

/* ===================== HUB ===================== */
.hero{position:relative;text-align:center;padding:70px 0 44px;border-bottom:1px solid var(--line);background:
 radial-gradient(900px 500px at 85% -10%, rgba(26,138,133,.15), transparent 60%),
 radial-gradient(700px 400px at 8% 115%, rgba(201,150,43,.13), transparent 60%),
 linear-gradient(180deg,#FFF,#EFF7F6 75%,var(--paper))}
.badge{display:inline-block;background:var(--teal-x);color:#DFF3F1;padding:8px 20px;border-radius:100px;font-size:.85rem;margin-bottom:18px}
.hero h1{font-size:clamp(1.9rem,5vw,3.2rem);color:var(--teal-x);line-height:1.45;font-weight:700}
.shine{background:linear-gradient(90deg,var(--gold) 20%,var(--gold-l) 40%,var(--gold) 60%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.5s linear infinite}
@keyframes shine{to{background-position:-200% center}}
.hero .sub{max-width:660px;margin:14px auto 0;color:var(--gray);font-size:1.05rem}
.planets{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:36px 0 6px}
.planet{width:150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 10px 14px;box-shadow:var(--sh);animation:float 5s ease-in-out infinite}
.planet:nth-child(2){animation-delay:.7s}.planet:nth-child(3){animation-delay:1.4s}.planet:nth-child(4){animation-delay:2.1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.orb{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:1.55rem;color:#fff;box-shadow:inset -6px -8px 14px rgba(0,0,0,.2)}
.planet b{display:block;font-size:.95rem;color:var(--teal-x)}
.planet small{color:var(--gray);font-size:.72rem;display:block;line-height:1.65}
.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.stat{background:var(--teal-x);color:#fff;border-radius:14px;padding:12px 22px;min-width:118px}
.stat b{display:block;font-size:1.5rem;color:var(--gold-l)}
.stat span{font-size:.78rem;opacity:.85}

.lvlbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 0}
.lvlrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hint{font-size:.83rem;color:var(--gray)}
.switch{display:flex;background:#EAF3F2;border-radius:100px;padding:4px;gap:4px}
.switch button{border:0;background:transparent;font-family:inherit;font-size:.9rem;padding:8px 20px;border-radius:100px;cursor:pointer;color:var(--gray);font-weight:600;transition:.2s}
.switch button.on{background:var(--teal);color:#fff;box-shadow:0 4px 10px rgba(26,138,133,.35)}
.progress{height:8px;background:#E2EEEC;border-radius:100px;overflow:hidden;flex:1;min-width:130px;max-width:320px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .5s}

.map{padding:48px 0 60px}
h2.sec{font-size:1.7rem;color:var(--teal-x);text-align:center;margin-bottom:6px}
.secsub{text-align:center;color:var(--gray);margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;cursor:pointer;transition:.25s;position:relative;overflow:hidden;display:block;text-decoration:none;color:var(--ink)}
.dcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--pc)}
.dcard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.dcard.done{background:#F1FAF6}
.dcard .dn{font-size:.72rem;color:var(--gray);letter-spacing:.5px}
.dcard b{display:block;color:var(--teal-x);font-size:.98rem;margin:2px 0 6px;line-height:1.6}
.dcard .tag{display:inline-block;font-size:.68rem;border-radius:100px;padding:2px 12px;font-weight:700;background:color-mix(in srgb,var(--pc) 13%,#fff);color:var(--pc)}
.dcard .chk{position:absolute;top:12px;inset-inline-end:12px;opacity:0;transition:.3s}
.dcard.done .chk{opacity:1}

footer{background:var(--teal-x);color:#BFDDD9;text-align:center;padding:32px 20px;font-size:.84rem}
footer b{color:var(--gold-l)}

/* ===================== DAY / SLIDES ===================== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.toprow{display:flex;align-items:center;gap:14px;padding:10px 18px}
.home{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--teal-d);font-weight:700;font-size:.88rem;white-space:nowrap}
.dots{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.dot{width:26px;height:6px;border-radius:100px;background:#DFEAE8;cursor:pointer;transition:.25s;border:0}
.dot.on{background:var(--pc);width:40px}
.dot.seen{background:color-mix(in srgb,var(--pc) 45%,#DFEAE8)}
.counter{font-size:.8rem;color:var(--gray);white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-switch{display:flex;background:#EAF3F2;border-radius:100px;padding:3px;gap:3px}
.mini-switch button{border:0;background:transparent;font-family:inherit;font-size:.78rem;padding:5px 13px;border-radius:100px;cursor:pointer;color:var(--gray);font-weight:700}
.mini-switch button.on{background:var(--teal);color:#fff}

.deck{padding:86px 0 40px;min-height:100vh}
.slide{display:none;min-height:calc(100vh - 200px);align-items:center}
.slide.show{display:flex;animation:slidein .45s cubic-bezier(.2,.7,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.scard{width:100%;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh);padding:clamp(24px,4.5vw,52px);position:relative;overflow:hidden}
.scard::after{content:"";position:absolute;top:0;inset-inline:0;height:6px;background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 40%,#fff))}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,#fff);border-radius:100px;padding:4px 16px;margin-bottom:14px}
.scard h2{font-size:clamp(1.4rem,3.6vw,2.2rem);color:var(--teal-x);line-height:1.5;margin-bottom:12px}
.scard h2 em{font-style:normal;color:var(--pc)}
.scard .lead{color:var(--gray);font-size:1.02rem;max-width:760px}

/* title slide */
.tslide .scard{text-align:center;background:linear-gradient(160deg,#fff, color-mix(in srgb,var(--pc) 6%,#fff))}
.tslide .icon{font-size:3.2rem;margin-bottom:6px;display:inline-block;animation:float 4s ease-in-out infinite}
.goal{display:inline-block;background:#FFF7E2;border:1px solid #F0DFAF;color:#7A5400;border-radius:14px;padding:10px 18px;font-size:.93rem;margin-top:16px;max-width:680px}

/* hour plan */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}
.slot{background:#F4FAF9;border:1px dashed var(--line);border-radius:14px;padding:14px;text-align:right}
.slot b{color:var(--pc);font-size:.78rem;display:block}
.slot span{font-size:.9rem}

/* flips */
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.flip{perspective:900px;height:170px;cursor:pointer}
.flip .in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flip.go .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;backface-visibility:hidden;font-size:.95rem}
.face.f{background:#FBFDFD;border:2px dashed color-mix(in srgb,var(--pc) 40%,#fff);font-weight:700;color:var(--teal-x);flex-direction:column;gap:6px}
.face.f::after{content:"اضغط للكشف 👆";font-size:.7rem;color:var(--gray);font-weight:400}
.face.b{background:var(--pc);color:#fff;transform:rotateY(180deg);font-size:.86rem;line-height:1.8}

/* steps */
.steps{counter-reset:s;margin-top:16px}
.step{display:flex;gap:14px;margin-bottom:14px;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);min-width:32px;height:32px;border-radius:50%;background:var(--pc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;margin-top:4px}
.step div{flex:1;font-size:.97rem}
.step b{color:var(--teal-x)}
.tip{background:#F2F8F7;border-inline-start:4px solid var(--pc);border-radius:10px;padding:10px 14px;font-size:.88rem;color:var(--teal-d);margin-top:14px}

/* tasks */
.task{border-radius:16px;padding:18px 20px;margin-top:14px;border:1px solid var(--line)}
.task.beg{background:#F3FBF4;border-color:#CBE9CF}
.task.adv{background:#FFF9EC;border-color:#F0DFAF}
.task .tl{display:inline-block;font-size:.75rem;font-weight:800;border-radius:100px;padding:2px 14px;margin-bottom:8px}
.task.beg .tl{background:#DCF2DE;color:#2E7D32}
.task.adv .tl{background:#F6E7BC;color:#8A5D00}
.task p{font-size:.96rem}
body.mode-beg .task.adv{display:none}
body.mode-adv .task.beg{display:none}

/* prompt */
.pbox{background:var(--teal-x);color:#E8F5F3;border-radius:16px;padding:20px;font-size:.95rem;position:relative;margin-top:22px;line-height:2}
.pbox::before{content:"برومبت جاهز — انسخه وجرّب";position:absolute;top:-13px;inset-inline-start:16px;background:var(--gold);color:#3A2B00;font-size:.72rem;font-weight:800;border-radius:100px;padding:3px 14px}
.copybtn{position:absolute;top:12px;inset-inline-end:12px;background:rgba(255,255,255,.14);border:0;color:#fff;font-family:inherit;font-size:.74rem;border-radius:8px;padding:5px 14px;cursor:pointer}
.copybtn:hover{background:rgba(255,255,255,.3)}

/* video */
.vid{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;background:#0B2E2C;margin-top:18px;box-shadow:var(--sh)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnote{font-size:.82rem;color:var(--gray);margin-top:10px;background:#F2F8F7;border-radius:10px;padding:8px 14px;display:inline-block}

/* quiz */
.q{margin-top:20px}
.q .qt{font-weight:700;margin-bottom:10px;font-size:1rem}
.opts{display:grid;gap:9px}
.opt{border:1px solid var(--line);background:#FBFDFD;border-radius:12px;padding:12px 16px;cursor:pointer;font-size:.93rem;transition:.15s;text-align:right;font-family:inherit;width:100%}
.opt:hover{border-color:var(--pc)}
.opt.ok{background:#E5F7EA;border-color:#3EA35A;font-weight:700}
.opt.no{background:#FDEBEA;border-color:#D9534F}
.exp{display:none;font-size:.85rem;color:var(--gray);background:#F2F8F7;border-radius:10px;padding:9px 14px;margin-top:8px}
.exp.show{display:block}
.score{display:none;text-align:center;font-weight:800;color:var(--teal-d);background:#EAF7F0;border-radius:14px;padding:14px;margin-top:16px;font-size:1.05rem}
.score.show{display:block}

/* closing */
.closing .scard{text-align:center;background:linear-gradient(160deg,var(--teal-x),#123f3b);border:0;color:#E8F5F3}
.closing h2{color:#fff}
.closing .lead{color:#BFDDD9}
.bigbtn{display:inline-block;background:var(--gold);color:#3A2B00;text-decoration:none;font-weight:800;border-radius:100px;padding:14px 34px;margin:8px 6px 0;font-size:1rem;transition:.2s;border:0;cursor:pointer;font-family:inherit}
.bigbtn:hover{transform:translateY(-3px)}
.bigbtn.ghost{background:rgba(255,255,255,.12);color:#fff}

/* nav arrows */
.navbtns{position:fixed;bottom:22px;inset-inline:0;display:flex;justify-content:center;gap:12px;z-index:90}
.navbtns button{border:0;font-family:inherit;font-weight:800;font-size:.95rem;border-radius:100px;padding:13px 30px;cursor:pointer;box-shadow:0 8px 24px rgba(15,75,71,.25);transition:.2s}
.navbtns .nx{background:var(--pc);color:#fff}
.navbtns .pv{background:#fff;color:var(--teal-d);border:1px solid var(--line)}
.navbtns button:disabled{opacity:.35;cursor:default}
.navbtns button:not(:disabled):hover{transform:translateY(-3px)}
.kbd{position:fixed;bottom:26px;inset-inline-end:22px;font-size:.7rem;color:var(--gray);z-index:80}
@media(max-width:700px){.kbd{display:none}.planet{width:44%}.counter{display:none}.slide{min-height:calc(100vh - 230px)}}