How to Programmatically Style the Google Sheets Sidebar Container with Apps Script

I'm trying to change the background color and font color of the main Google Sheets sidebar container—the frame that holds the title and close button—using server-side Google Apps Script.

I know how to style the content of my sidebar by adding CSS to my sidebar.html file. However, my goal is to style the UI element that contains my HTML content.

What Works: Using the Browser Console

I have discovered that I can achieve my exact goal by running JavaScript directly in my browser's developer console. When I open the sidebar, open the console, set the execution context to top, and run the following code, the container styles are applied perfectly.

// --- These are the desired colors ---
const containerColor = '#FDC9D1'; // The new sidebar background
const titleFontColor = '#AD1457'; // The new title font color

// --- This script works perfectly when run from the console ---
const styleId = 'custom-sidebar-styler-v2';

const customCss = `
  /* Target the main sidebar container */
  .appsElementsSideSheetRoot {
    background-color: ${containerColor} !important;
  }

  /* Target the title's font color */
  .appsElementsSideSheetTitle {
    color: ${titleFontColor} !important;
  }
`;

// Clean up any old style element
const oldStyleElement = document.getElementById(styleId);
if (oldStyleElement) {
  oldStyleElement.remove();
}

// Create a new <style> element
const styleElement = document.createElement('style');
styleElement.id = styleId;

// Use createTextNode which is required for the document's TrustedHTML policy
styleElement.appendChild(document.createTextNode(customCss));

// Attach the new <style> element to the page's head
document.head.appendChild(styleElement);

What I Want To Do: Using Apps Script

I want to trigger this same styling automatically when my sidebar is opened from my Apps Script code. Here is the Code.gs function I'm using to show the sidebar:

function openSidebarByIndex(index) {
  const configs = getConfigurations();
  const sheetId = Object.keys(configs)[index];
  
  if (sheetId && configs[sheetId]) {
    const sheet = getSheetById(sheetId);
    if (sheet) {
      SpreadsheetApp.getActiveSpreadsheet().setActiveSheet(sheet);
      
      const sheetName = configs[sheetId].sheetName;
      const template = HtmlService.createTemplateFromFile('sidebar');
      template.sheetId = sheetId;
      const html = template.evaluate().setTitle(`${sheetName}`);
      SpreadsheetApp.getUi().showSidebar(html);
    } else {
       SpreadsheetApp.getUi().alert(`The target sheet could not be found. It may have been deleted.`);
    }
  } else {
    SpreadsheetApp.getUi().alert("Could not find the selected form configuration. Please check your settings.");
  }
}

The Core Question

Why does the JavaScript code work when run manually from the developer console, but there seems to be no way to make it run from my Code.gs file?

I understand that the sidebar content is rendered in a sandboxed <iframe>, which prevents it from accessing the parent document. However, since it is clearly possible to modify the parent document (as proven by the console), is there an API, a workaround, or a specific technique within Apps Script that allows a script to inject styles into the parent document's head? Or is this a fundamental security limitation with no programmatic solution?