/* رحلة داخل الخلية — design tokens (Claymorphism: soft 3D, chunky, playful) */
:root{
  --primary:#2563EB; --primary-d:#1D4ED8; --secondary:#7C3AED; --accent:#F59E0B; --accent-d:#B45309;
  --plant:#16A34A; --plant-soft:#DCFCE7; --animal:#2563EB; --animal-soft:#DBEAFE;
  --bg:#EFF6FF; --surface:#FFFFFF; --surface-2:#F7FBFF; --fg:#0F172A; --muted:#556682;
  --border:#E1EAFB; --border-strong:#C6D8F7;
  --ok:#15803D; --bad:#DC2626; --warn:#B45309;
  --r-lg:28px; --r:20px; --r-sm:14px; --pill:999px;
  --halo:#FFFFFF;
  --clay:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -5px 0 rgba(15,23,42,.055), 0 16px 32px -16px rgba(15,23,42,.35);
  --clay-sm:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(15,23,42,.05), 0 8px 18px -10px rgba(15,23,42,.28);
  --ring:0 0 0 4px rgba(37,99,235,.3);
  --font-h:'Baloo Bhaijaan 2','Tajawal','Segoe UI',system-ui,sans-serif;
  --font-b:'Tajawal','Segoe UI',system-ui,-apple-system,sans-serif;
  --i-sm:16px; --i-md:20px; --i-lg:26px;
}
body.theme-dark{
  --bg:#0B1220; --surface:#141E33; --surface-2:#1A2742; --fg:#EDF3FF; --muted:#A3B4D2;
  --border:#27354F; --border-strong:#35486E; --plant-soft:#123524; --animal-soft:#152A4D;
  --halo:#141E33; --ok:#4ADE80; --warn:#FBBF24; --accent-d:#FBBF24;
  --clay:inset 0 2px 0 rgba(255,255,255,.07), inset 0 -5px 0 rgba(0,0,0,.28), 0 18px 36px -18px rgba(0,0,0,.75);
  --clay-sm:inset 0 2px 0 rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.22), 0 8px 20px -12px rgba(0,0,0,.6);
  --ring:0 0 0 4px rgba(120,160,255,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-b);
  font-size:16px; line-height:1.75; min-height:100dvh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4{font-family:var(--font-h); font-weight:800; line-height:1.3; margin:0 0 .4rem; letter-spacing:0}
p{margin:0 0 .6rem}
a{color:var(--primary)}
button{font-family:inherit}
.muted{color:var(--muted)}
[hidden]{display:none !important}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
.skip-link{
  position:absolute; inset-inline-start:1rem; top:-3rem; z-index:80; background:var(--surface);
  color:var(--fg); padding:.5rem 1rem; border-radius:var(--r-sm); box-shadow:var(--clay-sm);
  transition:top .2s ease;
}
.skip-link:focus{top:.5rem}
.lucide{width:var(--i-md); height:var(--i-md); stroke-width:1.75; flex:0 0 auto}
.blobs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blobs span{position:absolute; display:block; border-radius:50%; filter:blur(60px); opacity:.5}
.blobs span:nth-child(1){width:44vw; height:44vw; top:-14vw; inset-inline-start:-8vw; background:rgba(37,99,235,.35)}
.blobs span:nth-child(2){width:36vw; height:36vw; top:22vh; inset-inline-end:-10vw; background:rgba(124,58,237,.28)}
.blobs span:nth-child(3){width:34vw; height:34vw; bottom:-12vw; inset-inline-start:26vw; background:rgba(34,197,94,.28)}
/* ===== الأزرار والشرائح والبطاقات ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.4rem; min-height:48px; border:none; border-radius:var(--pill);
  font-family:var(--font-h); font-size:1.02rem; font-weight:700; color:var(--fg);
  background:var(--surface); box-shadow:var(--clay-sm); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--clay)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{background:linear-gradient(140deg,#3B82F6,#2563EB); color:#fff}
.btn-plant{background:linear-gradient(140deg,#22C55E,#16A34A); color:#fff}
.btn-plant:hover{box-shadow:0 0 0 0 var(--ring), 0 16px 30px -14px rgba(22,163,74,.7)}
.btn-accent{background:linear-gradient(140deg,#FBBF24,#F59E0B); color:#422006}
.btn-ghost{background:var(--surface-2); color:var(--fg); box-shadow:inset 0 0 0 2px var(--border-strong)}
.btn-sm{padding:.4rem .9rem; min-height:40px; font-size:.9rem}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border:none; border-radius:50%; background:var(--surface); color:var(--fg);
  box-shadow:var(--clay-sm); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.icon-btn:hover{transform:translateY(-2px); color:var(--primary)}
.icon-btn[aria-pressed="true"]{color:var(--accent-d)}
.chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:var(--pill);
  font-size:.82rem; font-weight:700; background:var(--surface-2); color:var(--muted);
  box-shadow:inset 0 0 0 2px var(--border);
}
.chip.is-plant{background:var(--plant-soft); color:#15803D; box-shadow:inset 0 0 0 2px #BBF7D0}
.chip.is-animal{background:var(--animal-soft); color:#1D4ED8; box-shadow:inset 0 0 0 2px #BFDBFE}
.chip.is-both{background:#FEF3C7; color:#92400E; box-shadow:inset 0 0 0 2px #FDE68A}
body.theme-dark .chip.is-plant{color:#86EFAC}
body.theme-dark .chip.is-animal{color:#93C5FD}
body.theme-dark .chip.is-both{background:#3A2E12; color:#FCD34D; box-shadow:inset 0 0 0 2px #5A4620}
.clay{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--clay); padding:1.4rem}
.badge-tile{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:.9rem .5rem; border-radius:var(--r); background:var(--surface-2);
  box-shadow:inset 0 0 0 2px var(--border); opacity:.45; filter:grayscale(.9);
  transition:transform .2s ease, opacity .3s ease, filter .3s ease;
}
.badge-tile.is-on{opacity:1; filter:none; background:var(--surface); box-shadow:var(--clay-sm)}
.badge-tile.is-on:hover{transform:translateY(-3px)}
.badge-tile b{font-family:var(--font-h); font-size:.92rem}
.badge-tile small{font-size:.74rem; color:var(--muted); line-height:1.4}
.badge-dot{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:linear-gradient(140deg,#FBBF24,#F59E0B); color:#422006; box-shadow:var(--clay-sm);
}
/* ===== الشريط العلوي ===== */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem;
  justify-content:space-between; padding:.6rem clamp(.75rem,3vw,2rem);
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px);
  border-bottom:2px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.7rem; background:none; border:none; padding:.2rem; cursor:pointer; color:var(--fg)}
.brand-mark{display:block; width:44px; height:44px; flex:0 0 auto}
.brand-mark svg{width:100%; height:100%; display:block; filter:drop-shadow(0 6px 12px rgba(37,99,235,.3))}
.brand-text{display:flex; flex-direction:column; align-items:flex-start; text-align:start; line-height:1.2}
.brand-text b{font-family:var(--font-h); font-size:1.12rem}
.brand-text small{font-size:.72rem; color:var(--muted)}
.topbar-actions{display:flex; align-items:center; gap:.5rem}
.score-chip{
  display:flex; align-items:center; gap:.35rem; padding:.35rem .85rem; border-radius:var(--pill);
  background:var(--surface); box-shadow:var(--clay-sm); font-size:.85rem; color:var(--muted);
}
.score-chip .lucide{color:var(--accent); width:var(--i-sm); height:var(--i-sm)}
.score-chip b{font-family:var(--font-h); font-size:1.05rem; color:var(--fg)}

/* ===== إطار العرض ===== */
.view{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:clamp(1rem,3vw,2rem) clamp(.9rem,3vw,1.75rem) 3rem}
.section{margin-bottom:clamp(1.5rem,4vw,2.6rem)}
.section-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem}
.section-head h2{font-size:clamp(1.2rem,3vw,1.6rem); margin:0}
.section-head .lucide{color:var(--primary)}
.view-head{display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.2rem; flex-wrap:wrap}
.view-head h1{font-size:clamp(1.35rem,4vw,2rem); margin:0}
.view-head p{margin:0; color:var(--muted); font-size:.95rem}
.view-head > div:nth-child(2){flex:1 1 260px}
.head-extra{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}

/* ===== الواجهة الرئيسية ===== */
.hero{
  position:relative; display:grid; gap:1.4rem; padding:clamp(1.2rem,4vw,2.4rem);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--clay); overflow:hidden;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
}
.hero::after{
  content:""; position:absolute; inset-inline-start:-6rem; bottom:-8rem; width:20rem; height:20rem;
  border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.22),transparent 70%); pointer-events:none;
}
.hero h1{font-size:clamp(1.9rem,5.2vw,3.1rem); line-height:1.18; margin-bottom:.6rem}
.hero h1 em{font-style:normal; color:var(--plant); background:linear-gradient(transparent 62%, var(--plant-soft) 62%)}
.lead{font-size:clamp(1rem,2.2vw,1.12rem); color:var(--muted); max-width:52ch}
.pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .85rem; margin-bottom:.8rem;
  border-radius:var(--pill); background:var(--animal-soft); color:var(--primary);
  font-weight:700; font-size:.82rem;
}
.pill .lucide{width:var(--i-sm); height:var(--i-sm)}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem}
.hero-visual{display:flex; justify-content:center; align-items:center; gap:.4rem}
.hero-visual svg{width:100%; max-width:240px; height:auto; filter:drop-shadow(0 18px 26px rgba(15,23,42,.18)); animation:float 6s ease-in-out infinite}
.hero-visual .cell-mini-2{animation-delay:-3s; max-width:200px}

/* ===== بطاقات الألعاب ===== */
.mode-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mode-card{
  position:relative; display:flex; flex-direction:column; gap:.5rem; text-align:start;
  padding:1.3rem; border:none; border-radius:var(--r-lg); background:var(--surface); color:var(--fg);
  box-shadow:var(--clay); cursor:pointer; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.mode-card:hover{transform:translateY(-4px)}
.mode-card:active{transform:translateY(0) scale(.995)}
.mode-card h3{margin:0; font-size:1.16rem}
.mode-card p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.65}
.mode-ico{
  display:grid; place-items:center; width:52px; height:52px; border-radius:18px; margin-bottom:.3rem;
  background:var(--animal-soft); color:var(--primary); box-shadow:var(--clay-sm);
}
.mode-card.m-plant .mode-ico{background:var(--plant-soft); color:#15803D}
.mode-card.m-accent .mode-ico{background:#FEF3C7; color:#B45309}
.mode-card.m-violet .mode-ico{background:#EDE9FE; color:#6D28D9}
.mode-card.m-sky .mode-ico{background:#E0F2FE; color:#0369A1}
body.theme-dark .mode-card.m-accent .mode-ico{background:#3A2E12; color:#FCD34D}
body.theme-dark .mode-card.m-violet .mode-ico{background:#2A2350; color:#C4B5FD}
body.theme-dark .mode-card.m-sky .mode-ico{background:#0E2A3D; color:#7DD3FC}
.mode-foot{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.6rem}
.mode-tag{font-size:.76rem; font-weight:700; color:var(--muted)}
.tick{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#DCFCE7; color:#15803D}
.tick .lucide{width:var(--i-sm); height:var(--i-sm); stroke-width:3}
body.theme-dark .tick{background:#123524; color:#86EFAC}

/* ===== التقدّم ===== */
.progress-track{height:16px; border-radius:var(--pill); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border); overflow:hidden}
.progress-fill{
  height:100%; border-radius:var(--pill); width:0;
  background:linear-gradient(90deg,#22C55E,#2563EB); transition:width .6s cubic-bezier(.16,1,.3,1);
}
.stat-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem}
.stat{display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius:var(--r); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border)}
.stat b{font-family:var(--font-h); font-size:1.25rem; display:block; line-height:1}
.stat small{color:var(--muted); font-size:.76rem}
.badges-row{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* ===== لوحة الخلية التفاعلية ===== */
.cell-stage{display:grid; gap:1.2rem; grid-template-columns:minmax(0,1.3fr) minmax(0,.95fr); align-items:start}
.stage-board{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--clay); padding:clamp(.6rem,2vw,1.1rem)}
.board-top{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem}
.svg-wrap{position:relative; border-radius:var(--r); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border); padding:.3rem}
.cell-svg{width:100%; height:auto; display:block; touch-action:manipulation}
.part{cursor:pointer; transition:filter .18s ease, opacity .2s ease}
.part:hover{filter:brightness(1.07) drop-shadow(0 5px 10px rgba(37,99,235,.45))}
.part:focus-visible{outline:none; filter:brightness(1.12) drop-shadow(0 0 9px rgba(37,99,235,.9))}
.part.is-active{filter:drop-shadow(0 0 10px rgba(124,58,237,.8))}
.part.is-hit{filter:drop-shadow(0 0 12px rgba(34,197,94,.95))}
.part.is-miss{animation:missFlash .65s ease}
.part.is-dim{opacity:.35}
@keyframes missFlash{
  0%,100%{filter:none}
  30%{filter:drop-shadow(0 0 14px rgba(220,38,38,.95)) brightness(1.12)}
  65%{filter:drop-shadow(0 0 7px rgba(220,38,38,.7))}
}
.lbl{font-family:var(--font-b); font-size:11.5px; font-weight:800; paint-order:stroke; stroke:var(--halo); stroke-width:3.6px; stroke-linejoin:round; pointer-events:none}
.lbl-g{transition:opacity .35s ease}
.lbl-g.hidden{opacity:0}
.side-panel{display:grid; gap:.9rem; position:sticky; top:88px}
.info-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--clay); padding:1.1rem}
.info-card h3{margin:.2rem 0 .4rem; font-size:1.2rem}
.info-card .where{margin:.5rem 0}
.info-row{display:flex; gap:.5rem; align-items:flex-start; margin-top:.6rem; font-size:.92rem; color:var(--muted)}
.info-row .lucide{width:var(--i-sm); height:var(--i-sm); color:var(--primary); margin-top:.35rem}
.parts-list{display:grid; gap:.4rem; margin:0; padding:0; list-style:none}
.parts-list button{
  display:flex; align-items:center; gap:.5rem; width:100%; padding:.5rem .7rem; text-align:start;
  border:none; border-radius:var(--r-sm); background:var(--surface-2); color:var(--fg);
  box-shadow:inset 0 0 0 2px var(--border); cursor:pointer; font-size:.9rem; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}
.parts-list button:hover{transform:translateX(-3px)}
.parts-list button.is-done{background:var(--plant-soft); box-shadow:inset 0 0 0 2px #BBF7D0}
.parts-list button.is-current{box-shadow:inset 0 0 0 2px var(--primary)}
.parts-list .dot{width:12px; height:12px; border-radius:50%; flex:0 0 auto}
.mini-progress{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; font-size:.85rem; font-weight:700; color:var(--muted)}

/* ===== لعبة التوصيل ===== */
.tray{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem}
.tray-chip{
  padding:.5rem 1rem; min-height:44px; border:none; border-radius:var(--pill);
  background:linear-gradient(140deg,#FFFFFF,#EDF4FF); color:var(--fg);
  font-weight:700; font-size:.94rem; cursor:pointer; box-shadow:var(--clay-sm);
  transition:transform .16s ease, box-shadow .16s ease, opacity .2s ease;
}
body.theme-dark .tray-chip{background:linear-gradient(140deg,#1D2A45,#16223A)}
.tray-chip:hover{transform:translateY(-2px)}
.tray-chip.is-sel{background:linear-gradient(140deg,#3B82F6,#2563EB); color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.25), var(--clay-sm)}
.tray-chip.is-bad{animation:shakeChip .5s ease}
.tray-chip[disabled]{opacity:.35; cursor:default; transform:none}
@keyframes shakeChip{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.hint-box{display:flex; gap:.6rem; align-items:flex-start; padding:.8rem; border-radius:var(--r); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border)}
.hint-box .lucide{color:var(--primary); margin-top:.3rem}
.hint-box.ok{background:var(--plant-soft); box-shadow:inset 0 0 0 2px #BBF7D0}
.hint-box.bad{background:#FEE2E2; box-shadow:inset 0 0 0 2px #FECACA}
body.theme-dark .hint-box.bad{background:#3A1520; box-shadow:inset 0 0 0 2px #6B2130}

/* ===== لوحة النتيجة داخل النافذة ===== */
.result-grid{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); margin:.8rem 0}
.result-cell{padding:.7rem; border-radius:var(--r); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border); text-align:center}
.result-cell b{display:block; font-family:var(--font-h); font-size:1.5rem; color:var(--primary)}
.result-cell small{color:var(--muted); font-size:.78rem}
.stars{display:flex; justify-content:center; gap:.3rem; margin:.4rem 0 .8rem}
.stars .lucide{width:34px; height:34px; color:#E2E8F0}
.stars .lucide.on{color:var(--accent); fill:var(--accent)}

/* ===== لعبة التصنيف ===== */
.buckets{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.bucket{
  min-height:190px; display:flex; flex-direction:column; gap:.5rem; padding:.9rem;
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--clay);
  border:3px dashed transparent; transition:box-shadow .2s ease, transform .18s ease;
}
.bucket.is-target{border-color:var(--primary); transform:translateY(-3px)}
.bucket.is-ok{animation:bucketOk .6s ease}
.bucket.is-bad{animation:bucketBad .6s ease}
.bucket.b-plant{border-color:#BBF7D0}
.bucket.b-animal{border-color:#BFDBFE}
.bucket.b-both{border-color:#FDE68A}
@keyframes bucketOk{0%,100%{box-shadow:var(--clay)}40%{box-shadow:0 0 0 6px rgba(34,197,94,.35), var(--clay)}}
@keyframes bucketBad{0%,100%{box-shadow:var(--clay)}30%{box-shadow:0 0 0 6px rgba(220,38,38,.3), var(--clay)}}
.bucket-head{display:flex; align-items:center; gap:.5rem; font-family:var(--font-h); font-weight:800}
.bucket-head .lucide{width:var(--i-md); height:var(--i-md)}
.bucket.b-plant .bucket-head{color:#15803D}
.bucket.b-animal .bucket-head{color:#1D4ED8}
.bucket.b-both .bucket-head{color:#B45309}
body.theme-dark .bucket.b-plant .bucket-head{color:#86EFAC}
body.theme-dark .bucket.b-animal .bucket-head{color:#93C5FD}
body.theme-dark .bucket.b-both .bucket-head{color:#FCD34D}
.bucket-items{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto}
.bucket-items .chip{animation:popIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes popIn{from{opacity:0}to{opacity:1}}
.counter{margin-inline-start:auto; font-size:.8rem; color:var(--muted); font-weight:700}

/* ===== التحدي (الاختبار) ===== */
.quiz-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--clay); padding:clamp(1rem,3vw,1.7rem)}
.q-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem}
.q-count{font-family:var(--font-h); font-weight:800; color:var(--primary)}
.q-text{font-family:var(--font-h); font-size:clamp(1.08rem,2.7vw,1.42rem); line-height:1.6; margin:.2rem 0 1.1rem}
.options{display:grid; gap:.6rem}
.opt{
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; min-height:54px; text-align:start;
  border:none; border-radius:var(--r); background:var(--surface-2); color:var(--fg);
  box-shadow:inset 0 0 0 2px var(--border); cursor:pointer; font-size:1rem; font-weight:600;
  transition:transform .14s ease, box-shadow .14s ease, background .25s ease;
}
.opt:hover:not([disabled]){transform:translateY(-2px); box-shadow:var(--clay-sm)}
.opt .key{
  width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  background:var(--surface); box-shadow:var(--clay-sm); font-family:var(--font-h); font-size:.95rem;
}
.opt.is-ok{background:var(--plant-soft); box-shadow:inset 0 0 0 3px #22C55E}
.opt.is-no{background:#FEE2E2; box-shadow:inset 0 0 0 3px #EF4444}
body.theme-dark .opt.is-no{background:#3A1520}
.opt[disabled]{cursor:default}
.explain{margin-top:1rem; padding:.9rem 1rem; border-radius:var(--r); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border); display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem}
.explain .lucide{color:var(--primary); margin-top:.3rem}
.review{display:grid; gap:.5rem; text-align:start; max-height:36vh; overflow:auto; margin-top:.7rem}
.review-item{padding:.6rem .8rem; border-radius:var(--r-sm); background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border); font-size:.88rem; line-height:1.7}
.review-item b{display:block; font-family:var(--font-h)}

/* ===== التبويبات والنماذج ===== */
.tabs{display:inline-flex; gap:.3rem; padding:.3rem; border-radius:var(--pill); background:var(--surface); box-shadow:var(--clay-sm); flex-wrap:wrap}
.tab{
  padding:.45rem 1.05rem; min-height:42px; border:none; border-radius:var(--pill); background:transparent;
  color:var(--muted); font-family:var(--font-h); font-weight:700; font-size:.92rem; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .16s ease;
}
.tab:hover{color:var(--fg)}
.tab.active{background:linear-gradient(140deg,#3B82F6,#2563EB); color:#fff}
label{display:block; font-size:.85rem; font-weight:700; color:var(--muted)}
input[type="text"]{
  width:100%; padding:.7rem 1rem; min-height:48px; border:none; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--fg); font-family:inherit; font-size:1rem;
  box-shadow:inset 0 0 0 2px var(--border); transition:box-shadow .2s ease;
}
input[type="text"]:focus{outline:none; box-shadow:inset 0 0 0 2px var(--primary), var(--ring)}

/* ===== النوافذ المنبثقة ===== */
.overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(8,15,30,.55); backdrop-filter:blur(5px); animation:fadeIn .2s ease;
}
.modal{
  width:100%; max-width:540px; max-height:88vh; overflow:auto; padding:clamp(1.1rem,3vw,1.8rem);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--clay); text-align:center;
  animation:popIn .28s cubic-bezier(.16,1,.3,1);
}
.modal-icon{
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto .6rem; border-radius:22px;
  background:var(--animal-soft); color:var(--primary); box-shadow:var(--clay-sm);
}
.modal-icon .lucide{width:32px; height:32px}
.modal-title{font-size:clamp(1.2rem,3.4vw,1.6rem); margin-bottom:.5rem}
.modal-body{text-align:start; color:var(--fg); font-size:.96rem}
.modal-body p{margin:0 0 .5rem}
.modal-actions{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.1rem}

/* ===== التنبيهات ===== */
.toast-wrap{position:fixed; z-index:80; bottom:1.2rem; inset-inline-start:1.2rem; display:flex; flex-direction:column; gap:.5rem; pointer-events:none}
.toast{
  display:flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem; border-radius:var(--pill);
  background:var(--surface); color:var(--fg); font-weight:700; font-size:.9rem;
  box-shadow:var(--clay); animation:slideIn .3s cubic-bezier(.16,1,.3,1);
}
.toast .lucide{width:var(--i-md); height:var(--i-md); color:var(--primary)}
.toast.ok .lucide{color:var(--ok)}
.toast.bad .lucide{color:var(--bad)}
.toast.badge .lucide{color:var(--accent)}
.toast.out{animation:slideOut .3s ease forwards}

/* ===== حركات ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}
@keyframes slideIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes slideOut{to{opacity:0; transform:translateY(10px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg)}}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.16)}}
.score-chip.bump{animation:bump .42s ease}
.confetti{position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-14vh; width:10px; height:15px; border-radius:3px; animation:fall linear forwards}

/* ===== جدول المقارنة والبطاقات المرجعية ===== */
.table-wrap{overflow-x:auto; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--clay); padding:.4rem}
table.cmp{width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem}
table.cmp th, table.cmp td{padding:.7rem .8rem; text-align:start; border-bottom:1px solid var(--border); vertical-align:top}
table.cmp thead th{font-family:var(--font-h); font-size:.95rem; color:var(--primary); background:var(--surface-2)}
table.cmp thead th:first-child{border-start-start-radius:var(--r-sm)}
table.cmp tbody tr:hover{background:var(--surface-2)}
table.cmp td:nth-child(2), table.cmp td:nth-child(3){white-space:nowrap; width:150px}
.yn{display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.85rem}
.yn .lucide{width:var(--i-sm); height:var(--i-sm); stroke-width:2.6}
.yn.yes{color:var(--ok)}
.yn.no{color:var(--bad)}
ul.bullets, ol.bullets{margin:.4rem 0 0; padding-inline-start:1.2rem; display:grid; gap:.35rem; font-size:.92rem}
ul.bullets li, ol.bullets li{line-height:1.7}
.clay ul.bullets{color:var(--fg)}

/* ===== الشهادة ===== */
.cert{
  position:relative; padding:clamp(1.4rem,4vw,2.6rem); border-radius:var(--r-lg); text-align:center;
  background:
    radial-gradient(circle at 12% 8%, rgba(34,197,94,.16), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(37,99,235,.16), transparent 45%),
    var(--surface);
  box-shadow:var(--clay); border:6px double var(--border-strong);
}
.cert h2{font-size:clamp(1.6rem,5vw,2.3rem); margin:.5rem 0 .2rem; color:var(--primary)}
.cert-head{display:flex; align-items:center; justify-content:center; gap:.6rem; text-align:start; margin-bottom:.4rem}
.cert-head .brand-mark{width:42px; height:42px}
.cert-head span:last-child{display:flex; flex-direction:column; line-height:1.2}
.cert-head b{font-family:var(--font-h)}
.cert-head small{color:var(--muted); font-size:.74rem}
.cert-line{color:var(--muted); font-size:.95rem; max-width:60ch; margin:.5rem auto}
.cert-name{
  font-family:var(--font-h); font-weight:800; font-size:clamp(1.3rem,4.6vw,2rem); color:var(--fg);
  margin:.3rem auto .6rem; padding-bottom:.3rem; border-bottom:3px dashed var(--border-strong); max-width:22ch;
}
.cert-badges{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:1rem 0 .6rem}
.cert-badges span{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .8rem; border-radius:var(--pill);
  font-size:.8rem; font-weight:700; background:var(--surface-2); color:var(--muted); box-shadow:inset 0 0 0 2px var(--border);
}
.cert-badges span.on{background:#FEF3C7; color:#92400E; box-shadow:inset 0 0 0 2px #FDE68A}
body.theme-dark .cert-badges span.on{background:#3A2E12; color:#FCD34D; box-shadow:inset 0 0 0 2px #5A4620}
.cert-badges .lucide{width:var(--i-sm); height:var(--i-sm)}
.cert-date{font-size:.85rem; color:var(--muted); margin:0}

/* ===== التجاوب ===== */
@media (max-width:900px){
  .cell-stage{grid-template-columns:1fr}
  .side-panel{position:static}
  .hero{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .hero-visual svg{max-width:170px}
}
@media (max-width:640px){
  body{font-size:15px}
  .brand-text small{display:none}
  .brand-mark{width:38px; height:38px}
  .score-chip span{display:none}
  .topbar{padding:.5rem .7rem}
  .view{padding-bottom:2rem}
  .mode-grid{grid-template-columns:1fr}
  .toast{font-size:.85rem}
  .toast-wrap{inset-inline:1rem; bottom:1rem}
  .tabs{width:100%}
  .tab{flex:1 1 auto}
  .opt{font-size:.95rem}
  .cert-badges span{font-size:.72rem}
}
@media (max-width:420px){
  .score-chip{padding:.3rem .5rem}
  .icon-btn{width:42px; height:42px}
}

/* ===== احترام تقليل الحركة ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ===== الطباعة ===== */
@media print{
  .topbar, .foot, .view-head, .tabs, .toast-wrap, .no-print, .blobs{display:none !important}
  body{background:#fff; color:#000}
  .view{max-width:100%; padding:0}
  .cert{box-shadow:none; border-color:#94A3B8; break-inside:avoid}
  .cert h2{color:#1D4ED8}
}