refactor: update UI styles to use new header background color

- Changed background color for various select elements and containers in Users.vue and Videos.vue to use 'bg-header'.
- Updated background color for status and role filters in the admin section.
- Adjusted background colors in Home.vue, QuickActions.vue, and other components to enhance UI consistency.
- Refactored Billing.vue and DomainsDns.vue to align with new design standards.
- Modified settings components to utilize new header color for better visual hierarchy.
- Improved accessibility and visual feedback in the SettingsRow and SettingsSectionCard components.
- Updated authentication middleware to include timestamp cookie for session management.
- Enhanced gRPC client to build internal metadata for service calls.

src/routes/settings/DomainsDns/DomainsDns.vue

@@ -13,8 +13,8 @@ import SettingsNotice from '@/routes/settings/components/SettingsNotice.vue';
 import SettingsSectionCard from '@/routes/settings/components/SettingsSectionCard.vue';
 import SettingsTableSkeleton from '@/routes/settings/components/SettingsTableSkeleton.vue';
 import { useQuery } from '@pinia/colada';
-import { computed, ref, watch } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import { computed, ref, watch } from 'vue';
 
 const toast = useAppToast();
 const confirm = useAppConfirm();
@@ -304,7 +304,7 @@ const copyIframeCode = async () => {
             <p class="text-xs text-foreground/60 mb-2">
                 {{ t('settings.domainsDns.embedCodeHint') }}
             </p>
-            <pre class="bg-surface border border-border rounded-md p-3 text-xs text-foreground/70 overflow-x-auto"><code>{{ iframeCode }}</code></pre>
+            <pre class="bg-header border border-border rounded-md p-3 text-xs text-foreground/70 overflow-x-auto"><code>{{ iframeCode }}</code></pre>
         </div>
 
         <AppDialog