Add Code settings group: custom admin CSS/JS + header/footer scripts

New Settings > Code group (Custom CSS & JS + Header & footer scripts) driven
by admin/src/Code/CodeInjection.php:
- Admin CSS  → <style> in the admin <head> (</style> stripped to prevent breakout)
- Admin JS   → <script> in the admin footer (</script> neutralized)
- Header scripts → printed verbatim in the front-end <head>
- Footer scripts → printed verbatim before the front-end </body>

Header/footer scripts are raw admin-authored markup by design (analytics,
meta, etc.), settable only by manage_options users on the settings page.
SettingsField gains a `mono` flag for monospace textareas (no CodeMirror
dependency). All four injection points verified on PHP 8.5.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

app/src/pages/settings/components/SettingsField.vue

@@ -138,6 +138,7 @@ const installCompanion = async () => {
       <textarea
         v-else-if="field.type === 'textarea'"
         class="field__input field__textarea"
+        :class="{ 'field__textarea--mono': field.mono }"
         :placeholder="field.placeholder || ''"
         :rows="field.rows || 6"
         :value="val || ''"
@@ -346,6 +347,11 @@ const installCompanion = async () => {
 }
 .field__input:focus { outline: none; border-color: var(--aurora-accent); }
 .field__textarea { resize: vertical; font-family: inherit; line-height: 1.5; }
+.field__textarea--mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.8125rem;
+  tab-size: 2;
+}
 
 .field__color { display: flex; align-items: center; gap: 10px; }
 .field__color input[type='color'] {

app/src/pages/settings/settingsConfig.js

@@ -388,6 +388,69 @@ export const settingsGroups = [
       },
     ],
   },
+  {
+    id: 'code',
+    title: 'Code',
+    icon: 'dashicons-editor-code',
+    categories: [
+      {
+        id: 'custom-code',
+        title: 'Custom CSS & JS',
+        subtitle: 'Inject your own CSS and JavaScript into the WordPress admin',
+        icon: 'dashicons-admin-customizer',
+        fields: [
+          {
+            key: 'custom_admin_css',
+            type: 'textarea',
+            mono: true,
+            rows: 10,
+            label: 'Admin CSS',
+            description:
+              'CSS added to every wp-admin page, inside a <style> tag in the admin <head>. Enter CSS only — no <style> tags needed.',
+            placeholder: '.wrap { max-width: 1200px; }',
+          },
+          {
+            key: 'custom_admin_js',
+            type: 'textarea',
+            mono: true,
+            rows: 10,
+            label: 'Admin JavaScript',
+            description:
+              'JavaScript added to the admin footer, inside a <script> tag. Enter JS only — no <script> tags needed.',
+            placeholder: "console.log('Hello from Aurora');",
+          },
+        ],
+      },
+      {
+        id: 'header-footer',
+        title: 'Header & footer scripts',
+        subtitle: 'Inject raw code into your site’s front-end <head> and footer',
+        icon: 'dashicons-editor-code',
+        fields: [
+          {
+            key: 'header_scripts',
+            type: 'textarea',
+            mono: true,
+            rows: 8,
+            label: 'Header scripts',
+            description:
+              'Raw HTML/JS printed in the front-end <head> — analytics snippets, verification meta tags, etc. Include the full <script>/<meta> tags.',
+            placeholder: '<!-- e.g. analytics -->\n<script>…</script>',
+          },
+          {
+            key: 'footer_scripts',
+            type: 'textarea',
+            mono: true,
+            rows: 8,
+            label: 'Footer scripts',
+            description:
+              'Raw HTML/JS printed just before </body> on the front end. Include the full <script> tags.',
+            placeholder: '<script>…</script>',
+          },
+        ],
+      },
+    ],
+  },
   {
     id: 'add-ons',
     title: 'Add-ons',