diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css
index 72417324b..339015112 100644
--- a/src/uix/eidos/components/words/words.css
+++ b/src/uix/eidos/components/words/words.css
@@ -291,20 +291,69 @@
 	color: var(--words-command-color);
 }
 
-/* Depth indicator — the leaf panel is full-strength; deeper-in-the-
-   hierarchy panels render slightly muted so the user can read the
-   precedence visually. */
+/* Per-scope accent — each category of scope gets a distinct hue so
+   the user can read the panel's *kind* at a glance:
+   - Text scopes (format, block) → primary (project accent)
+   - Structure scopes (cell, row, table, list, list-item) → secondary
+   - Media scopes (image, code) → fulfill (tealish)
+   - Default (document) → neutral
+   Variables here resolve from the eidos color tokens, so themes
+   re-tint everything coherently. */
+[data-words-drawer-panel][data-mode='default'] {
+	--_drawer-scope-accent: var(--words-toolbar-border);
+	--_drawer-scope-tint: var(--words-toolbar-bg);
+}
+[data-words-drawer-panel][data-mode='format'],
+[data-words-drawer-panel][data-mode='block'] {
+	--_drawer-scope-accent: var(--_words-accent-border);
+	--_drawer-scope-tint: color-mix(in srgb, var(--_words-accent-solid) 6%, transparent);
+}
+[data-words-drawer-panel][data-mode='cell'],
+[data-words-drawer-panel][data-mode='row'],
+[data-words-drawer-panel][data-mode='table'],
+[data-words-drawer-panel][data-mode='list'],
+[data-words-drawer-panel][data-mode='list-item'] {
+	--_drawer-scope-accent: var(--words-secondary-text);
+	--_drawer-scope-tint: color-mix(in srgb, var(--words-secondary-text) 6%, transparent);
+}
+[data-words-drawer-panel][data-mode='image'],
+[data-words-drawer-panel][data-mode='code'] {
+	--_drawer-scope-accent: var(--words-fulfill-text);
+	--_drawer-scope-tint: color-mix(in srgb, var(--words-fulfill-text) 6%, transparent);
+}
+
+/* Depth indicator — leaf panel is full-strength scope accent; deeper
+   panels render the same hue at decreasing alpha so the precedence is
+   readable visually. */
 [data-words-drawer-panel][data-depth='0'] {
-	border-inline-start: 2px solid var(--_words-accent-border);
+	border-inline-start: 3px solid var(--_drawer-scope-accent);
 }
 [data-words-drawer-panel][data-depth='1'] {
-	border-inline-start: 2px solid
-		color-mix(in srgb, var(--_words-accent-border) 60%, transparent);
+	border-inline-start: 3px solid
+		color-mix(in srgb, var(--_drawer-scope-accent) 65%, transparent);
+}
+[data-words-drawer-panel][data-depth='2'] {
+	border-inline-start: 3px solid
+		color-mix(in srgb, var(--_drawer-scope-accent) 40%, transparent);
 }
-[data-words-drawer-panel][data-depth='2'],
 [data-words-drawer-panel][data-depth='3'] {
-	border-inline-start: 2px solid
-		color-mix(in srgb, var(--_words-accent-border) 30%, transparent);
+	border-inline-start: 3px solid
+		color-mix(in srgb, var(--_drawer-scope-accent) 25%, transparent);
+}
+
+/* When the panel is open, paint its header with the scope tint so the
+   active scope reads at a glance. */
+[data-words-drawer-panel][data-open] [data-words-drawer-panel-header] {
+	background: var(--_drawer-scope-tint);
+	color: var(--_drawer-scope-accent);
+}
+
+/* Action chip active state — inherit the scope accent so the
+   selected variant matches the panel's color identity. */
+[data-words-drawer-panel] [data-words-drawer-action][data-active] {
+	background: color-mix(in srgb, var(--_drawer-scope-accent, var(--_words-accent-solid)) 20%, var(--words-bg));
+	border-color: var(--_drawer-scope-accent, var(--_words-accent-border));
+	color: var(--_drawer-scope-accent, var(--_words-accent-text));
 }
 
 [data-words-drawer-panel-title] {