diff --git a/assets/css/base.css b/assets/css/base.css
index cdeba52..e09b35c 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -3939,6 +3939,11 @@ html[data-theme="light"] .lt-wizard-connector   { background: var(--border-color
 
 /* — Avatar — */
 html[data-theme="light"] .lt-avatar              { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); }
+/* Color modifier overrides must come after the generic light-theme rule to win the cascade */
+html[data-theme="light"] .lt-avatar--orange { background: var(--accent-orange-dim); border-color: var(--accent-orange); color: var(--accent-orange); }
+html[data-theme="light"] .lt-avatar--green  { background: var(--accent-green-dim);  border-color: var(--accent-green);  color: var(--accent-green); }
+html[data-theme="light"] .lt-avatar--red    { background: var(--accent-red-dim);    border-color: var(--accent-red);    color: var(--accent-red); }
+html[data-theme="light"] .lt-avatar--purple { background: var(--accent-purple-dim); border-color: var(--accent-purple); color: var(--accent-purple); }
 
 /* — Lightbox — */
 html[data-theme="light"] .lt-lightbox-overlay   { background: rgba(15,20,40,0.92); }