/* Lessons page (tools/build_lessons.py) */
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 18px; }
.ls-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.ls-card img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }
.ls-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ls-body h3 { margin: 0; font-size: 1.05rem; }
.ls-body p { margin: 0; color: var(--muted); }
.ls-meta { display: flex; gap: 10px; align-items: center; font-size: .85rem; color: var(--muted); }
.ls-free, .ls-price { font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: .8rem; }
.ls-free { background: #16a34a; color: #fff; }
.ls-price { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.ls-uses { font-size: .88rem; }
.ls-uses a, .ls-actions a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: none; }
.ls-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: auto; padding-top: 10px; }
.ls-group { margin-top: 36px; }
.ls-group > p { color: var(--muted); margin: 4px 0 0; }