diff --git a/src/app.css b/src/app.css
index c311db8b..38e92a15 100644
--- a/src/app.css
+++ b/src/app.css
@@ -168,6 +168,23 @@ html.light { color-scheme: light; }
     background-color: rgb(55 65 81);
 }
 
+/* ============================================================
+ * Lucide SVG icon inline flow fix.
+ *
+ * FA icon spans were display:inline and flowed naturally with adjacent text.
+ * Lucide renders <svg> elements which default to inline-block in most browsers,
+ * causing icons to break onto their own line when mixed with text.
+ *
+ * This global rule restores the FA-equivalent behavior: icons flow inline
+ * with text and are vertically centered on the text baseline.
+ * Components that already explicitly set display:flex on their parent are
+ * unaffected — flex children ignore display:inline.
+ * ============================================================ */
+svg.lucide {
+    display: inline;
+    vertical-align: middle;
+}
+
 /* There are no more Tailwind layers. */
 
 html,