diff --git a/static/style.css b/static/style.css
index 7b5a1ccf..1c5ad2e9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -12,6 +12,7 @@
     --radius-sm:4px;--radius-md:8px;--radius-card:8px;--radius-lg:12px;--radius-pill:999px;
     --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
     --font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;
+    --file-tree-toggle-width:10px;
     --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
     --surface-subtle:rgba(0,0,0,.025);--surface-subtle-hover:rgba(0,0,0,.045);
     --border-subtle:rgba(0,0,0,.08);--border-muted:rgba(0,0,0,.12);
@@ -1434,8 +1435,8 @@
   .file-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .12s;min-width:0;}
   .file-item:hover{background:var(--hover-bg);color:var(--text);}
   .file-item.active{background:var(--accent-bg);color:var(--accent-text);}
-  .file-tree-toggle{font-size:10px;color:var(--muted);flex-shrink:0;width:10px;text-align:center;line-height:1;}
-  .file-tree-toggle-placeholder{display:inline-block;flex:0 0 10px;width:10px;line-height:1;}
+  .file-tree-toggle{font-size:10px;color:var(--muted);flex-shrink:0;width:var(--file-tree-toggle-width);text-align:center;line-height:1;}
+  .file-tree-toggle-placeholder{display:inline-block;flex:0 0 var(--file-tree-toggle-width);width:var(--file-tree-toggle-width);line-height:1;}
   .file-item.file-empty{color:var(--muted);opacity:.5;font-style:italic;cursor:default;font-size:11px;}
   .file-item.file-empty:hover{background:none;color:var(--muted);}
   .preview-area{flex:1;overflow:auto;padding:14px;flex-direction:column;gap:8px;display:none;opacity:0;transition:opacity .15s;}
diff --git a/tests/test_issue2554_workspace_tree_file_indent.py b/tests/test_issue2554_workspace_tree_file_indent.py
index 3908f02c..5373df91 100644
--- a/tests/test_issue2554_workspace_tree_file_indent.py
+++ b/tests/test_issue2554_workspace_tree_file_indent.py
@@ -30,10 +30,17 @@ def test_file_rows_get_toggle_placeholder_before_icon():
 def test_placeholder_matches_directory_toggle_slot_width():
     assert ".file-tree-toggle{" in STYLE_CSS
     assert ".file-tree-toggle-placeholder{" in STYLE_CSS
+    assert "--file-tree-toggle-width:10px" in STYLE_CSS
+
+    toggle_start = STYLE_CSS.index(".file-tree-toggle{")
+    toggle_end = STYLE_CSS.index("}", toggle_start)
+    toggle = STYLE_CSS[toggle_start:toggle_end]
+
     placeholder_start = STYLE_CSS.index(".file-tree-toggle-placeholder{")
     placeholder_end = STYLE_CSS.index("}", placeholder_start)
     placeholder = STYLE_CSS[placeholder_start:placeholder_end]
 
-    assert "width:10px" in placeholder
-    assert "flex:0 0 10px" in placeholder
+    assert "width:var(--file-tree-toggle-width)" in toggle
+    assert "width:var(--file-tree-toggle-width)" in placeholder
+    assert "flex:0 0 var(--file-tree-toggle-width)" in placeholder
     assert "display:inline-block" in placeholder