asd

Based on this do the CSS

<link rel="stylesheet" href="/includes/assets/css/modula-builder.css?v={$code|escape}" media="all" />

, don't change the background, but add animations, paddings, etc, don't force any theme like dark or day mode

Make sure it's complete, it's perfect, make sure that it's responsive it's complete, in full

Minimum 1000 lines of code, maybe even more, but strictly don't add the backgrounds, maybe add some simple gradients, but let modula handle the dark mode and background colours , so same like before but remember the CSS you gave me before and while you're at it, make the TPL more compact,

{* =============================================================================

   MODULA — Forge Builder — builder_topbar.tpl (compact + Segment anchors)

   - No CSS / No JS here. All behavior via data-* hooks.

   - Segment anchors: (Segment NN) — use to map JS files Segment_NN.js

   - Keeps IDs/classes stable; trims nesting; aria roles preserved.

   ---------------------------------------------------------------------------

   LEGEND / SEGMENTS

   (Segment 10) Brand / Build / Status

   (Segment 12) Project • Page • Variant • Locale

   (Segment 14) Presence (avatars, invite, handoff)

   (Segment 20) Edit & Tools

   (Segment 30) Devices & Zoom

   (Segment 40) View & Prefs (overlays, units/bg, lab/density/theme/autosave)

   (Segment 50) Preview • Export • Publish • Save • Share

   (Segment 60) Command Palette

   (Segment 70) Notifications • Help • User account

   (Segment 99) Plugins lane (top-level slot)

   ============================================================================ *}

{assign var=code value=$code|default:'—'}

{assign var=env  value=$env|default:''}

{assign var=ro   value=$read_only|default:false}

<div id="fg-topbar"

     class="container-fluid fg-topbar"

     role="region"

     aria-label="{__('Builder top bar')}"

     data-seg="topbar">

  {** ===== Row 1 ========================================================== **}

  <div id="fg-topbar-row-1" class="fg-topbar-row fg-row-1" role="toolbar" aria-label="{__('Brand • Project • Presence')}">

    {** (Segment 10) Brand / Build / Status **}

    <div class="fg-brand-holo" aria-live="polite" data-seg="10">

      <button id="fg-open-left" class="fg-btn icon only-mobile"

              title="{__('Open Library (⌘/Ctrl+B)')}"

              aria-controls="fg-left" aria-expanded="false"

              data-act="toggleLeft">

        <i class="far fa-bars" aria-hidden="true"></i><span class="sr-only">{__('Open Library')}</span>

      </button>

      <h6 class="fg-brand-title" title="Forge Builder">

        <i class="fas fa-layer-group" aria-hidden="true"></i>

        <span>Forge Builder</span>

      </h6>

      <span id="fg-build-badge" class="fg-build-badge" title="{__('Current build code')}">

        Build: {$code|escape}

      </span>

      {if $env ne ''}

        <span id="fg-env-chip" class="fg-chip" title="{__('Environment')}" data-env="{$env|escape}">{$env|escape}</span>

      {/if}

      <span id="fg-status-dot" class="fg-status-dot" aria-hidden="true"></span>

      <span id="fg-clock" class="fg-subtle" aria-label="{__('Local time')}">—:—</span>

    </div>

    {** (Segment 12) Project • Page • Variant • Locale **}

    <div class="fg-group" role="group" aria-label="{__('Project controls')}" data-seg="12">

      <label class="sr-only" for="fg-project-select">{__('Project')}</label>

      <select id="fg-project-select" class="fg-select xs" data-project="select" title="{__('Project')}">

        <option value="" selected>— {__('Project')} —</option>

        <option value="demo">{__('Demo')}</option>

        <option value="marketing">{__('Marketing')}</option>

        <option value="product">{__('Product')}</option>

      </select>

      <label class="sr-only" for="fg-branch-select">{__('Branch')}</label>

      <select id="fg-branch-select" class="fg-select xs" data-branch="select" title="{__('Branch')}">

        <option value="main" selected>{__('main')}</option>

        <option value="release">{__('release')}</option>

        <option value="feature">{__('feature/*')}</option>

      </select>

      <label class="sr-only" for="fg-env-select">{__('Environment')}</label>

      <select id="fg-env-select" class="fg-select xs" data-env="select" title="{__('Environment')}">

        <option value="local">{__('local')}</option>

        <option value="dev" selected>{__('dev')}</option>

        <option value="staging">{__('staging')}</option>

        <option value="production">{__('production')}</option>

      </select>

      <label class="sr-only" for="fg-page-select">{__('Page')}</label>

      <select id="fg-page-select" class="fg-select xs" data-page="select" title="{__('Page')}">

        <option value="home" selected>{__('Home')}</option>

        <option value="pricing">{__('Pricing')}</option>

        <option value="docs">{__('Docs')}</option>

        <option value="contact">{__('Contact')}</option>

      </select>

      <label class="sr-only" for="fg-variant-select">{__('Variant')}</label>

      <select id="fg-variant-select" class="fg-select xs" data-variant="select" title="{__('Variant')}">

        <option value="" selected>{__('Default')}</option>

        <option value="ab-A">{__('A/B A')}</option>

        <option value="ab-B">{__('A/B B')}</option>

        <option value="holiday">{__('Holiday')}</option>

      </select>

      <label class="sr-only" for="fg-lang-select">{__('Language')}</label>

      <select id="fg-lang-select" class="fg-select xs" data-lang="select" title="{__('Language')}">

        <option value="auto" selected>{__('Auto')}</option>

        <option value="en">{__('English')}</option>

        <option value="es">{__('Español')}</option>

        <option value="fr">{__('Français')}</option>

        <option value="de">{__('Deutsch')}</option>

        <option value="jp">{__('日本語')}</option>

      </select>

      <div class="fg-split">

        <button class="fg-btn xs" data-project="new"    {if $ro}aria-disabled="true"{/if} title="{__('New Project')}"><i class="far fa-plus"></i></button>

        <button class="fg-btn xs" data-project="open"                          title="{__('Open')}"><i class="far fa-folder-open"></i></button>

        <button class="fg-btn xs" data-project="rename" {if $ro}aria-disabled="true"{/if} title="{__('Rename')}"><i class="far fa-i-cursor"></i></button>

      </div>

    </div>

    {** (Segment 14) Presence **}

    <div id="fg-presence-tray"

         class="fg-presence-tray"

         role="group"

         aria-label="{__('Presence')}"

         data-seg="14"

         data-msg-collaborators="{__('Collaborators')}"

         data-msg-you="{__('You')}"

         data-msg-invite="{__('Invite')}"

         data-msg-invite-title="{__('Invite a teammate')}"

         data-msg-invite-prompt="{__('Enter an email or a name to invite')}"

         data-msg-invite-invalid="{__('Please enter a valid email or a non-empty name.')}"

         data-msg-invite-added="{__('Invitation sent to %s')}"

         data-msg-handoff="{__('Handoff')}"

         data-msg-handoff-title="{__('Handoff / Share')}"

         data-msg-handoff-copied="{__('Share link copied to clipboard')}"

         data-msg-handoff-failed="{__('Could not copy the link. Please copy it manually.')}"

         data-msg-exists="{__('%s is already in the team')}"

         data-msg-added-short="{__('Added: %s')}"

         data-msg-aria-added="{__('%s joined the collaboration')}"

         data-msg-aria-removed="{__('%s left the collaboration')}"

         data-msg-aria-count="{__('%d collaborators online')}">

      <div class="fg-presence" data-collab="avatars" aria-label="{__('Collaborators')}">

        <span class="fg-avatar" data-user="me"   title="{__('You')}"   data-name="{__('You')}" data-initials="ME"></span>

        <span class="fg-avatar" data-user="alex" title="{__('Alex')}"  data-name="{__('Alex')}" data-initials="AL"></span>

        <span class="fg-avatar" data-user="sam"  title="{__('Sam')}"   data-name="{__('Sam')}"  data-initials="SA"></span>

      </div>

      <div class="fg-split">

        <button class="fg-btn xs" data-collab="invite"  title="{__('Invite')}"><i class="far fa-user-plus"></i></button>

        <button class="fg-btn xs" data-collab="handoff" title="{__('Handoff')}"><i class="far fa-handshake"></i></button>

      </div>

      <div class="sr-only" aria-live="polite" data-collab="live"></div>

    </div>

  </div><!-- /row 1 -->

  {** ===== Row 2 ========================================================== **}

  <div id="fg-topbar-row-2" class="fg-topbar-row fg-row-2" role="toolbar" aria-label="{__('Primary controls')}">

    {** (Segment 20) Edit & Tools **}

    <div id="fg-edit-tools"

         class="fg-group"

         role="group"

         aria-label="{__('Edit & Tools')}"

         data-seg="20"

         data-msg-readonly="{__('This action is disabled in read-only mode.')}"

         data-msg-undo-ok="{__('Undone.')}"

         data-msg-redo-ok="{__('Redone.')}"

         data-msg-clean-ok="{__('Cleaned HTML.')}"

         data-msg-wrap-ok="{__('Wrapped selection in .container')}"

         data-msg-format-ok="{__('Formatted source.')}"

         data-msg-copy-ok="{__('Copied to clipboard.')}"

         data-msg-copy-empty="{__('Nothing selected to copy.')}"

         data-msg-cut-ok="{__('Cut to clipboard.')}"

         data-msg-cut-empty="{__('Nothing selected to cut.')}"

         data-msg-paste-prompt="{__('Paste your content below')}"

         data-msg-paste-empty="{__('Nothing pasted.')}"

         data-msg-paste-ok="{__('Inserted content.')}"

         data-msg-snap-ok="{__('Snapshot saved.')}"

         data-msg-snap-fail="{__('Could not save snapshot.')}"

         data-msg-tool="{__('Tool set:')}"

         data-msg-readonly-tools="{__('Read-only mode: action blocked.')}">

      <button id="fg-undo" class="fg-btn xs" data-act="undo"  title="{__('Undo (⌘/Ctrl+Z)')}"           {if $ro}aria-disabled="true"{/if}><i class="far fa-rotate-left"></i></button>

      <button id="fg-redo" class="fg-btn xs" data-act="redo"  title="{__('Redo (⇧+⌘/Ctrl+Z)')}"        {if $ro}aria-disabled="true"{/if}><i class="far fa-rotate-right"></i></button>

      <div class="fg-split">

        <button id="fg-clean"  class="fg-btn xs" data-act="clean"  title="{__('Clean HTML')}"          {if $ro}aria-disabled="true"{/if}><i class="far fa-broom"></i></button>

        <button id="fg-wrap"   class="fg-btn xs" data-act="wrap"   title="{__('Wrap .container')}"     {if $ro}aria-disabled="true"{/if}><i class="far fa-box"></i></button>

        <button id="fg-format" class="fg-btn xs" data-act="format" title="{__('Format source')}"       {if $ro}aria-disabled="true"{/if}><i class="far fa-wand-magic-sparkles"></i></button>

      </div>

      <div class="fg-split">

        <button id="fg-copy"   class="fg-btn xs" data-act="copy"  title="{__('Copy')}"><i class="far fa-copy"></i></button>

        <button id="fg-cut"    class="fg-btn xs" data-act="cut"   title="{__('Cut')}"  {if $ro}aria-disabled="true"{/if}><i class="far fa-scissors"></i></button>

        <button id="fg-paste"  class="fg-btn xs" data-act="paste" title="{__('Paste')}"{if $ro}aria-disabled="true"{/if}><i class="far fa-paste"></i></button>

      </div>

      <button id="fg-snapshot" class="fg-btn xs" data-act="snapshot" title="{__('Save snapshot (⌥ with Save)')}" {if $ro}aria-disabled="true"{/if}><i class="far fa-camera"></i></button>

      <div class="fg-split">

        <button class="fg-btn xs" data-tool="select"  title="{__('Select (V)')}"   {if $ro}aria-disabled="true"{/if}><i class="far fa-arrow-pointer"></i></button>

        <button class="fg-btn xs" data-tool="pan"     title="{__('Pan (Space)')}"  {if $ro}aria-disabled="true"{/if}><i class="far fa-hand"></i></button>

        <button class="fg-btn xs" data-tool="measure" title="{__('Measure (M)')}"  {if $ro}aria-disabled="true"{/if}><i class="far fa-ruler"></i></button>

        <button class="fg-btn xs" data-tool="picker"  title="{__('Color Picker')}" {if $ro}aria-disabled="true"{/if}><i class="far fa-eye-dropper"></i></button>

        <button class="fg-btn xs" data-tool="note"    title="{__('Sticky Note (N)')}"{if $ro}aria-disabled="true"{/if}><i class="far fa-note-sticky"></i></button>

      </div>

      <span class="sr-only" aria-live="polite" data-tools-live></span>

      <div class="sr-only" aria-live="polite" data-edit="live"></div>

    </div>

    {** (Segment 30) Devices & Zoom **}

    <div id="fg-break-zoom"

         class="fg-group modula-glass"

         role="group"

         aria-label="{__('Devices & Zoom')}"

         data-seg="30"

         data-msg-applied="{__('Viewport updated.')}"

         data-msg-invalid="{__('Please enter a valid width in pixels (240–3840).')}"

         data-msg-rot-portrait="{__('Orientation: Portrait')}"

         data-msg-rot-landscape="{__('Orientation: Landscape')}"

         data-msg-preset-applied="{__('Preset applied.')}"

         data-msg-out="{__('Zoom out')}"

         data-msg-in="{__('Zoom in')}"

         data-msg-reset="{__('Zoom reset to 100%')}"

         data-msg-fit="{__('Zoom fit to view')}"

         data-msg-fill="{__('Zoom fill width')}"

         data-msg-bad="{__('Please enter a number between %1 and %2')}"

         data-msg-set="{__('Zoom set to %1%')}">

      <button class="fg-btn xs" data-bp="1280" title="{__('Desktop (1280)')}"><i class="far fa-desktop"></i></button>

      <button class="fg-btn xs" data-bp="840"  title="{__('Tablet (840)')}"><i class="far fa-tablet"></i></button>

      <button class="fg-btn xs" data-bp="420"  title="{__('Phone (420)')}"><i class="far fa-mobile"></i></button>

      <label class="sr-only" for="fg-bp-custom">{__('Custom width')}</label>

      <input id="fg-bp-custom" class="fg-input xs" inputmode="numeric" pattern="[0-9]*"

             placeholder="{__('W')}" data-bp="custom" title="{__('Custom width (px)')}">

      <button id="fg-bp-rotate" class="fg-btn xs" data-rotate title="{__('Rotate device')}"><i class="far fa-rotate"></i></button>

      <button class="fg-btn xs" data-zoom="out"   title="{__('Zoom out (⌘/Ctrl −)')}"><i class="far fa-minus"></i></button>

      <button class="fg-btn xs" data-zoom="reset" title="{__('Reset 100%')}"><span class="txt">100%</span></button>

      <button class="fg-btn xs" data-zoom="in"    title="{__('Zoom in (⌘/Ctrl +)')}"><i class="far fa-plus"></i></button>

      <button class="fg-btn xs" data-zoom="fit"   title="{__('Fit (⇧1)')}"><i class="far fa-arrows-to-circle"></i></button>

      <button class="fg-btn xs" data-zoom="fill"  title="{__('Fill width (⇧2)')}"><i class="far fa-arrows-left-right-to-line"></i></button>

      <label class="sr-only" for="fg-zoom-pct">{__('Zoom percent')}</label>

      <input id="fg-zoom-pct" class="fg-input xs" placeholder="{__('Zoom %')}" inputmode="numeric"

             data-zoom="percent" title="{__('Zoom %')}" aria-label="{__('Set zoom percentage')}">

      <div class="sr-only" aria-live="polite" data-bp="live"></div>

      <span class="sr-only" aria-live="polite" data-zoom-live></span>

    </div>

    {** (Segment 40) View & Prefs **}

    <div id="fg-view-prefs" class="fg-group" role="group" aria-label="{__('View & Prefs')}" data-seg="40">

      <label class="fg-switch-row"><span class="small">{__('Grid')}</span>    <input id="fg-ov-grid"     type="checkbox" class="fg-switch-input" data-overlay="grid"></label>

      <label class="fg-switch-row"><span class="small">{__('Rulers')}</span>  <input id="fg-ov-rulers"   type="checkbox" class="fg-switch-input" data-overlay="rulers" checked></label>

      <label class="fg-switch-row"><span class="small">{__('Baseline')}</span><input id="fg-ov-baseline" type="checkbox" class="fg-switch-input" data-overlay="baseline"></label>

      <label class="fg-switch-row"><span class="small">{__('Outline')}</span> <input id="fg-ov-outline"  type="checkbox" class="fg-switch-input" data-overlay="outline"></label>

      <label class="small">{__('Units')}

        <select id="fg-pref-units" class="fg-select xs" data-pref="units">

          <option value="px">px</option><option value="rem">rem</option>

        </select>

      </label>

      <label class="small">{__('BG')}

        <select id="fg-pref-bg" class="fg-select xs" data-pref="bg">

          <option value="auto">{__('Auto')}</option>

          <option value="light">{__('Light')}</option>

          <option value="dark">{__('Dark')}</option>

          <option value="checker">{__('Checker')}</option>

          <option value="none">{__('Transparent')}</option>

        </select>

      </label>

      <label class="small">{__('Grid')}

        <input id="fg-pref-grid" type="number" min="2" step="2" class="fg-input xs" inputmode="numeric" data-pref="grid">

      </label>

      <label class="small">{__('Base')}

        <input id="fg-pref-base" type="number" min="2" step="1" class="fg-input xs" inputmode="numeric" data-pref="base">

      </label>

      <label class="small">{__('Lab')}

        <select id="fg-lab-device" class="fg-select xs" data-lab="device">

          <option value="">{__('— Device —')}</option>

          <option value="ios-se">{__('iPhone SE')}</option><option value="ios-pro">{__('iPhone Pro')}</option>

          <option value="pixel">{__('Pixel 7')}</option><option value="ipad">{__('iPad')}</option>

          <option value="galaxy-tab">{__('Galaxy Tab')}</option><option value="surface">{__('Surface')}</option>

        </select>

      </label>

      <label class="small">{__('DPR')}

        <input id="fg-lab-dpr" type="number" min="0.5" max="3" step="0.1" class="fg-input xs" data-dpr inputmode="decimal" placeholder="1.0">

      </label>

      <label class="sr-only" for="fg-density">{__('UI density')}</label>

      <select id="fg-density" class="fg-select xs" title="{__('Density')}" data-density>

        <option value="comfortable">{__('Comfortable')}</option>

        <option value="tight" selected>{__('Tight')}</option>

        <option value="compact">{__('Compact')}</option>

      </select>

      <button id="fg-theme-toggle" class="fg-btn xs" title="{__('Toggle theme')}" data-theme="toggle" aria-pressed="false"><i class="far fa-moon"></i></button>

      <label class="fg-switch-row" title="{__('Autosave every 60s')}">

        <span class="small">{__('Autosave')}</span>

        <input id="fg-autosave" type="checkbox" class="fg-switch-input" data-pref="autosave" aria-label="{__('Toggle autosave')}">

      </label>

    </div>

    {** (Segment 50) Preview • Export • Publish • Save • Share **}

    <div id="fg-pub" class="fg-group modula-glass" role="group" aria-label="{__('Preview • Export • Save')}" data-seg="50">

      <button id="fg-preview" class="fg-btn xs pri" data-act="preview" aria-pressed="false" title="{__('Preview (Space)')}">

        <i class="far fa-eye"></i><span class="txt d-lg-inline">{__('Preview')}</span>

      </button>

      <div class="fg-split">

        <button id="fg-export" class="fg-btn xs acc" data-act="export" data-export-default="zip"

                title="{__('Export (⇧: HTML • ⌥: PNG • ⌘/Ctrl: JSON)')}">

          <i class="far fa-file-export"></i><span class="txt d-lg-inline">{__('Export')}</span>

        </button>

        <button id="fg-export-caret" class="fg-btn xs fg-split-caret" data-dd="fg-dd-export" aria-haspopup="true" aria-expanded="false" title="{__('Export options')}">

          <i class="far fa-caret-down"></i>

        </button>

      </div>

      <div id="fg-dd-export" class="fg-dd-menu modula-glass" role="menu" aria-label="{__('Export options')}" hidden>

        <button class="fg-menu-item" role="menuitem" data-export="zip"><i class="far fa-file-archive"></i><span>{__('Bundle (ZIP)')}</span></button>

        <button class="fg-menu-item" role="menuitem" data-export="html"><i class="far fa-code"></i><span>HTML</span></button>

        <button class="fg-menu-item" role="menuitem" data-export="png"><i class="far fa-image"></i><span>PNG</span></button>

        <button class="fg-menu-item" role="menuitem" data-export="json"><i class="far fa-brackets-curly"></i><span>JSON</span></button>

      </div>

      <button id="fg-save"    class="fg-btn xs pri" data-act="save"    aria-busy="false" {if $ro}aria-disabled="true"{/if} title="{__('Save (⌘/Ctrl+S)')}"><i class="far fa-save"></i><span class="txt">{__('Save')}</span></button>

      <button id="fg-publish" class="fg-btn xs"      data-act="publish" aria-busy="false" {if $ro}aria-disabled="true"{/if} title="{__('Publish (⌘/Ctrl+Shift+P)')}"><i class="far fa-rocket"></i><span class="txt d-lg-inline">{__('Publish')}</span></button>

      <button id="fg-share"   class="fg-btn xs"      data-act="share"   aria-busy="false" title="{__('Copy share link (⌘/Ctrl+L)')}"><i class="far fa-link"></i><span class="txt d-lg-inline">{__('Share')}</span></button>

      <span class="sr-only" aria-live="polite" data-preview-export-live></span>

      <span class="sr-only" aria-live="polite" data-pubshare-live></span>

    </div>

    {** (Segment 60) Command Palette **}

    <div class="fg-group" role="search" aria-label="{__('Command palette')}" data-seg="60">

      <i class="far fa-magnifying-glass fg-muted" aria-hidden="true"></i>

      <label for="fg-qa" class="sr-only">{__('Command')}</label>

      <input id="fg-qa" class="fg-input" data-qa

             placeholder="{__('⌘/Ctrl K — try: “fit”, “export png”, “grid on”, “dpr 2”, “bp 375”')}"

             aria-label="{__('Command palette / quick actions')}">

      <span class="sr-only" aria-live="polite" data-qa-live></span>

    </div>

    {** (Segment 70) Notifications • Help • User **}

    <div id="fg-account" class="fg-group" role="group" aria-label="{__('Notifications & Account')}" data-seg="70">

      <button id="fg-bell" class="fg-btn xs" data-notif="open" aria-haspopup="true" aria-expanded="false" title="{__('Notifications')}"><i class="far fa-bell"></i></button>

      <button class="fg-btn xs" data-open="fgShortcutsModal" title="{__('Shortcuts')}"><i class="far fa-keyboard"></i></button>

      <button class="fg-btn xs" data-open="fgDocs"            title="{__('Docs')}"><i class="far fa-book"></i></button>

      <button class="fg-btn xs" data-open="fgSupport"         title="{__('Support')}"><i class="far fa-life-ring"></i></button>

      <div class="fg-avatar" data-user="me" title="{__('You')}"></div>

      <div class="fg-dd">

        <button class="fg-btn xs" data-dd="fg-dd-user" aria-haspopup="true" aria-expanded="false" title="{__('Account menu')}"><i class="far fa-user"></i></button>

        <div id="fg-dd-user" class="fg-dd-menu modula-glass" role="menu" aria-label="{__('Account')}" hidden>

          <button class="fg-menu-item" role="menuitem" data-user="profile"><i class="far fa-id-badge"></i><span>{__('Profile')}</span></button>

          <button class="fg-menu-item" role="menuitem" data-user="prefs"><i class="far fa-gear"></i><span>{__('Preferences')}</span></button>

          <button class="fg-menu-item" role="menuitem" data-user="tokens"><i class="far fa-key"></i><span>{__('Tokens')}</span></button>

          <div class="fg-menu-sep" role="separator"></div>

          <button class="fg-menu-item" role="menuitem" data-user="theme"><i class="far fa-moon"></i><span>{__('Toggle theme')}</span></button>

          <button class="fg-menu-item" role="menuitem" data-user="logout"><i class="far fa-right-from-bracket"></i><span>{__('Sign out')}</span></button>

        </div>

      </div>

    </div>

  </div><!-- /row 2 -->

  {** (Segment 99) Plugins lane (top-level slot) **}

  <section id="fg-plugins-topbar"

           aria-label="{__('Plugin topbar extensions')}"

           data-slot="plugins:topbar"

           data-seg="99"

           hidden></section>

</div><!-- /fg-topbar -->

{* EOF — builder_topbar.tpl (compact + segments) *}