.card-header display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.75rem;
.diff-easy background: #dcfce7; color: #15803d; .diff-medium background: #fff3e3; color: #b45309; .diff-advanced background: #ffe4e2; color: #b91c1c; organic chemistry ms chouhan
.badge background: #1e3c2c; color: white; display: inline-block; padding: 0.2rem 0.8rem; border-radius: 40px; font-size: 0.8rem; font-weight: 600; margin-top: 0.75rem; .card-header display: flex
.no-results text-align: center; grid-column: 1 / -1; padding: 3rem; background: #f9fbfd; border-radius: 48px; color: #5f7f8c; .diff-easy background: #dcfce7
container.innerHTML = filtered.map(prob => ` <div class="problem-card" data-id="$prob.id"> <div class="card-header"> <span class="chapter-tag">๐ $prob.chapterName</span> <span class="difficulty diff-$prob.difficulty">$prob.difficulty === 'easy' ? '๐ฏ Easy' : prob.difficulty === 'medium' ? 'โก Medium' : '๐ฅ Advanced'</span> </div> <div class="problem-text">โ $prob.text</div> <div class="mechanism-hint" style="display: none;">๐ก $prob.hint</div> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem;"> <button class="btn-hint">๐งช Show mechanism hint</button> <span class="ref">๐ MS Chouhan style</span> </div> </div> `).join(''); attachHintListeners();
.hero h1 font-size: 2.2rem; background: linear-gradient(135deg, #1e3c2c, #2b5e3b); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.5px;