/* ══════════════════════════════════════════════════════════════
   Tafayourt SVT — styles.css
   ══════════════════════════════════════════════════════════════ */

/* 1. الألوان — بدلهم هنا باش تبدل كلشي */
:root{--color-main:#0B6E4F;--color-main-light:#14A073;--color-main-pale:#D1FAE5;--color-accent:#C8851E;--color-accent-light:#FDE68A;--bg-page:#FAF7F2;--bg-card:#FFF;--bg-soft:#F3EDE4;--text-dark:#1C1917;--text-medium:#57534E;--text-light:#A8A29E;--shadow-sm:0 2px 8px rgba(0,0,0,.06);--shadow-md:0 8px 30px rgba(0,0,0,.08);--shadow-lg:0 16px 50px rgba(0,0,0,.1);--r:16px;--r-sm:10px;--r-lg:24px}

/* 2. عام */
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Noto Kufi Arabic','DM Sans',sans-serif;background:var(--bg-page);color:var(--text-dark);direction:rtl;line-height:1.6;overflow-x:hidden}
body.lang-fr{direction:ltr;font-family:'DM Sans','Noto Kufi Arabic',sans-serif}
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* 3. خلفية */
.bg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none}
.blob{
  position:absolute;
  border-radius:50%;
  background: rgba(31,138,99,0.15); /* لون أخضر خفيف */
  filter: blur(25px); /* نقصنا blur */
  opacity: 0.2; /* زدنا الوضوح */
  animation: floatB 20s infinite ease-in-out;
}.blob-1{
  width:400px;
  height:400px;
  background: rgba(31,138,99,0.18); /* بدل var */
  top:-5%;
  right:-5%;
}

.blob-2{
  width:300px;
  height:300px;
  background: rgba(31,138,99,0.12); /* نفس الأخضر ولكن أخف */
  bottom:10%;
  left:-5%;
  animation-delay:-7s;
}

.blob-3{
  width:500px;
  height:500px;
  background: rgba(31,138,99,0.08);
  top:35%;
  left:30%;
  animation-delay:-14s;
}
@keyframes floatB{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-40px)}66%{transform:translate(-20px,30px)}}

/* 4. ناڤبار */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.75);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.06);transition:all .3s}
.navbar.scrolled{padding:8px 28px;box-shadow:var(--shadow-sm)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-main);cursor:pointer}
.nav-brand-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-main),var(--color-main-light));border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(11,110,79,.25)}
.nav-brand-name{font-weight:800;font-size:1.1rem}.nav-brand-sub{font-size:.68rem;color:var(--text-light)}
.nav-menu{display:flex;align-items:center;gap:2px;list-style:none}
.nav-link{text-decoration:none;color:var(--text-medium);padding:8px 14px;border-radius:var(--r-sm);font-size:.84rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--color-main);background:rgba(11,110,79,.06)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;gap:2px;background:var(--bg-soft);padding:3px;border-radius:8px}
.lang-btn{padding:5px 10px;border:none;background:0;border-radius:6px;cursor:pointer;font-size:.74rem;font-weight:600;color:var(--text-light);font-family:inherit;transition:all .2s}
.lang-btn.active{background:#fff;color:var(--color-main);box-shadow:var(--shadow-sm)}
.hamburger{display:none;background:0;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-dark);border-radius:2px}

/* 5. بحث */
.search-box{position:relative;display:flex;align-items:center;background:var(--bg-soft);border-radius:var(--r-sm);padding:0 10px;border:1.5px solid transparent;transition:all .3s}
.search-box:focus-within{background:#fff;border-color:var(--color-main-light);box-shadow:0 0 0 3px rgba(11,110,79,.08)}
.search-icon{font-size:.82rem;opacity:.5}.search-input{border:none;background:0;padding:7px 8px;font-size:.8rem;font-family:inherit;color:var(--text-dark);width:140px;outline:none;direction:inherit}
.search-input::placeholder{color:var(--text-light)}.search-input:focus{width:200px}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.06);max-height:300px;overflow-y:auto;display:none;z-index:2000}
.search-results.open{display:block;animation:fadeUp .25s ease}
.search-result-item{padding:10px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(0,0,0,.04);display:flex;align-items:center;gap:10px}
.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background:var(--color-main-pale)}
.search-result-icon{font-size:1.1rem;flex-shrink:0}.search-result-text{display:flex;flex-direction:column}
.search-result-title{font-size:.83rem;font-weight:600}.search-result-sub{font-size:.7rem;color:var(--text-light)}
.search-no-results{padding:18px;text-align:center;color:var(--text-light);font-size:.85rem}

/* 6. صفحات */
.page{display:none;position:relative;z-index:1}.page.active{display:block}

/* 7. Hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:130px 40px 90px;text-align:center}
.hero-inner{max-width:800px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-main-pale);border:1px solid rgba(11,110,79,.15);padding:8px 20px;border-radius:50px;font-size:.84rem;color:var(--color-main);font-weight:600;margin-bottom:28px;animation:fadeUp .7s ease-out}
.hero-badge-dot{width:8px;height:8px;background:var(--color-main-light);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;line-height:1.15;margin-bottom:22px;animation:fadeUp .7s ease-out .1s both}
.hero h1 .highlight{background:linear-gradient(135deg,var(--color-main),var(--color-main-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:1.05rem;color:var(--text-medium);line-height:1.8;max-width:600px;margin:0 auto 36px;animation:fadeUp .7s ease-out .2s both}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s ease-out .3s both}

/* أزرار */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:all .3s}
.btn-primary{background:linear-gradient(135deg,var(--color-main),var(--color-main-light));color:#fff;box-shadow:0 4px 16px rgba(11,110,79,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(11,110,79,.35)}
.btn-outline{background:#fff;color:var(--color-main);border:1.5px solid var(--bg-soft)}
.btn-outline:hover{border-color:var(--color-main);transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:.8rem;border-radius:var(--r-sm)}
.btn-danger{background:#DC2626;color:#fff}.btn-danger:hover{background:#B91C1C}

.hero-stats{display:flex;justify-content:center;gap:44px;margin-top:56px;animation:fadeUp .7s ease-out .4s both}
.stat-value{font-size:2rem;font-weight:800;color:var(--color-main)}.stat-label{font-size:.8rem;color:var(--text-light);margin-top:3px}

/* 8. أقسام */
.section{padding:80px 36px}.section-head{text-align:center;margin-bottom:50px}
.section-tag{font-size:.74rem;font-weight:700;color:var(--color-main);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.section-title{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;margin-bottom:12px}
.section-subtitle{font-size:.95rem;color:var(--text-medium);max-width:540px;margin:0 auto}

/* 9. مستويات */
.levels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:0 auto}
.level-card{background:var(--bg-card);border-radius:var(--r-lg);padding:32px 26px;border:1px solid rgba(0,0,0,.05);cursor:pointer;transition:all .3s}
.level-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.level-emoji{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px;background:var(--color-main-pale)}
.level-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}.level-card p{color:var(--text-medium);font-size:.88rem;margin-bottom:16px}
.level-tags{display:flex;flex-wrap:wrap;gap:5px}.tag{padding:4px 11px;background:var(--bg-soft);border-radius:7px;font-size:.73rem;font-weight:500;color:var(--text-medium)}

/* 10. فلترة + كروت */
.filter-tabs{display:flex;gap:7px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.filter-tab{padding:8px 20px;border:1.5px solid var(--bg-soft);background:#fff;border-radius:var(--r-sm);font-size:.84rem;font-weight:500;cursor:pointer;font-family:inherit;color:var(--text-medium);transition:all .2s}
.filter-tab:hover,.filter-tab.active{border-color:var(--color-main);color:var(--color-main)}

/* 11. دروس */
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.lesson-card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid rgba(0,0,0,.05);transition:all .3s;cursor:pointer}
.lesson-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.lesson-cover{height:150px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative}
.lesson-cover.type-bio{background:linear-gradient(135deg,#065F3B,#10B981)}.lesson-cover.type-geo{background:linear-gradient(135deg,#78350F,#F59E0B)}
.lesson-cover.type-eco{background:linear-gradient(135deg,#0C4A6E,#38BDF8)}.lesson-cover.type-gen{background:linear-gradient(135deg,#581C87,#C084FC)}
.lesson-cover.type-imm{background:linear-gradient(135deg,#7F1D1D,#F87171)}
.lesson-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.4);color:#fff;padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:600}
body.lang-fr .lesson-badge{right:auto;left:10px}
.lesson-info{padding:18px}.lesson-info h4{font-size:.95rem;font-weight:700;margin-bottom:6px}
.lesson-info p{color:var(--text-medium);font-size:.83rem;margin-bottom:12px}
.lesson-footer{display:flex;justify-content:space-between;align-items:center}
.lesson-level-tag{padding:3px 9px;background:var(--bg-soft);border-radius:5px;font-size:.7rem;font-weight:600;color:var(--text-medium)}
.lesson-duration{font-size:.78rem;color:var(--text-light)}

/* 12. تمارين */
.exercises-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.exercise-card{background:#fff;border-radius:var(--r);padding:24px;border:1px solid rgba(0,0,0,.05);transition:all .3s}
.exercise-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.exercise-type-badge{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.exercise-type-badge.td{color:var(--color-main)}.exercise-type-badge.exam{color:#DC2626}.exercise-type-badge.quiz{color:#7C3AED}
.exercise-card h4{font-size:.95rem;font-weight:700;margin-bottom:6px}.exercise-card p{color:var(--text-medium);font-size:.83rem;margin-bottom:16px}
.exercise-actions{display:flex;gap:7px;flex-wrap:wrap}

/* 13. Puzzle */
.puzzle-levels{display:flex;gap:8px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.puzzle-level-btn{padding:10px 22px;border:2px solid var(--bg-soft);background:#fff;border-radius:var(--r);font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-medium);transition:all .2s}
.puzzle-level-btn:hover,.puzzle-level-btn.active{border-color:var(--color-main);color:var(--color-main)}
.puzzle-container{max-width:720px;margin:0 auto;background:#fff;border-radius:var(--r-lg);border:1px solid rgba(0,0,0,.05);padding:32px;box-shadow:var(--shadow-sm)}
.puzzle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.puzzle-header h3{font-size:1rem;font-weight:700}.puzzle-stats{display:flex;gap:16px}
.puzzle-stat{display:flex;align-items:center;gap:4px;font-size:.83rem;font-weight:600;color:var(--text-medium)}
.puzzle-board{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:22px}
.puzzle-tile{aspect-ratio:1;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.7rem;cursor:pointer;border:2px solid var(--bg-soft);background:var(--bg-soft);transition:all .3s;user-select:none}
.puzzle-tile:hover{transform:scale(1.03);border-color:var(--color-main-light)}
.puzzle-tile.flipped{background:linear-gradient(135deg,var(--color-main),var(--color-main-light));border-color:var(--color-main);color:#fff}
.puzzle-tile.matched{background:var(--color-main-pale);border-color:var(--color-main-light);color:var(--color-main);cursor:default;animation:popIn .4s}
@keyframes popIn{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.puzzle-tile.wrong{animation:shake .35s;border-color:#EF4444}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tile-face{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.tile-emoji{font-size:1.7rem}.tile-text{font-size:.62rem;font-weight:600;line-height:1.2}
.puzzle-message{text-align:center;padding:22px;background:var(--color-main-pale);border-radius:var(--r);border:1px solid rgba(11,110,79,.12);display:none}
.puzzle-message.show{display:block;animation:fadeUp .4s}
.puzzle-message h4{font-size:1.1rem;font-weight:800;color:var(--color-main);margin-bottom:5px}.puzzle-message p{color:var(--text-medium);font-size:.88rem}
.puzzle-actions{display:flex;gap:8px;justify-content:center;margin-top:18px}

/* 14. Food chain */
.food-question{text-align:center;margin-bottom:22px}
.food-predator{display:inline-flex;flex-direction:column;align-items:center;gap:5px;background:var(--bg-soft);padding:22px 36px;border-radius:var(--r-lg);margin-bottom:14px}
.food-animal-emoji{font-size:3.2rem}.food-animal-name{font-size:1rem;font-weight:700}
.food-arrow{font-size:.95rem;font-weight:700;color:var(--color-main);margin-bottom:18px}
.food-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px;margin:0 auto}
.food-choice{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 10px;background:var(--bg-soft);border:2px solid transparent;border-radius:var(--r);cursor:pointer;transition:all .3s;user-select:none}
.food-choice:hover{border-color:var(--color-main-light);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.food-choice .choice-emoji{font-size:2rem}.food-choice .choice-name{font-size:.8rem;font-weight:600;color:var(--text-dark)}
.food-choice.correct{background:var(--color-main-pale);border-color:var(--color-main);animation:popIn .4s}
.food-choice.wrong{background:#FEE2E2;border-color:#EF4444;animation:shake .35s}
.food-feedback{text-align:center;padding:14px;border-radius:var(--r);margin-bottom:14px;font-weight:600;font-size:.9rem;min-height:20px;display:flex;align-items:center;justify-content:center}
.food-feedback.correct-msg{background:var(--color-main-pale);color:var(--color-main)}
.food-feedback.wrong-msg{background:#FEE2E2;color:#DC2626}

/* 15. من أنا */
.about-card{max-width:860px;margin:0 auto;background:#fff;border-radius:var(--r-lg);border:1px solid rgba(0,0,0,.05);display:grid;grid-template-columns:240px 1fr;overflow:hidden}
.about-visual{background:linear-gradient(160deg,var(--color-main),var(--color-main-light));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;color:#fff;text-align:center}
.about-avatar-ring{width:110px;height:110px;border-radius:50%;border:3px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:2.8rem;margin-bottom:14px;background:rgba(255,255,255,.06)}
.about-visual h3{font-size:1.15rem;font-weight:700;margin-bottom:3px}.about-visual span{font-size:.8rem;opacity:.8}
.about-text{padding:36px}.about-text p{color:var(--text-medium);line-height:1.8;margin-bottom:12px;font-size:.9rem}
.about-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.about-detail{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:500}
.about-detail-icon{width:32px;height:32px;background:var(--bg-soft);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}

/* 16. فوتر */
.site-footer{position:relative;z-index:1;padding:36px;text-align:center;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.footer-brand{font-size:.95rem;font-weight:800;color:var(--color-main);margin-bottom:3px}
.footer-text{font-size:.8rem;color:var(--text-light)}

/* 17. أنيميشن */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(24px);transition:all .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}

/* 18. Login */
.login-container{display:flex;justify-content:center;align-items:center;min-height:60vh}
.login-card{background:#fff;border-radius:var(--r-lg);padding:44px 36px;max-width:400px;width:100%;border:1px solid rgba(0,0,0,.05);box-shadow:var(--shadow-md);text-align:center}
.login-logo{margin-bottom:14px}.login-card h2{font-size:1.4rem;font-weight:800;color:var(--color-main);margin-bottom:5px}
.login-subtitle{color:var(--text-light);font-size:.86rem;margin-bottom:24px}
.login-tabs{display:flex;gap:3px;background:var(--bg-soft);padding:3px;border-radius:var(--r-sm);margin-bottom:22px}
.login-tab{flex:1;padding:8px;border:none;background:0;border-radius:7px;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--text-light);font-family:inherit;transition:all .2s}
.login-tab.active{background:#fff;color:var(--color-main);box-shadow:var(--shadow-sm)}
.input-group{margin-bottom:14px;text-align:right}body.lang-fr .input-group{text-align:left}
.input-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text-medium);margin-bottom:5px}
.input-group input,.input-group select{width:100%;padding:11px 14px;border:1.5px solid var(--bg-soft);border-radius:var(--r-sm);font-size:.88rem;font-family:inherit;background:var(--bg-page);transition:all .2s;outline:none;direction:inherit}
.input-group input:focus,.input-group select:focus{border-color:var(--color-main-light);box-shadow:0 0 0 3px rgba(11,110,79,.08)}
.login-submit{width:100%;margin-top:6px}
.login-message{margin-top:14px;padding:9px;border-radius:var(--r-sm);font-size:.83rem;font-weight:600;min-height:10px}
.login-message.success{background:var(--color-main-pale);color:var(--color-main)}
.login-message.error{background:#FEE2E2;color:#DC2626}
.btn-login{padding:6px 14px;background:var(--color-main);color:#fff;border:none;border-radius:var(--r-sm);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.btn-login:hover{background:var(--color-main-light)}
.user-badge{width:34px;height:34px;background:var(--color-main);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;cursor:pointer;position:relative}
.user-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-md);padding:12px 14px;min-width:170px;z-index:2000}
body.lang-fr .user-menu{left:auto;right:0}
.user-menu.open{display:block;animation:fadeUp .2s}
.user-menu-name{font-weight:700;font-size:.88rem;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--bg-soft)}
.user-menu button{width:100%;padding:7px;background:0;border:none;font-family:inherit;font-size:.83rem;cursor:pointer;border-radius:5px;color:#DC2626;font-weight:600;text-align:right}
.user-menu .user-menu-profile{color:var(--color-main)}
.user-menu .user-menu-profile:hover{background:var(--color-main-pale)}
body.lang-fr .user-menu button{text-align:left}.user-menu button:hover{background:#FEE2E2}
/* Google button */
.btn-google{background:#fff;color:#3c4043;border:1.5px solid #dadce0;justify-content:center;gap:10px;font-size:.85rem}
.btn-google:hover{background:#f8f9fa;border-color:#aaa;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
/* Login divider */
.login-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-light);font-size:.78rem}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--bg-soft)}
/* Profile page */
.profile-card{background:#fff;border-radius:var(--r-lg);padding:36px;max-width:480px;margin:0 auto;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-md)}
/* Profile page */
.profile-card{background:#fff;border-radius:var(--r-lg);padding:36px;max-width:580px;margin:0 auto;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-md)}
.profile-avatar-lg{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--color-main),var(--color-main-light));color:#fff;font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.profile-role-badge{display:inline-block;padding:4px 16px;border-radius:20px;font-size:.78rem;font-weight:700}
.profile-role-teacher{background:var(--color-main-pale);color:var(--color-main)}
.profile-role-student{background:#EFF6FF;color:#1D4ED8}
/* New professional profile */
.prof-header{display:flex;align-items:center;gap:22px;padding-bottom:24px;border-bottom:1px solid var(--bg-soft);margin-bottom:24px}
.prof-avatar-wrap{flex-shrink:0}
.prof-avatar-xl{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--color-main),var(--color-main-light));color:#fff;font-size:2.2rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.prof-avatar-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--color-main-pale)}
.prof-header-info{flex:1}
.prof-name{font-size:1.3rem;font-weight:800;margin-bottom:6px}
.prof-email{color:var(--text-light);font-size:.83rem;margin-top:6px}
.prof-tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:var(--r-sm);margin-bottom:24px;flex-wrap:wrap}
.prof-tab{flex:1;padding:9px 10px;border:none;background:0;border-radius:8px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text-light);font-family:inherit;transition:all .2s;white-space:nowrap}
.prof-tab.active{background:#fff;color:var(--color-main);box-shadow:var(--shadow-sm)}
.prof-sub-title{font-size:.95rem;font-weight:700;color:var(--color-main);margin-bottom:16px}
.prof-security-block{padding:4px 0}
.prof-msg{margin-top:12px;padding:9px 12px;border-radius:var(--r-sm);font-size:.83rem;font-weight:600;min-height:0}
.prof-msg.success{background:var(--color-main-pale);color:var(--color-main)}
.prof-msg.error{background:#FEE2E2;color:#DC2626}
/* Modal overlay */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-card{background:#fff;border-radius:var(--r-lg);padding:36px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.modal-card h3{font-size:1.1rem;font-weight:800;color:var(--color-main);margin-bottom:22px}

/* Image upload */
.img-upload-wrap{display:block;cursor:pointer}
.img-upload-preview{height:120px;border:2px dashed var(--bg-soft);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--bg-page);transition:border-color .2s;overflow:hidden}
.img-upload-wrap:hover .img-upload-preview{border-color:var(--color-main-light)}
.img-upload-placeholder{font-size:.82rem;color:var(--text-light);font-weight:600;pointer-events:none}
/* PDF upload row */
.pdf-upload-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.pdf-upload-btn{white-space:nowrap;cursor:pointer}
.pdf-filename{font-size:.8rem;color:var(--text-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
/* Exercise image cover */
.exo-cover{height:130px;border-radius:var(--r-sm);margin:-24px -24px 16px;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;padding:10px 14px}
.exo-cover-badge{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;background:rgba(0,0,0,.5);color:#fff;padding:3px 10px;border-radius:20px}

/* Toast notification */
.site-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(30px);background:#1C1917;color:#fff;padding:12px 24px;border-radius:var(--r);font-size:.88rem;font-weight:600;opacity:0;transition:all .35s;pointer-events:none;z-index:99999;white-space:nowrap;box-shadow:var(--shadow-lg)}
.site-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.site-toast.success{background:var(--color-main)}
.site-toast.error{background:#DC2626}

/* 19. ألعاب */
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:860px;margin:0 auto}
.game-card{background:var(--bg-card);border-radius:var(--r-lg);padding:32px 24px;border:1px solid rgba(0,0,0,.05);cursor:pointer;transition:all .3s;text-align:center}
.game-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.game-icon{font-size:2.8rem;margin-bottom:14px}.game-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.game-card p{color:var(--text-medium);font-size:.85rem;margin-bottom:18px;line-height:1.5}
.back-btn{margin-bottom:18px}.game-area-title{text-align:center;font-size:1.3rem;font-weight:800;margin-bottom:24px}
.wai-clue-box{text-align:center;background:var(--bg-soft);border-radius:var(--r-lg);padding:28px;margin-bottom:22px}
.wai-clue-number{font-size:.76rem;font-weight:700;color:var(--color-main);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.wai-clue-text{font-size:1.05rem;font-weight:600;line-height:1.8;color:var(--text-dark);white-space:pre-line}
.wai-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:560px;margin:0 auto 18px}
.wai-choice{padding:14px;background:#fff;border:2px solid var(--bg-soft);border-radius:var(--r);cursor:pointer;text-align:center;font-weight:600;font-size:.86rem;transition:all .3s}
.wai-choice:hover{border-color:var(--color-main-light);transform:translateY(-2px)}
.wai-choice.correct{background:var(--color-main-pale);border-color:var(--color-main);animation:popIn .4s}
.wai-choice.wrong{background:#FEE2E2;border-color:#EF4444;animation:shake .35s}
.wai-next-clue{margin-bottom:14px}
.eq-display{text-align:center;background:var(--bg-soft);border-radius:var(--r-lg);padding:26px;margin-bottom:22px;font-size:1.05rem;font-weight:700;line-height:2;direction:ltr}
.eq-blank{display:inline-block;min-width:80px;padding:3px 12px;border-bottom:3px dashed var(--color-main);color:var(--color-main);font-weight:800}
.eq-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:560px;margin:0 auto 18px}
.eq-choice{padding:12px;background:#fff;border:2px solid var(--bg-soft);border-radius:var(--r);cursor:pointer;text-align:center;font-weight:600;font-size:.83rem;transition:all .3s}
.eq-choice:hover{border-color:var(--color-main-light);transform:translateY(-2px)}
.eq-choice.correct{background:var(--color-main-pale);border-color:var(--color-main);animation:popIn .4s}
.eq-choice.wrong{background:#FEE2E2;border-color:#EF4444;animation:shake .35s}

/* 20. لوحة التحكم — Admin Panel */
.admin-bar{background:var(--color-accent-light);padding:8px 16px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:8px}
.admin-bar span{font-weight:700;font-size:.88rem;color:#92400E}
.admin-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.85rem}
.admin-table th{background:var(--bg-soft);padding:10px 14px;text-align:right;font-weight:700;font-size:.8rem;color:var(--text-medium);border-bottom:2px solid var(--bg-soft)}
body.lang-fr .admin-table th{text-align:left}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--bg-soft);vertical-align:middle}
.admin-table tr:hover{background:rgba(11,110,79,.02)}
.admin-actions{display:flex;gap:6px}
.admin-form{background:var(--bg-soft);border-radius:var(--r);padding:24px;margin-bottom:20px}
.admin-form h4{font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--color-main)}
.admin-form .input-group{margin-bottom:12px}
.admin-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.admin-tab{padding:8px 18px;border:1.5px solid var(--bg-soft);background:#fff;border-radius:var(--r-sm);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-medium);transition:all .2s}
.admin-tab:hover,.admin-tab.active{border-color:var(--color-main);color:var(--color-main);background:var(--color-main-pale)}

/* 21. موبايل */
@media(max-width:900px){.levels-grid,.about-details{grid-template-columns:1fr}.about-card{grid-template-columns:1fr}.games-grid{grid-template-columns:1fr}.wai-choices{grid-template-columns:1fr}.eq-choices{grid-template-columns:repeat(2,1fr)}.food-choices{grid-template-columns:repeat(2,1fr)}.admin-form .form-row{grid-template-columns:1fr}}
@media(max-width:768px){.navbar{padding:10px 14px}.nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);padding:14px;flex-direction:column;gap:3px;border-bottom:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-md)}.nav-menu.open{display:flex}.hamburger{display:flex}.search-box{display:none}.hero{padding:100px 18px 50px}.hero-stats{gap:20px}.section{padding:50px 14px}.puzzle-container{padding:18px}.puzzle-tile{font-size:1.2rem}.tile-text{font-size:.52rem}.login-card{padding:28px 20px;margin:0 14px}.eq-display{font-size:.88rem}.admin-table{font-size:.78rem}.admin-table th,.admin-table td{padding:7px 8px}}

/* ═══ محتوى الدرس ═══ */
.lesson-content-body { line-height: 1.9; color: var(--text-dark); font-size: .95rem; }
.lesson-content-body h2 { font-size: 1.4rem; font-weight: 800; color: var(--color-main); margin-bottom: 18px; }
.lesson-content-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--color-main-pale); }
.lesson-content-body p { margin-bottom: 12px; }
.lesson-content-body strong { color: var(--color-main); }
/* ===== BACKGROUND ===== */
.bg-blobs{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
background: transparent;}

/* bubbles */
.blob{
  position: absolute;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  animation: float 20s infinite ease-in-out;
}

/* positions */
.blob-1{ width:200px;height:200px;left:10%;bottom:-50px; }
.blob-2{ width:150px;height:150px;left:60%;bottom:-60px; }
.blob-3{ width:250px;height:250px;left:35%;bottom:-70px; }

/* animation */
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-300px)}
  100%{transform:translateY(0)}
}

.bg-blobs.dna .blob{
  background: linear-gradient(
    135deg,
    rgba(31, 138, 99, 0),   /* purple */
    rgba(31, 138, 99, 0)     /* green khfif */
  );
  box-shadow: 
    0 0 40px rgba(31, 138, 99, 0),
    0 0 60px rgba(31, 138, 99, 0);
}
body{
  background-image: url("bg.png");
  background-size: cover;
  background-position: 20% center;
  animation: bgFloat 25s linear infinite;
}

@keyframes bgFloat {
  0%{
    background-position: 20% 100%;
  }
  50%{
    background-position: 30% 0%;
  }
  100%{
    background-position: 20% 100%;
  }
}
body::before{
  content: "";
  position: absolute; /* بدل fixed ❗ */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("dna.png") no-repeat center;
  background-size: cover;
  opacity: 0.12;
  animation: dnaMove 20s linear infinite;
  pointer-events: none;
  z-index: -1; /* مهم بزاف */
}

/* ═══ Contact Page ═══ */
.contact-teacher-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: 700px;
  margin: 0 auto 32px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--bg-soft);
}
.contact-teacher-avatar {
  font-size: 3.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.contact-teacher-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--text-main);
}
.contact-teacher-role {
  font-size: .85rem;
  color: var(--text-light);
  margin: 0 0 12px;
}
.contact-email-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
  direction: ltr;
  word-break: break-all;
}
.contact-email-link:hover { opacity: .85; }

.contact-form-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--bg-soft);
}
.contact-form-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--text-main);
}

/* ═══ Admin Tickets ═══ */
.ticket-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1.5px solid var(--bg-soft);
  transition: border-color .2s;
}
.ticket-card.ticket-unread {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-card));
}
.ticket-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.ticket-name   { font-weight: 700; font-size: .9rem; }
.ticket-email  { font-size: .82rem; color: var(--text-light); direction: ltr; }
.ticket-date   { font-size: .78rem; color: var(--text-light); margin-right: auto; }
.ticket-badge  {
  background: var(--color-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.ticket-subject {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 8px;
  color: var(--text-main);
}
.ticket-message {
  font-size: .88rem;
  color: var(--text-body);
  line-height: 1.6;
  white-space: pre-wrap;
}


/* ══════════════════════════════════════
   محتوى التمارين والفروض
   ══════════════════════════════════════ */
.exo-content-body h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-main);
  margin-bottom: 20px;
  border-bottom: 2px solid var(--bg-soft);
  padding-bottom: 10px;
}

.exo-block {
  background: var(--bg-card);
  border: 1.5px solid var(--bg-soft);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-bottom: 22px;
}

.exo-block h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.exo-block p {
  font-size: .92rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 10px;
}

.exo-block ol {
  padding-right: 20px;
  margin: 0;
}

.exo-block ol li {
  font-size: .91rem;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 6px;
}

.exo-block ul {
  padding-right: 20px;
  margin: 6px 0;
}

.exo-block ul li {
  font-size: .9rem;
  color: var(--text-body);
  line-height: 1.7;
  list-style-type: disc;
}

.exam-header {
  background: linear-gradient(135deg, var(--color-main), var(--color-accent));
  color: #fff;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.exam-header p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: #fff !important;
}

.exo-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: .85rem;
}

.exo-table th {
  background: var(--color-main);
  color: #fff;
  padding: 8px 10px;
  text-align: center;
  font-weight: 700;
}

.exo-table td {
  padding: 7px 10px;
  text-align: center;
  border: 1px solid var(--bg-soft);
  color: var(--text-body);
}

.exo-table tr:nth-child(even) td {
  background: var(--bg-soft);
}

/* ═══ إجابات نموذجية ═══ */
.answers-header { background: linear-gradient(135deg, #27ae60, #2ecc71); color:#fff; border-radius: var(--r-md); padding:14px 20px; margin-bottom:18px; }
.answers-header h2 { color:#fff; margin:0; font-size:1.1rem; }
.answer-block { background: var(--bg-card); border:1.5px solid #27ae6033; border-radius: var(--r-md); padding:18px 20px; margin-bottom:18px; }
.answer-block h3 { color: #27ae60; margin-bottom:12px; font-size:1rem; }
.answer-item { display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; }
.answer-num { background:#27ae60; color:#fff; border-radius:50%; min-width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0; margin-top:2px; }
.answer-item p { margin:0; line-height:1.7; }
.btn-success { background: #27ae60; color:#fff; border:2px solid #27ae60; }
.btn-success:hover { background:#219a52; border-color:#219a52; }

/* ════════════════════════════════════
   نظام التقييم بالنجوم
════════════════════════════════════ */
.rating-widget-wrap { margin-top: 36px; }

.rating-widget {
  background: var(--bg-card);
  border: 2px solid var(--bg-soft);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
}

.rating-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
}

.rating-stars-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.rating-star {
  background: none;
  border: none;
  font-size: 2.4rem;
  color: #d0d0d0;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color .15s, transform .15s;
}
.rating-star:hover, .rating-star.hover {
  color: #f5c518;
  transform: scale(1.25);
}
.rating-star.active {
  color: #f5c518;
}
.rating-star.dim {
  color: #e0e0e0;
  transform: scale(0.9);
}

.rating-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  min-height: 24px;
}

.rating-thanks {
  color: #27ae60;
  font-size: .95rem;
}

.rating-avg {
  color: var(--text-light);
}
.rating-count {
  font-size: .82rem;
  color: var(--text-light);
}

/* mini stars on cards */
.rating-card-stars {
  display: flex;
  gap: 1px;
  margin-bottom: 8px;
  min-height: 18px;
}
.mstar {
  font-size: 1rem;
  color: #d0d0d0;
  line-height: 1;
}
.mstar.filled {
  color: #f5c518;
}