/* Language learning pages */
.mod-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mod-card p { flex: 1; }
.mod-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; background: var(--tint, #f3f6ff); margin-bottom: 16px; }
.lesson-list { list-style: none; margin: 0; padding: 0; max-width: 820px; display: grid; gap: 12px; }
.lesson-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.lesson-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.lesson-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft, #e8eefc); color: var(--primary); font-weight: 800; }
.lesson-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lesson-text small { color: var(--muted); font-size: .9rem; }
.lesson-level { flex: none; display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--primary-soft, #e8eefc); color: var(--primary); font-weight: 700; font-size: .82rem; }
.lesson-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
.lesson-body th, .lesson-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.lesson-body th { background: var(--tint, #f3f6ff); }
.lesson-body img { max-width: 100%; height: auto; }
.lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 700; }
.lesson-nav a { color: var(--primary); }