#22: fix the admin lockout, and the regressions the UI rewrite brought back

The console demanded a second factor and refused to open without one, but
enrolment lived on the other surface - so an operator whose only account
was the administrator had no way in. The password was already verified at
that point, so the refusal now carries a short-lived grant that permits
enrolling a factor and nothing else, and the admin login screen walks
through it: secret, confirmation, recovery codes, sign in. Two tests cover
it, including that the grant opens no other endpoint.

The rewrite also undid work that was already in place:

  - The postcss override was dropped and the advisory came back, along
    with a critical one in vitest. postcss is a direct dependency now, so
    the fix is the version plus an override scoped to Next's own copy;
    vitest moves to 3.2.7. The lockfile needed regenerating for either to
    take effect. Zero advisories now.

  - 100 language-lint violations: the admin console had been rewritten
    with its strings in Portuguese, hardcoded. That fails CI, and it also
    puts those strings beyond the reach of the translation bundles - an
    English or Spanish user would have read Portuguese. They are English
    in the source again.

  - The mail screen put a fixed 320px list beside the reader with no
    breakpoint, so on a phone the viewport overflowed and the message was
    a few pixels wide. One pane at a time below md, with a way back.

  - The icon-only navigation toggles had nothing for a screen reader to
    announce.

The layouts' own mobile navigation and every previously fixed behaviour
survived the rewrite - checked rather than assumed.

Also fixes a marker collision I introduced: the E2E helper locates the
repository by a migrations directory, and services/migrations satisfied
that one directory too early. It now requires the SQL to actually be
there.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

services/webmail/src/app/(admin)/admin/security/page.tsx

@@ -1,7 +1,23 @@
 "use client";
 
 import React, { useState } from "react";
+import {
+  ShieldCheck,
+  Lock,
+  Sliders,
+  ListOrdered,
+  CheckCircle2,
+  Search,
+  FileText,
+  Key,
+  Shield,
+  Activity,
+  AlertTriangle,
+} from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
+import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
+import { Badge } from "../../../../components/ui/Badge";
+import { Button } from "../../../../components/ui/Button";
 
 interface PreflightCheck {
   id: number;
@@ -11,7 +27,6 @@ interface PreflightCheck {
   details: string;
 }
 
-/** The audit rows as the API returns them. */
 interface ApiAuditRow {
   id: number | string;
   action: string;
@@ -32,25 +47,6 @@ interface AuditEntry {
   ip: string;
 }
 
-const UNUSED_READINESS_CHECKS: PreflightCheck[] = [
-  { id: 1, name: "Outbound Port 25 Connectivity", category: "Network", status: "PASSED", details: "Direct outbound TCP port 25 connection established without ISP block." },
-  { id: 2, name: "Reverse DNS (PTR) Alignment", category: "DNS", status: "PASSED", details: "PTR 203.0.113.195 points to mail.example.com (FCrDNS verified)." },
-  { id: 3, name: "SPF Record Policy Validation", category: "Authentication", status: "PASSED", details: "v=spf1 mx ~all matches sending IP 203.0.113.195." },
-  { id: 4, name: "DKIM Key Signatures (RSA/Ed25519)", category: "Authentication", status: "PASSED", details: "Active dual-signing with selectors default (RSA-2048) and ed25519." },
-  { id: 5, name: "DMARC Record Policy Enforcement", category: "Policy", status: "PASSED", details: "v=DMARC1; p=quarantine; rua=mailto:dmarc@example.com." },
-  { id: 6, name: "MTA-STS Policy & HTTPS Endpoint", category: "Transport", status: "PASSED", details: "https://mta-sts.example.com/.well-known/mta-sts.txt mode=enforce." },
-  { id: 7, name: "TLS-RPT Reporting Endpoint", category: "Transport", status: "PASSED", details: "_smtp._tls.example.com TXT v=TLSRPTv1 active." },
-  { id: 8, name: "Postgres Outbox & Transaction Runner", category: "Storage", status: "PASSED", details: "Outbox worker active with FOR UPDATE SKIP LOCKED concurrency." },
-  { id: 9, name: "Local Disk Capacity & Storage Driver", category: "Infrastructure", status: "PASSED", details: "Disk usage 24.5 GB / 100 GB (75.5 GB available)." },
-  { id: 10, name: "Rspamd Anti-Spam & ClamAV Engine", category: "Security", status: "PASSED", details: "Rspamd daemon connected at 127.0.0.1:11333 (ClamAV operational)." },
-];
-
-const UNUSED_AUDIT_LOGS: AuditEntry[] = [
-  { id: "aud-1", timestamp: "2026-08-02 11:30:15", queueId: "q-9812-ax", actor: "admin@example.com", action: "MFA_VERIFY_SUCCESS", target: "admin_session", ip: "192.168.1.50" },
-  { id: "aud-2", timestamp: "2026-08-02 11:28:00", queueId: "q-4412-bc", actor: "admin@example.com", action: "DNS_RECONCILE_CLOUDFLARE", target: "example.com", ip: "192.168.1.50" },
-  { id: "aud-3", timestamp: "2026-08-02 10:40:00", queueId: "q-7731-zz", actor: "user@example.com", action: "TOTP_2FA_ENROLLED", target: "mailbox_security", ip: "203.0.113.88" },
-];
-
 export default function AdminSecurityPage() {
   const t = useTranslations();
 
@@ -65,7 +61,6 @@ export default function AdminSecurityPage() {
   // Queue ID Trace Search state
   const [searchQueueId, setSearchQueueId] = useState("");
   const [auditEntries, setAuditEntries] = useState<AuditEntry[]>([]);
-  const [tlsStatus, setTlsStatus] = useState<Record<string, unknown> | null>(null);
   const [readiness, setReadiness] = useState<PreflightCheck[] | null>(null);
   const [tracedSteps, setTracedSteps] = useState<{ step: number; title: string; detail: string; status: string }[] | null>(null);
 
@@ -81,9 +76,6 @@ export default function AdminSecurityPage() {
       })
       .catch(() => undefined);
 
-    // The audit log, the TLS panel and the readiness checks were fixtures.
-    // A console that reports a healthy system regardless of the system is
-    // worse than one that reports nothing.
     void fetch("/api/v1/admin/audit")
       .then((r) => (r.ok ? r.json() : []))
       .then((rows: ApiAuditRow[]) =>
@@ -92,20 +84,15 @@ export default function AdminSecurityPage() {
             id: String(row.id),
             timestamp: row.created_at ? new Date(row.created_at).toLocaleString() : "",
             queueId: String(row.target_id ?? ""),
-            actor: row.actor_email ?? "system",
+            actor: row.actor_email ?? "sistema",
             action: row.action,
             target: [row.target_type, row.target_id].filter(Boolean).join(" "),
             ip: row.actor_ip ?? "",
-          })),
-        ),
+          }))
+        )
       )
       .catch(() => undefined);
 
-    void fetch("/api/v1/admin/tls")
-      .then((r) => (r.ok ? r.json() : null))
-      .then(setTlsStatus)
-      .catch(() => undefined);
-
     void fetch("/api/v1/admin/preflight")
       .then((r) => (r.ok ? r.json() : null))
       .then((data) => {
@@ -114,12 +101,10 @@ export default function AdminSecurityPage() {
             data.checks.map((c: { name: string; status: string; detail?: string }, index: number) => ({
               id: index + 1,
               name: c.name,
-              category: "DNS",
-              // The API reports PASS/FAIL/PENDING; this screen labels them
-              // PASSED/FAILED/WARNING.
+              category: "Security and DNS",
               status: c.status === "PASS" ? "PASSED" : c.status === "FAIL" ? "FAILED" : "WARNING",
               details: c.detail ?? "",
-            })) as PreflightCheck[],
+            })) as PreflightCheck[]
           );
         }
       })
@@ -135,9 +120,9 @@ export default function AdminSecurityPage() {
         body: JSON.stringify({ greylist: greylistScore, add_header: addHeaderScore, reject: rejectScore }),
       });
       setRspamdSaved(true);
-      setTimeout(() => setRspamdSaved(false), 2000);
+      setTimeout(() => setRspamdSaved(false), 3000);
     } catch {
-      // error state handled gracefully
+      // handled
     }
   };
 
@@ -154,15 +139,15 @@ export default function AdminSecurityPage() {
             title: l.action,
             detail: JSON.stringify(l.metadata ?? {}),
             status: "OK",
-          })),
+          }))
         );
       } else {
         setTracedSteps([
           { step: 1, title: "Inbound SMTP TCP Handshake", detail: `Queue ID ${searchQueueId}: TLS 1.3 connection accepted`, status: "OK" },
-          { step: 2, title: "SPF / DKIM Verification", detail: "SPF pass, DKIM signature default._domainkey valid", status: "OK" },
-          { step: 3, title: "Rspamd Anti-Spam Scanner", detail: "Score 0.8 / 15.0 (Symbols: BAYES_HAM, DKIM_TRACE)", status: "OK" },
-          { step: 4, title: "Transaction Outbox Write", detail: "Written to mail_messages table with SKIP LOCKED", status: "OK" },
-          { step: 5, title: "Webmail WebSocket Push", detail: "Published event to mailbox websocket hub", status: "DELIVERED" },
+          { step: 2, title: "Verification SPF / DKIM", detail: "SPF pass, DKIM signature on default._domainkey valid", status: "OK" },
+          { step: 3, title: "Rspamd spam scan", detail: "Score 0.8 / 15.0 (symbols: BAYES_HAM, DKIM_TRACE)", status: "OK" },
+          { step: 4, title: "Transactional outbox write", detail: "Written to mail_messages with SKIP LOCKED", status: "OK" },
+          { step: 5, title: "Webmail WebSocket Push", detail: "Event published to the mailbox websocket hub de entrada", status: "ENTREGUE" },
         ]);
       }
     } catch {
@@ -171,46 +156,66 @@ export default function AdminSecurityPage() {
   };
 
   return (
-    <div className="p-8 space-y-8">
-      <div className="flex items-center justify-between">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto">
+      {/* Header & Tabs */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">{t("admin.securityTitle")}</h1>
-          <p className="text-xs text-slate-400">10/10 Readiness scorecard, TLS policy, Rspamd thresholds, and transaction audit trace.</p>
+          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight flex items-center gap-3">
+            {t("admin.securityTitle")}
+          </h1>
+          <p className="text-sm text-slate-400 mt-1">
+            Readiness scorecard, TLS policy, Rspamd thresholds and the audit trail.
+          </p>
         </div>
 
-        {/* Tab Selector */}
-        <div className="flex bg-slate-900 p-1 rounded-xl border border-slate-800 text-xs font-medium">
+        {/* Tab Selector Controls */}
+        <div className="flex bg-slate-900/90 p-1.5 rounded-xl border border-slate-800 text-xs font-medium self-start md:self-auto overflow-x-auto">
           <button
             onClick={() => setActiveTab("readiness")}
-            className={`px-4 py-2 rounded-lg transition-colors ${
-              activeTab === "readiness" ? "bg-emerald-600 text-white" : "text-slate-400 hover:text-slate-200"
+            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+              activeTab === "readiness"
+                ? "bg-emerald-600 text-white shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
             }`}
           >
-            10/10 Readiness Scorecard
+            <ShieldCheck className="w-3.5 h-3.5" />
+            <span>Placar 10/10</span>
           </button>
+
           <button
             onClick={() => setActiveTab("tls")}
-            className={`px-4 py-2 rounded-lg transition-colors ${
-              activeTab === "tls" ? "bg-emerald-600 text-white" : "text-slate-400 hover:text-slate-200"
+            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+              activeTab === "tls"
+                ? "bg-emerald-600 text-white shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
             }`}
           >
-            TLS &amp; Certificate Panel
+            <Lock className="w-3.5 h-3.5" />
+            <span>TLS &amp; Certificados</span>
           </button>
+
           <button
             onClick={() => setActiveTab("rspamd")}
-            className={`px-4 py-2 rounded-lg transition-colors ${
-              activeTab === "rspamd" ? "bg-emerald-600 text-white" : "text-slate-400 hover:text-slate-200"
+            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+              activeTab === "rspamd"
+                ? "bg-emerald-600 text-white shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
             }`}
           >
-            Rspamd Anti-Spam Thresholds
+            <Sliders className="w-3.5 h-3.5" />
+            <span>Limites Rspamd</span>
           </button>
+
           <button
             onClick={() => setActiveTab("audit")}
-            className={`px-4 py-2 rounded-lg transition-colors ${
-              activeTab === "audit" ? "bg-emerald-600 text-white" : "text-slate-400 hover:text-slate-200"
+            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
+              activeTab === "audit"
+                ? "bg-emerald-600 text-white shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
             }`}
           >
-            Audit Log &amp; Queue Trace
+            <ListOrdered className="w-3.5 h-3.5" />
+            <span>Audit Log &amp; Trace</span>
           </button>
         </div>
       </div>
@@ -218,26 +223,35 @@ export default function AdminSecurityPage() {
       {/* TAB 1: 10/10 READINESS SCORECARD */}
       {activeTab === "readiness" && (
         <div className="space-y-6">
-          <div className="glass-panel p-6 rounded-2xl border border-slate-800 flex items-center justify-between">
+          <Card className="flex items-center justify-between p-6">
             <div>
-              <h2 className="text-lg font-bold text-white">Mail Server Readiness Scorecard</h2>
-              <p className="text-xs text-slate-400">10 non-negotiable diagnostic checks for production email node readiness.</p>
+              <h2 className="text-lg font-bold text-white flex items-center gap-2">
+                <Shield className="w-5 h-5 text-emerald-400" />
+                Mail server readiness scorecard
+              </h2>
+              <p className="text-xs text-slate-400 mt-1">
+                Ten non-negotiable checks before this node carries production mail.
+              </p>
             </div>
             <div className="flex items-center gap-3">
-              <span className="text-3xl font-extrabold text-emerald-400 font-mono">10 / 10</span>
-              <span className="badge-verified px-3 py-1 rounded-full text-xs font-bold font-mono">ALL CHECKS PASSED</span>
+              <span className="text-3xl font-black text-emerald-400 font-mono">10 / 10</span>
+              <Badge variant="success">TODAS AS CHECAGENS APROVADAS</Badge>
             </div>
-          </div>
+          </Card>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {(readiness ?? []).map((chk) => (
-              <div key={chk.id} className="glass-panel p-4 rounded-xl border border-slate-800 space-y-2">
+              <Card key={chk.id} hoverable className="space-y-2">
                 <div className="flex items-center justify-between text-xs">
-                  <span className="font-bold text-white">Check #{chk.id}: {chk.name}</span>
-                  <span className="badge-verified px-2 py-0.5 rounded text-[10px]">{chk.status}</span>
+                  <span className="font-bold text-slate-100">
+                    #{chk.id}: {chk.name}
+                  </span>
+                  <Badge variant={chk.status === "PASSED" ? "success" : chk.status === "FAILED" ? "danger" : "warning"}>
+                    {chk.status}
+                  </Badge>
                 </div>
-                <div className="text-[11px] text-slate-400 leading-relaxed">{chk.details}</div>
-              </div>
+                <div className="text-xs text-slate-400 leading-relaxed font-mono">{chk.details}</div>
+              </Card>
             ))}
           </div>
         </div>
@@ -246,106 +260,113 @@ export default function AdminSecurityPage() {
       {/* TAB 2: TLS CERTIFICATES & POLICY PANEL */}
       {activeTab === "tls" && (
         <div className="space-y-6 text-xs">
-          <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
-            <h2 className="text-lg font-bold text-white">TLS Certificate &amp; Transport Policy</h2>
+          <Card className="space-y-4">
+            <h2 className="text-base font-bold text-white flex items-center gap-2">
+              <Lock className="w-5 h-5 text-indigo-400" />
+              TLS certificates and transport policy
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
-              <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-1">
-                <div className="text-slate-400 font-medium">Traefik / ACME Certificate</div>
+              <div className="p-4 bg-slate-900/90 rounded-xl border border-slate-800 space-y-1">
+                <div className="text-slate-400 font-medium">Certificado Traefik / ACME</div>
                 <div className="text-emerald-400 font-bold text-sm">Let&apos;s Encrypt RSA 4096</div>
-                <div className="text-[10px] text-slate-500 font-mono">Expires in 78 days (Auto-renewing)</div>
+                <div className="text-[10px] text-slate-500 font-mono">Renewal is automatic</div>
               </div>
 
-              <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-1">
-                <div className="text-slate-400 font-medium">DANE TLSA Records Status</div>
-                <div className="text-emerald-400 font-bold text-sm">3 1 1 SHA-256 Verified</div>
-                <div className="text-[10px] text-slate-500 font-mono">DNSSEC chain verified on port 25</div>
+              <div className="p-4 bg-slate-900/90 rounded-xl border border-slate-800 space-y-1">
+                <div className="text-slate-400 font-medium">Status Registros DANE TLSA</div>
+                <div className="text-emerald-400 font-bold text-sm">3 1 1 SHA-256 Verificado</div>
+                <div className="text-[10px] text-slate-500 font-mono">Cadeia DNSSEC verificada na porta 25</div>
               </div>
 
-              <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-1">
-                <div className="text-slate-400 font-medium">MTA-STS Policy Mode</div>
+              <div className="p-4 bg-slate-900/90 rounded-xl border border-slate-800 space-y-1">
+                <div className="text-slate-400 font-medium">MTA-STS policy mode</div>
                 <div className="text-emerald-400 font-bold text-sm">mode=enforce</div>
-                <div className="text-[10px] text-slate-500 font-mono">max_age=604800 (7 days)</div>
+                <div className="text-[10px] text-slate-500 font-mono">max_age=604800 (7 dias)</div>
               </div>
             </div>
-          </div>
+          </Card>
 
-          <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-3">
-            <h3 className="font-bold text-white">Supported TLS Cipher Suites (Port 25/587/993)</h3>
-            <div className="p-3 bg-slate-950 rounded border border-slate-800 font-mono text-[11px] text-slate-300 space-y-1">
-              <div>TLS_AES_256_GCM_SHA384 (TLS 1.3) [PREFERRED]</div>
+          <Card className="space-y-3">
+            <h3 className="font-bold text-slate-100">Accepted TLS cipher suites (ports 25 / 587 / 993)</h3>
+            <div className="p-4 bg-slate-950 rounded-xl border border-slate-800 font-mono text-xs text-slate-300 space-y-1.5">
+              <div className="text-emerald-400 font-semibold">TLS_AES_256_GCM_SHA384 (TLS 1.3) [PREFERENCIAL]</div>
               <div>TLS_CHACHA20_POLY1305_SHA256 (TLS 1.3)</div>
               <div>ECDHE-ECDSA-AES256-GCM-SHA384 (TLS 1.2)</div>
             </div>
-          </div>
+          </Card>
         </div>
       )}
 
       {/* TAB 3: RSPAMD ANTI-SPAM THRESHOLDS */}
       {activeTab === "rspamd" && (
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-6 text-xs max-w-3xl">
+        <Card className="space-y-6 text-xs max-w-3xl">
           <div>
-            <h2 className="text-lg font-bold text-white mb-1">Rspamd Anti-Spam Thresholds Configuration</h2>
-            <p className="text-slate-400">Configure score limits for greylisting, header injection, and rejection.</p>
+            <h2 className="text-base font-bold text-white mb-1 flex items-center gap-2">
+              <Sliders className="w-5 h-5 text-indigo-400" />
+              Rspamd score thresholds
+            </h2>
+            <p className="text-slate-400">Set the scores that trigger greylisting, header tagging and rejection.</p>
           </div>
 
           {rspamdSaved && (
-            <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300">
-              Rspamd threshold parameters updated successfully!
+            <div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 flex items-center gap-2">
+              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+              <span>Rspamd thresholds saved.</span>
             </div>
           )}
 
           <form onSubmit={handleSaveRspamd} className="space-y-4">
             <div>
-              <label className="font-medium text-slate-300 mb-1 block">Greylist Score Threshold (Default: 4.0)</label>
+              <label className="font-semibold text-slate-300 mb-1.5 block">Greylist score (default 4.0)</label>
               <input
                 type="number"
                 step="0.5"
                 value={greylistScore}
                 onChange={(e) => setGreylistScore(parseFloat(e.target.value))}
-                className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
               />
             </div>
 
             <div>
-              <label className="font-medium text-slate-300 mb-1 block">Add Header Score Threshold (Default: 6.0)</label>
+              <label className="font-semibold text-slate-300 mb-1.5 block">Header-tagging score (default 6.0)</label>
               <input
                 type="number"
                 step="0.5"
                 value={addHeaderScore}
                 onChange={(e) => setAddHeaderScore(parseFloat(e.target.value))}
-                className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
               />
             </div>
 
             <div>
-              <label className="font-medium text-slate-300 mb-1 block">Reject Score Threshold (Default: 15.0)</label>
+              <label className="font-semibold text-slate-300 mb-1.5 block">Reject score (default 15.0)</label>
               <input
                 type="number"
                 step="0.5"
                 value={rejectScore}
                 onChange={(e) => setRejectScore(parseFloat(e.target.value))}
-                className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white font-mono focus:outline-none focus:border-emerald-500"
               />
             </div>
 
-            <button
-              type="submit"
-              className="py-2.5 px-6 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-medium transition-colors"
-            >
-              Save Rspamd Thresholds
-            </button>
+            <Button type="submit" variant="primary" size="md">
+              Salvar Limites Rspamd
+            </Button>
           </form>
-        </div>
+        </Card>
       )}
 
       {/* TAB 4: AUDIT LOG & QUEUE ID TRANSACTION TRACE */}
       {activeTab === "audit" && (
         <div className="space-y-6 text-xs">
           {/* Queue ID Search Box */}
-          <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
+          <Card className="space-y-4">
             <div>
-              <h2 className="text-lg font-bold text-white mb-1">Queue ID &amp; Transaction Trace Inspector</h2>
-              <p className="text-slate-400">Trace exact processing steps for any email delivery by Queue ID or transaction UUID.</p>
+              <h2 className="text-base font-bold text-white mb-1 flex items-center gap-2">
+                <Search className="w-5 h-5 text-indigo-400" />
+                Delivery trace by queue ID
+              </h2>
+              <p className="text-slate-400">Rastreie as etapas exatas de processamento de qualquer e-mail por Queue ID ou UUID.</p>
             </div>
 
             <form onSubmit={handleSearchQueueId} className="flex gap-3">
@@ -353,69 +374,68 @@ export default function AdminSecurityPage() {
                 type="text"
                 value={searchQueueId}
                 onChange={(e) => setSearchQueueId(e.target.value)}
-                placeholder="Enter Queue ID (e.g. q-9812-ax)..."
+                placeholder="Informe o Queue ID (ex: q-9812-ax)..."
                 required
-                className="flex-1 px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white font-mono placeholder-slate-500 focus:outline-none focus:border-emerald-500"
+                className="flex-1 px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white font-mono placeholder-slate-500 focus:outline-none focus:border-emerald-500"
               />
-              <button
-                type="submit"
-                className="py-2.5 px-6 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-medium transition-colors"
-              >
-                Trace Transaction
-              </button>
+              <Button type="submit" variant="primary" size="md">
+                Trace
+              </Button>
             </form>
 
             {tracedSteps && (
               <div className="mt-4 border border-slate-800 rounded-xl overflow-hidden bg-slate-950 p-4 space-y-3">
-                <h3 className="font-bold text-white">Transaction Trace Result for {searchQueueId}</h3>
+                <h3 className="font-bold text-white">Resultado do Rastreamento para {searchQueueId}</h3>
                 <div className="space-y-2">
                   {tracedSteps.map((st) => (
-                    <div key={st.step} className="p-3 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-between">
+                    <div key={st.step} className="p-3 rounded-lg bg-slate-900/90 border border-slate-800 flex items-center justify-between">
                       <div>
-                        <div className="font-bold text-slate-200">Step {st.step}: {st.title}</div>
-                        <div className="text-[11px] text-slate-400 font-mono">{st.detail}</div>
+                        <div className="font-bold text-slate-200">Etapa {st.step}: {st.title}</div>
+                        <div className="text-[11px] text-slate-400 font-mono mt-0.5">{st.detail}</div>
                       </div>
-                      <span className="badge-verified px-2 py-0.5 rounded text-[10px]">{st.status}</span>
+                      <Badge variant="success">{st.status}</Badge>
                     </div>
                   ))}
                 </div>
               </div>
             )}
-          </div>
+          </Card>
 
           {/* Immutable System Audit Log Table */}
-          <div className="glass-panel rounded-2xl border border-slate-800 overflow-hidden">
-            <div className="p-4 border-b border-slate-800 bg-slate-900/60 font-bold text-xs text-slate-300">
-              Immutable System Audit Log
+          <Card className="p-0 overflow-hidden">
+            <div className="p-4 border-b border-slate-800 bg-slate-900/80 font-bold text-xs text-slate-300">
+              Audit log
             </div>
 
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse text-xs">
                 <thead>
                   <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                    <th className="p-3">{t("ui.timestamp")}</th>
-                    <th className="p-3">Queue ID</th>
-                    <th className="p-3">{t("ui.actor")}</th>
-                    <th className="p-3">{t("ui.eventAction")}</th>
-                    <th className="p-3">{t("ui.targetObject")}</th>
-                    <th className="p-3">{t("ui.clientIp")}</th>
+                    <th className="p-3.5">{t("ui.timestamp")}</th>
+                    <th className="p-3.5">Queue ID</th>
+                    <th className="p-3.5">{t("ui.actor")}</th>
+                    <th className="p-3.5">{t("ui.eventAction")}</th>
+                    <th className="p-3.5">{t("ui.targetObject")}</th>
+                    <th className="p-3.5">{t("ui.clientIp")}</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-800/60 font-mono">
                   {auditEntries.map((aud) => (
-                    <tr key={aud.id} className="hover:bg-slate-900/30">
-                      <td className="p-3 text-slate-400">{aud.timestamp}</td>
-                      <td className="p-3 text-indigo-400 font-bold">{aud.queueId}</td>
-                      <td className="p-3 font-bold text-slate-200">{aud.actor}</td>
-                      <td className="p-3 text-emerald-400 font-bold">{aud.action}</td>
-                      <td className="p-3 text-slate-300">{aud.target}</td>
-                      <td className="p-3 text-slate-500">{aud.ip}</td>
+                    <tr key={aud.id} className="hover:bg-slate-900/40 transition-colors">
+                      <td className="p-3.5 text-slate-400">{aud.timestamp}</td>
+                      <td className="p-3.5 text-indigo-400 font-bold">{aud.queueId}</td>
+                      <td className="p-3.5 font-bold text-slate-200">{aud.actor}</td>
+                      <td className="p-3.5 font-bold">
+                        <Badge variant="success">{aud.action}</Badge>
+                      </td>
+                      <td className="p-3.5 text-slate-300">{aud.target}</td>
+                      <td className="p-3.5 text-slate-500">{aud.ip}</td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
-          </div>
+          </Card>
         </div>
       )}
     </div>