/* ============================================================
   إعلامي المستقبل — نظام معاينة (theme.css)
   هوية «مغامرة + رفيق ذكي» · شِل متجاوب · RTL
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;700;800&family=Cairo:wght@400;600;700;800&display=swap');
:root{
  --cream:#FFF6EC;--paper:#fff;--ink:#2B2440;--muted:#6B6280;--dim:#A79FB8;
  --coral:#FF7A4D;--coral-dk:#F1592A;--coral-lt:#FFE7DC;--teal:#16C2A3;--teal-dk:#0EA088;--teal-lt:#D6F7EF;
  --grape:#6C4DF0;--grape-dk:#5436D6;--grape-lt:#EBE4FF;--sun:#FFC73E;--sun-lt:#FFF1CC;--pink:#FF6FA5;--pink-lt:#FFE2EE;
  --line:rgba(43,36,64,.10);--line-2:rgba(43,36,64,.16);
  --sh-sm:0 4px 14px rgba(108,77,240,.10);--sh:0 12px 30px rgba(80,55,180,.13);--sh-lg:0 22px 50px rgba(43,36,64,.16);
  --r-s:14px;--r:18px;--r-l:26px;--r-xl:34px;--r-full:999px;
  --disp:'Baloo Bhaijaan 2','Cairo',system-ui,sans-serif;--body:'Cairo',system-ui,sans-serif;--nav-w:248px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased;
  background:radial-gradient(80% 50% at 100% -5%,#FFE7DC,transparent 50%),radial-gradient(80% 50% at 0% 0%,#E5F0FF,transparent 45%),var(--cream)}
h1,h2,h3,h4,.disp{font-family:var(--disp);font-weight:800;line-height:1.2}
a{text-decoration:none;color:inherit}button{font-family:inherit}
.muted{color:var(--muted)}.hidden{display:none!important}

/* ===== SHELL ===== */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100dvh}
.side{position:sticky;top:0;align-self:start;height:100dvh;padding:22px 16px;display:flex;flex-direction:column;gap:6px;background:var(--paper);border-inline-start:1.5px solid var(--line);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.side-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px}
.side-brand .logo{width:58px;height:42px;border-radius:13px;background:transparent;display:grid;place-items:center;box-shadow:none;flex:0 0 auto}
.side-brand .logo svg{width:24px;height:24px}.side-brand b{font-family:var(--disp);font-weight:800;font-size:16px;display:block;line-height:1.1}.side-brand small{color:var(--muted);font-size:10.5px}
.nlink{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:16px;color:var(--muted);font-weight:700;font-size:14.5px;transition:.18s}
.nlink .ni{font-size:20px;width:24px;text-align:center}.nlink:hover{background:var(--cream);color:var(--ink)}.nlink.on{background:var(--grape-lt);color:var(--grape-dk)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:14px;border-top:1.5px solid var(--line)}
.side-pts{display:flex;align-items:center;gap:8px;background:var(--sun-lt);color:#A6730B;font-weight:700;font-size:14px;padding:11px 14px;border-radius:16px;border:1.5px solid #F4D789}
.age{display:flex;background:var(--cream);border:1.5px solid var(--line-2);border-radius:var(--r-full);padding:3px}.age button{flex:1;font-weight:700;font-size:11px;border:0;background:transparent;color:var(--muted);padding:7px 4px;border-radius:var(--r-full);cursor:pointer}.age button.on{background:var(--grape);color:#fff}
.side-out{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:700;font-size:13px;padding:9px 13px;border-radius:14px}.side-out:hover{background:var(--coral-lt);color:var(--coral-dk)}
.main{min-width:0;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:26px 30px 60px}
.mtop,.bnav{display:none}
.nav-toggle-cb{position:absolute;opacity:0;pointer-events:none}
.nav-toggle-btn,.nav-backdrop{display:none}

/* ===== COMMON ===== */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.buddy{width:62px;height:62px;flex:0 0 auto}.buddy svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(108,77,240,.3));animation:float 3.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.page-head h1{font-size:clamp(22px,3vw,30px)}.page-head p{color:var(--muted);font-weight:600;font-size:14px}
.sect{display:flex;align-items:center;gap:9px;margin:24px 2px 14px;font-family:var(--disp);font-weight:800;font-size:18px}.sect .e,.sect i{font-size:20px;color:var(--grape)}
.grid{display:grid;gap:13px}.g2{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.g3{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);padding:16px;box-shadow:var(--sh-sm)}
.pill{font-family:var(--disp);font-weight:800;font-size:10.5px;padding:4px 11px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:4px}
.p-done{background:var(--teal-lt);color:var(--teal-dk)}.p-pend{background:var(--sun-lt);color:#9a6b00}.p-work{background:var(--coral-lt);color:var(--coral-dk)}.p-todo{background:var(--grape-lt);color:var(--grape-dk)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:15px;border:0;cursor:pointer;padding:12px 22px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--grape),var(--coral));color:#fff;box-shadow:var(--sh-sm)}
.btn.ghost{background:var(--grape-lt);color:var(--grape-dk);box-shadow:none}.btn.block{width:100%;justify-content:center}

/* DASHBOARD */
.ia-hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}.ia-hero .htext{flex:1}.ia-hero .hello{color:var(--muted);font-weight:700;font-size:14px}.ia-hero h1{font-size:clamp(22px,3vw,30px)}.ia-hero .hsub{color:var(--muted);font-size:13.5px;font-weight:600}
.ring{position:relative;width:92px;height:92px;flex:0 0 auto}.ring svg{transform:rotate(-90deg)}.ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.ring-c b{font-family:var(--disp);font-weight:800;font-size:19px;display:block}.ring-c span{color:var(--muted);font-size:10px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.chip{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:13px 8px;text-align:center;box-shadow:var(--sh-sm)}.chip .e{font-size:21px}.chip b{display:block;font-family:var(--disp);font-weight:800;font-size:18px;margin-top:3px}.chip small{color:var(--muted);font-size:10.5px;font-weight:600}
.beacon{position:relative;border-radius:var(--r-l);overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--coral),var(--pink));padding:20px 22px;margin-bottom:16px;box-shadow:0 16px 34px rgba(255,111,77,.34)}
.beacon.beacon-idle{background:linear-gradient(135deg,#9C95AD,#B7B0C4);box-shadow:0 10px 24px rgba(43,36,64,.14)}
.beacon.beacon-idle .go{color:#6B6280}
.beacon.beacon-idle .dot{animation:none;opacity:.6}
.beacon .lr{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:1px}.beacon .dot{width:11px;height:11px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 13px rgba(255,255,255,0)}}
.beacon h3{font-size:clamp(18px,2.3vw,22px);margin-bottom:6px}.beacon p{font-size:13.5px;opacity:.95;margin-bottom:14px}.beacon .go{background:#fff;color:var(--coral-dk);font-family:var(--disp);font-weight:800;font-size:14.5px;padding:11px 22px;border-radius:var(--r-full);display:inline-block}
.mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.mission{display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .2s}.mission:hover{transform:translateY(-2px);box-shadow:var(--sh)}.mission.now{border-color:var(--grape)}.mission.done{border-color:var(--teal-lt)}
.mission .mi{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:25px;flex:0 0 auto}.mission .mb{flex:1}.mission .mb strong{display:block;font-size:15px}.mission .mb small{color:var(--muted);font-size:12px;font-weight:600}

/* LEARN */
.l-hero{position:relative;background:linear-gradient(135deg,var(--grape),#8b6bff);color:#fff;border-radius:var(--r-xl);padding:26px;box-shadow:0 18px 40px rgba(108,77,240,.3);overflow:hidden;margin-bottom:22px}
.l-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 90% -10%,rgba(255,255,255,.25),transparent 60%)}
.l-hero .r{display:flex;align-items:center;gap:16px;position:relative}.l-hero h1{font-size:clamp(22px,4vw,30px)}.l-hero p{opacity:.92;font-weight:600;font-size:14px}
.l-hero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px;position:relative}.l-hero .cta a{font-family:var(--disp);font-weight:800;font-size:15px;padding:13px 22px;border-radius:var(--r-full)}.l-hero .play{background:#fff;color:var(--grape-dk)}.l-hero .gh{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.l-stats{display:flex;gap:18px;margin-top:18px;position:relative;flex-wrap:wrap}.l-stats .st{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;opacity:.95}.l-stats .st b{font-family:var(--disp);font-weight:800;font-size:16px}

/* شريط التقدّم الكلّي في الـ Hero */
.l-progress{margin-top:18px;position:relative}
.lp-track{height:8px;background:rgba(255,255,255,.22);border-radius:var(--r-full);overflow:hidden}
.lp-fill{height:100%;background:linear-gradient(90deg,#fff,#FFD7B5);border-radius:var(--r-full);box-shadow:0 0 12px rgba(255,255,255,.5);transition:width .8s cubic-bezier(.2,.9,.3,1.2)}
.lp-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:9px;font-family:var(--disp);font-weight:700;font-size:12px;color:#fff;opacity:.92}
.lp-meta b{font-size:14px}
.journey{position:relative}
.jcard{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-bottom:22px}
.jcard.last{padding-bottom:0}
.jline{width:4px;flex:1;background:repeating-linear-gradient(var(--line-2) 0 7px,transparent 7px 14px);margin:4px 0;min-height:24px}.jcard.last .jline{display:none}

.jbody{
  display:block;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);
  padding:18px 20px;box-shadow:var(--sh-sm);position:relative;
  transition:transform .15s,box-shadow .2s,border-color .2s;
}
.jcard:not(.locked) .jbody:hover{transform:translateY(-2px);box-shadow:var(--sh)}

.jtop{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.jday{font-family:var(--disp);font-weight:800;font-size:12px;color:var(--muted);background:var(--cream);padding:4px 11px;border-radius:var(--r-full)}
.jbody h4{font-family:var(--disp);font-weight:800;font-size:18px;margin:8px 0 6px;line-height:1.3}
.jbody .obj{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.65}

/* فاصل بصري واضح بين العنوان والـ meta */
.jmeta{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1.5px dashed var(--line);
  color:var(--muted);font-weight:700;font-size:12px;
}
.jmeta>span{display:inline-flex;align-items:center;gap:5px;background:var(--cream);padding:5px 11px;border-radius:var(--r-full)}
.jbadge{background:var(--sun-lt)!important;color:#9a6b00}

.jgo{
  display:inline-grid;place-items:center;margin-top:14px;
  width:36px;height:36px;border-radius:50%;
  background:var(--grape-lt);color:var(--grape-dk);
  font-size:16px;font-weight:700;
  transition:transform .2s,background .2s;
}
.jcard:not(.locked) .jbody:hover .jgo{background:var(--grape);color:#fff;transform:translateX(-4px)}

/* الحالات */
.jcard.done .jnode{background:var(--teal)}
.jcard.done .jbody{border-color:var(--teal-lt)}
.jcard.current .jnode{
  background:linear-gradient(135deg,var(--coral),var(--pink));
  box-shadow:0 0 0 6px rgba(255,122,77,.18);
  animation:nodePulse 2.2s ease-in-out infinite;
}
.jcard.current .jbody{
  border-color:var(--coral);border-width:2.5px;
  box-shadow:0 14px 32px -16px rgba(255,122,77,.4);
}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 6px rgba(255,122,77,.18)}50%{box-shadow:0 0 0 12px rgba(255,122,77,.08)}}
.jcard.todo .jnode{background:var(--grape)}
.jcard.locked .jnode{background:#EDEAF3;color:var(--dim)}
.jcard.locked .jbody{opacity:.72;background:#FBFAFD}
.jcard.locked h4{color:var(--muted)}
.jrail{display:flex;flex-direction:column;align-items:center}.jnode{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:20px;color:#fff;border:4px solid var(--cream);box-shadow:var(--sh-sm);z-index:2}
.tools-cta{display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--sh-sm);margin-top:24px}.tools-cta .ti{width:48px;height:48px;border-radius:14px;background:var(--grape-lt);color:var(--grape-dk);display:grid;place-items:center;font-size:24px;flex:0 0 auto}.tools-cta .tx{flex:1}.tools-cta .tx b{font-family:var(--disp);font-weight:800;font-size:15px}.tools-cta .tx small{display:block;color:var(--muted);font-weight:600;font-size:12px}.tools-cta .tg{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--grape-dk);background:var(--grape-lt);padding:9px 16px;border-radius:var(--r-full)}

/* الحالة الفارغة: لا يوجد يوم مفتوح */
.empty-locked{
  background:var(--paper);border:1.5px dashed var(--line-2);border-radius:var(--r-l);
  padding:30px 22px;text-align:center;margin-top:18px;
}
.empty-locked .el-icon{font-size:42px;margin-bottom:8px;opacity:.55}
.empty-locked b{font-family:var(--disp);font-weight:800;font-size:17px;display:block;margin-bottom:6px}
.empty-locked p{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:340px;margin:0 auto}

/* TOOLS */
.cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cat{font-weight:700;font-size:12.5px;padding:8px 15px;border-radius:var(--r-full);border:2px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}.cat.on{background:var(--grape);border-color:var(--grape);color:#fff}
.tool-card{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-height:160px}.tool-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:28px;color:#fff}.tool-card h4{font-size:16px}.tool-card p{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.6}.tool-card .tag{font-size:10.5px;font-weight:800;color:var(--grape-dk);background:var(--grape-lt);padding:2px 9px;border-radius:var(--r-full)}.tool-card .open{margin-top:auto;font-family:var(--disp);font-weight:800;font-size:12.5px;color:#fff;background:linear-gradient(135deg,var(--grape),var(--coral));padding:8px 16px;border-radius:var(--r-full)}

/* PROJECT + ACTIVITY */
.proj-banner{background:linear-gradient(135deg,var(--teal),#36d9bd);color:#fff;border-radius:var(--r-l);padding:18px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px}.proj-banner .pr{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:18px;flex:0 0 auto}.proj-banner b{font-family:var(--disp);font-weight:800;font-size:18px}
.step{display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:11px;box-shadow:var(--sh-sm)}.step .sn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:18px;flex:0 0 auto;background:var(--grape-lt);color:var(--grape-dk)}.step.done .sn{background:var(--teal);color:#fff}.step .sb{flex:1}.step .sb strong{display:block;font-size:14.5px}.step .sb small{color:var(--muted);font-size:12px;font-weight:600}
.act-hero{background:linear-gradient(135deg,var(--coral),var(--pink));color:#fff;border-radius:var(--r-l);padding:22px;margin-bottom:18px;position:relative;overflow:hidden}
.act-hero::before{content:"";position:absolute;top:-30px;left:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.act-hero .tag{font-family:var(--disp);font-weight:800;font-size:11px;background:rgba(255,255,255,.22);padding:4px 12px;border-radius:var(--r-full);display:inline-block;margin-bottom:7px;position:relative}
.act-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(20px,3.5vw,26px);line-height:1.3;position:relative;margin-bottom:14px}

/* موقع النشاط ضمن اليوم */
.act-pos{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;position:relative}
.ap-step{font-family:var(--disp);font-weight:700;font-size:12.5px;background:rgba(255,255,255,.18);padding:6px 14px;border-radius:var(--r-full)}
.ap-step b{font-size:14px}
.ap-day{font-family:var(--disp);font-weight:700;font-size:11.5px;opacity:.85;letter-spacing:.04em}

/* شرائح الميتاداتا (وقت، نقاط، أداة) */
.act-meta{display:flex;flex-wrap:wrap;gap:7px;position:relative}
.am-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.18);
  color:#fff;font-family:var(--disp);font-weight:700;font-size:12px;
  padding:6px 13px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.18);
}
.act-note{background:var(--teal-lt);color:var(--teal-dk);border-radius:var(--r);padding:13px 16px;font-weight:700;font-size:13px;display:flex;gap:9px;margin-bottom:16px}
.upload{border:2px dashed var(--line-2);border-radius:var(--r-l);padding:34px;text-align:center;color:var(--muted);background:var(--cream);margin-bottom:14px}.upload .ue{font-size:42px;display:block;margin-bottom:6px}.upload b{font-size:15px}

/* GAMES */
.gcard{border-radius:var(--r-l);padding:18px;color:#fff;position:relative;overflow:hidden;min-height:145px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--sh);transition:transform .15s}.gcard:hover{transform:translateY(-3px)}.gcard .ge{font-size:38px}.gcard h4{font-size:16px}.gcard small{font-size:11px;opacity:.9;font-weight:600}
.gc1{background:linear-gradient(150deg,var(--coral),var(--pink))}.gc2{background:linear-gradient(150deg,var(--teal),#36d9bd)}.gc3{background:linear-gradient(150deg,var(--grape),#9277ff)}.gc4{background:linear-gradient(150deg,var(--sun),#ff9e3d)}.gcard .lock{position:absolute;inset:0;background:rgba(43,36,64,.5);display:grid;place-items:center;font-size:30px}
.lead{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);padding:16px;box-shadow:var(--sh-sm)}.lrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1.5px solid var(--line)}.lrow:last-child{border:0}.lrk{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:13px;background:#F1EEF7;color:var(--muted)}.lrk.r1{background:var(--sun-lt);color:#A6730B}.lrk.r2{background:#EAEAF2}.lrk.r3{background:var(--coral-lt);color:var(--coral-dk)}.lrow .ln{flex:1;font-weight:700;font-size:13.5px}.lrow.me{background:var(--grape-lt);margin:0 -8px;padding:9px 8px;border-radius:12px;border:0}.lrow .lp{font-family:var(--disp);font-weight:800;color:var(--grape-dk);font-size:13px}

/* ============================================================
   GALLERY — جدار الإبداع (لوحة تثبيت الأعمال)
   ============================================================ */
.g-stats{display:flex;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.g-stat{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-full);padding:9px 16px;display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;box-shadow:var(--sh-sm)}
.g-stat b{font-family:var(--disp);font-size:15px}

.hof-title{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:16px;margin:22px 2px 12px}
.hof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
@media(max-width:640px){.hof-row{grid-template-columns:1fr}}
.hof-card{position:relative;background:var(--paper);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh);border:2px solid var(--line);cursor:pointer;text-align:right}
.hof-media{height:130px;background-size:cover;background-position:center;position:relative;display:grid;place-items:center;font-size:34px;background-color:var(--grape-lt)}
.hof-card:nth-child(1) .hof-media{border-bottom:4px solid var(--sun)}
.hof-card:nth-child(2) .hof-media{border-bottom:4px solid var(--dim)}
.hof-card:nth-child(3) .hof-media{border-bottom:4px solid var(--coral)}
.hof-medal{position:absolute;top:8px;right:8px;font-size:22px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.hof-body{padding:11px 13px}
.hof-body b{font-size:13px;display:block}
.hof-body small{color:var(--muted);font-size:11px;font-weight:600;display:block;margin-top:2px}
.hof-likes{margin-top:6px;display:inline-flex;align-items:center;gap:4px;color:var(--pink);font-weight:800;font-size:12px}

.g-filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:26px 2px 4px}
.gf-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.gf-chip{padding:8px 16px;border-radius:var(--r-full);border:2px solid var(--line);background:var(--paper);font-weight:700;font-size:12.5px;color:var(--muted);transition:.15s;cursor:pointer}
.gf-chip.on{background:var(--grape);border-color:var(--grape);color:#fff;box-shadow:var(--sh-sm)}
.gf-chip:not(.on):hover{border-color:var(--grape);color:var(--grape-dk)}

.wall{position:relative;margin-top:16px;padding:34px 26px;border-radius:var(--r-xl);
  background-color:#F3E4CE;
  background-image:radial-gradient(rgba(43,36,64,.05) 1.4px,transparent 1.4px);
  background-size:16px 16px;border:2px solid var(--line-2);
  box-shadow:inset 0 3px 18px rgba(43,36,64,.08)}
.wall-grid{columns:4;column-gap:20px}
@media(max-width:980px){.wall-grid{columns:3}}
@media(max-width:680px){.wall-grid{columns:2}}
.pin-card{break-inside:avoid;margin-bottom:32px;position:relative;background:var(--paper);border-radius:10px;padding:10px 10px 12px;
  box-shadow:var(--sh);cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.3,1.1),box-shadow .22s;transform-origin:center top}
.pin-card:hover{transform:rotate(0deg) translateY(-4px) scale(1.02)!important;box-shadow:var(--sh-lg);z-index:5}
.pin-tape{position:absolute;top:-8px;right:50%;transform:translateX(50%) rotate(-4deg);width:56px;height:20px;border-radius:3px;opacity:.9;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.pin-media{border-radius:6px;overflow:hidden;background-size:cover;background-position:center;display:grid;place-items:center;position:relative;min-height:130px}
.pin-media img{width:100%;display:block}
.pin-media.emoji-media{font-size:44px;background:linear-gradient(135deg,var(--grape-lt),var(--coral-lt))}
.pin-media.text-media{align-items:flex-start;justify-content:flex-start;padding:14px;font-weight:700;font-size:12.5px;line-height:1.7;text-align:right;background:var(--sun-lt)}
.pin-cap{padding:10px 4px 2px}
.pin-cap b{font-size:12.5px;display:block;line-height:1.35}
.pin-meta{display:flex;align-items:center;gap:6px;margin-top:6px}
.pin-avatar{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;flex:0 0 auto}
.pin-meta small{color:var(--muted);font-size:10.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-day{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:var(--r-full);flex:0 0 auto}
.pin-foot{display:flex;align-items:center;justify-content:flex-end;margin-top:8px}

/* زرّ الإعجاب — نفس الـclass القديم .gal-like معاد تصميمه بالكامل لهوية الجدار */
.gal-like{display:inline-flex;align-items:center;gap:4px;color:var(--dim);font-weight:800;font-size:12px;cursor:pointer;background:none;border:0;font-family:var(--body);padding:3px 4px}
.gal-like.liked{color:var(--pink)}
.gal-like .h{display:inline-block}
.gal-like.liked .h{animation:heartPop .35s cubic-bezier(.4,0,.2,1.6)}
@keyframes heartPop{0%{transform:scale(1)}45%{transform:scale(1.55)}100%{transform:scale(1)}}

.pin-invite{break-inside:avoid;margin-bottom:26px;border:2.5px dashed var(--grape);border-radius:12px;background:var(--grape-lt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:26px 14px;color:var(--grape-dk);cursor:pointer}
.pin-invite .e{font-size:30px}
.pin-invite b{font-family:var(--disp);font-size:13.5px}
.pin-invite small{font-size:11px;font-weight:600;opacity:.85}

/* ============================================================
   GALLERY GRID — بطاقات معرض الأعمال (student/gallery.php)
   شبكة Masonry متجاوبة، حواف حادة تماماً (بلا انحناء) لعرض واضح للعمل
   ============================================================ */
.gal-grid{columns:4;column-gap:16px}
@media(max-width:980px){.gal-grid{columns:3}}
@media(max-width:680px){.gal-grid{columns:2}}
@media(max-width:420px){.gal-grid{columns:1}}
.gal-item{break-inside:avoid;margin-bottom:16px;position:relative;background:var(--paper);
  border:2px solid var(--line);border-radius:0;overflow:hidden;box-shadow:var(--sh-sm);
  transition:box-shadow .18s,transform .18s}
.gal-item:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.gal-badges{position:absolute;top:9px;left:9px;right:9px;z-index:2;display:flex;
  justify-content:space-between;align-items:flex-start;gap:6px;pointer-events:none}
.gal-badge{font-family:var(--disp);font-weight:800;font-size:10px;padding:4px 9px;
  border-radius:0;line-height:1.5;white-space:nowrap}
.gal-badge-day{background:rgba(26,20,48,.68);color:#fff;backdrop-filter:blur(2px)}
.gal-badge-new{background:var(--coral);color:#fff;box-shadow:0 2px 8px rgba(255,122,77,.4)}
.gal-img{width:100%;background:linear-gradient(135deg,var(--grape-lt),var(--coral-lt));
  display:grid;place-items:center;font-size:42px;overflow:hidden}
.gal-img.gal-open{cursor:pointer}
.gal-img img{width:100%;height:100%;object-fit:cover;display:block}
.gal-media-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;text-align:center;padding:10px}
.gal-media-tile .gmt-icon{font-size:38px;line-height:1}
.gal-media-tile .gmt-label{font-family:var(--disp);font-weight:800;font-size:11.5px;color:var(--grape-dk)}
.gal-cap{padding:12px 13px 14px}
.gal-cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--disp);font-size:13.5px;line-height:1.35;margin-bottom:8px}
.gal-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gal-author{font-size:11.5px;font-weight:700;color:var(--muted);display:inline-flex;
  align-items:center;gap:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gal-activity-tag{font-size:10px;font-weight:700;color:var(--grape-dk);background:var(--grape-lt);
  padding:3px 9px;border-radius:0}

/* GALLERY MODAL — حواف حادة + تمرير موحّد يضمن ظهور كل المحتوى مهما طال */
.gal-modal{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:20px}
.gal-modal.open{display:flex}
.gal-modal-backdrop{position:absolute;inset:0;background:rgba(26,20,48,.72);backdrop-filter:blur(4px)}
.gal-modal-box{position:relative;background:var(--paper);border-radius:0;box-shadow:var(--sh-lg);max-width:520px;width:100%;max-height:90vh;
  overflow-y:auto;overflow-x:hidden;display:block;animation:galPop .2s ease;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.gal-modal-box::-webkit-scrollbar{width:7px}
.gal-modal-box::-webkit-scrollbar-thumb{background:var(--dim);border-radius:0}
@keyframes galPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.gal-modal-close-wrap{position:sticky;top:0;height:0;z-index:3}
.gal-modal-close{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:0;border:0;background:rgba(26,20,48,.68);color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:grid;place-items:center}
.gal-modal-close:hover{background:rgba(26,20,48,.85)}
.gal-modal-media{background:var(--cream);display:grid;place-items:center;min-height:200px}
.gal-modal-media img{width:100%;max-height:64vh;object-fit:contain;display:block;background:var(--cream)}
.gal-modal-media video{border-radius:0;background:#000}
.gal-modal-media audio{border-radius:0;margin:0 20px 20px;max-width:calc(100% - 40px)}
.gal-modal-emoji{font-size:80px;padding:46px 0}
.gal-modal-text{padding:24px 20px;font-size:14.5px;line-height:1.9;font-weight:600;color:var(--ink);white-space:pre-wrap;text-align:right;overflow-wrap:break-word;word-break:break-word}
.gal-modal-body{padding:15px 18px;position:relative}
.gal-modal-body b{display:block;font-family:var(--disp);font-size:15.5px;margin-bottom:8px;overflow-wrap:break-word;word-break:break-word}
.gal-modal-row{display:flex;align-items:center;justify-content:space-between}
.gal-modal-author{display:flex;align-items:center;gap:8px}
.gal-modal-author small{color:var(--muted);font-size:12px;font-weight:700}
#galModalMeta{overflow-wrap:break-word;word-break:break-word}
/* تلميح وجود مزيد من المحتوى — يظهر فقط عند الحاجة الفعلية للتمرير */
.gal-modal-more{display:none;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--grape-dk);background:var(--grape-lt);
  padding:5px 11px;margin-bottom:12px;width:fit-content;transition:opacity .18s}
.gal-modal-more.show{display:inline-flex}
.gal-modal-more .arrow{display:inline-block;animation:bounceDown 1.1s ease-in-out infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.g-empty{display:none;text-align:center;padding:50px 20px;color:var(--muted)}
.g-empty .e{font-size:40px;margin-bottom:8px}
.g-empty b{font-family:var(--disp);font-size:15px;color:var(--ink)}

/* PORTFOLIO */

.profile-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--grape),#8b6bff);color:#fff;border-radius:var(--r-xl);padding:22px;margin-bottom:18px;box-shadow:var(--sh)}.avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:34px;flex:0 0 auto}.profile-hero h1{font-size:24px}.profile-hero .lvl{opacity:.9;font-weight:700;font-size:13px}.profile-hero .pstats{margin-inline-start:auto;display:flex;gap:18px}.profile-hero .v{text-align:center}.profile-hero .v b{display:block;font-family:var(--disp);font-weight:800;font-size:22px}.profile-hero .v small{font-size:11px;opacity:.85}
.badge-item{text-align:center;border-radius:var(--r-l);padding:16px 10px;color:#fff;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:var(--sh-sm)}.badge-item .be{font-size:34px}.badge-item b{font-family:var(--disp);font-weight:800;font-size:13px}.badge-item small{font-size:10px;opacity:.9}.badge-item.lock{background:#F1EEF7;color:var(--dim)}.badge-item.lock b{color:var(--muted)}

/* منح الشارات من لوحة التحكم — بطاقة شارة قابلة للتبديل (مُنحت/غير مُنحت) */
.badge-pick{cursor:pointer;display:block}
.badge-pick input{position:absolute;opacity:0;width:0;height:0}
.badge-pick .badge-item{min-height:86px;padding:10px 6px;background:#F1EEF7;color:var(--dim);border:2px solid transparent;transition:.15s}
.badge-pick .badge-item .be{font-size:24px}
.badge-pick .badge-item b{color:var(--muted);font-size:10.5px;line-height:1.3}
.badge-pick input:checked + .badge-item{background:var(--bg);color:#fff;box-shadow:var(--sh)}
.badge-pick input:checked + .badge-item b{color:#fff}
.badge-pick input:focus-visible + .badge-item{border-color:var(--grape)}
.badge-pick:hover .badge-item{transform:translateY(-1px)}

/* LOGIN */
.login-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(70% 50% at 100% 0%,#FFE7DC,transparent 50%),radial-gradient(70% 50% at 0% 100%,#E5F0FF,transparent 45%),var(--cream)}
.login-card{width:100%;max-width:390px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-xl);padding:32px 28px;box-shadow:var(--sh-lg);text-align:center}
.login-card .lb{width:86px;height:86px;margin:0 auto 12px}.login-card h1{font-size:26px;margin-bottom:4px}.login-card .sub{color:var(--muted);font-weight:600;font-size:14px;margin-bottom:22px}
.field{text-align:start;margin-bottom:14px}.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--muted)}.field input{width:100%;background:var(--cream);border:2px solid var(--line);border-radius:14px;padding:13px 15px;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink)}.field input:focus{outline:3px solid var(--grape);border-color:transparent}
.login-card .btn{width:100%;justify-content:center;padding:14px;font-size:16px;margin-top:6px}

/* ADMIN shell accent */
.app.admin .nlink.on{background:var(--grape-lt);color:var(--grape-dk)}
.adm-live{background:linear-gradient(135deg,var(--coral),var(--pink));color:#fff;border-radius:var(--r-l);padding:16px 18px;display:flex;align-items:center;gap:13px;margin-bottom:16px}.adm-live .dot{width:11px;height:11px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}.adm-live b{font-family:var(--disp);font-weight:800}.adm-live .stop{margin-inline-start:auto;font-family:var(--disp);font-weight:800;background:#fff;color:var(--coral-dk);padding:8px 16px;border-radius:var(--r-full);font-size:13px}
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:18px}.adm-kpi{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);padding:17px;box-shadow:var(--sh-sm)}.adm-kpi .ki{width:44px;height:44px;border-radius:12px;background:var(--grape);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:9px}.adm-kpi b{font-family:var(--disp);font-weight:800;font-size:26px}.adm-kpi small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.adm-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}@media(max-width:860px){.adm-grid{grid-template-columns:1fr}}
.adm-table{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-sm)}.adm-tr{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1.5px solid var(--line)}.adm-tr:last-child{border:0}.adm-tr .nm{flex:1;font-weight:700;font-size:13.5px}.adm-tr .dy{color:var(--muted);font-size:12px;font-weight:600}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.qcard{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:15px;text-align:center;box-shadow:var(--sh-sm)}.qcard .qe{font-size:26px}.qcard b{display:block;font-family:var(--disp);font-weight:800;font-size:14px;margin-top:5px}.qcard small{color:var(--muted);font-size:11px;font-weight:600}

.foot{text-align:center;color:var(--dim);font-size:12px;font-weight:600;padding:18px}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  :root{--nav-w:84px}
  .side{padding:18px 10px;align-items:center}.side-brand{flex-direction:column;gap:6px;text-align:center}.side-brand .txt{display:none}
  .nlink{flex-direction:column;gap:4px;font-size:10.5px;padding:10px 4px}.nlink .ni{width:auto}
  .side-pts{font-size:0;padding:11px 0;justify-content:center}.side-pts .v{font-size:13px}.side-out span{display:none}.side-out{justify-content:center}.age{flex-direction:column}
  .wrap{padding:22px 22px 60px}.mlist{grid-template-columns:1fr 1fr}.adm-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--nav-w:0}.app{grid-template-columns:1fr}
  /* القائمة الجانبية في لوحة المدرّب: بدل إخفائها بالكامل بلا بديل،
     تتحوّل إلى درج جانبي (off-canvas) يُفتح عبر زر ☰ في الشريط العلوي */
  .app:not(.admin) .side{display:none}
  .app.admin .side{
    display:flex;position:fixed;inset-block:0;inset-inline-end:0;
    width:min(78vw,300px);height:100dvh;max-height:100dvh;overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s ease;z-index:300;box-shadow:var(--sh-lg);
  }
  html[dir="ltr"] .app.admin .side{transform:translateX(-100%)}
  .nav-toggle-cb:checked ~ .app.admin .side{transform:translateX(0)}
  /* الدرج عرضه كافٍ لعرض النص كاملاً، فنلغي نمط «الرف الضيق» الموروث من قاعدة 1024px */
  .app.admin .side{padding:20px 14px calc(20px + env(safe-area-inset-bottom, 0px));align-items:stretch}
  .app.admin .side-brand{flex-direction:row;text-align:start}
  .app.admin .side-brand .txt{display:block}
  .app.admin .nlink{flex-direction:row;font-size:14.5px;padding:12px 13px}
  .app.admin .nlink .ni{width:24px}
  .app.admin .side-pts{font-size:14px;padding:11px 14px}
  .app.admin .side-pts .v{font-size:14px}
  .app.admin .side-out span{display:inline}
  .nav-toggle-cb:checked ~ .nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(43,36,64,.45);z-index:250;
  }
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;padding:14px 16px;background:rgba(255,246,236,.92);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
  .mtop .nav-toggle-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border-radius:11px;background:var(--paper);border:1.5px solid var(--line);font-size:18px;cursor:pointer}
  .mtop .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--grape),var(--coral));display:grid;place-items:center}.mtop .logo svg{width:20px;height:20px}.mtop b{font-family:var(--disp);font-weight:800;font-size:15px;margin-inline-end:auto}.mtop .pts{display:flex;align-items:center;gap:5px;background:var(--sun-lt);color:#A6730B;font-weight:700;font-size:13px;padding:7px 11px;border-radius:var(--r-full)}
  .wrap{padding:16px 14px 96px;max-width:560px}.mlist{grid-template-columns:1fr}
  .bnav{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:100;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);padding:7px}
  .bnav a{flex:1;color:var(--dim);font-weight:700;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:18px}.bnav a .bi{font-size:21px}.bnav a.on{color:var(--grape-dk);background:var(--grape-lt)}
  .profile-hero .pstats{margin:0}.profile-hero{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}