Refactor security headers workflow and improve user feedback

- Removed the Badge component displaying preset type in SecurityHeaders.tsx for a cleaner UI.
- Added detailed analysis for the "Apply Preset" workflow, highlighting user confusion and root causes.
- Proposed fixes to enhance user experience, including clearer toast messages, loading indicators, and better naming for profile sections.
- Documented the complete workflow trace for applying security header presets, emphasizing the need for per-host assignment.

frontend/src/pages/SecurityHeaders.tsx

@@ -14,7 +14,6 @@ import { createBackup } from '../api/backups';
 import toast from 'react-hot-toast';
 import { PageShell } from '../components/layout/PageShell';
 import {
-  Badge,
   Button,
   Alert,
   Card,
@@ -149,12 +148,6 @@ export default function SecurityHeaders() {
                 <div className="flex items-start justify-between mb-3">
                   <div className="flex-1">
                     <h3 className="font-semibold text-gray-900 dark:text-white">{profile.name}</h3>
-                    <Badge
-                      variant={profile.preset_type === 'basic' ? 'outline' : profile.preset_type === 'strict' ? 'warning' : 'error'}
-                      className="mt-1"
-                    >
-                      {profile.preset_type}
-                    </Badge>
                   </div>
                   <SecurityScoreDisplay
                     score={profile.security_score}