*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  min-height:100vh;
  padding:18px;
  padding-left:320px;
  direction:rtl;
}
.mjx-container{direction:ltr!important}
.ltr{direction:ltr;unicode-bidi:embed}

.top-nav{
  background:#fff;border-radius:14px;padding:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;
}
.nav-link{
  text-decoration:none;color:#fff;font-weight:700;
  background: linear-gradient(135deg,#667eea,#764ba2);
  padding:10px 16px;border-radius:10px;transition:.2s;
}
.nav-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.2)}

.panel{
  position:fixed;top:18px;left:18px;width:280px;
  background:#fff;border-radius:14px;padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:10;
}
.panel-title{font-weight:900;color:#667eea;margin-bottom:10px;font-size:1.2rem}
.stat{
  display:flex;justify-content:space-between;align-items:center;
  background: linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;border-radius:12px;padding:12px;margin:10px 0;
}
.stat-val{font-size:1.6rem;font-weight:900}
.progress{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin:10px 0}
.progress-bar{height:100%;background: linear-gradient(135deg,#4CAF50,#8BC34A);width:0%}

.badges{margin-top:12px;border-top:2px solid #f0f0f0;padding-top:10px}
.badges-title{color:#667eea;font-weight:800;margin-bottom:8px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:1.8rem;filter:grayscale(100%);opacity:.5;transition:.2s;
}
.badge.unlocked{filter:grayscale(0%);opacity:1;transform:scale(1.08)}

.container{max-width:1000px;margin:0 auto}
.rules{
  background:#fff;border-radius:14px;padding:16px;margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.rules h3{color:#667eea;margin-bottom:10px}
.rules ul{padding-right:18px;line-height:2}

.card{
  background:#fff;border-radius:16px;padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.card-title{font-weight:900;color:#667eea;font-size:1.3rem}
.pill{
  background:#f0f0f0;border-radius:999px;padding:6px 12px;font-weight:800;
}

.stem{
  background: linear-gradient(135deg,#f8f9ff,#fff);
  border:2px solid #e0e7ff;border-radius:14px;padding:16px;
  font-size:1.15rem;line-height:1.9;
  margin-bottom:12px;
}

.hint{
  background:#fff3cd;border:2px solid #ffc107;border-radius:12px;
  padding:12px;margin:10px 0;line-height:1.9;
}

.choices{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}
.choice{
  padding:14px;border-radius:12px;cursor:pointer;font-weight:800;
  border:2px solid #e0e0e0;background:#f8f9fa;transition:.2s;
}
.choice:hover{transform:translateX(-4px);background:#eef2ff;border-color:#c7d2fe}
.choice.locked{cursor:not-allowed;opacity:.85}
.choice.correct{background:#d1e7dd;border-color:#198754}
.choice.wrong{background:#f8d7da;border-color:#dc3545}

.feedback{
  border-radius:12px;padding:14px;margin-top:10px;line-height:1.9;display:none;
}
.feedback.ok{background:#d4edda;border:2px solid #28a745}
.feedback.bad{background:#f8d7da;border:2px solid #dc3545}

.solution{
  margin-top:12px;background:#e7f3ff;border:2px solid #2196F3;
  border-radius:12px;padding:14px;line-height:1.95;
}
.solution-title{font-weight:900;color:#1976D2;margin-bottom:8px}

.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{
  border:none;border-radius:12px;padding:12px 16px;font-weight:900;
  font-size:1rem;cursor:pointer;transition:.2s;
}
.btn-primary{background: linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.btn-secondary{background:#f0f0f0}
.btn-secondary:hover{background:#e6e6e6}

@media (max-width:900px){
  body{padding-left:18px}
  .panel{position:static;width:100%;margin-bottom:14px}
}