feat: enhance lesson UI with centered images, bordered tables, and conditional output tab

examples/content/quiz_test.md

@@ -4,6 +4,7 @@ Pelajaran ini berisi berbagai tipe kuis untuk menguji fitur Pilihan Ganda, Flash
 
 ---QUIZ_FLASHCARD---
 ### Bahasa C adalah bahasa pemrograman tingkat rendah.
+image: https://upload.wikimedia.org/wikipedia/commons/1/18/C_Programming_Language.svg
 - [] Benar
 - [x] Salah
 > Penjelasan: Bahasa C sebenarnya dikategorikan sebagai bahasa tingkat menengah (*middle-level language*) karena memiliki fitur bahasa tingkat rendah (seperti manipulasi memori) sekaligus fitur bahasa tingkat tinggi (seperti struktur kontrol yang manusiawi).
@@ -21,6 +22,10 @@ Cukup gunakan dua garis miring di awal baris, contoh: `// ini komentar`.
 
 ### Apa fungsi dari `return 0;` di dalam fungsi `main()`?
 Menandakan bahwa program telah selesai berjalan dengan sukses tanpa ada error.
+
+### Pilih gambar yang melambangkan bahasa C:
+- [x] ![C Logo](https://upload.wikimedia.org/wikipedia/commons/1/18/C_Programming_Language.svg)
+- [] ![Wrong Logo](https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg)
 ---END_QUIZ_FLASHCARD---
 
 ---EXERCISE---

frontend/src/app.css

@@ -147,6 +147,30 @@ pre code {
 img {
 	max-width: 100%;
 	height: auto;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* ── Markdown Tables ─────────────────────────────────────────── */
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin-bottom: 1.25rem;
+	font-size: 0.85rem;
+	border: 1px solid var(--color-border);
+}
+th, td {
+	border: 1px solid var(--color-border);
+	padding: 8px 12px;
+	text-align: left;
+}
+th {
+	background: var(--color-bg-secondary);
+	font-weight: 600;
+}
+tr:nth-child(even) {
+	background: rgba(0, 0, 0, 0.02);
 }
 
 /* ── Cards ────────────────────────────────────────────────────── */

frontend/src/lib/components/WorkspaceHeader.svelte

@@ -101,7 +101,9 @@
 	{#if hasQuiz}
 		<button class="chrome-tab" class:active={activeTab === 'quiz'} onclick={() => handleTabClick('quiz')}>Quiz</button>
 	{/if}
-	<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
+	{#if hasExercise}
+		<button class="chrome-tab" class:active={activeTab === 'output'} onclick={() => handleTabClick('output')}>Output</button>
+	{/if}
 {/snippet}
 
 {#if isMobile}

frontend/src/routes/lesson/[slug]/lesson.css

@@ -53,6 +53,7 @@
 .tab-content p {
 	margin-bottom: 0.75rem;
 }
+
 .prose h2, .prose h3,
 .tab-content h2, .tab-content h3 {
 	margin-top: 1.25rem;