#35: replace both web surfaces with the Nocturne redesign

The webmail was indigo over glass and the console was green over glass, so the
two halves of one product did not look related, and neither followed a system
anything could be checked against. This replaces the interface with the
Nocturne design system from Claude Design: a near-neutral blue-grey ground,
Inter at weight 500, solid surfaces with a 1px inset edge instead of blur, and
a single blurple accent used as a line, a mark and a glow rather than a flood.

The palette is remapped at the source rather than renamed at every call site.
tailwind.config.js points slate, indigo, emerald, teal and the rest at the
Nocturne ramps, and globals.css carries the same values as variables, so a
utility class and a token cannot drift apart and no colour can enter the
interface from outside the system. The console's green is gone because it
resolves to the one accent; that was the point.

Structurally, both surfaces now share one rail - the same brand mark, the same
3px accent mark on the active item, the same account tile - with a segmented
control for crossing between them. Crossing into the console still goes to the
step-up rather than the admin sign-in, and leaving it is still a plain link.
Settings moves from eight stacked panels to a tab strip, so enabling a second
factor and writing a filter are no longer separated by everything else.

Nothing is sized by the length of its text any more. Labels wrap, tab strips
wrap instead of scrolling, subjects and queue diagnostics wrap instead of
truncating, and the message list's snippet is clamped to two lines rather than
one. That is what broke when the interface was read in Portuguese or Spanish.

Defects found while doing it:

  - The queue and DMARC screens styled their status pills with "badge-danger",
    "badge-warning" and "badge-verified" - three class names no stylesheet in
    this project defines - so every verdict rendered as identical unstyled
    text. They are Badge variants now, which exist.
  - The DMARC screen printed the literal string "quarantine" as the
    enforcement level whatever the domains publish. The report endpoint returns
    no policy at all, so it was asserting a configuration nobody had made. It
    shows the DMARC pass ratio it genuinely has.
  - Half the mailboxes screen and two lines of the audit trace were hardcoded
    strings, some Portuguese and some English, so they stayed in one language
    whatever the interface was set to. They come from the bundle now, with the
    new keys added to all three locales.
  - Avatars printed email[0], so every account at one domain collapsed onto the
    same letter. initialsFor takes two letters from the local part's own word
    boundaries, behind tests.

Trivy reported one HIGH: nanoid 3.3.16, pulled in transitively by postcss,
vulnerable to a denial of service via an infinite loop in ID generation
(CVE-2026-67213). Pinned to ^3.3.18 through the overrides block the package
already uses for sharp and postcss.

Verified: 98 webmail tests green, tsc clean, production build clean, and the
compiled stylesheet serves the Nocturne values with no stock Tailwind indigo,
emerald or slate hex left in it. Trivy fs with the CI scanners, severities and
skip-dirs exits 0.

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

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

@@ -7,7 +7,6 @@ import {
   Send,
   Layers,
   HardDrive,
-  CheckCircle2,
   Server,
   ShieldCheck,
   Globe,
@@ -15,7 +14,6 @@ import {
   Zap,
 } 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";
 
@@ -70,30 +68,27 @@ export default function AdminDashboardPage() {
   const shown = (value: number | undefined, format?: (n: number) => string) =>
     value === undefined || value === null ? t("ui.noData") : format ? format(value) : String(value);
 
+  /* The KPI tiles no longer each carry their own hue. Four colours across four
+     numbers implied four kinds of thing; they are all just counts, and the one
+     accent marks the icon. */
   const kpis = [
     {
       title: t("ui.inboundVolume"),
       value: shown(metrics?.inbound_24h),
       subtext: t("ui.messageVolume"),
       icon: Inbox,
-      color: "text-indigo-400",
-      bg: "bg-indigo-500/10",
     },
     {
       title: t("ui.outboundDelivered"),
       value: shown(metrics?.outbound_24h),
       subtext: t("ui.daneVerified"),
       icon: Send,
-      color: "text-emerald-400",
-      bg: "bg-emerald-500/10",
     },
     {
       title: t("ui.queueDepth"),
       value: shown(metrics?.queue_depth),
       subtext: t("ui.postgresRunner"),
       icon: Layers,
-      color: "text-cyan-400",
-      bg: "bg-cyan-500/10",
     },
     {
       title: t("ui.diskUsed"),
@@ -102,42 +97,42 @@ export default function AdminDashboardPage() {
         ? `${t("ui.storageQuota")}: ${formatBytes(metrics.storage_quota_bytes)}`
         : t("ui.localDisk"),
       icon: HardDrive,
-      color: "text-amber-400",
-      bg: "bg-amber-500/10",
     },
   ];
 
+  const panel = "flex flex-col gap-3.5 rounded-2xl bg-dark-panel p-[18px] shadow-edge";
+
   return (
-    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto">
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-5 px-5 pb-11 pt-7 sm:px-8">
       {/* Header Bar */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="min-w-0">
+          <h1 className="text-[25px] font-medium leading-tight text-slate-100">
             {t("admin.dashboardTitle")}
           </h1>
-          <p className="text-sm text-slate-400 mt-1">{t("admin.dashboardSubtitle")}</p>
+          <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.dashboardSubtitle")}</p>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-2">
           {/* Reports the count it can actually see. The old badge asserted
               "PREFLIGHT: HEALTHY" from a field the endpoint never sends, so it
               said healthy unconditionally. The real checks live on the
               security screen. */}
           {metrics && (
             <Badge variant={metrics.domains_verified === metrics.domains_total ? "success" : "warning"}>
-              <Zap className="w-3.5 h-3.5 mr-1" />
+              <Zap className="h-3.5 w-3.5 flex-none" />
               {t("ui.domainsVerified")}: {metrics.domains_verified}/{metrics.domains_total}
             </Badge>
           )}
-          <Button variant="outline" size="sm" onClick={fetchMetrics} disabled={loading}>
-            <RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
+          <Button variant="secondary" size="sm" onClick={fetchMetrics} disabled={loading}>
+            <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
             <span>{t("common.refresh")}</span>
           </Button>
         </div>
       </div>
 
       {/* KPI Grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
         {kpis.map((kpi, idx) => {
           const Icon = kpi.icon;
           return (
@@ -146,22 +141,16 @@ export default function AdminDashboardPage() {
               initial={{ opacity: 0, y: 15 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.3, delay: idx * 0.05 }}
+              className="flex flex-col gap-2.5 rounded-2xl bg-dark-panel p-4 shadow-edge"
             >
-              <Card hoverable className="relative overflow-hidden">
-                <div className="flex items-center justify-between">
-                  <span className="text-xs font-medium text-slate-400">{kpi.title}</span>
-                  <div className={`w-9 h-9 rounded-xl ${kpi.bg} flex items-center justify-center`}>
-                    <Icon className={`w-5 h-5 ${kpi.color}`} />
-                  </div>
-                </div>
-                <div className="text-3xl font-black text-white mt-3 tracking-tight">
-                  {kpi.value}
-                </div>
-                <div className="text-xs text-slate-400 mt-2 flex items-center gap-1 font-mono">
-                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400 inline" />
-                  {kpi.subtext}
-                </div>
-              </Card>
+              <div className="flex items-center gap-2 text-slate-400">
+                <Icon className="h-4 w-4 flex-none text-indigo-500" />
+                <span className="text-[12.5px] leading-snug">{kpi.title}</span>
+              </div>
+              <div className="text-[30px] font-medium leading-none tracking-[-0.02em] tabular-nums text-slate-100">
+                {kpi.value}
+              </div>
+              <div className="text-[11.5px] leading-snug text-slate-400">{kpi.subtext}</div>
             </motion.div>
           );
         })}
@@ -179,46 +168,48 @@ export default function AdminDashboardPage() {
         compose healthchecks, and the per-domain DNS state lives on the domains
         screen, which reads it from the database.
       */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Globe className="w-5 h-5 text-indigo-400" />
+      <section className={panel}>
+        <div className="flex items-center gap-2">
+          <Globe className="h-[17px] w-[17px] flex-none text-indigo-500" />
+          <h2 className="text-[17px] font-medium leading-tight text-slate-100">
             {t("ui.domainVerification")}
-          </CardTitle>
-        </CardHeader>
+          </h2>
+        </div>
         {metrics ? (
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-            <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800">
-              <div className="text-xs text-slate-400 mb-1.5 flex items-center gap-1.5">
-                <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+            <div className="flex flex-col gap-1.5 rounded-xl bg-dark-card p-3.5 shadow-edge">
+              <div className="flex items-center gap-1.5 text-xs text-slate-400">
+                <ShieldCheck className="h-3.5 w-3.5 flex-none text-indigo-500" />
                 {t("ui.domainsVerified")}
               </div>
-              <div className="text-2xl font-bold text-white">
+              <div className="text-2xl font-medium tabular-nums text-slate-100">
                 {metrics.domains_verified}
-                <span className="text-slate-500 text-base"> / {metrics.domains_total}</span>
+                <span className="text-base text-slate-500"> / {metrics.domains_total}</span>
               </div>
             </div>
-            <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800">
-              <div className="text-xs text-slate-400 mb-1.5 flex items-center gap-1.5">
-                <Server className="w-3.5 h-3.5 text-indigo-400" />
+            <div className="flex flex-col gap-1.5 rounded-xl bg-dark-card p-3.5 shadow-edge">
+              <div className="flex items-center gap-1.5 text-xs text-slate-400">
+                <Server className="h-3.5 w-3.5 flex-none text-indigo-500" />
                 {t("ui.mailboxesActive")}
               </div>
-              <div className="text-2xl font-bold text-white">{metrics.mailboxes_active}</div>
+              <div className="text-2xl font-medium tabular-nums text-slate-100">
+                {metrics.mailboxes_active}
+              </div>
             </div>
-            <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800">
-              <div className="text-xs text-slate-400 mb-1.5 flex items-center gap-1.5">
-                <Send className="w-3.5 h-3.5 text-amber-400" />
+            <div className="flex flex-col gap-1.5 rounded-xl bg-dark-card p-3.5 shadow-edge">
+              <div className="flex items-center gap-1.5 text-xs text-slate-400">
+                <Send className="h-3.5 w-3.5 flex-none text-indigo-500" />
                 {t("ui.bounceRate")}
               </div>
-              <div className="text-2xl font-bold text-white">
+              <div className="text-2xl font-medium tabular-nums text-slate-100">
                 {(metrics.bounce_rate * 100).toFixed(1)}%
               </div>
             </div>
           </div>
         ) : (
-          <div className="p-6 text-center text-xs text-slate-500">{t("ui.noData")}</div>
+          <div className="p-6 text-center text-[13px] text-slate-400">{t("ui.noData")}</div>
         )}
-      </Card>
+      </section>
     </div>
   );
 }

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

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { useTranslations } from "../../../../i18n/provider";
+import { Badge } from "../../../../components/ui/Badge";
 
 interface DmarcSource {
   ip: string;
@@ -30,78 +31,75 @@ export default function AdminDmarcPage() {
       .catch(() => {});
   }, []);
 
+  const pct = (part: number) =>
+    data && data.total_messages > 0 ? `${Math.round((part / data.total_messages) * 100)}%` : t("ui.noData");
+
+  const tiles = [
+    { label: t("ui.totalEvaluated"), value: data ? String(data.total_messages) : t("ui.noData") },
+    { label: t("ui.spfRatio"), value: data ? pct(data.spf_pass_count) : t("ui.noData") },
+    { label: t("ui.dkimAlignment"), value: data ? pct(data.dkim_pass_count) : t("ui.noData") },
+    /* This tile printed the literal string "quarantine" whatever the domains
+       actually publish - the report endpoint returns no policy at all, so it
+       was asserting an enforcement level nobody had configured. It reports the
+       DMARC pass ratio it genuinely has instead. */
+    { label: t("ui.dmarcEnforcement"), value: data ? pct(data.dmarc_pass_count) : t("ui.noData") },
+  ];
+
   return (
-    <div className="p-8 space-y-8">
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-[18px] px-5 pb-11 pt-7 sm:px-8">
       <div>
-        <h1 className="text-2xl font-bold text-white mb-1">{t("admin.dmarcTitle")}</h1>
-        <p className="text-xs text-slate-400">{t("admin.dmarcSubtitle")}</p>
+        <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("admin.dmarcTitle")}</h1>
+        <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.dmarcSubtitle")}</p>
       </div>
 
       {/* DMARC Stats Summary Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="text-xs font-medium text-slate-400 mb-2">{t("ui.totalEvaluated")}</div>
-          <div className="text-3xl font-extrabold text-white">{data ? data.total_messages : t("ui.noData")}</div>
-        </div>
-
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="text-xs font-medium text-slate-400 mb-2">{t("ui.spfRatio")}</div>
-          <div className="text-3xl font-extrabold text-emerald-400">
-            {data && data.total_messages > 0 ? `${Math.round((data.spf_pass_count / data.total_messages) * 100)}%` : t("ui.noData")}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {tiles.map((tile) => (
+          <div key={tile.label} className="flex flex-col gap-2.5 rounded-2xl bg-dark-panel p-4 shadow-edge">
+            <div className="text-[12.5px] leading-snug text-slate-400">{tile.label}</div>
+            <div className="text-[30px] font-medium leading-none tracking-[-0.02em] tabular-nums text-slate-100">
+              {tile.value}
+            </div>
           </div>
-        </div>
-
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="text-xs font-medium text-slate-400 mb-2">{t("ui.dkimAlignment")}</div>
-          <div className="text-3xl font-extrabold text-emerald-400">
-            {data && data.total_messages > 0 ? `${Math.round((data.dkim_pass_count / data.total_messages) * 100)}%` : t("ui.noData")}
-          </div>
-        </div>
-
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="text-xs font-medium text-slate-400 mb-2">{t("ui.dmarcEnforcement")}</div>
-          <div className="text-3xl font-extrabold text-indigo-400">quarantine</div>
-        </div>
+        ))}
       </div>
 
       {/* Sending Sources 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">
-          {t("ui.sourceIp")}
-        </div>
-
+      <div className="rounded-2xl bg-dark-panel px-[18px] pb-3 pt-1.5 shadow-edge">
         <div className="overflow-x-auto">
-          <table className="w-full text-left border-collapse text-xs">
+          <table className="lm-table">
             <thead>
-              <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                <th className="p-3">{t("ui.sourceIp")}</th>
-                <th className="p-3">{t("ui.reportingOrg")}</th>
-                <th className="p-3">{t("ui.messageVolume")}</th>
-                <th className="p-3">{t("ui.spfResult")}</th>
-                <th className="p-3">{t("ui.dkimResult")}</th>
+              <tr>
+                <th className="pl-0">{t("ui.sourceIp")}</th>
+                <th>{t("ui.reportingOrg")}</th>
+                <th>{t("ui.messageVolume")}</th>
+                <th>{t("ui.spfResult")}</th>
+                <th className="pr-0 text-right">{t("ui.dkimResult")}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-slate-800/60 font-mono">
+            <tbody>
               {(data?.sources || []).map((src, idx) => (
-                <tr key={idx} className="hover:bg-slate-900/30">
-                  <td className="p-3 font-bold text-slate-200">{src.ip}</td>
-                  <td className="p-3 text-slate-300">{src.org}</td>
-                  <td className="p-3 text-slate-400">{src.count}</td>
-                  <td className="p-3">
-                    <span className={src.spf === "pass" ? "badge-verified px-2 py-0.5 rounded text-[10px]" : "badge-danger px-2 py-0.5 rounded text-[10px]"}>
-                      {src.spf.toUpperCase()}
-                    </span>
+                <tr key={idx}>
+                  <td className="pl-0 font-mono text-[12.5px] text-slate-100">{src.ip}</td>
+                  <td className="break-words text-[13px] text-slate-300">{src.org}</td>
+                  <td className="text-[13px] tabular-nums text-slate-400">{src.count}</td>
+                  <td>
+                    {/* These were "badge-verified" and "badge-danger", class
+                        names no stylesheet defines, so both verdicts rendered
+                        as identical unstyled text. */}
+                    <Badge variant={src.spf === "pass" ? "success" : "danger"}>{src.spf.toUpperCase()}</Badge>
                   </td>
-                  <td className="p-3">
-                    <span className={src.dkim === "pass" ? "badge-verified px-2 py-0.5 rounded text-[10px]" : "badge-danger px-2 py-0.5 rounded text-[10px]"}>
-                      {src.dkim.toUpperCase()}
-                    </span>
+                  <td className="pr-0 text-right">
+                    <Badge variant={src.dkim === "pass" ? "success" : "danger"}>{src.dkim.toUpperCase()}</Badge>
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
+        {(data?.sources ?? []).length === 0 && (
+          <div className="p-8 text-center text-[13px] text-slate-400">{t("ui.noData")}</div>
+        )}
       </div>
     </div>
   );

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

@@ -3,7 +3,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Globe, RefreshCw, Plus, KeyRound, CheckCircle2, AlertTriangle } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
-import { Card } from "../../../../components/ui/Card";
 import { Badge } from "../../../../components/ui/Badge";
 import { Button } from "../../../../components/ui/Button";
 
@@ -197,144 +196,147 @@ export default function AdminDomainsPage() {
     { id: "dkim" as const, label: "DKIM", icon: KeyRound },
   ];
 
-  return (
-    <div className="p-6 md:p-8 space-y-6 max-w-7xl mx-auto">
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
-            {t("admin.domainsTitle")}
-          </h1>
-        </div>
+  const panel = "flex flex-col gap-4 rounded-2xl bg-dark-panel p-[18px] shadow-edge";
+  const input =
+    "w-full min-h-[36px] rounded-[10px] bg-dark-card px-3 py-2 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
+  const fieldLabel = "mb-1.5 block text-xs text-slate-400";
 
-        <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">
-          {tabs.map((tab) => {
-            const Icon = tab.icon;
-            return (
-              <button
-                key={tab.id}
-                type="button"
-                onClick={() => setActiveTab(tab.id)}
-                className={`flex items-center gap-2 px-3.5 py-2 rounded-lg transition-all ${
-                  activeTab === tab.id
-                    ? "bg-emerald-600 text-white shadow-sm"
-                    : "text-slate-400 hover:text-slate-200"
-                }`}
-              >
-                <Icon className="w-3.5 h-3.5" />
-                <span>{tab.label}</span>
-              </button>
-            );
-          })}
-        </div>
+  return (
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-[18px] px-5 pb-11 pt-7 sm:px-8">
+      <div>
+        <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("admin.domainsTitle")}</h1>
+        <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.verifyIntro")}</p>
+      </div>
+
+      <div className="lm-tabstrip self-start">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              data-active={activeTab === tab.id}
+              aria-pressed={activeTab === tab.id}
+              className="lm-tab"
+            >
+              <Icon className="h-[15px] w-[15px] flex-none" />
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
       </div>
 
       {notice && (
-        <div className="p-4 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
-          <CheckCircle2 className="w-4 h-4 flex-shrink-0" />
-          <span>{notice}</span>
+        <div className="flex items-center gap-2 rounded-xl bg-dark-card px-4 py-3 text-[12.5px] text-slate-200 shadow-edge">
+          <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
+          <span className="break-words">{notice}</span>
         </div>
       )}
       {error && (
-        <div className="p-4 rounded-xl bg-rose-500/15 border border-rose-500/30 text-rose-300 text-xs">
+        <div className="rounded-xl bg-rose-900/60 px-4 py-3 text-[12.5px] leading-relaxed text-rose-200 shadow-edge">
           {error}
         </div>
       )}
 
       {activeTab === "domains" && (
-        <div className="space-y-4">
+        <div className="flex flex-col gap-3">
           {domains.length === 0 && !loading ? (
-            <Card className="p-8 text-center text-xs text-slate-500">{t("admin.noDomains")}</Card>
+            <div className="rounded-2xl bg-dark-panel p-8 text-center text-[13px] text-slate-400 shadow-edge">
+              {t("admin.noDomains")}
+            </div>
           ) : (
             domains.map((d) => (
-              <Card key={d.id} className="p-4">
-                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-                  <div className="flex items-center gap-3 min-w-0">
-                    <div className="w-10 h-10 rounded-xl bg-indigo-500/15 border border-indigo-500/30 flex items-center justify-center text-indigo-400 flex-shrink-0">
-                      <Globe className="w-5 h-5" />
-                    </div>
-                    <div className="min-w-0">
-                      <div className="text-base font-bold text-white truncate">{d.name}</div>
-                      <div className="text-xs text-slate-400">
-                        {t("admin.mailboxCount", { count: d.mailbox_count })}
-                        {d.dmarc_policy ? ` | DMARC: ${d.dmarc_policy}` : ""}
-                        {d.mta_sts_mode ? ` | MTA-STS: ${d.mta_sts_mode}` : ""}
-                        {d.dane_enabled ? " | DANE" : ""}
-                      </div>
+              <div
+                key={d.id}
+                className="flex flex-col gap-3.5 rounded-2xl bg-dark-panel px-[18px] py-4 shadow-edge"
+              >
+                <div className="flex flex-wrap items-center gap-3.5">
+                  <div className="min-w-[200px] flex-1">
+                    <div className="break-words text-lg font-medium leading-tight text-slate-100">{d.name}</div>
+                    <div className="mt-1 text-[12.5px] leading-relaxed text-slate-400">
+                      {t("admin.mailboxCount", { count: d.mailbox_count })}
+                      {d.dmarc_policy ? ` · DMARC: ${d.dmarc_policy}` : ""}
+                      {d.mta_sts_mode ? ` · MTA-STS: ${d.mta_sts_mode}` : ""}
+                      {d.dane_enabled ? " · DANE" : ""}
                     </div>
                   </div>
-                  <div className="flex items-center gap-2 flex-shrink-0">
+                  <div className="flex flex-none flex-wrap items-center gap-2.5">
                     <Badge variant={statusVariant(d.dns_status)}>{d.dns_status}</Badge>
                     <Button
-                      variant={selectedId === d.id ? "primary" : "outline"}
+                      variant={selectedId === d.id ? "primary" : "secondary"}
                       size="sm"
                       onClick={() => setSelectedId(d.id)}
                     >
-                      {selectedId === d.id ? <CheckCircle2 className="w-3.5 h-3.5" /> : null}
+                      {selectedId === d.id ? <CheckCircle2 className="h-3.5 w-3.5" /> : null}
                       <span>{selectedId === d.id ? t("common.status") : t("common.add")}</span>
                     </Button>
                   </div>
                 </div>
-                <div className="mt-3 pt-3 border-t border-slate-800 text-[11px] text-slate-500 font-mono">
+                <div className="text-[11.5px] text-slate-500">
                   {t("admin.lastChecked", {
                     when: d.dns_last_checked_at
                       ? new Date(d.dns_last_checked_at).toLocaleString()
                       : t("common.never"),
                   })}
                 </div>
-              </Card>
+              </div>
             ))
           )}
 
-          <Card className="space-y-4">
-            <div className="flex items-center justify-between gap-3 flex-wrap">
-              <p className="text-xs text-slate-400">{t("admin.verifyIntro")}</p>
-              <Button variant="outline" size="sm" onClick={handleReconcile} disabled={reconciling || !selected}>
-                <RefreshCw className={`w-3.5 h-3.5 ${reconciling ? "animate-spin" : ""}`} />
+          <section className={panel}>
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <h2 className="text-[17px] font-medium leading-tight text-slate-100">
+                {selected ? t("admin.dnsRecordsFor", { domain: selected.name }) : t("ui.domainVerification")}
+              </h2>
+              <Button variant="secondary" size="sm" onClick={handleReconcile} disabled={reconciling || !selected}>
+                <RefreshCw className={`h-3.5 w-3.5 ${reconciling ? "animate-spin" : ""}`} />
                 <span>{t("admin.reconcileDns")}</span>
               </Button>
             </div>
 
             {verification && (
               <>
-                <div className="flex items-center gap-3">
-                  <span
-                    className={`text-2xl font-black font-mono ${
-                      verification.verified === verification.total ? "text-emerald-400" : "text-amber-400"
-                    }`}
-                  >
+                <div className="flex flex-wrap items-center gap-3">
+                  <span className="font-mono text-2xl font-medium tabular-nums text-slate-100">
                     {verification.verified} / {verification.total}
                   </span>
                   <Badge variant={statusVariant(verification.status)}>{verification.status}</Badge>
                 </div>
 
                 <div className="overflow-x-auto">
-                  <table className="w-full text-left border-collapse text-xs">
+                  <table className="lm-table">
                     <thead>
-                      <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                        <th className="p-2.5">{t("ui.recordName")}</th>
-                        <th className="p-2.5">{t("ui.expectedValue")}</th>
-                        <th className="p-2.5">{t("common.status")}</th>
+                      <tr>
+                        <th className="pl-0">{t("ui.recordName")}</th>
+                        <th>{t("ui.expectedValue")}</th>
+                        <th className="pr-0 text-right">{t("common.status")}</th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-slate-800/60 font-mono">
+                    <tbody>
                       {verification.records.map((rec, i) => (
-                        <tr key={i} className="hover:bg-slate-900/30 align-top">
-                          <td className="p-2.5 text-slate-200 whitespace-nowrap">
-                            <span className="text-emerald-400 font-bold">{rec.type}</span> {rec.name}
+                        <tr key={i} className="align-top">
+                          <td className="whitespace-nowrap pl-0 text-[13px]">
+                            <Badge variant="neutral" className="mr-2 font-mono">
+                              {rec.type}
+                            </Badge>
+                            <span className="font-mono text-[12.5px] text-slate-200">{rec.name}</span>
                           </td>
-                          <td className="p-2.5 text-slate-400 break-all max-w-md">{rec.expected}</td>
-                          <td className="p-2.5 whitespace-nowrap">
+                          <td className="max-w-[420px] break-all font-mono text-xs text-slate-400">
+                            {rec.expected}
+                          </td>
+                          <td className="whitespace-nowrap pr-0 text-right">
                             {rec.verified ? (
-                              <span className="flex items-center gap-1 text-emerald-400">
-                                <CheckCircle2 className="w-3.5 h-3.5" />
+                              <span className="inline-flex items-center gap-1.5 text-[12.5px] text-indigo-400">
+                                <CheckCircle2 className="h-3.5 w-3.5" />
                                 {rec.proxied ? t("admin.presentProxied") : t("admin.dnsStatusVerified")}
                               </span>
                             ) : (
                               <span
-                                className="flex items-center gap-1 text-amber-400"
+                                className="inline-flex items-center gap-1.5 text-[12.5px] text-amber-400"
                                 title={rec.detail}
                               >
-                                <AlertTriangle className="w-3.5 h-3.5" />
+                                <AlertTriangle className="h-3.5 w-3.5" />
                                 {t("admin.notPublished")}
                               </span>
                             )}
@@ -346,89 +348,105 @@ export default function AdminDomainsPage() {
                 </div>
               </>
             )}
-          </Card>
+          </section>
         </div>
       )}
 
       {activeTab === "onboarding" && (
-        <Card className="max-w-2xl space-y-4">
+        <section className={`${panel} max-w-[620px]`}>
           <div>
-            <h2 className="text-lg font-bold text-white mb-1">{t("admin.onboardTitle")}</h2>
-            <p className="text-xs text-slate-400">{t("admin.onboardIntro")}</p>
+            <h2 className="text-[17px] font-medium leading-tight text-slate-100">{t("admin.onboardTitle")}</h2>
+            <p className="mt-1 text-[13px] leading-relaxed text-slate-400">{t("admin.onboardIntro")}</p>
           </div>
-          <form onSubmit={handleOnboard} className="space-y-3 text-xs">
+          <form onSubmit={handleOnboard} className="flex flex-col gap-4">
             <div>
-              <label className="font-semibold text-slate-300 block mb-1">{t("admin.domainName")}</label>
+              <label htmlFor="onboard-domain" className={fieldLabel}>
+                {t("admin.domainName")}
+              </label>
               <input
+                id="onboard-domain"
                 type="text"
                 value={onboardDomain}
                 onChange={(e) => setOnboardDomain(e.target.value)}
                 placeholder="example.org"
                 required
-                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
+                className={input}
               />
             </div>
-            <Button type="submit" variant="primary" size="md" disabled={onboarding}>
-              <Plus className="w-4 h-4" />
+            <Button type="submit" variant="primary" size="md" className="self-start" disabled={onboarding}>
+              <Plus className="h-4 w-4" />
               <span>{onboarding ? t("common.loading") : t("common.add")}</span>
             </Button>
           </form>
-        </Card>
+        </section>
       )}
 
       {activeTab === "dkim" && (
-        <Card className="max-w-3xl space-y-5">
+        <section className={`${panel} max-w-[720px]`}>
           <div>
-            <h2 className="text-lg font-bold text-white mb-1 flex items-center gap-2">
-              <KeyRound className="w-5 h-5 text-indigo-400" />
+            <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+              <KeyRound className="h-[17px] w-[17px] flex-none text-indigo-500" />
               {t("admin.dkimTitle")}
             </h2>
-            <p className="text-xs text-slate-400">
-              {selected ? selected.name : t("admin.noDomains")}
-            </p>
+            <p className="mt-1 text-[13px] text-slate-400">{selected ? selected.name : t("admin.noDomains")}</p>
           </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
-            <div>
-              <label className="font-semibold text-slate-300 mb-1.5 block">{t("admin.dkimAlgorithm")}</label>
+          <div className="flex flex-wrap gap-3">
+            <div className="min-w-[200px] flex-1">
+              <label htmlFor="dkim-algorithm" className={fieldLabel}>
+                {t("admin.dkimAlgorithm")}
+              </label>
               <select
+                id="dkim-algorithm"
                 value={dkimAlgorithm}
                 onChange={(e) => setDkimAlgorithm(e.target.value as "ed25519" | "rsa2048")}
-                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-emerald-500"
+                className={input}
               >
                 <option value="ed25519">Ed25519</option>
                 <option value="rsa2048">RSA-2048</option>
               </select>
             </div>
-            <div>
-              <label className="font-semibold text-slate-300 mb-1.5 block">{t("admin.dkimSelector")}</label>
+            <div className="min-w-[200px] flex-1">
+              <label htmlFor="dkim-selector" className={fieldLabel}>
+                {t("admin.dkimSelector")}
+              </label>
               <input
+                id="dkim-selector"
                 type="text"
                 value={dkimSelector}
                 onChange={(e) => setDkimSelector(e.target.value)}
                 pattern="[A-Za-z0-9-]{1,63}"
-                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"
+                className={`${input} font-mono`}
               />
             </div>
           </div>
 
-          <Button variant="primary" size="md" onClick={handleRotateDkim} disabled={rotating || !selected}>
-            <KeyRound className="w-4 h-4" />
+          <Button
+            variant="primary"
+            size="md"
+            className="self-start"
+            onClick={handleRotateDkim}
+            disabled={rotating || !selected}
+          >
+            <KeyRound className="h-4 w-4" />
             <span>{rotating ? t("common.loading") : t("admin.dkimRotate")}</span>
           </Button>
 
           {dkimRecord && (
-            <div className="p-4 bg-slate-900/90 rounded-xl border border-slate-800 space-y-3 text-xs">
-              <div className="font-bold text-white">{t("admin.dkimPublishRecord")}</div>
-              <div className="p-3 bg-slate-950 rounded-lg border border-slate-800 font-mono text-[11px] text-emerald-400 break-all">
+            <div className="flex flex-col gap-2">
+              <div className="text-xs text-slate-400">{t("admin.dkimPublishRecord")}</div>
+              <div className="lm-code break-all px-3.5 py-3">
                 {dkimRecord.name} IN TXT &quot;{dkimRecord.value}&quot;
               </div>
-              <div className="p-3.5 rounded-xl bg-amber-500/15 border border-amber-500/25 text-amber-300">
-                {t("admin.dkimOverlap", { days: dkimRecord.overlapDays })}
+              <div className="flex items-start gap-2.5 rounded-xl bg-dark-card px-3.5 py-3 shadow-edge">
+                <AlertTriangle className="mt-px h-4 w-4 flex-none text-amber-400" />
+                <span className="text-[12.5px] leading-relaxed text-slate-300">
+                  {t("admin.dkimOverlap", { days: dkimRecord.overlapDays })}
+                </span>
               </div>
             </div>
           )}
-        </Card>
+        </section>
       )}
     </div>
   );

services/webmail/src/app/(admin)/admin/layout.tsx

@@ -5,14 +5,13 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import {
-  LayoutDashboard,
+  Gauge,
   Globe,
   Users,
   ListOrdered,
   Activity,
   ShieldCheck,
   LogOut,
-  Sliders,
   Menu,
   X,
   Lock,
@@ -21,6 +20,7 @@ import {
 import { useTranslations } from "../../../i18n/provider";
 import { LanguageSwitcher } from "../../../i18n/LanguageSwitcher";
 import { useAccount } from "../../../lib/useAccount";
+import { initialsFor } from "../../../lib/initials";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   const t = useTranslations();
@@ -29,7 +29,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   const account = useAccount("admin");
 
   const navItems = [
-    { href: "/admin/dashboard", label: t("admin.dashboardTitle"), icon: LayoutDashboard },
+    { href: "/admin/dashboard", label: t("admin.dashboardTitle"), icon: Gauge },
     { href: "/admin/domains", label: t("admin.domainsTitle"), icon: Globe },
     { href: "/admin/mailboxes", label: t("admin.mailboxesTitle"), icon: Users },
     { href: "/admin/queue", label: t("admin.queueTitle"), icon: ListOrdered },
@@ -43,90 +43,90 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     });
   };
 
+  /* The console's rail is the webmail's rail. It used to be green where the
+     other was indigo, which made one product look like two; the only thing
+     that now says which surface you are in is the line under the brand and
+     which half of the switch is lit. */
   const SidebarContent = (
-    <div className="flex flex-col justify-between h-full p-4">
-      <div>
-        {/* Admin Surface Branding */}
-        <div className="flex items-center gap-3 px-2 mb-6">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-500 border border-emerald-400/30 flex items-center justify-center text-white font-bold shadow-lg shadow-emerald-500/20">
-            <Sliders className="w-5 h-5 text-white" />
-          </div>
-          <div>
-            <div className="font-bold text-base text-white tracking-tight">LambdaMail</div>
-            <div className="text-[10px] text-emerald-400 uppercase tracking-widest font-mono font-semibold">
-              {t("common.adminPortal")}
-            </div>
+    <div className="flex h-full flex-col gap-4 p-3">
+      <div className="flex items-center gap-2.5 px-2 py-1">
+        <div className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+          λ
+        </div>
+        <div className="min-w-0">
+          <div className="text-[15px] font-medium leading-tight">LambdaMail</div>
+          <div className="text-[10.5px] uppercase tracking-[0.08em] text-indigo-500">
+            {t("common.adminPortal")}
           </div>
         </div>
+      </div>
 
+      <nav className="flex flex-col gap-0.5">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={() => setMobileOpen(false)}
+              data-active={isActive}
+              className="lm-nav"
+            >
+              <span className="lm-nav-mark" />
+              <Icon className={`h-[17px] w-[17px] flex-none ${isActive ? "text-indigo-500" : "text-slate-400"}`} />
+              <span className="min-w-0 flex-1 text-[13.5px] leading-snug">{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="mt-auto flex flex-col gap-2.5">
         {/* Leaving the console needs no ceremony - the webmail session was
             never given up to get here, so this is a plain link back. Coming the
             other way is what costs a second factor. */}
-        <Link
-          href="/user/mail/inbox"
-          className="mb-6 flex items-center gap-2 p-2.5 rounded-xl bg-indigo-500/10 border border-indigo-500/25 text-xs font-semibold text-indigo-300 hover:border-indigo-500/50 hover:bg-indigo-500/15 transition-all"
-        >
-          <Mail className="w-4 h-4 flex-shrink-0" />
-          <span className="truncate">{t("admin.backToWebmail")}</span>
-        </Link>
+        <div className="flex gap-[3px] rounded-[10px] bg-dark-panel p-[3px] shadow-edge">
+          <Link
+            href="/user/mail/inbox"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] px-2 py-1.5 text-[12px] leading-snug text-slate-400 transition-colors hover:bg-white/[0.05] hover:text-slate-100"
+          >
+            <Mail className="h-3.5 w-3.5 flex-none" />
+            <span className="min-w-0 truncate">{t("admin.backToWebmail")}</span>
+          </Link>
+          <span className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-dark-card px-2 py-1.5 text-[12px] leading-snug text-indigo-500 shadow-edge-accent">
+            <ShieldCheck className="h-3.5 w-3.5 flex-none" />
+            <span className="min-w-0 truncate">{t("common.adminPortal")}</span>
+          </span>
+        </div>
 
-        {/* Admin Navigation */}
-        <nav className="space-y-1 text-sm font-medium">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = pathname === item.href;
+        <div className="flex items-center gap-2.5 rounded-xl bg-dark-panel p-2.5 shadow-edge">
+          <span className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-full bg-indigo-900 text-[12px] uppercase text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]">
+            {initialsFor(account?.email)}
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block break-words text-[12.5px] leading-tight">
+              {account?.email ?? t("common.loading")}
+            </span>
+            <span className="mt-0.5 flex items-center gap-1 text-[10.5px] text-slate-400">
+              <Lock className="h-3 w-3 flex-none text-indigo-500" />
+              {account?.role ?? ""}
+            </span>
+          </span>
+        </div>
 
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all duration-150 ${
-                  isActive
-                    ? "bg-emerald-500/15 text-emerald-300 border border-emerald-500/30 shadow-sm"
-                    : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/40 border border-transparent"
-                }`}
-              >
-                <Icon className={`w-4 h-4 ${isActive ? "text-emerald-400" : "text-slate-400"}`} />
-                <span>{item.label}</span>
-              </Link>
-            );
-          })}
-        </nav>
-      </div>
-
-      {/* Language and session controls */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between gap-2 p-2 rounded-xl bg-slate-900/60 border border-slate-800/80">
+        <div className="flex items-center gap-1.5">
           <LanguageSwitcher />
           <button
             type="button"
             onClick={handleLogout}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-slate-700/80 text-xs font-medium text-slate-300 hover:text-rose-400 hover:border-rose-500/40 hover:bg-rose-500/10 transition-all"
+            title={t("settings.signOut")}
+            aria-label={t("settings.signOut")}
+            className="flex h-8 w-8 flex-none items-center justify-center rounded-[9px] border border-white/[0.14] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
           >
-            <LogOut className="w-3.5 h-3.5" />
-            <span>{t("settings.signOut")}</span>
+            <LogOut className="h-[15px] w-[15px]" />
           </button>
         </div>
-
-        {/* Operator Profile Footer */}
-        <div className="pt-3 border-t border-slate-800/80">
-          <div className="flex items-center justify-between p-2.5 rounded-xl bg-slate-900 border border-slate-800">
-            <div className="flex items-center gap-2.5 min-w-0">
-              <div className="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 flex items-center justify-center font-bold text-xs flex-shrink-0 uppercase">
-                {account?.email?.[0] ?? "?"}
-              </div>
-              <div className="truncate">
-                <div className="text-xs font-semibold text-slate-200 truncate">
-                  {account?.email ?? t("common.loading")}
-                </div>
-                <div className="text-[10px] text-emerald-400 font-mono flex items-center gap-1">
-                  <Lock className="w-3 h-3" />
-                  {account?.role ?? ""}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   );
@@ -134,25 +134,27 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   return (
     <div className="flex h-screen overflow-hidden bg-dark-bg text-slate-100">
       {/* Mobile Top Header */}
-      <div className="md:hidden flex items-center justify-between p-4 border-b border-slate-800 bg-slate-900/90 z-20 w-full fixed top-0 left-0">
-        <div className="flex items-center gap-2">
-          <div className="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center text-white font-bold">
-            <Sliders className="w-4 h-4" />
+      <div className="fixed left-0 top-0 z-20 flex w-full items-center justify-between bg-dark-rail px-4 py-3 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.09)] md:hidden">
+        <div className="flex min-w-0 items-center gap-2.5">
+          <div className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+            λ
           </div>
-          <span className="font-bold text-slate-100">{t("common.appName")} {t("common.adminPortal")}</span>
+          <span className="min-w-0 truncate font-medium text-slate-100">
+            {t("common.appName")} {t("common.adminPortal")}
+          </span>
         </div>
         <button
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label={t("ui.toggleMenu")}
           aria-expanded={mobileOpen}
-          className="p-2 rounded-lg bg-slate-800 text-slate-300 hover:text-white"
+          className="flex h-9 w-9 flex-none items-center justify-center rounded-[10px] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-slate-100"
         >
-          {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </button>
       </div>
 
-      {/* Desktop Executive Sidebar */}
-      <aside className="hidden md:flex w-64 border-r border-emerald-950/60 bg-slate-900/70 backdrop-blur-xl flex-col flex-shrink-0">
+      {/* Desktop rail */}
+      <aside className="hidden w-[244px] flex-none flex-col bg-dark-rail shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:flex">
         {SidebarContent}
       </aside>
 
@@ -164,7 +166,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
             animate={{ x: 0 }}
             exit={{ x: "-100%" }}
             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-            className="fixed inset-0 z-30 bg-slate-950 w-72 border-r border-slate-800 pt-16 md:hidden"
+            className="fixed inset-y-0 left-0 z-30 w-[280px] overflow-y-auto bg-dark-rail pt-14 shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:hidden"
           >
             {SidebarContent}
           </motion.aside>
@@ -172,7 +174,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
       </AnimatePresence>
 
       {/* Main Content Area */}
-      <main className="flex-1 flex flex-col overflow-y-auto pt-16 md:pt-0 bg-dark-bg">
+      <main className="flex flex-1 flex-col overflow-y-auto bg-dark-bg pt-14 md:pt-0">
         {children}
       </main>
     </div>

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

@@ -16,8 +16,8 @@ import {
   CheckCircle2,
 } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
-import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
 import { Badge } from "../../../../components/ui/Badge";
+import { initialsFor } from "../../../../lib/initials";
 import { Button } from "../../../../components/ui/Button";
 
 interface Mailbox {
@@ -213,12 +213,12 @@ export default function AdminMailboxesPage() {
       });
       const data = await res.json().catch(() => ({}));
       if (res.ok) {
-        setCsvSuccessMessage(`Imported ${data.imported ?? csvPreview.length} mailboxes.`);
+        setCsvSuccessMessage(t("admin.csvImported", { count: data.imported ?? csvPreview.length }));
         setCsvText("");
         setCsvPreview([]);
         await load();
       } else {
-        setError(data.message ?? "Falha ao importar CSV");
+        setError(data.message ?? t("admin.csvImportFailed"));
       }
     } catch {
       setError(t("errors.serverError"));
@@ -226,367 +226,392 @@ export default function AdminMailboxesPage() {
     setTimeout(() => setCsvSuccessMessage(null), 4000);
   };
 
+  /* The tab labels, the lock buttons and the two-factor and lock states used to
+     be literal strings - some Portuguese, some English - so half this screen
+     stayed in one language whatever the interface was set to. They all come
+     from the bundle now. */
+  const tabs = [
+    { id: "mailboxes" as const, label: `${t("admin.tabAccounts")} (${mailboxes.length})`, icon: Users },
+    { id: "aliases" as const, label: `${t("admin.tabAliases")} (${aliases.length})`, icon: Mail },
+    { id: "csv" as const, label: t("admin.tabCsv"), icon: FileSpreadsheet },
+  ];
+
+  const mfaPolicies = [
+    { id: "optional" as const, label: t("admin.mfaOptional") },
+    { id: "required_admins" as const, label: t("admin.mfaAdmins") },
+    { id: "required_all" as const, label: t("admin.mfaEveryone") },
+  ];
+
+  const panel = "flex flex-col gap-4 rounded-2xl bg-dark-panel p-[18px] shadow-edge";
+  const input =
+    "w-full min-h-[36px] rounded-[10px] bg-dark-card px-3 py-2 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
+  const fieldLabel = "mb-1.5 block text-xs text-slate-400";
+  const iconButton =
+    "flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-slate-100";
+
   return (
-    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto">
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-[18px] px-5 pb-11 pt-7 sm:px-8">
       {/* Header & Tabs */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
-            {t("admin.mailboxesTitle")}
-          </h1>
-          <p className="text-sm text-slate-400 mt-1">
-            {t("admin.mailboxesSubtitle")}
-          </p>
-        </div>
+      <div>
+        <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("admin.mailboxesTitle")}</h1>
+        <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.mailboxesSubtitle")}</p>
+      </div>
 
-        {/* Tab Selection Navigation */}
-        <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">
-          <button
-            onClick={() => setActiveTab("mailboxes")}
-            className={`flex items-center gap-2 px-3.5 py-2 rounded-lg transition-all ${
-              activeTab === "mailboxes"
-                ? "bg-emerald-600 text-white shadow-sm"
-                : "text-slate-400 hover:text-slate-200"
-            }`}
-          >
-            <Users className="w-3.5 h-3.5" />
-            <span>Contas ({mailboxes.length})</span>
-          </button>
-
-          <button
-            onClick={() => setActiveTab("aliases")}
-            className={`flex items-center gap-2 px-3.5 py-2 rounded-lg transition-all ${
-              activeTab === "aliases"
-                ? "bg-emerald-600 text-white shadow-sm"
-                : "text-slate-400 hover:text-slate-200"
-            }`}
-          >
-            <Mail className="w-3.5 h-3.5" />
-            <span>Aliases ({aliases.length})</span>
-          </button>
-
-          <button
-            onClick={() => setActiveTab("csv")}
-            className={`flex items-center gap-2 px-3.5 py-2 rounded-lg transition-all ${
-              activeTab === "csv"
-                ? "bg-emerald-600 text-white shadow-sm"
-                : "text-slate-400 hover:text-slate-200"
-            }`}
-          >
-            <FileSpreadsheet className="w-3.5 h-3.5" />
-            <span>CSV</span>
-          </button>
-        </div>
+      <div className="lm-tabstrip self-start">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              data-active={activeTab === tab.id}
+              aria-pressed={activeTab === tab.id}
+              className="lm-tab"
+            >
+              <Icon className="h-[15px] w-[15px] flex-none" />
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
       </div>
 
       {error && (
-        <div className="p-4 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-sm flex items-center gap-3">
-          <AlertCircle className="w-5 h-5 text-rose-400 flex-shrink-0" />
+        <div className="flex items-center gap-2.5 rounded-xl bg-rose-900/60 px-4 py-3 text-[12.5px] leading-relaxed text-rose-200 shadow-edge">
+          <AlertCircle className="h-4 w-4 flex-none" />
           <span>{error}</span>
         </div>
       )}
 
       {/* Domain MFA Policy Panel */}
-      <Card>
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <div>
-            <h2 className="text-sm font-bold text-slate-100 flex items-center gap-2">
-              <ShieldCheck className="w-4 h-4 text-emerald-400" />
-              {t("admin.mfaPolicyTitle")}
-            </h2>
-            <p className="text-xs text-slate-400 mt-0.5">
-              {t("admin.mfaPolicyIntro")}
-            </p>
-          </div>
-
-          <div className="flex gap-2 text-xs">
-            <button
-              onClick={() => setMfaPolicy("optional")}
-              className={`px-3 py-1.5 rounded-lg border font-medium transition-all ${
-                mfaPolicy === "optional"
-                  ? "bg-slate-800 border-slate-600 text-white"
-                  : "border-slate-800 text-slate-400 hover:text-slate-200"
-              }`}
-            >
-              {t("admin.mfaOptional")}
-            </button>
-            <button
-              onClick={() => setMfaPolicy("required_admins")}
-              className={`px-3 py-1.5 rounded-lg border font-medium transition-all ${
-                mfaPolicy === "required_admins"
-                  ? "bg-emerald-600/20 border-emerald-500 text-emerald-300"
-                  : "border-slate-800 text-slate-400 hover:text-slate-200"
-              }`}
-            >
-              {t("admin.mfaAdmins")}
-            </button>
-            <button
-              onClick={() => setMfaPolicy("required_all")}
-              className={`px-3 py-1.5 rounded-lg border font-medium transition-all ${
-                mfaPolicy === "required_all"
-                  ? "bg-indigo-600/20 border-indigo-500 text-indigo-300"
-                  : "border-slate-800 text-slate-400 hover:text-slate-200"
-              }`}
-            >
-              {t("admin.mfaEveryone")}
-            </button>
+      <div className="flex flex-wrap items-center gap-3.5 rounded-2xl bg-dark-panel px-[18px] py-4 shadow-edge">
+        <div className="min-w-[240px] flex-1">
+          <div className="flex items-center gap-2 text-[15px] font-medium leading-snug text-slate-100">
+            <ShieldCheck className="h-4 w-4 flex-none text-indigo-500" />
+            {t("admin.mfaPolicyTitle")}
           </div>
+          <p className="mt-1 text-[12.5px] leading-relaxed text-slate-400">{t("admin.mfaPolicyIntro")}</p>
         </div>
-      </Card>
+
+        {/* One segmented control instead of three buttons in three different
+            colours: these are three values of one setting, not three actions. */}
+        <div className="flex flex-none flex-wrap gap-[3px] rounded-[10px] bg-dark-card p-[3px] shadow-edge">
+          {mfaPolicies.map((policy) => (
+            <button
+              key={policy.id}
+              type="button"
+              onClick={() => setMfaPolicy(policy.id)}
+              aria-pressed={mfaPolicy === policy.id}
+              className={`rounded-lg px-3 py-1.5 text-[12.5px] leading-snug transition-colors ${
+                mfaPolicy === policy.id
+                  ? "text-indigo-500 shadow-edge-accent"
+                  : "text-slate-400 hover:text-slate-100"
+              }`}
+            >
+              {policy.label}
+            </button>
+          ))}
+        </div>
+      </div>
 
       {/* TAB 1: MAILBOXES */}
       {activeTab === "mailboxes" && (
-        <div className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-sm">
-                <Plus className="w-4 h-4 text-emerald-400" />
-                {t("ui.provisionMailbox")}
-              </CardTitle>
-            </CardHeader>
-            <form onSubmit={handleCreateMailbox} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 text-xs">
-              <input
-                type="email"
-                value={newEmail}
-                onChange={(e) => setNewEmail(e.target.value)}
-                placeholder="nova.conta@domain.com"
-                required
-                className="px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
-              />
-              <input
-                type="password"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                placeholder={t("ui.newPassword")}
-                minLength={12}
-                required
-                className="px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
-              />
-              <select
-                value={newRole}
-                onChange={(e) => setNewRole(e.target.value)}
-                className="px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-emerald-500"
-              >
-                <option value="USER">USER</option>
-                <option value="DOMAIN_ADMIN">DOMAIN_ADMIN</option>
-                <option value="SUPER_ADMIN">SUPER_ADMIN</option>
-              </select>
-              <input
-                type="number"
-                value={newQuota}
-                onChange={(e) => setNewQuota(parseInt(e.target.value, 10))}
-                placeholder={t("ui.storageQuota")}
-                className="px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-emerald-500"
-              />
-              <Button type="submit" variant="primary" size="md">
-                {t("admin.createAccount")}
+        <div className="flex flex-col gap-3.5">
+          <section className={panel}>
+            <h2 className="text-[17px] font-medium leading-tight text-slate-100">
+              {t("ui.provisionMailbox")}
+            </h2>
+            <form onSubmit={handleCreateMailbox} className="flex flex-wrap items-end gap-2.5">
+              <div className="min-w-[220px] flex-[2]">
+                <label htmlFor="new-email" className={fieldLabel}>
+                  {t("ui.emailAddress")}
+                </label>
+                <input
+                  id="new-email"
+                  type="email"
+                  value={newEmail}
+                  onChange={(e) => setNewEmail(e.target.value)}
+                  placeholder="nova.conta@domain.com"
+                  required
+                  className={input}
+                />
+              </div>
+              <div className="min-w-[180px] flex-1">
+                <label htmlFor="new-mailbox-password" className={fieldLabel}>
+                  {t("ui.newPassword")}
+                </label>
+                <input
+                  id="new-mailbox-password"
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  minLength={12}
+                  required
+                  className={input}
+                />
+              </div>
+              <div className="min-w-[160px] flex-1">
+                <label htmlFor="new-role" className={fieldLabel}>
+                  {t("ui.role")}
+                </label>
+                <select
+                  id="new-role"
+                  value={newRole}
+                  onChange={(e) => setNewRole(e.target.value)}
+                  className={input}
+                >
+                  <option value="USER">USER</option>
+                  <option value="DOMAIN_ADMIN">DOMAIN_ADMIN</option>
+                  <option value="SUPER_ADMIN">SUPER_ADMIN</option>
+                </select>
+              </div>
+              <div className="min-w-[130px] flex-1">
+                <label htmlFor="new-quota" className={fieldLabel}>
+                  {t("admin.quotaMb")}
+                </label>
+                <input
+                  id="new-quota"
+                  type="number"
+                  value={newQuota}
+                  onChange={(e) => setNewQuota(parseInt(e.target.value, 10))}
+                  className={input}
+                />
+              </div>
+              <Button type="submit" variant="primary" size="md" className="flex-none">
+                <Plus className="h-4 w-4" />
+                <span>{t("admin.createAccount")}</span>
               </Button>
             </form>
-          </Card>
-
-          <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 flex items-center justify-between">
-              <span>Contas Cadastradas ({mailboxes.length})</span>
-            </div>
+          </section>
 
+          <div className="rounded-2xl bg-dark-panel px-[18px] pb-3 pt-1.5 shadow-edge">
             <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse text-xs">
+              <table className="lm-table">
                 <thead>
-                  <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                    <th className="p-3.5">{t("ui.emailAddress")}</th>
-                    <th className="p-3.5">{t("ui.accountStatus")}</th>
-                    <th className="p-3.5">{t("ui.storageQuota")}</th>
-                    <th className="p-3.5">{t("ui.twoFactorSection")}</th>
-                    <th className="p-3.5">{t("ui.accountStatus")}</th>
-                    <th className="p-3.5">{t("ui.actions")}</th>
+                  <tr>
+                    <th className="pl-0">{t("ui.emailAddress")}</th>
+                    <th>{t("ui.role")}</th>
+                    <th>{t("ui.storageQuota")}</th>
+                    <th>{t("ui.twoFactorSection")}</th>
+                    <th>{t("ui.accountStatus")}</th>
+                    <th className="pr-0 text-right">{t("ui.actions")}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-slate-800/60 font-mono">
+                <tbody>
                   {mailboxes.map((mb) => (
-                    <tr key={mb.id} className="hover:bg-slate-900/40 transition-colors">
-                      <td className="p-3.5 font-bold text-slate-100">{mb.email}</td>
-                      <td className="p-3.5 text-slate-300">
-                        <Badge variant="neutral">{mb.role}</Badge>
+                    <tr key={mb.id}>
+                      <td className="pl-0">
+                        <div className="flex items-center gap-2.5">
+                          <span className="flex h-7 w-7 flex-none items-center justify-center rounded-full bg-indigo-900 text-[11px] uppercase text-indigo-300">
+                            {initialsFor(mb.email)}
+                          </span>
+                          <span className="break-words text-[13.5px] text-slate-100">{mb.email}</span>
+                        </div>
                       </td>
-                      <td className="p-3.5">
-                        <div className="flex items-center gap-2">
-                          <div className="w-24 h-2 bg-slate-800 rounded-full overflow-hidden">
-                            <div
-                              className="h-full bg-emerald-500 rounded-full"
-                              style={{ width: `${Math.min((mb.storageUsedMb / (mb.quotaMb || 1)) * 100, 100)}%` }}
+                      <td>
+                        <Badge variant="neutral" className="whitespace-nowrap">
+                          {mb.role}
+                        </Badge>
+                      </td>
+                      <td>
+                        <div className="flex min-w-[150px] items-center gap-2.5">
+                          <span className="block h-1.5 flex-1 overflow-hidden rounded-full bg-dark-card">
+                            <span
+                              className="block h-full rounded-full bg-indigo-500"
+                              style={{
+                                width: `${Math.min((mb.storageUsedMb / (mb.quotaMb || 1)) * 100, 100)}%`,
+                              }}
                             />
-                          </div>
-                          <span className="text-[10px] text-slate-400">
-                            {mb.storageUsedMb}MB / {mb.quotaMb}MB
+                          </span>
+                          <span className="whitespace-nowrap text-[11.5px] tabular-nums text-slate-400">
+                            {mb.storageUsedMb} / {mb.quotaMb} MB
                           </span>
                         </div>
                       </td>
-                      <td className="p-3.5">
-                        <Badge variant={mb.mfaEnabled ? "success" : "warning"}>
-                          {mb.mfaEnabled ? "TOTP ATIVO" : "SEM 2FA"}
+                      <td>
+                        <Badge variant={mb.mfaEnabled ? "success" : "warning"} className="whitespace-nowrap">
+                          {mb.mfaEnabled ? t("ui.mfaActive") : t("ui.mfaNone")}
                         </Badge>
                       </td>
-                      <td className="p-3.5">
-                        <Badge variant={mb.locked ? "danger" : "success"}>
-                          {mb.locked ? "BLOQUEADA" : t("ui.active")}
+                      <td>
+                        <Badge variant={mb.locked ? "danger" : "info"} className="whitespace-nowrap">
+                          {mb.locked ? t("ui.accountLocked") : t("ui.active")}
                         </Badge>
                       </td>
-                      <td className="p-3.5 flex items-center gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
+                      <td className="whitespace-nowrap pr-0 text-right">
+                        <button
+                          type="button"
                           onClick={() => void handleToggleLock(mb.id, mb.locked)}
+                          title={mb.locked ? t("admin.unlockAccount") : t("admin.lockAccount")}
+                          aria-label={mb.locked ? t("admin.unlockAccount") : t("admin.lockAccount")}
+                          className={`${iconButton} inline-flex`}
                         >
-                          {mb.locked ? <Unlock className="w-3 h-3" /> : <Lock className="w-3 h-3" />}
-                          <span>{mb.locked ? "Desbloquear" : "Bloquear"}</span>
-                        </Button>
-                        <Button
-                          variant="danger"
-                          size="sm"
+                          {mb.locked ? <Unlock className="h-[15px] w-[15px]" /> : <Lock className="h-[15px] w-[15px]" />}
+                        </button>
+                        <button
+                          type="button"
                           onClick={() => void handleDeleteMailbox(mb.id)}
+                          title={t("common.delete")}
+                          aria-label={t("common.delete")}
+                          className={`${iconButton} inline-flex hover:text-rose-400`}
                         >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
+                          <Trash2 className="h-[15px] w-[15px]" />
+                        </button>
                       </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
-          </Card>
+          </div>
         </div>
       )}
 
       {/* TAB 2: ALIASES */}
       {activeTab === "aliases" && (
-        <div className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-sm">
-                <Plus className="w-4 h-4 text-emerald-400" />
-                {t("admin.createAlias")}
-              </CardTitle>
-            </CardHeader>
-            <form onSubmit={handleCreateAlias} className="flex flex-col sm:flex-row gap-3 text-xs">
-              <input
-                type="email"
-                value={newAliasAddr}
-                onChange={(e) => setNewAliasAddr(e.target.value)}
-                placeholder="alias@domain.com"
-                required
-                className="flex-1 px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
-              />
-              <input
-                type="email"
-                value={newTargetAddr}
-                onChange={(e) => setNewTargetAddr(e.target.value)}
-                placeholder="destino@domain.com"
-                required
-                className="flex-1 px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500"
-              />
-              <Button type="submit" variant="primary" size="md">
+        <div className="flex flex-col gap-3.5">
+          <section className={panel}>
+            <h2 className="text-[17px] font-medium leading-tight text-slate-100">{t("admin.createAlias")}</h2>
+            <form onSubmit={handleCreateAlias} className="flex flex-wrap items-end gap-3">
+              <div className="min-w-[220px] flex-1">
+                <label htmlFor="new-alias" className={fieldLabel}>
+                  {t("admin.aliasesTitle")}
+                </label>
+                <input
+                  id="new-alias"
+                  type="email"
+                  value={newAliasAddr}
+                  onChange={(e) => setNewAliasAddr(e.target.value)}
+                  placeholder="alias@domain.com"
+                  required
+                  className={input}
+                />
+              </div>
+              <ArrowRight className="mb-2.5 h-[18px] w-[18px] flex-none text-slate-500" />
+              <div className="min-w-[220px] flex-1">
+                <label htmlFor="new-alias-target" className={fieldLabel}>
+                  {t("admin.aliasTarget")}
+                </label>
+                <input
+                  id="new-alias-target"
+                  type="email"
+                  value={newTargetAddr}
+                  onChange={(e) => setNewTargetAddr(e.target.value)}
+                  placeholder="destino@domain.com"
+                  required
+                  className={input}
+                />
+              </div>
+              <Button type="submit" variant="primary" size="md" className="flex-none">
                 {t("admin.addAlias")}
               </Button>
             </form>
-          </Card>
-
-          <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">
-              Aliases de Roteamento ({aliases.length})
-            </div>
+          </section>
 
+          <div className="rounded-2xl bg-dark-panel px-[18px] pb-3 pt-1.5 shadow-edge">
             <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse text-xs">
+              <table className="lm-table">
                 <thead>
-                  <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                    <th className="p-3.5">{t("ui.emailAddress")}</th>
-                    <th className="p-3.5">{t("ui.destination")}</th>
-                    <th className="p-3.5">{t("admin.domainsTitle")}</th>
-                    <th className="p-3.5">{t("ui.actions")}</th>
+                  <tr>
+                    <th className="pl-0">{t("admin.aliasesTitle")}</th>
+                    <th>{t("ui.destination")}</th>
+                    <th>{t("admin.domainsTitle")}</th>
+                    <th className="pr-0 text-right">{t("ui.actions")}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-slate-800/60 font-mono">
+                <tbody>
                   {aliases.map((al) => (
-                    <tr key={al.id} className="hover:bg-slate-900/40 transition-colors">
-                      <td className="p-3.5 font-bold text-emerald-400">{al.aliasAddress}</td>
-                      <td className="p-3.5 text-slate-200 flex items-center gap-2">
-                        <ArrowRight className="w-3.5 h-3.5 text-slate-500" />
-                        <span>{al.targetAddress}</span>
-                      </td>
-                      <td className="p-3.5 text-slate-400">{al.domain}</td>
-                      <td className="p-3.5">
-                        <Button
-                          variant="danger"
-                          size="sm"
+                    <tr key={al.id}>
+                      <td className="break-words pl-0 text-[13.5px] text-slate-100">{al.aliasAddress}</td>
+                      <td className="break-words text-[13px] text-slate-300">{al.targetAddress}</td>
+                      <td className="text-[13px] text-slate-400">{al.domain}</td>
+                      <td className="pr-0 text-right">
+                        <button
+                          type="button"
                           onClick={() => void handleDeleteAlias(al.id)}
+                          title={t("common.delete")}
+                          aria-label={t("common.delete")}
+                          className={`${iconButton} inline-flex hover:text-rose-400`}
                         >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
+                          <Trash2 className="h-[15px] w-[15px]" />
+                        </button>
                       </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
-          </Card>
+          </div>
         </div>
       )}
 
       {/* TAB 3: CSV BULK IMPORT */}
       {activeTab === "csv" && (
-        <Card className="space-y-4">
-          <div>
-            <h2 className="text-base font-bold text-white flex items-center gap-2 mb-1">
-              <Upload className="w-5 h-5 text-indigo-400" />
-              Bulk mailbox import (CSV)
-            </h2>
-            <p className="text-xs text-slate-400">
-              Paste CSV to provision several accounts with their RFC 6154 folders. Format: <code>email, role, quota_mb</code>
-            </p>
-          </div>
-
-          {csvSuccessMessage && (
-            <div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
-              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
-              <span>{csvSuccessMessage}</span>
+        <div className="flex flex-wrap gap-3.5">
+          <section className={`${panel} min-w-[320px] flex-1`}>
+            <div>
+              <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+                <Upload className="h-[17px] w-[17px] flex-none text-indigo-500" />
+                {t("admin.csvTitle")}
+              </h2>
+              <p className="mt-1 text-[13px] leading-relaxed text-slate-400">{t("admin.csvIntro")}</p>
             </div>
-          )}
 
-          <textarea
-            rows={6}
-            value={csvText}
-            onChange={(e) => setCsvText(e.target.value)}
-            placeholder={`email,role,quota_mb\nalice@example.com,USER,5000\nbob@example.com,DOMAIN_ADMIN,2000`}
-            className="w-full px-4 py-3 rounded-xl bg-slate-900/90 border border-slate-800 font-mono text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-emerald-500"
-          />
-
-          <div className="flex gap-3">
-            <Button variant="secondary" size="md" onClick={handleParseCsv}>
-              {t("admin.csvPreview")}
-            </Button>
-
-            {csvPreview.length > 0 && (
-              <Button variant="primary" size="md" onClick={handleExecuteCsvImport}>
-                Run import ({csvPreview.length} Contas)
-              </Button>
+            {csvSuccessMessage && (
+              <div className="flex items-center gap-2 rounded-xl bg-dark-card px-3.5 py-3 text-[12.5px] text-slate-200 shadow-edge">
+                <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
+                <span>{csvSuccessMessage}</span>
+              </div>
             )}
-          </div>
+
+            <textarea
+              rows={8}
+              value={csvText}
+              onChange={(e) => setCsvText(e.target.value)}
+              aria-label={t("admin.csvTitle")}
+              placeholder={`email,role,quota_mb\nalice@example.com,USER,5000\nbob@example.com,DOMAIN_ADMIN,2000`}
+              className="lm-code w-full px-4 py-3 text-slate-200 placeholder-slate-600 focus:outline-none focus-visible:shadow-edge-accent"
+            />
+
+            <div className="flex flex-wrap gap-2">
+              <Button variant="secondary" size="md" onClick={handleParseCsv}>
+                {t("admin.csvPreview")}
+              </Button>
+              {csvPreview.length > 0 && (
+                <Button variant="primary" size="md" onClick={handleExecuteCsvImport}>
+                  {t("admin.csvRun")} ({csvPreview.length})
+                </Button>
+              )}
+            </div>
+          </section>
 
           {csvPreview.length > 0 && (
-            <div className="mt-4 border border-slate-800 rounded-xl overflow-hidden bg-slate-950 p-4 space-y-2">
-              <h3 className="font-bold text-xs text-white">Preview ({csvPreview.length} linhas)</h3>
-              <div className="divide-y divide-slate-800/80 font-mono text-[11px]">
+            <section className={`${panel} min-w-[300px] flex-1`}>
+              <div className="flex items-center justify-between gap-2.5">
+                <h3 className="text-[17px] font-medium leading-tight text-slate-100">
+                  {t("admin.csvPreview")}
+                </h3>
+                <Badge variant="neutral">{csvPreview.length}</Badge>
+              </div>
+              <div className="flex flex-col gap-2">
                 {csvPreview.map((row, idx) => (
-                  <div key={idx} className="py-2 flex justify-between items-center">
-                    <span className="text-emerald-400">{row.email}</span>
-                    <Badge variant="neutral">{row.role}</Badge>
-                    <span className="text-slate-400">Cota: {row.quotaMb} MB</span>
+                  <div
+                    key={idx}
+                    className="flex flex-wrap items-center gap-2.5 rounded-xl bg-dark-card px-3 py-2.5 shadow-edge"
+                  >
+                    <span className="min-w-0 flex-1 break-words text-[13px] text-slate-100">{row.email}</span>
+                    <Badge variant="neutral" className="flex-none whitespace-nowrap">
+                      {row.role}
+                    </Badge>
+                    <span className="flex-none whitespace-nowrap text-[11.5px] tabular-nums text-slate-400">
+                      {row.quotaMb} MB
+                    </span>
                   </div>
                 ))}
               </div>
-            </div>
+            </section>
           )}
-        </Card>
+        </div>
       )}
     </div>
   );

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

@@ -3,6 +3,8 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { RefreshCw } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
+import { Badge } from "../../../../components/ui/Badge";
+import { Button } from "../../../../components/ui/Button";
 
 /**
  * The outbound queue, read from the database.
@@ -33,11 +35,17 @@ interface QueueSummary {
   recent: QueueJob[];
 }
 
-/** Only failure states earn a warning colour; the rest are ordinary progress. */
-function statusClass(status: string): string {
-  if (status === "BOUNCED" || status === "FROZEN") return "badge-danger";
-  if (status === "DEFERRED") return "badge-warning";
-  return "badge-verified";
+/**
+ * Only failure states earn a warning colour; the rest are ordinary progress.
+ *
+ * These used to return "badge-danger", "badge-warning" and "badge-verified" -
+ * three class names no stylesheet in this project ever defined, so every status
+ * rendered as unstyled text. They are Badge variants now, which exist.
+ */
+function statusVariant(status: string): "danger" | "warning" | "neutral" {
+  if (status === "BOUNCED" || status === "FROZEN") return "danger";
+  if (status === "DEFERRED") return "warning";
+  return "neutral";
 }
 
 export default function AdminQueuePage() {
@@ -92,21 +100,16 @@ export default function AdminQueuePage() {
   const jobs = summary?.recent ?? [];
 
   return (
-    <div className="p-6 md:p-8 space-y-6 max-w-7xl mx-auto">
-      <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.queueTitle")}</h1>
-          <p className="text-xs text-slate-400">{t("admin.queueSubtitle")}</p>
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-[18px] px-5 pb-11 pt-7 sm:px-8">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="min-w-0">
+          <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("admin.queueTitle")}</h1>
+          <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.queueSubtitle")}</p>
         </div>
-        <button
-          type="button"
-          onClick={() => void load()}
-          disabled={loading}
-          className="flex items-center gap-2 self-start rounded-xl border border-slate-700 px-3.5 py-2 text-xs font-medium text-slate-300 transition-colors hover:border-emerald-500/50 hover:text-white disabled:opacity-50"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
+        <Button variant="secondary" size="sm" onClick={() => void load()} disabled={loading}>
+          <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
           <span>{t("common.refresh")}</span>
-        </button>
+        </Button>
       </div>
 
       {/* Counts per status, straight from the by_status aggregate. */}
@@ -115,80 +118,67 @@ export default function AdminQueuePage() {
           {Object.entries(summary.by_status).map(([status, count]) => (
             <span
               key={status}
-              className="rounded-lg border border-slate-800 bg-slate-900/70 px-3 py-1.5 text-xs text-slate-300"
+              className="flex items-center gap-2.5 rounded-xl bg-dark-panel px-3.5 py-2.5 shadow-edge"
             >
-              <span className="font-mono font-bold text-white">{count}</span> {status}
+              <span className="text-[19px] font-medium leading-none tabular-nums text-slate-100">{count}</span>
+              <span className="text-xs text-slate-400">{status}</span>
             </span>
           ))}
         </div>
       )}
 
       {message && (
-        <div className="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
-          {message}
-        </div>
+        <div className="rounded-xl bg-dark-card px-4 py-3 text-[12.5px] text-slate-200 shadow-edge">{message}</div>
       )}
       {error && (
-        <div className="p-4 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs">
-          {error}
-        </div>
+        <div className="rounded-xl bg-rose-900/60 px-4 py-3 text-[12.5px] text-rose-200 shadow-edge">{error}</div>
       )}
 
-      <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">
-          {t("admin.queueTitle")} ({jobs.length})
-        </div>
-
+      <div className="rounded-2xl bg-dark-panel px-[18px] pb-3 pt-1.5 shadow-edge">
         {jobs.length === 0 && !loading ? (
-          <div className="p-8 text-center text-xs text-slate-500">{t("admin.queueEmpty")}</div>
+          <div className="p-8 text-center text-[13px] text-slate-400">{t("admin.queueEmpty")}</div>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-left border-collapse text-xs">
+            <table className="lm-table">
               <thead>
-                <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                  <th className="p-3">{t("ui.jobId")}</th>
-                  <th className="p-3">{t("ui.sender")}</th>
-                  <th className="p-3">{t("ui.recipient")}</th>
-                  <th className="p-3">{t("ui.destination")}</th>
-                  <th className="p-3">{t("ui.attempts")}</th>
-                  <th className="p-3">{t("ui.lastError")}</th>
-                  <th className="p-3">{t("common.status")}</th>
-                  <th className="p-3">{t("ui.actions")}</th>
+                <tr>
+                  <th className="pl-0">{t("ui.jobId")}</th>
+                  <th>{t("ui.sender")}</th>
+                  <th>{t("ui.recipient")}</th>
+                  <th>{t("ui.destination")}</th>
+                  <th>{t("ui.attempts")}</th>
+                  <th>{t("ui.lastError")}</th>
+                  <th>{t("common.status")}</th>
+                  <th className="pr-0 text-right">{t("ui.actions")}</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-800/60 font-mono">
+              <tbody>
                 {jobs.map((j) => (
-                  <tr key={j.id} className="hover:bg-slate-900/30">
-                    <td className="p-3 font-bold text-slate-200">{j.id.slice(0, 8)}</td>
-                    <td className="p-3 text-slate-300">{j.envelope_from}</td>
-                    <td className="p-3 text-slate-300">{j.envelope_to}</td>
-                    <td className="p-3 text-emerald-400">{j.destination_domain}</td>
-                    <td className="p-3 text-slate-400">{j.attempt}</td>
-                    <td className="p-3 text-slate-400 truncate max-w-xs" title={j.last_error ?? ""}>
+                  <tr key={j.id}>
+                    <td className="pl-0 font-mono text-[12.5px] text-slate-100">{j.id.slice(0, 8)}</td>
+                    <td className="max-w-[180px] break-words text-[12.5px] text-slate-300">{j.envelope_from}</td>
+                    <td className="max-w-[180px] break-words text-[12.5px] text-slate-300">{j.envelope_to}</td>
+                    <td className="break-words text-[12.5px] text-slate-300">{j.destination_domain}</td>
+                    <td className="whitespace-nowrap text-[12.5px] tabular-nums text-slate-300">{j.attempt}</td>
+                    {/* The diagnostic wraps instead of being truncated: a queue
+                        screen exists to show why a message did not leave. */}
+                    <td className="max-w-[250px] text-xs leading-relaxed text-slate-400">
                       {j.last_error
                         ? `${j.last_smtp_code ? `${j.last_smtp_code} ` : ""}${j.last_error}`
                         : t("common.none")}
                     </td>
-                    <td className="p-3">
-                      <span className={`${statusClass(j.status)} px-2 py-0.5 rounded text-[10px]`}>
+                    <td>
+                      <Badge variant={statusVariant(j.status)} className="whitespace-nowrap">
                         {j.status}
-                      </span>
+                      </Badge>
                     </td>
-                    <td className="p-3 flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => void act(j.id, "retry")}
-                        className="px-2 py-1 rounded bg-indigo-600/20 hover:bg-indigo-600/30 text-indigo-300 text-[10px] font-bold"
-                      >
+                    <td className="whitespace-nowrap pr-0 text-right">
+                      <Button variant="secondary" size="sm" onClick={() => void act(j.id, "retry")}>
                         {t("admin.retryJob")}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => void act(j.id, "cancel")}
-                        className="px-2 py-1 rounded bg-red-600/20 hover:bg-red-600/30 text-red-300 text-[10px] font-bold"
-                      >
+                      </Button>{" "}
+                      <Button variant="ghost" size="sm" onClick={() => void act(j.id, "cancel")}>
                         {t("admin.cancelJob")}
-                      </button>
+                      </Button>
                     </td>
                   </tr>
                 ))}

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

@@ -11,7 +11,6 @@ import {
   Shield,
 } 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";
 
@@ -172,123 +171,97 @@ export default function AdminSecurityPage() {
     }
   };
 
+  const securityTabs = [
+    { id: "readiness" as const, label: t("admin.tabReadiness"), icon: ShieldCheck },
+    { id: "tls" as const, label: t("admin.tabTls"), icon: Lock },
+    { id: "rspamd" as const, label: t("admin.tabRspamd"), icon: Sliders },
+    { id: "audit" as const, label: t("admin.tabAudit"), icon: ListOrdered },
+  ];
+
+  const panel = "flex flex-col gap-4 rounded-2xl bg-dark-panel p-[18px] shadow-edge";
+  const input =
+    "w-full min-h-[36px] rounded-[10px] bg-dark-card px-3 py-2 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
+  const fieldLabel = "mb-1.5 block text-xs text-slate-400";
+
   return (
-    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto">
+    <div className="mx-auto flex w-full max-w-[1060px] flex-col gap-[18px] px-5 pb-11 pt-7 sm:px-8">
       {/* Header & Tabs */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <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">{t("admin.securitySubtitle")}</p>
-        </div>
-
-        {/* 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={`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"
-            }`}
-          >
-            <ShieldCheck className="w-3.5 h-3.5" />
-            <span>{t("admin.tabReadiness")}</span>
-          </button>
-
-          <button
-            onClick={() => setActiveTab("tls")}
-            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"
-            }`}
-          >
-            <Lock className="w-3.5 h-3.5" />
-            <span>{t("admin.tabTls")}</span>
-          </button>
-
-          <button
-            onClick={() => setActiveTab("rspamd")}
-            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"
-            }`}
-          >
-            <Sliders className="w-3.5 h-3.5" />
-            <span>{t("admin.tabRspamd")}</span>
-          </button>
-
-          <button
-            onClick={() => setActiveTab("audit")}
-            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"
-            }`}
-          >
-            <ListOrdered className="w-3.5 h-3.5" />
-            <span>{t("admin.tabAudit")}</span>
-          </button>
-        </div>
+      <div>
+        <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("admin.securityTitle")}</h1>
+        <p className="mt-1.5 text-[13.5px] text-slate-400">{t("admin.securitySubtitle")}</p>
       </div>
 
-      {/* TAB 1: 10/10 READINESS SCORECARD */}
+      {/* Tab Selector Controls */}
+      <div className="lm-tabstrip self-start">
+        {securityTabs.map((tab) => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              data-active={activeTab === tab.id}
+              aria-pressed={activeTab === tab.id}
+              className="lm-tab"
+            >
+              <Icon className="h-[15px] w-[15px] flex-none" />
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* TAB 1: READINESS SCORECARD */}
       {activeTab === "readiness" && (
-        <div className="space-y-6">
+        <div className="flex flex-col gap-3.5">
           {/* The score is counted from the checks that came back. It used to
               read a hardcoded "10 / 10" with an "all checks passed" badge
               regardless of what the preflight endpoint reported - including
               when it reported failures, or nothing at all. */}
-          <Card className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6">
-            <div>
-              <h2 className="text-lg font-bold text-white flex items-center gap-2">
-                <Shield className="w-5 h-5 text-emerald-400" />
+          <div className="flex flex-wrap items-center justify-between gap-4 rounded-2xl bg-dark-panel p-[18px] shadow-edge">
+            <div className="min-w-[260px] flex-1">
+              <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+                <Shield className="h-[17px] w-[17px] flex-none text-indigo-500" />
                 {t("admin.preflightTitle")}
               </h2>
-              <p className="text-xs text-slate-400 mt-1">{t("admin.readinessIntro")}</p>
+              <p className="mt-1 text-[13px] leading-relaxed text-slate-400">{t("admin.readinessIntro")}</p>
             </div>
             {readiness && readiness.length > 0 ? (
               (() => {
                 const passed = readiness.filter((c) => c.status === "PASSED").length;
                 const total = readiness.length;
                 return (
-                  <div className="flex items-center gap-3">
-                    <span
-                      className={`text-3xl font-black font-mono ${
-                        passed === total ? "text-emerald-400" : "text-amber-400"
-                      }`}
-                    >
+                  <div className="flex flex-none items-center gap-3">
+                    <span className="font-mono text-[30px] font-medium leading-none tabular-nums text-slate-100">
                       {passed} / {total}
                     </span>
                     <Badge variant={passed === total ? "success" : "warning"}>
-                      {passed === total
-                        ? t("ui.allChecksPassed")
-                        : t("admin.checksPassed", { passed, total })}
+                      {passed === total ? t("ui.allChecksPassed") : t("admin.checksPassed", { passed, total })}
                     </Badge>
                   </div>
                 );
               })()
             ) : (
-              <span className="text-xs text-slate-500">{t("admin.noChecks")}</span>
+              <span className="text-[13px] text-slate-400">{t("admin.noChecks")}</span>
             )}
-          </Card>
+          </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
             {(readiness ?? []).map((chk) => (
-              <Card key={chk.id} hoverable className="space-y-2">
-                <div className="flex items-center justify-between text-xs">
-                  <span className="font-bold text-slate-100">
+              <div key={chk.id} className="flex flex-col gap-2 rounded-2xl bg-dark-panel p-4 shadow-edge">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <span className="min-w-0 text-[13.5px] text-slate-100">
                     #{chk.id}: {chk.name}
                   </span>
-                  <Badge variant={chk.status === "PASSED" ? "success" : chk.status === "FAILED" ? "danger" : "warning"}>
+                  <Badge
+                    variant={chk.status === "PASSED" ? "success" : chk.status === "FAILED" ? "danger" : "warning"}
+                    className="flex-none"
+                  >
                     {chk.status}
                   </Badge>
                 </div>
-                <div className="text-xs text-slate-400 leading-relaxed font-mono">{chk.details}</div>
-              </Card>
+                <div className="break-words text-[12.5px] leading-relaxed text-slate-400">{chk.details}</div>
+              </div>
             ))}
           </div>
         </div>
@@ -296,204 +269,223 @@ export default function AdminSecurityPage() {
 
       {/* TAB 2: TLS - read from the protocols service cert watcher */}
       {activeTab === "tls" && (
-        <div className="space-y-6 text-xs">
-          <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" />
-              {t("admin.tlsTitle")}
-            </h2>
+        <section className={panel}>
+          <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+            <Lock className="h-[17px] w-[17px] flex-none text-indigo-500" />
+            {t("admin.tlsTitle")}
+          </h2>
 
-            {tlsStatus ? (
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
-                <div className="p-4 bg-slate-900/90 rounded-xl border border-slate-800 space-y-1">
-                  <div className="text-slate-400 font-medium">{t("admin.certificateState")}</div>
-                  <div
-                    className={`font-bold text-sm ${
-                      tlsStatus.state === "OK" ? "text-emerald-400" : "text-amber-400"
-                    }`}
-                  >
-                    {String(tlsStatus.state ?? "UNKNOWN")}
-                  </div>
-                  <div className="text-[10px] text-slate-500 font-mono">
-                    {typeof tlsStatus.expires_in_days === "number"
-                      ? t("admin.expiresInDays", { days: tlsStatus.expires_in_days })
-                      : t("admin.noCertificate")}
-                  </div>
+          {tlsStatus ? (
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+              <div className="flex flex-col gap-1 rounded-xl bg-dark-card p-3.5 shadow-edge">
+                <div className="text-xs text-slate-400">{t("admin.certificateState")}</div>
+                <div
+                  className={`text-[15px] font-medium ${
+                    tlsStatus.state === "OK" ? "text-indigo-400" : "text-amber-400"
+                  }`}
+                >
+                  {String(tlsStatus.state ?? "UNKNOWN")}
                 </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">{t("admin.mailHost")}</div>
-                  <div className="text-slate-100 font-bold text-sm break-all">
-                    {String(tlsStatus.mail_host ?? "-")}
-                  </div>
-                  <div className="text-[10px] text-slate-500 font-mono">
-                    {t("admin.tlsMode")}: {String(tlsStatus.tls_mode ?? "-")}
-                  </div>
-                </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">{t("admin.watcherHealthy")}</div>
-                  <div
-                    className={`font-bold text-sm ${
-                      tlsStatus.watcher_healthy ? "text-emerald-400" : "text-amber-400"
-                    }`}
-                  >
-                    {tlsStatus.watcher_healthy ? t("ui.healthy") : t("common.unavailable")}
-                  </div>
-                  <div className="text-[10px] text-slate-500 font-mono">
-                    {t("admin.lastReload")}:{" "}
-                    {tlsStatus.last_reload
-                      ? new Date(String(tlsStatus.last_reload)).toLocaleString()
-                      : t("common.never")}
-                  </div>
+                <div className="text-[11.5px] text-slate-500">
+                  {typeof tlsStatus.expires_in_days === "number"
+                    ? t("admin.expiresInDays", { days: tlsStatus.expires_in_days })
+                    : t("admin.noCertificate")}
                 </div>
               </div>
-            ) : (
-              <div className="p-6 text-center text-slate-500">{t("errors.loadFailed")}</div>
-            )}
-          </Card>
-        </div>
+
+              <div className="flex flex-col gap-1 rounded-xl bg-dark-card p-3.5 shadow-edge">
+                <div className="text-xs text-slate-400">{t("admin.mailHost")}</div>
+                <div className="break-all text-[15px] font-medium text-slate-100">
+                  {String(tlsStatus.mail_host ?? "-")}
+                </div>
+                <div className="text-[11.5px] text-slate-500">
+                  {t("admin.tlsMode")}: {String(tlsStatus.tls_mode ?? "-")}
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-1 rounded-xl bg-dark-card p-3.5 shadow-edge">
+                <div className="text-xs text-slate-400">{t("admin.watcherHealthy")}</div>
+                <div
+                  className={`text-[15px] font-medium ${
+                    tlsStatus.watcher_healthy ? "text-indigo-400" : "text-amber-400"
+                  }`}
+                >
+                  {tlsStatus.watcher_healthy ? t("ui.healthy") : t("common.unavailable")}
+                </div>
+                <div className="text-[11.5px] text-slate-500">
+                  {t("admin.lastReload")}:{" "}
+                  {tlsStatus.last_reload
+                    ? new Date(String(tlsStatus.last_reload)).toLocaleString()
+                    : t("common.never")}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="p-6 text-center text-[13px] text-slate-400">{t("errors.loadFailed")}</div>
+          )}
+        </section>
       )}
 
       {/* TAB 3: RSPAMD ANTI-SPAM THRESHOLDS */}
       {activeTab === "rspamd" && (
-        <Card className="space-y-6 text-xs max-w-3xl">
+        <section className={`${panel} max-w-[620px]`}>
           <div>
-            <h2 className="text-base font-bold text-white mb-1 flex items-center gap-2">
-              <Sliders className="w-5 h-5 text-indigo-400" />
+            <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+              <Sliders className="h-[17px] w-[17px] flex-none text-indigo-500" />
               {t("admin.tabRspamd")}
             </h2>
-            <p className="text-slate-400">{t("admin.rspamdIntro")}</p>
+            <p className="mt-1 text-[13px] leading-relaxed text-slate-400">{t("admin.rspamdIntro")}</p>
           </div>
 
           {rspamdSaved && (
-            <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" />
+            <div className="flex items-center gap-2 rounded-xl bg-dark-card px-3.5 py-3 text-[12.5px] text-slate-200 shadow-edge">
+              <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
               <span>{t("admin.rspamdSaved")}</span>
             </div>
           )}
 
-          <form onSubmit={handleSaveRspamd} className="space-y-4">
+          <form onSubmit={handleSaveRspamd} className="flex flex-col gap-3">
             <div>
-              <label className="font-semibold text-slate-300 mb-1.5 block">{t("admin.greylistScore")}</label>
+              <label htmlFor="greylist-score" className={fieldLabel}>
+                {t("admin.greylistScore")}
+              </label>
               <input
+                id="greylist-score"
                 type="number"
                 step="0.5"
                 value={greylistScore}
                 onChange={(e) => setGreylistScore(parseFloat(e.target.value))}
-                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"
+                className={`${input} font-mono`}
               />
             </div>
 
             <div>
-              <label className="font-semibold text-slate-300 mb-1.5 block">{t("admin.headerScore")}</label>
+              <label htmlFor="header-score" className={fieldLabel}>
+                {t("admin.headerScore")}
+              </label>
               <input
+                id="header-score"
                 type="number"
                 step="0.5"
                 value={addHeaderScore}
                 onChange={(e) => setAddHeaderScore(parseFloat(e.target.value))}
-                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"
+                className={`${input} font-mono`}
               />
             </div>
 
             <div>
-              <label className="font-semibold text-slate-300 mb-1.5 block">{t("admin.rejectScore")}</label>
+              <label htmlFor="reject-score" className={fieldLabel}>
+                {t("admin.rejectScore")}
+              </label>
               <input
+                id="reject-score"
                 type="number"
                 step="0.5"
                 value={rejectScore}
                 onChange={(e) => setRejectScore(parseFloat(e.target.value))}
-                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"
+                className={`${input} font-mono`}
               />
             </div>
 
-            <Button type="submit" variant="primary" size="md">
+            <Button type="submit" variant="primary" size="md" className="self-start">
               {t("admin.saveThresholds")}
             </Button>
           </form>
-        </Card>
+        </section>
       )}
 
       {/* TAB 4: AUDIT LOG & QUEUE ID TRANSACTION TRACE */}
       {activeTab === "audit" && (
-        <div className="space-y-6 text-xs">
+        <div className="flex flex-col gap-3.5">
           {/* Queue ID Search Box */}
-          <Card className="space-y-4">
+          <section className={panel}>
             <div>
-              <h2 className="text-base font-bold text-white mb-1 flex items-center gap-2">
-                <Search className="w-5 h-5 text-indigo-400" />
+              <h2 className="flex items-center gap-2 text-[17px] font-medium leading-tight text-slate-100">
+                <Search className="h-[17px] w-[17px] flex-none text-indigo-500" />
                 {t("admin.traceTitle")}
               </h2>
-              <p className="text-slate-400">{t("admin.tracePlaceholder")}</p>
+              <p className="mt-1 text-[13px] leading-relaxed text-slate-400">{t("admin.tracePlaceholder")}</p>
             </div>
 
-            <form onSubmit={handleSearchQueueId} className="flex gap-3">
+            <form onSubmit={handleSearchQueueId} className="flex flex-wrap gap-2">
               <input
                 type="text"
                 value={searchQueueId}
                 onChange={(e) => setSearchQueueId(e.target.value)}
                 placeholder={t("admin.tracePlaceholder")}
+                aria-label={t("admin.traceTitle")}
                 required
-                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"
+                className={`${input} min-w-[240px] flex-1 font-mono`}
               />
-              <Button type="submit" variant="primary" size="md">
+              <Button type="submit" variant="primary" size="md" className="flex-none">
                 {t("admin.traceTitle")}
               </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">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/90 border border-slate-800 flex items-center justify-between">
-                      <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 className="flex flex-col gap-2">
+                {/* These two lines were literal Portuguese, so an interface
+                    running in English still said "Resultado do Rastreamento"
+                    and "Etapa". */}
+                <h3 className="break-all text-[13.5px] text-slate-100">
+                  {t("admin.traceResultFor", { id: searchQueueId })}
+                </h3>
+                {tracedSteps.map((st) => (
+                  <div
+                    key={st.step}
+                    className="flex flex-wrap items-center gap-3 rounded-xl bg-dark-card px-3.5 py-3 shadow-edge"
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="break-words text-[13.5px] text-slate-100">
+                        {t("admin.traceStep", { n: st.step })}: {st.title}
                       </div>
-                      <Badge variant="success">{st.status}</Badge>
+                      <div className="mt-0.5 break-words text-[11.5px] text-slate-400">{st.detail}</div>
                     </div>
-                  ))}
-                </div>
+                    <Badge variant="info" className="flex-none">
+                      {st.status}
+                    </Badge>
+                  </div>
+                ))}
               </div>
             )}
-          </Card>
+          </section>
 
           {/* Immutable System Audit Log Table */}
-          <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">
-              {t("admin.auditLog")}
-            </div>
-
+          <div className="rounded-2xl bg-dark-panel px-[18px] pb-3 pt-1.5 shadow-edge">
             <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse text-xs">
+              <table className="lm-table">
                 <thead>
-                  <tr className="border-b border-slate-800 bg-slate-900/40 text-slate-400">
-                    <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>
+                    <th className="pl-0">{t("ui.timestamp")}</th>
+                    <th>{t("ui.jobId")}</th>
+                    <th>{t("ui.actor")}</th>
+                    <th>{t("ui.eventAction")}</th>
+                    <th>{t("ui.targetObject")}</th>
+                    <th className="pr-0 text-right">{t("ui.clientIp")}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-slate-800/60 font-mono">
+                <tbody>
                   {auditEntries.map((aud) => (
-                    <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>
+                    <tr key={aud.id}>
+                      <td className="whitespace-nowrap pl-0 text-[12.5px] text-slate-400">{aud.timestamp}</td>
+                      <td className="font-mono text-[12.5px] text-slate-200">{aud.queueId}</td>
+                      <td className="break-words text-[13px] text-slate-100">{aud.actor}</td>
+                      <td>
+                        <Badge variant="info" className="whitespace-nowrap">
+                          {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>
+                      <td className="break-words text-[13px] text-slate-300">{aud.target}</td>
+                      <td className="pr-0 text-right font-mono text-[12.5px] text-slate-500">{aud.ip}</td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             </div>
-          </Card>
+            {auditEntries.length === 0 && (
+              <div className="p-8 text-center text-[13px] text-slate-400">{t("ui.noData")}</div>
+            )}
+          </div>
         </div>
       )}
     </div>

services/webmail/src/app/(auth)/admin/login/page.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useTranslations } from "../../../../i18n/provider";
 import { TotpEnrolment, RecoveryCodes } from "../../../../components/TotpEnrolment";
+import { Button } from "../../../../components/ui/Button";
 
 export default function AdminLoginPage() {
   const t = useTranslations();
@@ -94,21 +95,29 @@ export default function AdminLoginPage() {
     }
   };
 
+  const field =
+    "w-full min-h-[38px] rounded-xl bg-dark-card px-3 py-2.5 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
+  const codeField = `${field} text-center font-mono text-lg tracking-[0.3em]`;
+  const fieldLabel = "mb-1.5 block text-xs text-slate-400";
+
   return (
-    <div className="min-h-screen flex items-center justify-center px-4 bg-slate-950">
-      <div className="glass-panel p-8 rounded-2xl max-w-md w-full border border-emerald-900/40 shadow-2xl">
-        <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 rounded-xl bg-emerald-600/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold text-xl">
-            &#9881;
+    <div className="flex min-h-screen items-center justify-center bg-dark-bg px-4">
+      <div className="w-full max-w-[400px] rounded-2xl bg-dark-panel p-7 shadow-edge">
+        {/* The console sign-in wears the same mark as the webmail. It used to be
+            green over green, which made the second surface look like a
+            different product. */}
+        <div className="mb-6 flex items-center gap-3">
+          <div className="flex h-10 w-10 flex-none items-center justify-center rounded-xl bg-dark-card text-xl leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+            λ
           </div>
-          <div>
-            <h1 className="text-xl font-bold text-white">{t("auth.adminLoginTitle")}</h1>
-            <p className="text-xs text-slate-400">{t("auth.adminStepUpNote")}</p>
+          <div className="min-w-0">
+            <h1 className="text-lg font-medium leading-tight text-slate-100">{t("auth.adminLoginTitle")}</h1>
+            <p className="mt-0.5 text-[12.5px] leading-relaxed text-slate-400">{t("auth.adminStepUpNote")}</p>
           </div>
         </div>
 
         {error && (
-          <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+          <div className="mb-4 rounded-xl bg-rose-900/60 p-3.5 text-xs leading-relaxed text-rose-200 shadow-edge">
             {error}
           </div>
         )}
@@ -124,87 +133,102 @@ export default function AdminLoginPage() {
             continueLabel={t("auth.signInButton")}
           />
         ) : (
-        <form onSubmit={handleLogin} className="space-y-4">
-          {enrolSecret ? (
-            <div className="space-y-4">
-              <div className="rounded-lg border border-indigo-500/30 bg-indigo-500/10 p-3 text-xs text-indigo-300">
-                {t("auth.enrolmentIntro")}
-              </div>
-              <TotpEnrolment secret={enrolSecret} uri={enrolUri} />
-              <div>
-                <label className="mb-1 block text-xs font-medium text-slate-300">{t("auth.totpCodeLabel")}</label>
-                <input
-                  type="text"
-                  inputMode="numeric"
-                  autoComplete="one-time-code"
-                  value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
-                  maxLength={7}
-                  required
-                  className="w-full rounded-lg border border-slate-800 bg-slate-900 px-4 py-2.5 text-center font-mono text-lg tracking-widest text-white focus:border-emerald-500 focus:outline-none"
-                />
-              </div>
-            </div>
-          ) : !challengeToken ? (
-            <>
-              <div>
-                <label className="block text-xs font-medium text-slate-300 mb-1">{t("auth.emailLabel")}</label>
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="admin@domain.com"
-                  required
-                  className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 transition-colors"
-                />
+          <form onSubmit={handleLogin} className="flex flex-col gap-4">
+            {enrolSecret ? (
+              <div className="flex flex-col gap-4">
+                <div className="rounded-xl bg-dark-card p-3.5 text-xs leading-relaxed text-slate-300 shadow-edge">
+                  {t("auth.enrolmentIntro")}
+                </div>
+                <TotpEnrolment secret={enrolSecret} uri={enrolUri} />
+                <div>
+                  <label htmlFor="admin-enrol-code" className={fieldLabel}>
+                    {t("auth.totpCodeLabel")}
+                  </label>
+                  <input
+                    id="admin-enrol-code"
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    value={mfaCode}
+                    onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                    maxLength={7}
+                    required
+                    className={codeField}
+                  />
+                </div>
               </div>
+            ) : !challengeToken ? (
+              <>
+                <div>
+                  <label htmlFor="admin-email" className={fieldLabel}>
+                    {t("auth.emailLabel")}
+                  </label>
+                  <input
+                    id="admin-email"
+                    type="email"
+                    autoComplete="username"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="admin@domain.com"
+                    required
+                    className={field}
+                  />
+                </div>
 
-              <div>
-                <label className="block text-xs font-medium text-slate-300 mb-1">{t("auth.passwordLabel")}</label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="************"
-                  required
-                  className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 transition-colors"
-                />
+                <div>
+                  <label htmlFor="admin-password" className={fieldLabel}>
+                    {t("auth.passwordLabel")}
+                  </label>
+                  <input
+                    id="admin-password"
+                    type="password"
+                    autoComplete="current-password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="************"
+                    required
+                    className={field}
+                  />
+                </div>
+              </>
+            ) : (
+              <div className="flex flex-col gap-4">
+                <div className="rounded-xl bg-dark-card p-3.5 text-xs leading-relaxed text-slate-300 shadow-edge">
+                  {t("auth.mfaRequired")}
+                </div>
+                <div>
+                  <label htmlFor="admin-mfa-code" className={fieldLabel}>
+                    {t("auth.totpCodeLabel")}
+                  </label>
+                  <input
+                    id="admin-mfa-code"
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    value={mfaCode}
+                    onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                    placeholder="123456"
+                    maxLength={7}
+                    required
+                    className={codeField}
+                  />
+                </div>
               </div>
-            </>
-          ) : (
-            <div>
-              <div className="p-3 mb-4 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
-                {t("auth.mfaRequired")}
-              </div>
-              <label className="block text-xs font-medium text-slate-300 mb-1">{t("auth.totpCodeLabel")}</label>
-              <input
-                type="text"
-                value={mfaCode}
-                onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
-                placeholder="123456"
-                maxLength={7}
-                required
-                className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white text-center tracking-widest text-lg font-mono focus:outline-none focus:border-emerald-500 transition-colors"
-              />
-            </div>
-          )}
+            )}
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-medium transition-colors shadow-lg shadow-emerald-600/20 disabled:opacity-50"
-          >
-            {loading
-              ? t("common.loading")
-              : challengeToken || enrolSecret
-                ? t("auth.verifyCodeButton")
-                : t("auth.signInButton")}
-          </button>
-        </form>
+            <Button type="submit" variant="primary" size="lg" className="mt-1 w-full" disabled={loading}>
+              {loading
+                ? t("common.loading")
+                : challengeToken || enrolSecret
+                  ? t("auth.verifyCodeButton")
+                  : t("auth.signInButton")}
+            </Button>
+          </form>
         )}
 
-        <div className="mt-6 pt-4 border-t border-slate-800 text-center">
-          <Link href="/user/mail/inbox" className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+        <div className="mt-6 pt-4 text-center">
+          <div className="lm-rule mb-4" />
+          <Link href="/user/mail/inbox" className="text-xs text-slate-400 transition-colors hover:text-slate-200">
             {t("admin.backToWebmail")}
           </Link>
         </div>

services/webmail/src/app/(auth)/admin/step-up/page.tsx

@@ -6,6 +6,7 @@ import { KeyRound, ShieldCheck, AlertCircle, Sliders } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
 import { useAccount } from "../../../../lib/useAccount";
 import { TotpEnrolment, RecoveryCodes } from "../../../../components/TotpEnrolment";
+import { Button } from "../../../../components/ui/Button";
 
 /**
  * Crossing from the webmail into the console.
@@ -92,23 +93,23 @@ export default function AdminStepUpPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center px-4 bg-slate-950">
-      <div className="glass-panel p-8 rounded-2xl max-w-md w-full border border-emerald-900/40 shadow-2xl">
-        <div className="flex items-center gap-3 mb-6">
-          <div className="w-10 h-10 rounded-xl bg-emerald-600/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
-            <Sliders className="w-5 h-5" />
+    <div className="flex min-h-screen items-center justify-center bg-dark-bg px-4">
+      <div className="w-full max-w-[400px] rounded-2xl bg-dark-panel p-7 shadow-edge">
+        <div className="mb-6 flex items-center gap-3">
+          <div className="flex h-10 w-10 flex-none items-center justify-center rounded-xl bg-dark-card text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+            <Sliders className="h-5 w-5" />
           </div>
           <div className="min-w-0">
-            <h1 className="text-lg font-bold text-white">{t("auth.stepUpTitle")}</h1>
-            <p className="text-xs text-slate-400 truncate">
+            <h1 className="text-lg font-medium leading-tight text-slate-100">{t("auth.stepUpTitle")}</h1>
+            <p className="mt-0.5 break-words text-[12.5px] leading-relaxed text-slate-400">
               {account?.email ? t("auth.stepUpSignedInAs", { email: account.email }) : t("common.loading")}
             </p>
           </div>
         </div>
 
         {error && (
-          <div className="mb-4 p-3 rounded-lg bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center gap-2">
-            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+          <div className="mb-4 flex items-start gap-2.5 rounded-xl bg-rose-900/60 p-3.5 text-xs leading-relaxed text-rose-200 shadow-edge">
+            <AlertCircle className="mt-px h-4 w-4 flex-none" />
             <span>{error}</span>
           </div>
         )}
@@ -120,27 +121,27 @@ export default function AdminStepUpPage() {
             continueLabel={t("common.continue")}
           />
         ) : (
-          <form onSubmit={submit} className="space-y-4">
+          <form onSubmit={submit} className="flex flex-col gap-4">
             {enrolSecret ? (
-              <div className="space-y-4">
-                <div className="rounded-lg border border-indigo-500/30 bg-indigo-500/10 p-3 text-xs text-indigo-300">
+              <div className="flex flex-col gap-4">
+                <div className="rounded-xl bg-dark-card p-3.5 text-xs leading-relaxed text-slate-300 shadow-edge">
                   {t("auth.enrolmentIntro")}
                 </div>
                 <TotpEnrolment secret={enrolSecret} uri={enrolUri} />
               </div>
             ) : (
-              <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3 text-xs text-emerald-300 flex items-start gap-2">
-                <ShieldCheck className="w-4 h-4 flex-shrink-0 mt-0.5" />
+              <div className="flex items-start gap-2.5 rounded-xl bg-dark-card p-3.5 text-xs leading-relaxed text-slate-300 shadow-edge">
+                <ShieldCheck className="mt-px h-4 w-4 flex-none text-indigo-500" />
                 <span>{t("auth.stepUpIntro")}</span>
               </div>
             )}
 
             <div>
-              <label htmlFor="step-up-code" className="mb-1 block text-xs font-medium text-slate-300">
+              <label htmlFor="step-up-code" className="mb-1.5 block text-xs text-slate-400">
                 {t("auth.totpCodeLabel")}
               </label>
               <div className="relative">
-                <KeyRound className="w-4 h-4 absolute left-3.5 top-3.5 text-slate-500" />
+                <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                 <input
                   id="step-up-code"
                   type="text"
@@ -151,26 +152,23 @@ export default function AdminStepUpPage() {
                   onChange={(e) => setCode(e.target.value.replace(/\s/g, ""))}
                   placeholder="123456"
                   required
-                  className="w-full rounded-xl border border-slate-800 bg-slate-900 pl-10 pr-4 py-3 text-center font-mono text-lg tracking-widest text-white focus:border-emerald-500 focus:outline-none"
+                  className="w-full rounded-xl bg-dark-card py-3 pl-[38px] pr-3 text-center font-mono text-lg tracking-[0.3em] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent"
                 />
               </div>
               {/* A recovery code is the way in when the phone is gone, and
                   nothing on the old screens said so. */}
-              <p className="mt-1.5 text-[11px] text-slate-500">{t("auth.orRecoveryCode")}</p>
+              <p className="mt-1.5 text-[11.5px] leading-relaxed text-slate-500">{t("auth.orRecoveryCode")}</p>
             </div>
 
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-medium transition-colors shadow-lg shadow-emerald-600/20 disabled:opacity-50"
-            >
+            <Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>
               {loading ? t("common.loading") : t("auth.verifyCodeButton")}
-            </button>
+            </Button>
           </form>
         )}
 
-        <div className="mt-6 pt-4 border-t border-slate-800 text-center">
-          <Link href="/user/mail/inbox" className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+        <div className="mt-6 pt-4 text-center">
+          <div className="lm-rule mb-4" />
+          <Link href="/user/mail/inbox" className="text-xs text-slate-400 transition-colors hover:text-slate-200">
             {t("admin.backToWebmail")}
           </Link>
         </div>

services/webmail/src/app/(auth)/user/login/page.tsx

@@ -3,7 +3,6 @@
 import React, { useState } from "react";
 import { Mail, Lock, AlertCircle } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
-import { Card } from "../../../../components/ui/Card";
 import { Button } from "../../../../components/ui/Button";
 
 export default function UserLoginPage() {
@@ -49,37 +48,41 @@ export default function UserLoginPage() {
     }
   };
 
-  return (
-    <div className="min-h-screen flex items-center justify-center px-4 bg-dark-bg relative overflow-hidden">
-      {/* Background Ambient Glow */}
-      <div className="absolute -top-40 -left-40 w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-cyan-600/20 rounded-full blur-3xl pointer-events-none" />
+  const field =
+    "w-full min-h-[38px] rounded-xl bg-dark-card py-2.5 pl-[38px] pr-3 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
 
-      <Card className="max-w-md w-full border border-slate-800 shadow-2xl p-8 z-10">
-        <div className="flex items-center gap-3.5 mb-6">
-          <div className="w-11 h-11 rounded-2xl bg-gradient-to-tr from-indigo-600 to-cyan-500 flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/20">
-            <Mail className="w-6 h-6" />
+  return (
+    /* No ambient glow behind the card any more: two blurred coloured circles
+       under a sign-in form are decoration that costs a full-viewport paint and
+       says nothing. Nocturne's depth is the surface and its edge. */
+    <div className="flex min-h-screen items-center justify-center bg-dark-bg px-4">
+      <div className="w-full max-w-[400px] rounded-2xl bg-dark-panel p-7 shadow-edge">
+        <div className="mb-6 flex items-center gap-3">
+          <div className="flex h-10 w-10 flex-none items-center justify-center rounded-xl bg-dark-card text-xl leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+            λ
           </div>
-          <div>
-            <h1 className="text-xl font-extrabold text-white tracking-tight">{t("auth.userLoginTitle")}</h1>
-            <p className="text-xs text-slate-400">{t("common.appName")} &middot; {t("common.userPortal")}</p>
+          <div className="min-w-0">
+            <h1 className="text-lg font-medium leading-tight text-slate-100">{t("auth.userLoginTitle")}</h1>
+            <p className="mt-0.5 text-[12.5px] text-slate-400">
+              {t("common.appName")} &middot; {t("common.userPortal")}
+            </p>
           </div>
         </div>
 
         {error && (
-          <div className="mb-5 p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center gap-2.5">
-            <AlertCircle className="w-4 h-4 text-rose-400 flex-shrink-0" />
+          <div className="mb-5 flex items-start gap-2.5 rounded-xl bg-rose-900/60 p-3.5 text-xs leading-relaxed text-rose-200 shadow-edge">
+            <AlertCircle className="mt-px h-4 w-4 flex-none" />
             <span>{error}</span>
           </div>
         )}
 
-        <form onSubmit={handleLogin} className="space-y-4 text-xs">
+        <form onSubmit={handleLogin} className="flex flex-col gap-4">
           <div>
-            <label htmlFor="login-email" className="block font-semibold text-slate-300 mb-1.5">
+            <label htmlFor="login-email" className="mb-1.5 block text-xs text-slate-400">
               {t("auth.emailLabel")}
             </label>
             <div className="relative">
-              <Mail className="w-4 h-4 absolute left-3.5 top-3 text-slate-500" />
+              <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <input
                 id="login-email"
                 type="email"
@@ -88,17 +91,17 @@ export default function UserLoginPage() {
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="user@domain.com"
                 required
-                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                className={field}
               />
             </div>
           </div>
 
           <div>
-            <label htmlFor="login-password" className="block font-semibold text-slate-300 mb-1.5">
+            <label htmlFor="login-password" className="mb-1.5 block text-xs text-slate-400">
               {t("auth.passwordLabel")}
             </label>
             <div className="relative">
-              <Lock className="w-4 h-4 absolute left-3.5 top-3 text-slate-500" />
+              <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <input
                 id="login-password"
                 type="password"
@@ -107,17 +110,16 @@ export default function UserLoginPage() {
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="************"
                 required
-                className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+                className={field}
               />
             </div>
           </div>
 
-          <Button type="submit" variant="primary" size="lg" className="w-full mt-2" disabled={loading}>
+          <Button type="submit" variant="primary" size="lg" className="mt-1 w-full" disabled={loading}>
             {loading ? t("common.loading") : t("auth.signInButton")}
           </Button>
         </form>
-
-      </Card>
+      </div>
     </div>
   );
 }

services/webmail/src/app/(user)/user/compose/page.tsx

@@ -18,7 +18,6 @@ import {
   CheckCircle2,
 } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
-import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
 import { Button } from "../../../../components/ui/Button";
 
 /** Splits a comma or semicolon separated field, dropping empty entries. */
@@ -178,32 +177,50 @@ export default function ComposePage({
     setSending(false);
   };
 
+  /** One row of the compose sheet: a fixed-width label beside the control. */
+  const fieldRow = "flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.07)]";
+  const fieldLabel = "w-14 flex-none text-[12.5px] leading-snug text-slate-400";
+  const bareInput =
+    "min-h-[30px] min-w-[160px] flex-1 border-0 bg-transparent text-sm text-slate-100 placeholder-slate-500 focus:outline-none";
+  const toolButton =
+    "flex h-8 w-8 items-center justify-center rounded-lg text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-slate-100";
+
   return (
-    <div className="flex-1 p-6 md:p-8 bg-dark-bg flex flex-col items-center overflow-y-auto">
-      <Card className="max-w-3xl w-full border border-slate-800 shadow-2xl space-y-5">
-        <div className="flex items-center justify-between border-b border-slate-800 pb-4">
-          <h1 className="text-xl font-bold text-white flex items-center gap-2 tracking-tight">
-            <Send className="w-5 h-5 text-indigo-400" />
-            <span>{t("mail.compose")}</span>
-          </h1>
-          {draftStatus && (
-            <span className="text-xs text-emerald-400 font-mono flex items-center gap-1">
-              <CheckCircle2 className="w-3.5 h-3.5" />
-              {draftStatus}
-            </span>
-          )}
+    <div className="flex-1 overflow-y-auto bg-dark-bg px-5 pb-11 pt-7 sm:px-8">
+      <form onSubmit={handleSend} className="mx-auto flex w-full max-w-[860px] flex-col gap-[18px]">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="min-w-0">
+            <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("mail.compose")}</h1>
+            {draftStatus && (
+              <div className="mt-1 flex items-center gap-1.5 text-[12.5px] text-slate-400">
+                <CheckCircle2 className="h-3.5 w-3.5 flex-none text-indigo-500" />
+                {draftStatus}
+              </div>
+            )}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Link href="/user/mail/inbox">
+              <Button variant="secondary" size="md">
+                {t("mail.discard")}
+              </Button>
+            </Link>
+            <Button type="submit" variant="primary" size="md" disabled={sending}>
+              <Send className="h-4 w-4" />
+              <span>{sending ? t("mail.sending") : t("mail.sendMessage")}</span>
+            </Button>
+          </div>
         </div>
 
         {sendError && (
-          <div className="p-4 rounded-xl bg-rose-500/15 border border-rose-500/30 text-rose-300 text-xs">
+          <div className="rounded-xl bg-rose-900/60 px-4 py-3 text-xs leading-relaxed text-rose-200 shadow-edge">
             {sendError}
           </div>
         )}
 
         {undoSeconds !== null && (
-          <div className="p-4 rounded-xl bg-indigo-600/20 border border-indigo-500/40 flex items-center justify-between text-indigo-300 text-xs">
+          <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl bg-dark-card px-4 py-3 text-xs text-slate-200 shadow-edge">
             <div className="flex items-center gap-2">
-              <Sparkles className="w-4 h-4 text-indigo-400 animate-spin" />
+              <Sparkles className="h-4 w-4 flex-none animate-spin text-indigo-500" />
               {/* The countdown is a placeholder inside the message, not text
                   bolted on after it. It used to be both: the bundle's own
                   "{seconds}" was never substituted and a second, hardcoded
@@ -212,217 +229,191 @@ export default function ComposePage({
               <span>{t("mail.undoSend", { seconds: undoSeconds })}</span>
             </div>
             <Button variant="primary" size="sm" onClick={handleUndo}>
-              <Undo2 className="w-3.5 h-3.5" />
+              <Undo2 className="h-3.5 w-3.5" />
               {t("mail.undoSendAction")}
             </Button>
           </div>
         )}
 
-        <form onSubmit={handleSend} className="space-y-4 text-xs">
-          <div>
-            <div className="flex justify-between items-center mb-1.5">
-              <label className="font-semibold text-slate-300">{t("ui.toRecipients")}</label>
-              <button
-                type="button"
-                onClick={() => setShowCcBcc(!showCcBcc)}
-                className="text-indigo-400 hover:text-indigo-300 font-medium hover:underline"
-              >
-                {showCcBcc ? t("mail.hideCcBcc") : t("mail.showCcBcc")}
-              </button>
-            </div>
+        {/* One sheet, the fields stacked as rows inside it, rather than a stack
+            of separately outlined inputs: the message is one object. */}
+        <div className="overflow-hidden rounded-2xl bg-dark-panel shadow-edge">
+          <div className={fieldRow}>
+            <label htmlFor="compose-to" className={fieldLabel}>
+              {t("ui.toRecipients")}
+            </label>
             <input
+              id="compose-to"
               type="text"
               value={to}
               onChange={(e) => setTo(e.target.value)}
               placeholder="recipient@example.com"
               required
               disabled={sending}
-              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              className={bareInput}
             />
+            <button
+              type="button"
+              onClick={() => setShowCcBcc(!showCcBcc)}
+              className="flex-none rounded-lg px-2 py-1 text-[12.5px] text-indigo-500 transition-colors hover:bg-indigo-500/10"
+            >
+              {showCcBcc ? t("mail.hideCcBcc") : t("mail.showCcBcc")}
+            </button>
           </div>
 
           {showCcBcc && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <div>
-                <label className="font-semibold text-slate-300 mb-1 block">Cc</label>
+            <>
+              <div className={fieldRow}>
+                <label htmlFor="compose-cc" className={fieldLabel}>
+                  Cc
+                </label>
                 <input
+                  id="compose-cc"
                   type="text"
                   value={cc}
                   onChange={(e) => setCc(e.target.value)}
                   placeholder="cc@domain.com"
                   disabled={sending}
-                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+                  className={bareInput}
                 />
               </div>
-              <div>
-                <label className="font-semibold text-slate-300 mb-1 block">Bcc</label>
+              <div className={fieldRow}>
+                <label htmlFor="compose-bcc" className={fieldLabel}>
+                  Bcc
+                </label>
                 <input
+                  id="compose-bcc"
                   type="text"
                   value={bcc}
                   onChange={(e) => setBcc(e.target.value)}
                   placeholder="bcc@domain.com"
                   disabled={sending}
-                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+                  className={bareInput}
                 />
               </div>
-            </div>
+            </>
           )}
 
-          <div>
-            <label className="font-semibold text-slate-300 mb-1.5 block">{t("ui.subject")}</label>
+          <div className={fieldRow}>
+            <label htmlFor="compose-subject" className={fieldLabel}>
+              {t("ui.subject")}
+            </label>
             <input
+              id="compose-subject"
               type="text"
               value={subject}
               onChange={(e) => setSubject(e.target.value)}
               placeholder={t("ui.subject")}
               required
               disabled={sending}
-              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              className={bareInput}
             />
           </div>
 
           {/* Formatting Toolbar */}
-          <div>
-            <label className="font-semibold text-slate-300 mb-1.5 block">{t("ui.messageBody")}</label>
-            <div className="border border-slate-800 rounded-xl overflow-hidden bg-slate-900/90">
-              <div className="flex items-center gap-1 p-2 bg-slate-950/80 border-b border-slate-800/80 flex-wrap text-slate-300">
-                <button
-                  type="button"
-                  onClick={() => executeFormat("bold")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.bold")}
-                >
-                  <Bold className="w-4 h-4" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => executeFormat("italic")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.italic")}
-                >
-                  <Italic className="w-4 h-4" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => executeFormat("underline")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.underline")}
-                >
-                  <Underline className="w-4 h-4" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => executeFormat("strikeThrough")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.strikethrough")}
-                >
-                  <Strikethrough className="w-4 h-4" />
-                </button>
-                <span className="w-px h-4 bg-slate-800 mx-1" />
-                <button
-                  type="button"
-                  onClick={() => executeFormat("insertUnorderedList")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.bulletList")}
-                >
-                  <List className="w-4 h-4" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => executeFormat("insertOrderedList")}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
-                  title={t("mail.numberedList")}
-                >
-                  <ListOrdered className="w-4 h-4" />
-                </button>
-                <span className="w-px h-4 bg-slate-800 mx-1" />
-                <button
-                  type="button"
-                  onClick={() => {
-                    const url = prompt(t("mail.insertUrl"));
-                    if (url) executeFormat("createLink", url);
-                  }}
-                  className="p-1.5 hover:bg-slate-800 rounded-lg text-indigo-400 hover:text-indigo-300"
-                  title={t("mail.insertLink")}
-                >
-                  <LinkIcon className="w-4 h-4" />
-                </button>
-              </div>
-
-              <div
-                ref={editorRef}
-                contentEditable
-                suppressContentEditableWarning
-                className="p-4 min-h-[220px] focus:outline-none text-white font-sans text-xs leading-relaxed"
-              />
-            </div>
+          <div className="flex flex-wrap items-center gap-0.5 px-3 py-2 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.07)]">
+            <button type="button" onClick={() => executeFormat("bold")} className={toolButton} title={t("mail.bold")}>
+              <Bold className="h-4 w-4" />
+            </button>
+            <button type="button" onClick={() => executeFormat("italic")} className={toolButton} title={t("mail.italic")}>
+              <Italic className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => executeFormat("underline")}
+              className={toolButton}
+              title={t("mail.underline")}
+            >
+              <Underline className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => executeFormat("strikeThrough")}
+              className={toolButton}
+              title={t("mail.strikethrough")}
+            >
+              <Strikethrough className="h-4 w-4" />
+            </button>
+            <span className="mx-1.5 h-[18px] w-px bg-white/[0.14]" />
+            <button
+              type="button"
+              onClick={() => executeFormat("insertUnorderedList")}
+              className={toolButton}
+              title={t("mail.bulletList")}
+            >
+              <List className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => executeFormat("insertOrderedList")}
+              className={toolButton}
+              title={t("mail.numberedList")}
+            >
+              <ListOrdered className="h-4 w-4" />
+            </button>
+            <span className="mx-1.5 h-[18px] w-px bg-white/[0.14]" />
+            <button
+              type="button"
+              onClick={() => {
+                const url = prompt(t("mail.insertUrl"));
+                if (url) executeFormat("createLink", url);
+              }}
+              className={`${toolButton} text-indigo-500`}
+              title={t("mail.insertLink")}
+            >
+              <LinkIcon className="h-4 w-4" />
+            </button>
           </div>
 
+          <div
+            ref={editorRef}
+            contentEditable
+            suppressContentEditableWarning
+            aria-label={t("ui.messageBody")}
+            role="textbox"
+            aria-multiline="true"
+            className="min-h-[280px] px-[22px] py-5 font-sans text-[14.5px] leading-relaxed text-slate-200 focus:outline-none"
+          />
+
           {/* Attachment Selector & Display */}
-          <div className="pt-2">
-            <div className="flex items-center justify-between mb-2">
-              <span className="font-semibold text-slate-300">{t("mail.attachments", { count: attachments.length })}</span>
-              <label className="cursor-pointer text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 font-medium">
-                <Paperclip className="w-3.5 h-3.5" />
-                <span>{t("mail.addFiles")}</span>
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleFileUpload}
-                  className="hidden"
-                />
-              </label>
-            </div>
+          <div className="flex flex-wrap items-center gap-2.5 px-4 py-3.5 shadow-[inset_0_1px_0_0_rgba(233,233,237,0.07)]">
+            <label className="flex flex-none cursor-pointer items-center gap-2 rounded-[10px] border border-white/[0.14] px-3 py-2 text-[13px] text-slate-200 transition-colors hover:bg-white/[0.07]">
+              <Paperclip className="h-[15px] w-[15px]" />
+              <span>{t("mail.addFiles")}</span>
+              <input type="file" multiple onChange={handleFileUpload} className="hidden" />
+            </label>
+
+            {attachments.map((file) => (
+              <div
+                key={file.id}
+                className="flex items-center gap-2 rounded-[10px] bg-dark-card px-3 py-2 text-[12.5px] text-slate-200 shadow-edge"
+              >
+                <Paperclip className="h-[15px] w-[15px] flex-none text-indigo-400" />
+                <span className="max-w-[160px] truncate">{file.name}</span>
+                <span className="text-[11px] text-slate-500">{(file.size / 1024).toFixed(1)} KB</span>
+                <button
+                  type="button"
+                  onClick={() => removeAttachment(file.id)}
+                  className="text-slate-400 transition-colors hover:text-rose-400"
+                  aria-label={t("common.delete")}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ))}
 
             {/* Says so plainly rather than letting someone attach a contract
                 and watch it silently not arrive: /mail/send is handed the file
                 names only, because there is no upload endpoint behind this
                 picker yet. */}
             {attachments.length > 0 && (
-              <div className="mb-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5 text-[11px] text-amber-300">
+              <span className="ml-auto text-[11.5px] leading-relaxed text-slate-400">
                 {t("mail.attachmentsUnsupported")}
-              </div>
-            )}
-
-            {attachments.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {attachments.map((file) => (
-                  <div
-                    key={file.id}
-                    className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-slate-200"
-                  >
-                    <Paperclip className="w-3 h-3 text-indigo-400" />
-                    <span className="font-medium max-w-[140px] truncate">{file.name}</span>
-                    <span className="text-[10px] text-slate-500">
-                      ({(file.size / 1024).toFixed(1)} KB)
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => removeAttachment(file.id)}
-                      className="text-slate-400 hover:text-rose-400 ml-1"
-                    >
-                      <X className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                ))}
-              </div>
+              </span>
             )}
           </div>
-
-          <div className="flex items-center justify-between pt-4 border-t border-slate-800">
-            <Link href="/user/mail/inbox">
-              <Button variant="ghost" size="md">
-                {t("mail.discard")}
-              </Button>
-            </Link>
-
-            <Button type="submit" variant="primary" size="md" disabled={sending}>
-              <Send className="w-4 h-4" />
-              <span>{sending ? t("mail.sending") : t("mail.sendMessage")}</span>
-            </Button>
-          </div>
-        </form>
-      </Card>
+        </div>
+      </form>
     </div>
   );
 }

services/webmail/src/app/(user)/user/layout.tsx

@@ -11,13 +11,12 @@ import {
   Archive,
   AlertTriangle,
   Trash2,
-  Settings,
   PenSquare,
   LogOut,
   Mail,
   ShieldCheck,
   ShieldAlert,
-  Sliders,
+  SlidersHorizontal,
   Menu,
   X,
 } from "lucide-react";
@@ -26,6 +25,7 @@ import { LanguageSwitcher } from "../../../i18n/LanguageSwitcher";
 import { useAccount, isAdminRole } from "../../../lib/useAccount";
 import { useFolders } from "../../../lib/useFolders";
 import { badgeCount, folderMetrics } from "../../../lib/mailCounts";
+import { initialsFor } from "../../../lib/initials";
 
 export default function UserWebmailLayout({ children }: { children: React.ReactNode }) {
   const t = useTranslations();
@@ -51,143 +51,160 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
     });
   };
 
+  const settingsActive = pathname === "/user/settings";
+
   const SidebarContent = (
-    <div className="flex flex-col justify-between h-full p-4">
-      <div>
-        {/* Webmail Surface Branding */}
-        <div className="flex items-center gap-3 px-2 mb-6">
-          <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-indigo-600 to-cyan-500 border border-indigo-400/30 flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/20">
-            <Mail className="w-5 h-5 text-white" />
-          </div>
-          <div>
-            <div className="font-bold text-base text-white tracking-tight">LambdaMail</div>
-            <div className="text-[10px] text-indigo-400 uppercase tracking-widest font-mono font-semibold">
-              {t("common.userPortal")}
-            </div>
+    <div className="flex h-full flex-col gap-4 p-3">
+      {/* The brand mark. One mark for both surfaces - the line underneath is
+          the only thing that says which one you are in. */}
+      <div className="flex items-center gap-2.5 px-2 py-1">
+        <div className="flex h-8 w-8 flex-none items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+          λ
+        </div>
+        <div className="min-w-0">
+          <div className="text-[15px] font-medium leading-tight">LambdaMail</div>
+          <div className="text-[10.5px] uppercase tracking-[0.08em] text-indigo-500">
+            {t("common.userPortal")}
           </div>
         </div>
-
-        {/* Compose Floating Button */}
-        <Link
-          href="/user/compose"
-          className="group relative flex items-center justify-center gap-2 w-full py-3 px-4 mb-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-indigo-600/30 active:scale-[0.98]"
-        >
-          <PenSquare className="w-4 h-4 transition-transform group-hover:rotate-12" />
-          <span>{t("mail.compose")}</span>
-        </Link>
-
-        {/* Folder Navigation List */}
-        <nav className="space-y-1 text-sm font-medium">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = pathname === item.href || (item.role === "inbox" && pathname === "/user/mail");
-            // Drafts counts what is waiting rather than what is unread; see
-            // badgeCount, which is where that rule is tested.
-            const badge = badgeCount(folders, item.role);
-            const { total } = folderMetrics(folders, item.role);
-
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                title={total > 0 ? t("mail.messagesInFolder", { count: total }) : item.label}
-                className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all duration-150 ${
-                  isActive
-                    ? "bg-indigo-600/20 text-indigo-300 border border-indigo-500/30 shadow-sm"
-                    : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/40 border border-transparent"
-                }`}
-              >
-                <div className="flex items-center gap-3 min-w-0">
-                  <Icon className={`w-4 h-4 flex-shrink-0 ${isActive ? "text-indigo-400" : "text-slate-400"}`} />
-                  <span className="truncate">{item.label}</span>
-                </div>
-                <div className="flex items-center gap-1.5 flex-shrink-0">
-                  {/* The folder's size, shown quietly beside the badge: the
-                      sidebar reported unread only, so there was nowhere in the
-                      interface that said how much mail a folder holds. */}
-                  {total > 0 && (
-                    <span className="text-[10px] font-mono text-slate-500 tabular-nums">{total}</span>
-                  )}
-                  {badge > 0 && (
-                    <span
-                      className={`text-xs px-2 py-0.5 rounded-full font-semibold tabular-nums ${
-                        isActive ? "bg-indigo-500/40 text-indigo-200" : "bg-indigo-500/20 text-indigo-300"
-                      }`}
-                    >
-                      {badge}
-                    </span>
-                  )}
-                </div>
-              </Link>
-            );
-          })}
-        </nav>
       </div>
 
-      {/* Footer Controls & User Settings */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between gap-2 p-2 rounded-xl bg-slate-900/60 border border-slate-800/80">
-          <LanguageSwitcher />
-          <button
-            type="button"
-            onClick={handleLogout}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-slate-700/80 text-xs font-medium text-slate-300 hover:text-rose-400 hover:border-rose-500/40 hover:bg-rose-500/10 transition-all"
-          >
-            <LogOut className="w-3.5 h-3.5" />
-            <span>{t("settings.signOut")}</span>
-          </button>
-        </div>
+      <Link
+        href="/user/compose"
+        onClick={() => setMobileOpen(false)}
+        className="flex w-full items-center justify-center gap-2 rounded-[10px] border border-indigo-500 px-3 py-2.5 text-sm font-medium text-indigo-500 transition-colors hover:bg-indigo-500/[0.12] active:bg-indigo-500/[0.22]"
+      >
+        <PenSquare className="h-4 w-4 flex-none" />
+        <span className="min-w-0">{t("mail.compose")}</span>
+      </Link>
 
-        {/* The console is reachable from inside the app for the accounts that
-            may open it. It goes to the step-up rather than to the admin sign-in:
-            the admin audience is a separate token, so crossing over costs a
-            second factor - but not the password, which the session in hand
-            proved already. */}
+      {/* Folder navigation. Every row is a mark, an icon, a label that may wrap,
+          and its numbers - nothing is sized by the length of the label, which
+          is what clipped the Portuguese and Spanish names before. */}
+      <nav className="flex flex-col gap-0.5">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href || (item.role === "inbox" && pathname === "/user/mail");
+          // Drafts counts what is waiting rather than what is unread; see
+          // badgeCount, which is where that rule is tested.
+          const badge = badgeCount(folders, item.role);
+          const { total } = folderMetrics(folders, item.role);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={() => setMobileOpen(false)}
+              data-active={isActive}
+              title={total > 0 ? t("mail.messagesInFolder", { count: total }) : item.label}
+              className="lm-nav"
+            >
+              <span className="lm-nav-mark" />
+              <Icon className={`h-[17px] w-[17px] flex-none ${isActive ? "text-indigo-500" : "text-slate-400"}`} />
+              <span className="min-w-0 flex-1 text-[13.5px] leading-snug">{item.label}</span>
+              <span className="flex flex-none items-center gap-1.5">
+                {/* The folder's size, shown quietly beside the badge: the
+                    sidebar reported unread only, so there was nowhere in the
+                    interface that said how much mail a folder holds. */}
+                {total > 0 && badge > 0 && (
+                  <span className="text-[10.5px] tabular-nums text-slate-500">{total}</span>
+                )}
+                {badge > 0 ? (
+                  <span
+                    className={`text-[11.5px] tabular-nums ${isActive ? "text-indigo-300" : "text-slate-400"}`}
+                  >
+                    {badge}
+                  </span>
+                ) : (
+                  total > 0 && (
+                    <span className="text-[11.5px] tabular-nums text-slate-500">{total}</span>
+                  )
+                )}
+              </span>
+            </Link>
+          );
+        })}
+
+        <div className="lm-rule my-2.5" />
+
+        <Link
+          href="/user/settings"
+          onClick={() => setMobileOpen(false)}
+          data-active={settingsActive}
+          className="lm-nav"
+        >
+          <span className="lm-nav-mark" />
+          <SlidersHorizontal
+            className={`h-[17px] w-[17px] flex-none ${settingsActive ? "text-indigo-500" : "text-slate-400"}`}
+          />
+          <span className="min-w-0 flex-1 text-[13.5px] leading-snug">{t("settings.title")}</span>
+        </Link>
+      </nav>
+
+      <div className="mt-auto flex flex-col gap-2.5">
+        {/* The two surfaces as one control, so where you are and where else you
+            could be are the same question. The console goes to the step-up
+            rather than to the admin sign-in: the admin audience is a separate
+            token, so crossing over costs a second factor - but not the
+            password, which the session in hand proved already. */}
         {isAdminRole(account?.role) && (
-          <Link
-            href="/admin/step-up"
-            className="flex items-center gap-2.5 p-2.5 rounded-xl border border-emerald-500/25 bg-emerald-500/10 text-emerald-300 hover:border-emerald-500/50 hover:bg-emerald-500/15 transition-all"
-          >
-            <Sliders className="w-4 h-4 flex-shrink-0" />
-            <span className="text-xs font-semibold truncate">{t("admin.openAdmin")}</span>
-          </Link>
+          <div className="flex gap-[3px] rounded-[10px] bg-dark-panel p-[3px] shadow-edge">
+            <span className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] bg-dark-card px-2 py-1.5 text-[12px] leading-snug text-indigo-500 shadow-edge-accent">
+              <Mail className="h-3.5 w-3.5 flex-none" />
+              <span className="min-w-0 truncate">{t("common.userPortal")}</span>
+            </span>
+            <Link
+              href="/admin/step-up"
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-[8px] px-2 py-1.5 text-[12px] leading-snug text-slate-400 transition-colors hover:bg-white/[0.05] hover:text-slate-100"
+            >
+              <ShieldCheck className="h-3.5 w-3.5 flex-none" />
+              <span className="min-w-0 truncate">{t("admin.openAdmin")}</span>
+            </Link>
+          </div>
         )}
 
         <Link
           href="/user/settings"
-          className={`flex items-center justify-between p-2.5 rounded-xl border transition-all ${
-            pathname === "/user/settings"
-              ? "bg-indigo-600/15 border-indigo-500/30 text-slate-100"
-              : "bg-slate-900/80 border-slate-800 hover:border-slate-700 text-slate-300"
-          }`}
+          onClick={() => setMobileOpen(false)}
+          className="flex items-center gap-2.5 rounded-xl bg-dark-panel p-2.5 shadow-edge transition-colors hover:bg-dark-card"
         >
-          <div className="flex items-center gap-2.5 min-w-0">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-indigo-500 to-cyan-500 text-white flex items-center justify-center font-bold text-xs flex-shrink-0 shadow-sm uppercase">
-              {account?.email?.[0] ?? "?"}
-            </div>
-            <div className="truncate">
-              <div className="text-xs font-semibold text-slate-200 truncate">
-                {account?.email ?? t("common.loading")}
-              </div>
-              {/* Reports what is actually configured. The old fixed "2FA
-                  active" reassured accounts that had no second factor at all. */}
-              <div className="text-[10px] text-slate-400 flex items-center gap-1">
-                {account?.mfa_enrolled ? (
-                  <>
-                    <ShieldCheck className="w-3 h-3 text-emerald-400 inline" />
-                    {t("settings.mfaEnabled")}
-                  </>
-                ) : (
-                  <>
-                    <ShieldAlert className="w-3 h-3 text-amber-400 inline" />
-                    {t("settings.mfaDisabled")}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-          <Settings className="w-4 h-4 text-slate-400 hover:text-slate-200 transition-colors" />
+          <span className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-full bg-indigo-900 text-[12px] uppercase text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]">
+            {initialsFor(account?.email)}
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block break-words text-[12.5px] leading-tight">
+              {account?.email ?? t("common.loading")}
+            </span>
+            {/* Reports what is actually configured. The old fixed "2FA
+                active" reassured accounts that had no second factor at all. */}
+            <span className="mt-0.5 flex items-center gap-1 text-[10.5px] text-slate-400">
+              {account?.mfa_enrolled ? (
+                <>
+                  <ShieldCheck className="h-3 w-3 flex-none text-indigo-500" />
+                  {t("settings.mfaEnabled")}
+                </>
+              ) : (
+                <>
+                  <ShieldAlert className="h-3 w-3 flex-none text-amber-400" />
+                  {t("settings.mfaDisabled")}
+                </>
+              )}
+            </span>
+          </span>
         </Link>
+
+        <div className="flex items-center gap-1.5">
+          <LanguageSwitcher />
+          <button
+            type="button"
+            onClick={handleLogout}
+            title={t("settings.signOut")}
+            aria-label={t("settings.signOut")}
+            className="flex h-8 w-8 flex-none items-center justify-center rounded-[9px] border border-white/[0.14] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+          >
+            <LogOut className="h-[15px] w-[15px]" />
+          </button>
+        </div>
       </div>
     </div>
   );
@@ -195,25 +212,25 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
   return (
     <div className="flex h-screen overflow-hidden bg-dark-bg text-slate-100">
       {/* Mobile Top Header */}
-      <div className="md:hidden flex items-center justify-between p-4 border-b border-slate-800 bg-slate-900/90 z-20 w-full fixed top-0 left-0">
-        <div className="flex items-center gap-2">
-          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold">
-            <Mail className="w-4 h-4" />
+      <div className="fixed left-0 top-0 z-20 flex w-full items-center justify-between bg-dark-rail px-4 py-3 shadow-[inset_0_-1px_0_0_rgba(233,233,237,0.09)] md:hidden">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-dark-card text-[17px] leading-none text-indigo-500 shadow-[inset_0_0_0_1px_#9184d9]">
+            λ
           </div>
-          <span className="font-bold text-slate-100">LambdaMail</span>
+          <span className="font-medium text-slate-100">LambdaMail</span>
         </div>
         <button
           onClick={() => setMobileOpen(!mobileOpen)}
           aria-label={t("ui.toggleMenu")}
           aria-expanded={mobileOpen}
-          className="p-2 rounded-lg bg-slate-800 text-slate-300 hover:text-white"
+          className="flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-300 transition-colors hover:bg-white/[0.07] hover:text-slate-100"
         >
-          {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </button>
       </div>
 
-      {/* Desktop Sidebar */}
-      <aside className="hidden md:flex w-64 border-r border-slate-800/80 bg-slate-900/60 backdrop-blur-xl flex-col flex-shrink-0">
+      {/* Desktop rail */}
+      <aside className="hidden w-[244px] flex-none flex-col bg-dark-rail shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:flex">
         {SidebarContent}
       </aside>
 
@@ -225,7 +242,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
             animate={{ x: 0 }}
             exit={{ x: "-100%" }}
             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-            className="fixed inset-0 z-30 bg-slate-950 w-72 border-r border-slate-800 pt-16 md:hidden"
+            className="fixed inset-y-0 left-0 z-30 w-[280px] overflow-y-auto bg-dark-rail pt-14 shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:hidden"
           >
             {SidebarContent}
           </motion.aside>
@@ -233,7 +250,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
       </AnimatePresence>
 
       {/* Main Content Area */}
-      <main className="flex-1 flex flex-col overflow-hidden pt-16 md:pt-0 bg-dark-bg relative">
+      <main className="relative flex flex-1 flex-col overflow-hidden bg-dark-bg pt-14 md:pt-0">
         {children}
       </main>
     </div>

services/webmail/src/app/(user)/user/mail/[folder]/page.tsx

@@ -14,6 +14,7 @@ import {
   Clock,
   MailOpen,
   Download,
+  RefreshCw,
   X,
 } from "lucide-react";
 import { useI18n } from "../../../../../i18n/provider";
@@ -261,76 +262,97 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
     { key: "attachment", label: t("mail.attachmentsFilter"), count: counts.withAttachments },
   ];
 
+
+  // The folder's own name, translated. The heading printed the URL segment
+  // capitalised, so an interface running in Portuguese still said "Inbox".
+  const FOLDER_LABELS: Record<string, string> = {
+    inbox: t("mail.inbox"),
+    sent: t("mail.sent"),
+    drafts: t("mail.drafts"),
+    archive: t("mail.archive"),
+    junk: t("mail.junk"),
+    trash: t("mail.trash"),
+  };
+  const folderTitle = FOLDER_LABELS[folder.toLowerCase()] ?? folder;
+
   return (
-    <div className="flex-1 flex overflow-hidden">
+    <div className="flex flex-1 overflow-hidden">
       {/* Messages List Column */}
       <div
-        className={`${selected ? "hidden md:flex" : "flex"} w-full md:w-[22rem] lg:w-96 border-r border-slate-800/80 flex-col bg-slate-900/40 backdrop-blur-md md:flex-shrink-0`}
+        className={`${selected ? "hidden md:flex" : "flex"} w-full flex-col bg-dark-bg shadow-[inset_-1px_0_0_0_rgba(233,233,237,0.09)] md:w-[404px] md:flex-none`}
       >
         {/* Folder heading, with the counts that belong to the folder rather
             than to the page of it that happens to be loaded. */}
-        <div className="px-3.5 pt-3.5 flex items-baseline justify-between gap-2">
-          <h2 className="text-sm font-bold text-slate-100 capitalize truncate">{folder}</h2>
-          <span className="text-[11px] text-slate-400 font-mono tabular-nums flex-shrink-0">
-            {header.isFolderTotal
-              ? t("mail.messagesInFolder", { count: header.count })
-              : t("mail.searchMatches", { count: header.count })}
-            {metrics.unread > 0 && (
-              <span className="text-indigo-300"> &middot; {t("mail.unreadCount", { count: metrics.unread })}</span>
-            )}
-          </span>
-        </div>
+        <div className="flex flex-col gap-3 px-4 pb-3 pt-4">
+          <div className="flex items-end justify-between gap-3">
+            <div className="min-w-0">
+              <h2 className="text-xl font-medium leading-tight text-slate-100">{folderTitle}</h2>
+              <div className="mt-1 text-xs tabular-nums text-slate-400">
+                {header.isFolderTotal
+                  ? t("mail.messagesInFolder", { count: header.count })
+                  : t("mail.searchMatches", { count: header.count })}
+                {metrics.unread > 0 && (
+                  <span className="text-indigo-300"> &middot; {t("mail.unreadCount", { count: metrics.unread })}</span>
+                )}
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => void loadMessages(searchQuery)}
+              className="flex-none rounded-[9px]"
+            >
+              <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+              <span>{t("common.refresh")}</span>
+            </Button>
+          </div>
 
-        {/* Search Bar & Filter Chips */}
-        <div className="p-3.5 border-b border-slate-800 space-y-2.5">
           <div className="relative">
-            <Search className="w-4 h-4 absolute left-3 top-3 text-slate-400" />
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
             <input
               type="search"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder={t("mail.searchPlaceholder")}
               aria-label={t("common.search")}
-              className="w-full pl-9 pr-3 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+              className="min-h-[38px] w-full rounded-xl bg-dark-panel py-2 pl-[34px] pr-3 text-[13px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent"
             />
           </div>
 
-          <div className="flex items-center gap-1.5 text-[11px] overflow-x-auto pb-0.5">
+          {/* Every chip carries its own number: two of the three used to filter
+              to a count nothing on screen disclosed. Chips wrap rather than
+              scroll, so a longer translation is never pushed out of reach. */}
+          <div className="flex flex-wrap gap-1.5">
             {chips.map((chip) => (
               <button
                 key={chip.label}
                 type="button"
                 aria-pressed={activeFilter === chip.key}
+                data-active={activeFilter === chip.key}
                 onClick={() => setActiveFilter(chip.key)}
-                className={`px-2.5 py-1 rounded-lg font-medium transition-all whitespace-nowrap flex items-center gap-1.5 ${
-                  activeFilter === chip.key
-                    ? "bg-indigo-600 text-white shadow-sm"
-                    : "bg-slate-800/60 text-slate-400 hover:text-slate-200"
-                }`}
+                className="lm-chip"
               >
                 <span>{chip.label}</span>
-                {/* Every chip carries its own number: two of the three used to
-                    filter to a count nothing on screen disclosed. */}
-                <span className="tabular-nums opacity-80">{chip.count}</span>
+                <span className="tabular-nums opacity-70">{chip.count}</span>
               </button>
             ))}
           </div>
         </div>
 
         {/* Message Items List */}
-        <div className="flex-1 overflow-y-auto divide-y divide-slate-800/50">
+        <div className="flex flex-1 flex-col gap-[3px] overflow-y-auto px-2 pb-3">
           {loading ? (
-            <div className="p-6 text-center text-xs text-slate-500 animate-pulse flex items-center justify-center gap-2">
-              <Clock className="w-4 h-4 text-indigo-400 animate-spin" />
+            <div className="flex items-center justify-center gap-2 p-6 text-center text-xs text-slate-400">
+              <Clock className="h-4 w-4 animate-spin text-indigo-500" />
               <span>{t("common.loading")}</span>
             </div>
           ) : error ? (
-            <div className="p-4 text-xs text-rose-400 bg-rose-500/10 m-3 rounded-xl border border-rose-500/20">
+            <div className="m-2 rounded-xl bg-rose-900/60 p-3.5 text-xs leading-relaxed text-rose-200 shadow-edge">
               {error}
             </div>
           ) : filteredMessages.length === 0 ? (
-            <div className="p-8 text-center text-xs text-slate-500 flex flex-col items-center gap-2">
-              <Inbox className="w-8 h-8 text-slate-600" />
+            <div className="flex flex-col items-center gap-2 p-8 text-center text-xs text-slate-400">
+              <Inbox className="h-8 w-8 text-slate-600" strokeWidth={1.25} />
               <span>{searchQuery ? t("mail.noMatches") : t("mail.noMessages")}</span>
             </div>
           ) : (
@@ -340,53 +362,59 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
                 <button
                   key={msg.uid}
                   onClick={() => void openMessage(msg.uid)}
-                  className={`w-full text-left p-3.5 transition-all duration-150 flex gap-3 relative ${
-                    isSelected ? "bg-indigo-600/15" : "hover:bg-slate-800/30"
-                  }`}
+                  data-active={isSelected}
+                  className="lm-row w-full text-left"
                 >
-                  {isSelected && <span className="absolute left-0 top-0 bottom-0 w-[3px] bg-indigo-500" />}
-                  {/* An unread row is marked by a dot in a reserved column, so
-                      the subject does not shift sideways when it is read. */}
-                  <span className="mt-1.5 w-2 flex-shrink-0">
-                    {!msg.seen && <span className="block w-2 h-2 rounded-full bg-indigo-400" />}
-                  </span>
                   <span
-                    className={`mt-0.5 w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-[10px] font-bold ${
+                    className={`flex h-[34px] w-[34px] flex-none items-center justify-center rounded-full text-xs ${
                       msg.seen
-                        ? "bg-slate-800 text-slate-400"
-                        : "bg-indigo-500/25 text-indigo-200 border border-indigo-500/30"
+                        ? "bg-dark-card text-slate-400"
+                        : "bg-indigo-900 text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]"
                     }`}
                     aria-hidden="true"
                   >
                     {initials(msg.from_display_name, msg.sender_address)}
                   </span>
 
-                  <span className="min-w-0 flex-1">
-                    <span className="flex items-center justify-between gap-2 mb-0.5">
+                  <span className="flex min-w-0 flex-1 flex-col gap-[3px]">
+                    <span className="flex items-baseline gap-2">
                       <span
-                        className={`text-xs truncate ${
-                          msg.seen ? "text-slate-300 font-medium" : "text-white font-bold"
+                        className={`min-w-0 truncate text-[13.5px] ${
+                          msg.seen ? "text-slate-300" : "text-slate-100"
                         }`}
                       >
                         {msg.from_display_name || msg.sender_address}
                       </span>
-                      <span className="text-[10px] text-slate-500 font-mono flex-shrink-0 tabular-nums">
+                      <span className="ml-auto flex-none text-[11px] tabular-nums text-slate-500">
                         {listTimestamp(msg.received_at, locale)}
                       </span>
                     </span>
+                    {/* The subject wraps instead of being clipped - a truncated
+                        subject is the one thing a mail list must not do. */}
                     <span
-                      className={`text-xs truncate flex items-center gap-1.5 mb-0.5 ${
-                        msg.seen ? "text-slate-300" : "font-semibold text-slate-100"
+                      className={`text-[13.5px] leading-snug ${
+                        msg.seen ? "text-slate-300" : "text-slate-100"
                       }`}
                     >
-                      <span className="truncate">{msg.subject || t("mail.noSubject")}</span>
-                      {msg.has_attachments && (
-                        <Paperclip className="w-3 h-3 text-slate-400 flex-shrink-0" />
-                      )}
+                      {msg.subject || t("mail.noSubject")}
                     </span>
-                    <span className="block text-[11px] text-slate-500 truncate leading-relaxed">
+                    <span className="line-clamp-2 text-xs leading-relaxed text-slate-400">
                       {msg.snippet}
                     </span>
+                    {msg.has_attachments && (
+                      <span className="mt-px flex items-center gap-1.5">
+                        <span className="inline-flex items-center gap-1 rounded-md bg-slate-800 px-2 py-0.5 text-[10.5px] text-slate-300">
+                          <Paperclip className="h-2.5 w-2.5" />
+                          {t("mail.attachments")}
+                        </span>
+                      </span>
+                    )}
+                  </span>
+
+                  {/* An unread row is marked by a dot in a reserved column, so
+                      the subject does not shift sideways when it is read. */}
+                  <span className="mt-3 w-[7px] flex-none">
+                    {!msg.seen && <span className="block h-[7px] w-[7px] rounded-full bg-indigo-500" />}
                   </span>
                 </button>
               );
@@ -396,9 +424,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
       </div>
 
       {/* Message Reader Column */}
-      <div
-        className={`${selected ? "flex" : "hidden md:flex"} flex-1 flex-col bg-dark-bg overflow-y-auto`}
-      >
+      <div className={`${selected ? "flex" : "hidden md:flex"} flex-1 flex-col overflow-y-auto bg-dark-bg`}>
         <AnimatePresence mode="wait">
           {selected ? (
             <motion.article
@@ -407,137 +433,140 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -8 }}
               transition={{ duration: 0.15 }}
-              className="w-full max-w-3xl mx-auto px-4 sm:px-6 py-5 space-y-5"
+              className="mx-auto flex w-full max-w-[760px] flex-col gap-5 px-5 pb-10 pt-6 sm:px-7"
             >
               {/* Toolbar: closing, replying and read state all in one row, so
                   the reader is not the only pane with no way out of itself. */}
-              <div className="flex items-center justify-between gap-2">
-                <button
-                  type="button"
-                  onClick={() => setSelected(null)}
-                  className="flex items-center gap-1.5 rounded-lg border border-slate-800 bg-slate-900/70 px-2.5 py-1.5 text-xs text-slate-300 hover:text-white hover:border-slate-700 transition-colors"
+              <div className="flex flex-wrap items-center gap-2">
+                <Link
+                  href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
                 >
-                  <X className="w-3.5 h-3.5" />
-                  <span>{t("mail.backToList")}</span>
-                </button>
-
-                <div className="flex items-center gap-2 text-xs">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const nowSeen = !(selectedRow?.seen ?? true);
-                      void setSeen(selected.uid, nowSeen, { persist: true });
-                    }}
-                    className="flex items-center gap-1.5 rounded-lg border border-slate-800 bg-slate-900/70 px-2.5 py-1.5 text-slate-300 hover:text-white hover:border-slate-700 transition-colors"
-                  >
-                    <MailOpen className="w-3.5 h-3.5" />
-                    <span className="hidden sm:inline">
-                      {selectedRow?.seen === false ? t("mail.markRead") : t("mail.markUnread")}
-                    </span>
-                  </button>
-                  <Link
-                    href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
-                  >
-                    <Button variant="primary" size="sm">
-                      <Reply className="w-3.5 h-3.5" />
-                      <span>{t("mail.reply")}</span>
-                    </Button>
-                  </Link>
-                  {/* Forward carries the subject but no recipient: it used to
-                      prefill the original sender, which sends the message
-                      straight back to whoever wrote it. */}
-                  <Link href={`/user/compose?subject=${encodeURIComponent(selected.subject)}`}>
-                    <Button variant="secondary" size="sm">
-                      <Forward className="w-3.5 h-3.5" />
-                      <span className="hidden sm:inline">{t("mail.forward")}</span>
-                    </Button>
-                  </Link>
-                </div>
+                  <Button variant="primary" size="sm">
+                    <Reply className="h-3.5 w-3.5" />
+                    <span>{t("mail.reply")}</span>
+                  </Button>
+                </Link>
+                {/* Forward carries the subject but no recipient: it used to
+                    prefill the original sender, which sends the message
+                    straight back to whoever wrote it. */}
+                <Link href={`/user/compose?subject=${encodeURIComponent(selected.subject)}`}>
+                  <Button variant="secondary" size="sm">
+                    <Forward className="h-3.5 w-3.5" />
+                    <span>{t("mail.forward")}</span>
+                  </Button>
+                </Link>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => {
+                    const nowSeen = !(selectedRow?.seen ?? true);
+                    void setSeen(selected.uid, nowSeen, { persist: true });
+                  }}
+                >
+                  <MailOpen className="h-3.5 w-3.5" />
+                  <span>{selectedRow?.seen === false ? t("mail.markRead") : t("mail.markUnread")}</span>
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => setSelected(null)}
+                  className="ml-auto h-9 w-9 flex-none p-0"
+                  title={t("mail.backToList")}
+                  aria-label={t("mail.backToList")}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
               </div>
 
-              <header className="space-y-4">
-                <h1 className="text-lg md:text-xl font-bold text-white tracking-tight leading-snug break-words">
+              <header className="flex flex-col gap-3.5">
+                <h1 className="text-[25px] font-medium leading-tight tracking-[-0.015em] text-slate-100 [text-wrap:pretty]">
                   {selected.subject || t("mail.noSubject")}
                 </h1>
 
                 <div className="flex items-start gap-3">
-                  <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-indigo-500/30 to-cyan-500/20 border border-indigo-500/30 text-indigo-200 flex items-center justify-center text-[11px] font-bold flex-shrink-0">
+                  <div className="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-full bg-indigo-900 text-[13px] text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]">
                     {initials(selectedRow?.from_display_name ?? "", selected.from)}
                   </div>
-                  <div className="min-w-0 flex-1 text-xs">
-                    <div className="flex flex-wrap items-baseline gap-x-2">
-                      <span className="font-semibold text-slate-100 break-all">{selected.from}</span>
-                      <span className="text-[11px] text-slate-500 font-mono">
-                        {selected.date
-                          ? new Date(selected.date).toLocaleString(locale)
-                          : selectedRow
-                            ? new Date(selectedRow.received_at).toLocaleString(locale)
-                            : ""}
-                      </span>
+                  <div className="flex min-w-0 flex-1 flex-col gap-[3px]">
+                    <div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
+                      <span className="break-all text-sm text-slate-100">{selected.from}</span>
+                      {selectedRow && selectedRow.size_bytes > 0 && (
+                        <span className="text-[11px] tabular-nums text-slate-500">
+                          {formatBytes(selectedRow.size_bytes)}
+                        </span>
+                      )}
                     </div>
                     {/* Recipients are labelled with translated headings; they
                         used to be introduced by a Portuguese word regardless of
                         the interface language. */}
                     {selected.to.length > 0 && (
-                      <div className="text-[11px] text-slate-400 break-all">
-                        <span className="text-slate-500">{t("ui.toRecipients")}: </span>
+                      <div className="break-words text-[12.5px] leading-relaxed text-slate-400">
+                        <span className="text-slate-500">{t("ui.toRecipients")} </span>
                         {selected.to.join(", ")}
                       </div>
                     )}
                     {selected.cc.length > 0 && (
-                      <div className="text-[11px] text-slate-400 break-all">
-                        <span className="text-slate-500">{t("ui.ccRecipients")}: </span>
+                      <div className="break-words text-[12.5px] leading-relaxed text-slate-400">
+                        <span className="text-slate-500">{t("ui.ccRecipients")} </span>
                         {selected.cc.join(", ")}
                       </div>
                     )}
-                    {selectedRow && selectedRow.size_bytes > 0 && (
-                      <div className="text-[11px] text-slate-500 font-mono">
-                        {formatBytes(selectedRow.size_bytes)}
-                      </div>
-                    )}
                   </div>
+                  <span className="flex-none text-xs tabular-nums text-slate-400">
+                    {selected.date
+                      ? new Date(selected.date).toLocaleString(locale)
+                      : selectedRow
+                        ? new Date(selectedRow.received_at).toLocaleString(locale)
+                        : ""}
+                  </span>
                 </div>
+              </header>
 
-                {/* Attachment Download Chips */}
-                {selected.attachments.length > 0 && (
-                  <div className="flex flex-wrap gap-2 text-xs">
+              {/* Remote content banner, shown only when something was actually
+                  held back rather than over every message. The wording is the
+                  reassurance, not the colour: this is not an error. */}
+              {hasBlockedContent && (
+                <div className="flex flex-wrap items-center gap-2 rounded-xl bg-dark-card p-3 shadow-edge">
+                  <ImageIcon className="h-4 w-4 flex-none text-indigo-400" />
+                  <span className="min-w-[200px] flex-1 text-[12.5px] leading-relaxed text-slate-300">
+                    {t("mail.remoteContentBlocked")}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setLoadRemoteImages(!loadRemoteImages)}
+                  >
+                    {loadRemoteImages ? t("mail.imagesEnabled") : t("mail.loadImages")}
+                  </Button>
+                </div>
+              )}
+
+              {/* Attachment Download Chips */}
+              {selected.attachments.length > 0 && (
+                <div className="flex flex-col gap-2">
+                  <div className="text-[11px] uppercase tracking-[0.08em] text-slate-400">
+                    {t("mail.attachments")}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
                     {selected.attachments.map((filename, idx) => (
                       <a
                         key={`${filename}-${idx}`}
                         href={`/api/v1/mail/message/${selected.uid}/attachment/${encodeURIComponent(filename)}?folder=${encodeURIComponent(folder)}`}
                         download={filename}
-                        className="group max-w-full px-3 py-2 rounded-xl bg-slate-900/80 border border-slate-800 hover:border-indigo-500/60 hover:bg-slate-900 text-slate-200 flex items-center gap-2 transition-all"
+                        className="group flex max-w-full items-center gap-2.5 rounded-xl bg-dark-card px-3 py-2.5 text-slate-200 shadow-edge transition-shadow hover:shadow-edge-accent"
                       >
-                        <Paperclip className="w-3.5 h-3.5 text-indigo-400 flex-shrink-0" />
-                        <span className="truncate font-mono text-[11px]">{filename}</span>
-                        <Download className="w-3.5 h-3.5 text-slate-500 group-hover:text-indigo-300 flex-shrink-0" />
+                        <Paperclip className="h-[18px] w-[18px] flex-none text-indigo-400" />
+                        <span className="min-w-0 break-all text-[13px]">{filename}</span>
+                        <Download className="h-4 w-4 flex-none text-slate-500 group-hover:text-indigo-300" />
                       </a>
                     ))}
                   </div>
-                )}
-              </header>
-
-              {/* Remote content banner, shown only when something was actually
-                  held back rather than over every message. */}
-              {hasBlockedContent && (
-                <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/25 flex flex-wrap items-center justify-between gap-2 text-xs text-amber-200">
-                  <span className="flex items-center gap-2">
-                    <ImageIcon className="w-4 h-4 text-amber-400 flex-shrink-0" />
-                    <span>{t("mail.remoteContentBlocked")}</span>
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => setLoadRemoteImages(!loadRemoteImages)}
-                    className="px-3 py-1 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 text-amber-100 font-medium transition-colors"
-                  >
-                    {loadRemoteImages ? t("mail.imagesEnabled") : t("mail.loadImages")}
-                  </button>
                 </div>
               )}
 
               {/* Message Body */}
               {readerDocument ? (
-                <div className="bg-white rounded-2xl overflow-hidden border border-slate-800 shadow-xl">
+                <div className="overflow-hidden rounded-2xl bg-white shadow-edge">
                   <iframe
                     title={t("ui.messageBody")}
                     srcDoc={readerDocument}
@@ -549,12 +578,12 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
                     sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
                     referrerPolicy="no-referrer"
                     style={{ height: `${readerHeight}px` }}
-                    className="w-full border-0 block"
+                    className="block w-full border-0"
                   />
                 </div>
               ) : (
-                <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
-                  <pre className="whitespace-pre-wrap break-words text-sm text-slate-200 font-sans leading-relaxed">
+                <div className="rounded-2xl bg-dark-panel px-6 py-6 shadow-edge">
+                  <pre className="whitespace-pre-wrap break-words font-sans text-[14.5px] leading-relaxed text-slate-200">
                     {selected.text || t("mail.emptyBody")}
                   </pre>
                 </div>
@@ -564,9 +593,9 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              className="flex-1 flex flex-col items-center justify-center text-slate-500 text-sm gap-3 py-20 px-6 text-center"
+              className="flex flex-1 flex-col items-center justify-center gap-3 px-6 py-20 text-center text-sm text-slate-400"
             >
-              <Mail className="w-12 h-12 text-slate-700 stroke-1" />
+              <Mail className="h-12 w-12 text-slate-600" strokeWidth={1} />
               {/* This pane used to say "No messages" even with a full list
                   beside it: the empty reader is not an empty folder. */}
               <span>{t("mail.selectAMessage")}</span>

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -12,12 +12,13 @@ import {
   Trash2,
   Plus,
   Lock,
+  Languages,
 } from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
-import { Card } from "../../../../components/ui/Card";
 import { Badge } from "../../../../components/ui/Badge";
 import { Button } from "../../../../components/ui/Button";
 import { TotpEnrolment, RecoveryCodes } from "../../../../components/TotpEnrolment";
+import { LanguageSwitcher } from "../../../../i18n/LanguageSwitcher";
 
 interface SieveRule {
   id: string;
@@ -44,8 +45,11 @@ interface WebSession {
   current: boolean;
 }
 
+type SettingsTab = "security" | "filters" | "vacation" | "signature" | "language";
+
 export default function UserSettingsPage() {
   const t = useTranslations();
+  const [activeTab, setActiveTab] = useState<SettingsTab>("security");
 
   const [mfaEnabled, setMfaEnabled] = useState(false);
   const [qrSecret, setQrSecret] = useState<string | null>(null);
@@ -241,396 +245,551 @@ export default function UserSettingsPage() {
     }
   };
 
+  /* The screen was one long scroll of eight panels, so the two things people
+     come here to do - turn on a second factor, and write a filter - were
+     separated by everything else. The same panels now sit behind a tab strip,
+     in the order the redesign groups them. */
+  const tabs = [
+    { id: "security" as const, label: t("settings.security"), icon: Shield },
+    { id: "filters" as const, label: t("settings.sieveTitle"), icon: Filter },
+    { id: "vacation" as const, label: t("settings.vacationTitle"), icon: Palmtree },
+    { id: "signature" as const, label: t("settings.signatureTitle"), icon: FileText },
+    { id: "language" as const, label: t("settings.language"), icon: Languages },
+  ];
+
+  const input =
+    "w-full min-h-[36px] rounded-[10px] bg-dark-card px-3 py-2 text-[13.5px] text-slate-100 placeholder-slate-500 shadow-edge transition-shadow focus:outline-none focus-visible:shadow-edge-accent";
+  const fieldLabel = "mb-1.5 block text-xs text-slate-400";
+  const panel = "flex flex-col gap-4 rounded-2xl bg-dark-panel p-5 shadow-edge";
+  const panelTitle = "text-[17px] font-medium leading-tight text-slate-100";
+  const panelIntro = "mt-1 text-[13px] leading-relaxed text-slate-400";
+  const tile = "flex flex-wrap items-center gap-3 rounded-xl bg-dark-card px-3.5 py-3 text-[13px] shadow-edge";
+
   return (
-    <div className="flex-1 p-6 md:p-8 bg-dark-bg overflow-y-auto">
-      <div className="max-w-4xl mx-auto space-y-8">
+    <div className="flex-1 overflow-y-auto bg-dark-bg px-5 pb-11 pt-7 sm:px-8">
+      <div className="mx-auto flex w-full max-w-[900px] flex-col gap-5">
         <div>
-          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
-            {t("settings.title")}
-          </h1>
-          <p className="text-sm text-slate-400 mt-1">{t("settings.subtitle")}</p>
+          <h1 className="text-[25px] font-medium leading-tight text-slate-100">{t("settings.title")}</h1>
+          <p className="mt-1.5 text-[13.5px] text-slate-400">{t("settings.subtitle")}</p>
+        </div>
+
+        {/* Tabs wrap rather than scroll, so a longer translation never pushes
+            one out of reach. */}
+        <div className="lm-tabstrip self-start">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                data-active={activeTab === tab.id}
+                aria-pressed={activeTab === tab.id}
+                className="lm-tab"
+              >
+                <Icon className="h-[15px] w-[15px] flex-none" />
+                <span>{tab.label}</span>
+              </button>
+            );
+          })}
         </div>
 
         {message && (
-          <div className="p-4 rounded-xl bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs flex items-center gap-2">
-            <CheckCircle2 className="w-4 h-4 text-indigo-400" />
+          <div className="flex items-center gap-2 rounded-xl bg-dark-card px-4 py-3 text-[12.5px] text-slate-200 shadow-edge">
+            <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
             <span>{message}</span>
           </div>
         )}
 
-        {/* 2FA TOTP SECTION */}
-        <Card className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h2 className="text-base font-bold text-white flex items-center gap-2">
-                <Shield className="w-5 h-5 text-indigo-400" />
-                {t("ui.twoFactorSection")}
-              </h2>
-              <p className="text-xs text-slate-400 mt-0.5">{t("settings.twoFactorIntro")}</p>
-            </div>
-            <Badge variant={mfaEnabled ? "success" : "warning"}>
-              {mfaEnabled ? t("settings.mfaEnabled") : t("settings.mfaDisabled")}
-            </Badge>
-          </div>
+        {activeTab === "security" && (
+          <div className="flex flex-col gap-4">
+            {/* 2FA TOTP SECTION */}
+            <section className={panel}>
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="min-w-[260px] flex-1">
+                  <h2 className={panelTitle}>{t("ui.twoFactorSection")}</h2>
+                  <p className={panelIntro}>{t("settings.twoFactorIntro")}</p>
+                </div>
+                <Badge variant={mfaEnabled ? "success" : "warning"} className="flex-none">
+                  {mfaEnabled ? t("settings.mfaEnabled") : t("settings.mfaDisabled")}
+                </Badge>
+              </div>
 
-          {!mfaEnabled && !qrSecret && (
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={async () => {
-                const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
-                const data = await res.json();
-                setQrSecret(data.secret);
-                setQrUri(data.uri);
-              }}
-            >
-              <span>{t("settings.enableMfa")}</span>
-            </Button>
-          )}
-
-          {qrSecret && (
-            <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-4 text-xs">
-              <TotpEnrolment secret={qrSecret} uri={qrUri} />
-              {/* Enrolment resumes rather than restarting, so this code is the
-                  same one already scanned. Anyone who removed the entry from
-                  their app needs a way to ask for a different secret. */}
-              <button
-                type="button"
-                onClick={async () => {
-                  const res = await fetch("/api/v1/user/mfa/totp/enroll?reset=1", { method: "POST" });
-                  const data = await res.json().catch(() => ({}));
-                  if (res.ok) {
+              {!mfaEnabled && !qrSecret && (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="self-start"
+                  onClick={async () => {
+                    const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
+                    const data = await res.json();
                     setQrSecret(data.secret);
                     setQrUri(data.uri);
-                    setTotpCode("");
-                  }
-                }}
-                className="text-[11px] text-slate-400 underline hover:text-slate-200"
-              >
-                {t("settings.startOverMfa")}
-              </button>
-              <form
-                onSubmit={async (e) => {
-                  e.preventDefault();
-                  const res = await fetch("/api/v1/user/mfa/totp/confirm", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ secret: qrSecret, code: totpCode }),
-                  });
-                  const data = await res.json().catch(() => ({}));
-                  if (res.ok) {
-                    setMfaEnabled(true);
-                    setRecoveryCodes(data.recovery_codes ?? []);
-                    setQrSecret(null);
-                    setTotpCode("");
-                  } else {
-                    setMessage(data.message ?? t("auth.verificationFailed"));
-                  }
-                }}
-                className="pt-2 flex items-center gap-3"
-              >
+                  }}
+                >
+                  <span>{t("settings.enableMfa")}</span>
+                </Button>
+              )}
+
+              {qrSecret && (
+                <div className="flex flex-col gap-4 rounded-xl bg-dark-card p-4 text-xs shadow-edge">
+                  <TotpEnrolment secret={qrSecret} uri={qrUri} />
+                  {/* Enrolment resumes rather than restarting, so this code is the
+                      same one already scanned. Anyone who removed the entry from
+                      their app needs a way to ask for a different secret. */}
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const res = await fetch("/api/v1/user/mfa/totp/enroll?reset=1", { method: "POST" });
+                      const data = await res.json().catch(() => ({}));
+                      if (res.ok) {
+                        setQrSecret(data.secret);
+                        setQrUri(data.uri);
+                        setTotpCode("");
+                      }
+                    }}
+                    className="self-start text-[11.5px] text-slate-400 underline underline-offset-4 hover:text-slate-200"
+                  >
+                    {t("settings.startOverMfa")}
+                  </button>
+                  <form
+                    onSubmit={async (e) => {
+                      e.preventDefault();
+                      const res = await fetch("/api/v1/user/mfa/totp/confirm", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ secret: qrSecret, code: totpCode }),
+                      });
+                      const data = await res.json().catch(() => ({}));
+                      if (res.ok) {
+                        setMfaEnabled(true);
+                        setRecoveryCodes(data.recovery_codes ?? []);
+                        setQrSecret(null);
+                        setTotpCode("");
+                      } else {
+                        setMessage(data.message ?? t("auth.verificationFailed"));
+                      }
+                    }}
+                    className="flex flex-wrap items-center gap-3"
+                  >
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      autoComplete="one-time-code"
+                      value={totpCode}
+                      onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                      placeholder={t("settings.sixDigitCode")}
+                      maxLength={7}
+                      required
+                      className="min-h-[36px] w-[150px] rounded-[10px] bg-dark-rail px-3 py-2 text-center font-mono text-[13.5px] tracking-[0.2em] text-slate-100 shadow-edge focus:outline-none focus-visible:shadow-edge-accent"
+                    />
+                    <Button type="submit" variant="primary" size="sm">
+                      {t("common.confirm")}
+                    </Button>
+                  </form>
+                </div>
+              )}
+
+              {recoveryCodes && (
+                <RecoveryCodes
+                  codes={recoveryCodes}
+                  onContinue={() => setRecoveryCodes(null)}
+                  continueLabel={t("common.continue")}
+                />
+              )}
+            </section>
+
+            {/* APP PASSWORDS */}
+            <section className={panel}>
+              <div>
+                <h2 className={panelTitle}>{t("ui.appPasswordsSection")}</h2>
+              </div>
+
+              {generatedAppPass && (
+                <div className="flex flex-col gap-2 rounded-xl bg-dark-card p-4 text-xs shadow-edge">
+                  <div className="text-slate-100">{t("ui.appPasswordGenerated")}</div>
+                  <code className="lm-code block break-all p-2.5 text-sm">{generatedAppPass}</code>
+                  <div className="text-[11px] text-amber-400">{t("ui.copyPasswordNow")}</div>
+                </div>
+              )}
+
+              <form onSubmit={createAppPassword} className="flex flex-wrap gap-2">
                 <input
                   type="text"
-                  inputMode="numeric"
-                  autoComplete="one-time-code"
-                  value={totpCode}
-                  onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
-                  placeholder={t("settings.sixDigitCode")}
-                  maxLength={7}
-                  required
-                  className="px-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
+                  value={newAppPassLabel}
+                  onChange={(e) => setNewAppPassLabel(e.target.value)}
+                  placeholder={t("settings.appPasswordPlaceholder")}
+                  className={`${input} min-w-[220px] flex-1`}
                 />
-                <Button type="submit" variant="primary" size="sm">
-                  {t("common.confirm")}
+                <Button type="submit" variant="primary" size="md" className="flex-none">
+                  {t("settings.generateAppPassword")}
                 </Button>
               </form>
-            </div>
-          )}
 
-          {recoveryCodes && (
-            <RecoveryCodes
-              codes={recoveryCodes}
-              onContinue={() => setRecoveryCodes(null)}
-              continueLabel={t("common.continue")}
-            />
-          )}
-        </Card>
-
-        {/* VISUAL SIEVE RULES BUILDER */}
-        <Card className="space-y-4">
-          <div>
-            <h2 className="text-base font-bold text-white flex items-center gap-2">
-              <Filter className="w-5 h-5 text-indigo-400" />
-              {t("settings.sieveTitle")}
-            </h2>
-            <p className="text-xs text-slate-400 mt-0.5">{t("settings.sieveIntro")}</p>
-          </div>
-
-          <form onSubmit={addSieveRule} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
-            <select
-              value={newField}
-              onChange={(e) => setNewField(e.target.value as "From" | "Subject" | "Header")}
-              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            >
-              <option value="Subject">{t("settings.fieldSubject")}</option>
-              <option value="From">{t("settings.fieldFrom")}</option>
-              <option value="Header">{t("settings.fieldHeader")}</option>
-            </select>
-
-            <select
-              value={newMatch}
-              onChange={(e) => setNewMatch(e.target.value as "contains" | "equals" | "matches")}
-              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            >
-              <option value="contains">{t("settings.matchContains")}</option>
-              <option value="equals">{t("settings.matchEquals")}</option>
-              <option value="matches">{t("settings.matchRegex")}</option>
-            </select>
-
-            <input
-              type="text"
-              value={newValue}
-              onChange={(e) => setNewValue(e.target.value)}
-              placeholder={t("settings.valuePlaceholder")}
-              required
-              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
-            />
-
-            <select
-              value={newAction}
-              onChange={(e) => setNewAction(e.target.value as "move" | "flag" | "discard" | "redirect")}
-              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            >
-              <option value="move">{t("settings.actionMove")}</option>
-              <option value="flag">{t("settings.actionFlag")}</option>
-              <option value="discard">{t("settings.actionDiscard")}</option>
-            </select>
-
-            <Button type="submit" variant="primary" size="sm" className="w-full">
-              <Plus className="w-4 h-4" />
-              <span>{t("settings.addRule")}</span>
-            </Button>
-          </form>
-
-          <div className="space-y-2 text-xs">
-            {rules.map((r) => (
-              <div key={r.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800">
-                <span className="font-mono text-slate-200">
-                  {t("settings.ruleIf")} <strong>{r.field}</strong> {r.match} &quot;{r.value}&quot; &rarr;{" "}
-                  {t("settings.ruleThen")} {r.action.toUpperCase()}
-                </span>
-                <button
-                  onClick={() => removeSieveRule(r.id)}
-                  className="text-rose-400 hover:text-rose-300 transition-colors p-1"
-                >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))}
-          </div>
-        </Card>
-
-        {/* VACATION AUTO-RESPONDER */}
-        <Card className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h2 className="text-base font-bold text-white flex items-center gap-2">
-                <Palmtree className="w-5 h-5 text-indigo-400" />
-                {t("settings.vacationTitle")}
-              </h2>
-              <p className="text-xs text-slate-400 mt-0.5">{t("settings.vacationIntro")}</p>
-            </div>
-            <label className="relative inline-flex items-center cursor-pointer">
-              <input
-                type="checkbox"
-                checked={vacationEnabled}
-                onChange={(e) => setVacationEnabled(e.target.checked)}
-                className="sr-only peer"
-              />
-              <div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600" />
-            </label>
-          </div>
-
-          {vacationSaved && (
-            <div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
-              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
-              <span>{t("settings.settingsSaved")}</span>
-            </div>
-          )}
-
-          {vacationEnabled && (
-            <form onSubmit={saveVacationResponder} className="space-y-3 text-xs">
-              <div>
-                <label className="font-semibold text-slate-300 mb-1.5 block">{t("settings.vacationSubjectLabel")}</label>
-                <input
-                  type="text"
-                  value={vacationSubject}
-                  onChange={(e) => setVacationSubject(e.target.value)}
-                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-                />
-              </div>
-
-              <div>
-                <label className="font-semibold text-slate-300 mb-1.5 block">{t("settings.vacationBodyLabel")}</label>
-                <textarea
-                  rows={4}
-                  value={vacationBody}
-                  onChange={(e) => setVacationBody(e.target.value)}
-                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-                />
-              </div>
-
-              <Button type="submit" variant="primary" size="sm">
-                {t("settings.saveAutoReply")}
-              </Button>
-            </form>
-          )}
-        </Card>
-
-        {/* EMAIL SIGNATURE MANAGER */}
-        <Card className="space-y-4 text-xs">
-          <div>
-            <h2 className="text-base font-bold text-white flex items-center gap-2">
-              <FileText className="w-5 h-5 text-indigo-400" />
-              {t("settings.signatureTitle")}
-            </h2>
-            <p className="text-slate-400 mt-0.5">{t("settings.signatureIntro")}</p>
-          </div>
-
-          {sigSaved && (
-            <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>{t("settings.signatureSaved")}</span>
-            </div>
-          )}
-
-          <textarea
-            rows={4}
-            value={signature}
-            onChange={(e) => setSignature(e.target.value)}
-            placeholder={t("settings.signaturePlaceholder")}
-            className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
-          />
-
-          <Button onClick={saveSignature} variant="primary" size="sm">
-            {t("common.save")}
-          </Button>
-        </Card>
-
-        {/* APP PASSWORDS */}
-        <Card className="space-y-4">
-          <h2 className="text-base font-bold text-white flex items-center gap-2">
-            <KeyRound className="w-5 h-5 text-indigo-400" />
-            {t("ui.appPasswordsSection")}
-          </h2>
-
-          {generatedAppPass && (
-            <div className="p-4 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs space-y-1">
-              <div className="font-bold">{t("ui.appPasswordGenerated")}</div>
-              <code className="block font-mono text-sm text-white break-all bg-slate-950 p-2 rounded-lg border border-slate-800">
-                {generatedAppPass}
-              </code>
-              <div className="text-[10px] text-emerald-400">{t("ui.copyPasswordNow")}</div>
-            </div>
-          )}
-
-          <form onSubmit={createAppPassword} className="flex gap-2">
-            <input
-              type="text"
-              value={newAppPassLabel}
-              onChange={(e) => setNewAppPassLabel(e.target.value)}
-              placeholder={t("settings.appPasswordPlaceholder")}
-              className="flex-1 px-3.5 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            />
-            <Button type="submit" variant="primary" size="sm">
-              {t("settings.generateAppPassword")}
-            </Button>
-          </form>
-
-          <div className="space-y-2">
-            {appPasswords.length === 0 ? (
-              <div className="text-xs text-slate-500 italic">{t("ui.noAppPasswords")}</div>
-            ) : (
-              appPasswords.map((ap) => (
-                <div key={ap.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
-                  <div>
-                    <span className="font-bold text-slate-200">{ap.label}</span>
-                    <span className="text-[10px] text-slate-500 ml-2">
-                      {ap.created_at ? new Date(ap.created_at).toLocaleDateString() : ""}
-                    </span>
-                  </div>
-                  <button type="button" onClick={() => void revokeAppPassword(ap.id)} className="text-rose-400 hover:text-rose-300 p-1">
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              ))
-            )}
-          </div>
-        </Card>
-
-        {/* ACTIVE SESSIONS */}
-        <Card className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h2 className="text-base font-bold text-white flex items-center gap-2">
-              <Monitor className="w-5 h-5 text-indigo-400" />
-              {t("ui.activeSessions")}
-            </h2>
-            <Button variant="ghost" size="sm" onClick={() => void revokeOtherSessions()}>
-              {t("ui.signOutOthers")}
-            </Button>
-          </div>
-
-          <div className="space-y-2">
-            {sessions.map((session) => (
-              <div key={session.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
-                <div className="min-w-0">
-                  <div className="text-slate-200 truncate font-mono">
-                    {session.ip_address ?? "-"}
-                    <span className="text-[10px] text-slate-500 ml-2 uppercase font-sans font-bold">{session.surface}</span>
-                  </div>
-                  <div className="text-[10px] text-slate-500 truncate">{session.user_agent ?? ""}</div>
-                </div>
-                {session.current ? (
-                  <Badge variant="success">{t("ui.currentSession")}</Badge>
+              <div className="flex flex-col gap-2">
+                {appPasswords.length === 0 ? (
+                  <div className="text-[13px] text-slate-400">{t("ui.noAppPasswords")}</div>
                 ) : (
-                  <button type="button" onClick={() => void revokeSession(session.id)} className="text-rose-400 hover:text-rose-300 p-1">
-                    <Trash2 className="w-4 h-4" />
-                  </button>
+                  appPasswords.map((ap) => (
+                    <div key={ap.id} className={tile}>
+                      <div className="min-w-0 flex-1">
+                        <div className="break-words text-[13.5px] text-slate-100">{ap.label}</div>
+                        <div className="mt-0.5 text-[11.5px] text-slate-400">
+                          {ap.created_at ? new Date(ap.created_at).toLocaleDateString() : ""}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => void revokeAppPassword(ap.id)}
+                        aria-label={t("common.delete")}
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                      >
+                        <Trash2 className="h-[15px] w-[15px]" />
+                      </button>
+                    </div>
+                  ))
                 )}
               </div>
-            ))}
-          </div>
-        </Card>
+            </section>
 
-        {/* PASSWORD CHANGE */}
-        <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" />
-            {t("ui.changePassword")}
-          </h2>
-          <form onSubmit={changePassword} className="space-y-3">
-            <input
-              type="password"
-              value={currentPassword}
-              onChange={(e) => setCurrentPassword(e.target.value)}
-              placeholder={t("ui.currentPassword")}
-              required
-              className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            />
-            <input
-              type="password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              placeholder={t("ui.newPassword")}
-              minLength={12}
-              required
-              className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
-            />
-            <Button type="submit" variant="primary" size="sm">
-              {t("common.save")}
-            </Button>
-          </form>
-        </Card>
+            {/* ACTIVE SESSIONS */}
+            <section className={panel}>
+              <div className="flex flex-wrap items-center justify-between gap-4">
+                <h2 className={panelTitle}>{t("ui.activeSessions")}</h2>
+                <Button variant="secondary" size="sm" onClick={() => void revokeOtherSessions()}>
+                  {t("ui.signOutOthers")}
+                </Button>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                {sessions.map((session) => (
+                  <div key={session.id} className={tile}>
+                    <Monitor className="h-5 w-5 flex-none text-slate-400" />
+                    <div className="min-w-0 flex-1">
+                      <div className="break-all font-mono text-[13px] text-slate-100">
+                        {session.ip_address ?? "-"}
+                        <span className="ml-2 font-sans text-[10.5px] uppercase tracking-[0.08em] text-slate-400">
+                          {session.surface}
+                        </span>
+                      </div>
+                      <div className="mt-0.5 break-all text-[11.5px] text-slate-400">{session.user_agent ?? ""}</div>
+                    </div>
+                    {session.current ? (
+                      <Badge variant="info" className="flex-none">
+                        {t("ui.currentSession")}
+                      </Badge>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => void revokeSession(session.id)}
+                        aria-label={t("common.delete")}
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                      >
+                        <Trash2 className="h-[15px] w-[15px]" />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            {/* PASSWORD CHANGE */}
+            <section className={panel}>
+              <div className="flex items-center gap-2">
+                <Lock className="h-[17px] w-[17px] flex-none text-indigo-500" />
+                <h2 className={panelTitle}>{t("ui.changePassword")}</h2>
+              </div>
+              <form onSubmit={changePassword} className="flex flex-col gap-3">
+                <div>
+                  <label htmlFor="current-password" className={fieldLabel}>
+                    {t("ui.currentPassword")}
+                  </label>
+                  <input
+                    id="current-password"
+                    type="password"
+                    value={currentPassword}
+                    onChange={(e) => setCurrentPassword(e.target.value)}
+                    required
+                    className={input}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="new-password" className={fieldLabel}>
+                    {t("ui.newPassword")}
+                  </label>
+                  <input
+                    id="new-password"
+                    type="password"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    minLength={12}
+                    required
+                    className={input}
+                  />
+                </div>
+                <Button type="submit" variant="primary" size="md" className="self-start">
+                  {t("common.save")}
+                </Button>
+              </form>
+            </section>
+          </div>
+        )}
+
+        {/* VISUAL SIEVE RULES BUILDER */}
+        {activeTab === "filters" && (
+          <div className="flex flex-col gap-4">
+            <section className={panel}>
+              <div>
+                <h2 className={panelTitle}>{t("settings.sieveTitle")}</h2>
+                <p className={panelIntro}>{t("settings.sieveIntro")}</p>
+              </div>
+
+              {/* The rule reads as a sentence: IF <field> <match> <value> THEN
+                  <action>. Each control keeps its own label, so the row still
+                  makes sense when it wraps on a narrow window. */}
+              <form onSubmit={addSieveRule} className="flex flex-wrap items-end gap-2.5">
+                <div className="pb-2.5 text-xs uppercase tracking-[0.08em] text-slate-400">
+                  {t("settings.ruleIf")}
+                </div>
+                <div className="min-w-[150px] flex-1">
+                  <label htmlFor="rule-field" className={fieldLabel}>
+                    {t("ui.eventAction")}
+                  </label>
+                  <select
+                    id="rule-field"
+                    value={newField}
+                    onChange={(e) => setNewField(e.target.value as "From" | "Subject" | "Header")}
+                    className={input}
+                  >
+                    <option value="Subject">{t("settings.fieldSubject")}</option>
+                    <option value="From">{t("settings.fieldFrom")}</option>
+                    <option value="Header">{t("settings.fieldHeader")}</option>
+                  </select>
+                </div>
+
+                <div className="min-w-[150px] flex-1">
+                  <label htmlFor="rule-match" className={fieldLabel}>
+                    {t("common.status")}
+                  </label>
+                  <select
+                    id="rule-match"
+                    value={newMatch}
+                    onChange={(e) => setNewMatch(e.target.value as "contains" | "equals" | "matches")}
+                    className={input}
+                  >
+                    <option value="contains">{t("settings.matchContains")}</option>
+                    <option value="equals">{t("settings.matchEquals")}</option>
+                    <option value="matches">{t("settings.matchRegex")}</option>
+                  </select>
+                </div>
+
+                <div className="min-w-[200px] flex-[2]">
+                  <label htmlFor="rule-value" className={fieldLabel}>
+                    {t("settings.valuePlaceholder")}
+                  </label>
+                  <input
+                    id="rule-value"
+                    type="text"
+                    value={newValue}
+                    onChange={(e) => setNewValue(e.target.value)}
+                    placeholder={t("settings.valuePlaceholder")}
+                    required
+                    className={input}
+                  />
+                </div>
+
+                <div className="pb-2.5 text-xs uppercase tracking-[0.08em] text-slate-400">
+                  {t("settings.ruleThen")}
+                </div>
+                <div className="min-w-[170px] flex-1">
+                  <label htmlFor="rule-action" className={fieldLabel}>
+                    {t("ui.actions")}
+                  </label>
+                  <select
+                    id="rule-action"
+                    value={newAction}
+                    onChange={(e) => setNewAction(e.target.value as "move" | "flag" | "discard" | "redirect")}
+                    className={input}
+                  >
+                    <option value="move">{t("settings.actionMove")}</option>
+                    <option value="flag">{t("settings.actionFlag")}</option>
+                    <option value="discard">{t("settings.actionDiscard")}</option>
+                  </select>
+                </div>
+
+                <Button type="submit" variant="primary" size="md" className="flex-none">
+                  <Plus className="h-[15px] w-[15px]" />
+                  <span>{t("settings.addRule")}</span>
+                </Button>
+              </form>
+            </section>
+
+            {rules.length > 0 && (
+              <section className={panel}>
+                <div className="flex flex-col gap-2">
+                  {rules.map((r, index) => (
+                    <div key={r.id} className={tile}>
+                      <span className="flex h-[22px] w-[22px] flex-none items-center justify-center rounded-[7px] bg-indigo-900 text-[11px] text-indigo-300">
+                        {index + 1}
+                      </span>
+                      <span className="min-w-[200px] flex-1 break-words font-mono text-[13px] leading-relaxed text-slate-200">
+                        {t("settings.ruleIf")} <strong className="font-medium">{r.field}</strong> {r.match} &quot;
+                        {r.value}&quot; &rarr; {t("settings.ruleThen")} {r.action.toUpperCase()}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => removeSieveRule(r.id)}
+                        aria-label={t("common.delete")}
+                        className="flex h-[30px] w-[30px] flex-none items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/[0.07] hover:text-rose-400"
+                      >
+                        <Trash2 className="h-[15px] w-[15px]" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
+          </div>
+        )}
+
+        {/* VACATION AUTO-RESPONDER */}
+        {activeTab === "vacation" && (
+          <section className={panel}>
+            <div className="flex flex-wrap items-start justify-between gap-4">
+              <div className="min-w-[240px] flex-1">
+                <h2 className={panelTitle}>{t("settings.vacationTitle")}</h2>
+                <p className={panelIntro}>{t("settings.vacationIntro")}</p>
+              </div>
+              {/* A segmented pair rather than an unlabelled switch: a toggle
+                  with nothing written on it says neither which state it is in
+                  nor what turning it on would do. */}
+              <div className="flex flex-none gap-[3px] rounded-[10px] bg-dark-card p-[3px] shadow-edge">
+                {[
+                  { on: true, label: t("ui.active") },
+                  { on: false, label: t("settings.mfaDisabled") },
+                ].map((option) => (
+                  <button
+                    key={String(option.on)}
+                    type="button"
+                    onClick={() => setVacationEnabled(option.on)}
+                    aria-pressed={vacationEnabled === option.on}
+                    className={`rounded-lg px-3 py-1.5 text-[12.5px] leading-snug transition-colors ${
+                      vacationEnabled === option.on
+                        ? "text-indigo-500 shadow-edge-accent"
+                        : "text-slate-400 hover:text-slate-100"
+                    }`}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {vacationSaved && (
+              <div className="flex items-center gap-2 rounded-xl bg-dark-card px-3.5 py-3 text-[12.5px] text-slate-200 shadow-edge">
+                <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
+                <span>{t("settings.settingsSaved")}</span>
+              </div>
+            )}
+
+            {vacationEnabled && (
+              <form onSubmit={saveVacationResponder} className="flex flex-col gap-3">
+                <div>
+                  <label htmlFor="vacation-subject" className={fieldLabel}>
+                    {t("settings.vacationSubjectLabel")}
+                  </label>
+                  <input
+                    id="vacation-subject"
+                    type="text"
+                    value={vacationSubject}
+                    onChange={(e) => setVacationSubject(e.target.value)}
+                    className={input}
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="vacation-body" className={fieldLabel}>
+                    {t("settings.vacationBodyLabel")}
+                  </label>
+                  <textarea
+                    id="vacation-body"
+                    rows={5}
+                    value={vacationBody}
+                    onChange={(e) => setVacationBody(e.target.value)}
+                    className={`${input} leading-relaxed`}
+                  />
+                </div>
+
+                <Button type="submit" variant="primary" size="md" className="self-start">
+                  {t("settings.saveAutoReply")}
+                </Button>
+              </form>
+            )}
+          </section>
+        )}
+
+        {/* EMAIL SIGNATURE MANAGER */}
+        {activeTab === "signature" && (
+          <div className="flex flex-wrap gap-4">
+            <section className={`${panel} min-w-[320px] flex-1`}>
+              <div>
+                <h2 className={panelTitle}>{t("settings.signatureTitle")}</h2>
+                <p className={panelIntro}>{t("settings.signatureIntro")}</p>
+              </div>
+
+              {sigSaved && (
+                <div className="flex items-center gap-2 rounded-xl bg-dark-card px-3.5 py-3 text-[12.5px] text-slate-200 shadow-edge">
+                  <CheckCircle2 className="h-4 w-4 flex-none text-indigo-500" />
+                  <span>{t("settings.signatureSaved")}</span>
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="signature-text" className={fieldLabel}>
+                  {t("ui.messageBody")}
+                </label>
+                <textarea
+                  id="signature-text"
+                  rows={7}
+                  value={signature}
+                  onChange={(e) => setSignature(e.target.value)}
+                  placeholder={t("settings.signaturePlaceholder")}
+                  className={`${input} leading-relaxed`}
+                />
+              </div>
+
+              <Button onClick={saveSignature} variant="primary" size="md" className="self-start">
+                {t("common.save")}
+              </Button>
+            </section>
+
+            {/* What the signature will actually look like under a reply, so it
+                is not written blind into a textarea. */}
+            <section className={`${panel} min-w-[280px] flex-1`}>
+              <div className="text-[11px] uppercase tracking-[0.08em] text-slate-400">
+                {t("admin.csvPreview")}
+              </div>
+              <div className="rounded-xl bg-dark-card p-4 text-[13.5px] leading-relaxed text-slate-300">
+                <div className="lm-rule my-2.5" />
+                <pre className="whitespace-pre-wrap break-words font-sans">
+                  {signature || t("settings.signaturePlaceholder")}
+                </pre>
+              </div>
+            </section>
+          </div>
+        )}
+
+        {activeTab === "language" && (
+          <section className={panel}>
+            <div>
+              <h2 className={panelTitle}>{t("settings.language")}</h2>
+              <p className={panelIntro}>{t("settings.subtitle")}</p>
+            </div>
+            <div className="max-w-[280px]">
+              <LanguageSwitcher />
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );

services/webmail/src/app/globals.css

@@ -1,60 +1,286 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/**
+ * Nocturne — the one visual language for both surfaces.
+ *
+ * The webmail used to be indigo over glass and the console green over glass,
+ * so the two halves of the same product did not look related. Everything below
+ * comes from the Nocturne design system: a near-neutral blue-grey ground, Inter
+ * at weight 500 for headings, solid surfaces with a 1px inset edge instead of
+ * blur, and a single blurple accent used as a line, a mark and a glow rather
+ * than a flood. Tailwind's slate/indigo/emerald scales are remapped onto these
+ * same values in tailwind.config.js, so a utility class and a variable here
+ * cannot drift apart.
+ */
 :root {
-  --bg-main: #090d16;
-  --bg-panel: rgba(15, 23, 42, 0.85);
-  --bg-card: rgba(30, 41, 59, 0.65);
-  --border-color: rgba(255, 255, 255, 0.08);
+  /* Grounds, darkest to lightest: the rail, the page, a panel, a card. */
+  --lm-rail: #12131f;
+  --lm-bg: #161826;
+  --lm-panel: #1b1c28;
+  --lm-surface: #232532;
+
+  --lm-text: #e9e9ed;
+  --lm-text-muted: rgba(233, 233, 237, 0.62);
+
+  /* One accent, in the product's own blurple. */
+  --lm-accent: #9184d9;
+  --lm-accent-pale: #d2cefd;
+
+  /* Edges are drawn as an inset ring, not a border, so nothing shifts by 1px
+     when a surface becomes active. */
+  --lm-edge: rgba(233, 233, 237, 0.09);
+  --lm-edge-strong: rgba(233, 233, 237, 0.16);
+  --lm-divider: rgba(233, 233, 237, 0.14);
+
+  --lm-radius-md: 11px;
 }
 
 body {
-  background-color: var(--bg-main);
-  color: #f8fafc;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--lm-bg);
+  color: var(--lm-text);
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
   overflow-x: hidden;
 }
 
-/* Glassmorphism custom classes */
-.glass-panel {
-  background: var(--bg-panel);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-color);
+/* Hierarchy here is size and space; headings never go past weight 500. */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 500;
+  letter-spacing: -0.015em;
 }
 
-.glass-card {
-  background: var(--bg-card);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border-color);
+/* Keyboard focus is themed everywhere rather than left to the browser. */
+:focus-visible {
+  outline: 2px solid var(--lm-accent);
+  outline-offset: 2px;
+}
+::selection {
+  background: rgba(145, 132, 217, 0.3);
 }
 
-.glass-card-hover {
-  transition: all 0.2s ease-in-out;
-}
-.glass-card-hover:hover {
-  background: rgba(30, 41, 59, 0.85);
-  border-color: rgba(99, 102, 241, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+/* ────────────────────────────────────────────────────────────────────────
+   Surfaces
+   ──────────────────────────────────────────────────────────────────────── */
+
+/** A code or DNS-record block: the darkest ground, monospace, accent ink. */
+.lm-code {
+  background: var(--lm-rail);
+  box-shadow: inset 0 0 0 1px var(--lm-edge);
+  border-radius: var(--lm-radius-md);
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--lm-accent-pale);
 }
 
-/* Scrollbar Styling */
+/**
+ * A rule that fades to transparent at both ends rather than stopping cleanly —
+ * the one Nocturne signature that has to be CSS, because Tailwind has no
+ * gradient border.
+ */
+.lm-rule {
+  height: 1px;
+  border: 0;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--lm-divider) 24px,
+    var(--lm-divider) calc(100% - 24px),
+    transparent
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────
+   Navigation, rows and chips
+   ──────────────────────────────────────────────────────────────────────── */
+
+/**
+ * A sidebar item. The 3px mark on the left is the accent's whole appearance
+ * here — an active item is not a filled pill. Nothing in this block is sized
+ * by its text: the label wraps to a second line instead of being clipped,
+ * which is what broke when the interface was read in Portuguese or Spanish.
+ */
+.lm-nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 9px 8px 4px;
+  border-radius: var(--lm-radius-md);
+  color: var(--lm-text-muted);
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.lm-nav:hover {
+  background: rgba(233, 233, 237, 0.05);
+  color: var(--lm-text);
+}
+.lm-nav[data-active='true'] {
+  background: var(--lm-surface);
+  color: var(--lm-text);
+  box-shadow: inset 0 0 0 1px rgba(145, 132, 217, 0.35);
+}
+.lm-nav-mark {
+  width: 3px;
+  flex: none;
+  align-self: stretch;
+  border-radius: 9999px;
+  background: transparent;
+}
+.lm-nav[data-active='true'] .lm-nav-mark {
+  background: var(--lm-accent);
+}
+
+/** A message row in the list pane. */
+.lm-row {
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+  padding: 12px;
+  border-radius: 12px;
+  transition: background-color 0.12s ease;
+}
+.lm-row:hover {
+  background: rgba(233, 233, 237, 0.04);
+}
+.lm-row[data-active='true'] {
+  background: var(--lm-surface);
+  box-shadow: inset 0 0 0 1px rgba(145, 132, 217, 0.4);
+}
+
+/** A filter chip: an outline that takes the accent when it is the one chosen. */
+.lm-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 11px;
+  border-radius: 9999px;
+  font-size: 12.5px;
+  line-height: 1.3;
+  color: var(--lm-text-muted);
+  box-shadow: inset 0 0 0 1px var(--lm-edge-strong);
+  transition: color 0.15s ease, box-shadow 0.15s ease;
+}
+.lm-chip:hover {
+  box-shadow: inset 0 0 0 1px var(--lm-accent);
+}
+.lm-chip[data-active='true'] {
+  color: var(--lm-accent);
+  box-shadow: inset 0 0 0 1px var(--lm-accent);
+}
+
+/** A tab inside the segmented strip the settings, domain and mailbox screens use. */
+.lm-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 12px;
+  border-radius: 9px;
+  font-size: 12.5px;
+  line-height: 1.3;
+  color: var(--lm-text-muted);
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.lm-tab:hover {
+  color: var(--lm-text);
+  background: rgba(233, 233, 237, 0.05);
+}
+.lm-tab[data-active='true'] {
+  background: var(--lm-surface);
+  color: var(--lm-accent);
+  box-shadow: inset 0 0 0 1px rgba(145, 132, 217, 0.4);
+}
+.lm-tabstrip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--lm-panel);
+  box-shadow: inset 0 0 0 1px var(--lm-edge);
+}
+
+/* ────────────────────────────────────────────────────────────────────────
+   Tables — the header and the row rules fade at their ends, as the rules do
+   ──────────────────────────────────────────────────────────────────────── */
+
+.lm-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.lm-table th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(233, 233, 237, 0.6);
+  padding: 8px 10px;
+  white-space: nowrap;
+}
+.lm-table td {
+  padding: 10px;
+  vertical-align: middle;
+}
+.lm-table thead tr {
+  background: linear-gradient(
+      to right,
+      transparent,
+      var(--lm-divider) 24px,
+      var(--lm-divider) calc(100% - 24px),
+      transparent
+    )
+    no-repeat bottom / 100% 1px;
+}
+.lm-table tbody tr {
+  background: linear-gradient(
+      to right,
+      transparent,
+      rgba(233, 233, 237, 0.08) 24px,
+      rgba(233, 233, 237, 0.08) calc(100% - 24px),
+      transparent
+    )
+    no-repeat bottom / 100% 1px;
+}
+.lm-table tbody tr:hover {
+  background:
+    linear-gradient(rgba(233, 233, 237, 0.04), rgba(233, 233, 237, 0.04)) no-repeat 0 0 / 100% 100%,
+    linear-gradient(
+        to right,
+        transparent,
+        rgba(233, 233, 237, 0.08) 24px,
+        rgba(233, 233, 237, 0.08) calc(100% - 24px),
+        transparent
+      )
+      no-repeat bottom / 100% 1px;
+}
+
+/* ────────────────────────────────────────────────────────────────────────
+   Scrollbars — a thin neutral thumb on no track
+   ──────────────────────────────────────────────────────────────────────── */
+
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.5);
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
+  background: #3f424d;
   border-radius: 9999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: #595d6c;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #3f424d transparent;
 }

services/webmail/src/app/layout.tsx

@@ -28,7 +28,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 
   return (
     <html lang={locale} className="dark">
-      <body className="bg-slate-950 text-slate-100 min-h-screen font-sans antialiased">
+      <body className="min-h-screen bg-dark-bg font-sans text-slate-100 antialiased">
         <I18nProvider locale={locale}>{children}</I18nProvider>
       </body>
     </html>

services/webmail/src/components/TotpEnrolment.tsx

@@ -80,13 +80,13 @@ export function TotpEnrolment({ secret, uri }: { secret: string; uri: string | n
       <div className="space-y-1.5">
         <p className="text-xs text-slate-400">{t("auth.cantScanQr")}</p>
         <div className="flex items-center gap-2">
-          <code className="flex-1 break-all rounded-lg border border-slate-800 bg-slate-950 p-2.5 font-mono text-xs text-indigo-300">
+          <code className="lm-code min-w-0 flex-1 break-all p-2.5">
             {secret}
           </code>
           <button
             type="button"
             onClick={() => void copySecret()}
-            className="flex-shrink-0 rounded-lg border border-slate-700 px-3 py-2 text-xs font-medium text-slate-300 transition-colors hover:border-indigo-500/50 hover:text-white"
+            className="flex-none rounded-[10px] border border-white/[0.14] px-3 py-2 text-xs text-slate-200 transition-colors hover:bg-white/[0.07] hover:text-slate-100"
           >
             {copied ? t("common.copied") : t("common.copy")}
           </button>
@@ -127,12 +127,12 @@ export function RecoveryCodes({
 
   return (
     <div className="space-y-3">
-      <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-3.5 text-xs text-emerald-300">
-        <div className="mb-1 font-bold">{t("settings.recoveryCodesTitle")}</div>
-        <p className="mb-3">{t("settings.saveRecoveryCodes")}</p>
-        <div className="grid grid-cols-2 gap-1.5 rounded-lg border border-slate-800 bg-slate-950 p-3 text-center font-mono text-[11px] text-white sm:grid-cols-3">
+      <div className="rounded-xl bg-dark-card p-3.5 text-xs text-slate-300 shadow-edge">
+        <div className="mb-1 text-[13.5px] font-medium text-slate-100">{t("settings.recoveryCodesTitle")}</div>
+        <p className="mb-3 leading-relaxed">{t("settings.saveRecoveryCodes")}</p>
+        <div className="lm-code grid grid-cols-2 gap-1.5 p-3 text-center text-[11px] sm:grid-cols-3">
           {codes.map((code) => (
-            <span key={code} className="rounded border border-slate-800 p-1">
+            <span key={code} className="rounded bg-white/[0.05] p-1">
               {code}
             </span>
           ))}
@@ -143,14 +143,14 @@ export function RecoveryCodes({
         <button
           type="button"
           onClick={() => void copyAll()}
-          className="flex-1 rounded-xl border border-slate-700 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:border-emerald-500/50 hover:text-white"
+          className="flex-1 rounded-[10px] border border-white/[0.14] py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.07]"
         >
           {copied ? t("common.copied") : t("common.copy")}
         </button>
         <button
           type="button"
           onClick={onContinue}
-          className="flex-1 rounded-xl bg-emerald-600 py-2.5 text-sm font-medium text-white transition-colors hover:bg-emerald-500"
+          className="flex-1 rounded-[10px] border border-indigo-500 py-2.5 text-sm font-medium text-indigo-500 transition-colors hover:bg-indigo-500/[0.12] active:bg-indigo-500/[0.22]"
         >
           {continueLabel}
         </button>

services/webmail/src/components/ui/Badge.tsx

@@ -8,16 +8,26 @@ interface BadgeProps {
   className?: string;
 }
 
+/**
+ * A tag: a small tinted label from the ramps.
+ *
+ * Nocturne tags are a deep step of a ramp filled behind a light step of the
+ * same ramp - no border, no blur, and no rounded-full pill, which at this size
+ * read as a status light rather than a label. `success` and `info` are the same
+ * accent because this palette is mono: what separates them is the word inside.
+ * Nothing here is sized by its text, so a translated label wraps instead of
+ * being clipped.
+ */
 export function Badge({ variant = 'neutral', children, className }: BadgeProps) {
   const baseStyles =
-    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border backdrop-blur-sm';
+    'inline-flex items-center gap-1.5 rounded-md px-2.5 py-0.5 text-[11px] font-medium leading-relaxed tracking-[0.02em]';
 
   const variants = {
-    success: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
-    warning: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
-    danger: 'bg-rose-500/15 text-rose-400 border-rose-500/30',
-    info: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/30',
-    neutral: 'bg-slate-800/60 text-slate-300 border-slate-700/50',
+    success: 'bg-indigo-800 text-indigo-100',
+    info: 'bg-indigo-900 text-indigo-200',
+    warning: 'bg-amber-900 text-amber-200',
+    danger: 'bg-rose-900 text-rose-200',
+    neutral: 'bg-slate-800 text-slate-300',
   };
 
   return (

services/webmail/src/components/ui/Button.tsx

@@ -8,6 +8,16 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
 }
 
+/**
+ * Nocturne buttons are outlined, not filled.
+ *
+ * The primary action is a 1px accent border on transparent with a tinted hover
+ * and a deeper tint when pressed. A flooded accent was the loudest thing on
+ * every screen and made three buttons in a row compete with the content; an
+ * outline states the same intent at the weight it deserves. Focus is the
+ * system's own 2px accent ring from globals.css rather than a per-variant
+ * offset ring.
+ */
 export function Button({
   variant = 'primary',
   size = 'md',
@@ -16,25 +26,25 @@ export function Button({
   ...props
 }: ButtonProps) {
   const baseStyles =
-    'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]';
+    'inline-flex items-center justify-center whitespace-nowrap font-medium rounded-[10px] border transition-colors duration-150 disabled:opacity-45 disabled:cursor-not-allowed';
 
   const variants = {
     primary:
-      'bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/25 focus:ring-indigo-500',
+      'border-indigo-500 text-indigo-500 bg-transparent hover:bg-indigo-500/[0.12] active:bg-indigo-500/[0.22]',
     secondary:
-      'bg-slate-800 hover:bg-slate-700 text-slate-100 border border-slate-700/60 focus:ring-slate-500',
+      'border-white/[0.14] text-slate-100 bg-transparent hover:bg-white/[0.07] active:bg-white/[0.14]',
     outline:
-      'border border-slate-700 hover:border-slate-500 text-slate-300 hover:text-white bg-transparent focus:ring-slate-500',
+      'border-white/[0.14] text-slate-300 bg-transparent hover:text-slate-100 hover:bg-white/[0.07] active:bg-white/[0.14]',
     danger:
-      'bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/25 focus:ring-rose-500',
+      'border-rose-400 text-rose-400 bg-transparent hover:bg-rose-400/[0.12] active:bg-rose-400/[0.22]',
     ghost:
-      'text-slate-400 hover:text-white hover:bg-slate-800/60 focus:ring-slate-500',
+      'border-transparent text-indigo-500 bg-transparent hover:bg-indigo-500/10 active:bg-indigo-500/[0.18]',
   };
 
   const sizes = {
     sm: 'px-2.5 py-1.5 text-xs gap-1.5',
-    md: 'px-4 py-2 text-sm gap-2',
-    lg: 'px-5 py-2.5 text-base gap-2.5',
+    md: 'px-3 py-2 text-sm gap-2',
+    lg: 'px-4 py-2.5 text-[15px] gap-2.5',
   };
 
   return (

services/webmail/src/components/ui/Card.tsx

@@ -7,13 +7,21 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   hoverable?: boolean;
 }
 
+/**
+ * A panel: a solid ground with a hairline inset ring.
+ *
+ * The edge is drawn with a ring rather than a border so a card that becomes
+ * active does not move its content by a pixel, and so nesting a tile inside a
+ * panel does not accumulate borders. No blur, and no drop shadow - on a dark
+ * ground elevation is the edge itself.
+ */
 export function Card({ children, className, hoverable = false, ...props }: CardProps) {
   return (
     <div
       className={twMerge(
         clsx(
-          'glass-card rounded-xl p-5 border border-slate-800/80 shadow-lg',
-          hoverable && 'glass-card-hover cursor-pointer',
+          'rounded-2xl bg-dark-panel p-5 shadow-edge',
+          hoverable && 'cursor-pointer transition-colors hover:bg-dark-card hover:shadow-edge-accent',
           className
         )
       )}
@@ -25,9 +33,17 @@ export function Card({ children, className, hoverable = false, ...props }: CardP
 }
 
 export function CardHeader({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <div className={twMerge(clsx('flex items-center justify-between mb-4', className))}>{children}</div>;
+  return (
+    <div className={twMerge(clsx('mb-4 flex flex-wrap items-center justify-between gap-3', className))}>
+      {children}
+    </div>
+  );
 }
 
 export function CardTitle({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <h3 className={twMerge(clsx('text-lg font-semibold text-slate-100 tracking-tight', className))}>{children}</h3>;
+  return (
+    <h3 className={twMerge(clsx('text-[17px] font-medium leading-tight text-slate-100', className))}>
+      {children}
+    </h3>
+  );
 }

services/webmail/src/i18n/LanguageSwitcher.tsx

@@ -8,13 +8,13 @@ export function LanguageSwitcher({ className = "" }: { className?: string }) {
   const { locale, setLocale, t } = useI18n();
 
   return (
-    <label className={`flex items-center gap-2 text-xs ${className}`}>
+    <label className={`flex min-w-0 flex-1 items-center gap-2 text-xs ${className}`}>
       <span className="sr-only">{t("settings.language")}</span>
       <select
         aria-label={t("settings.language")}
         value={locale}
         onChange={(e) => setLocale(e.target.value as Locale)}
-        className="rounded-md border border-slate-700 bg-slate-900 px-2 py-1 text-xs text-slate-200"
+        className="min-h-[32px] w-full rounded-[9px] bg-dark-panel px-2 py-1 text-xs text-slate-100 shadow-edge focus-visible:shadow-edge-accent"
       >
         {LOCALES.map((l) => (
           <option key={l} value={l}>

services/webmail/src/initials.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest";
+import { initialsFor } from "./lib/initials.js";
+
+describe("avatar initials", () => {
+  it("takes one letter from each of the first two words", () => {
+    expect(initialsFor("ana.ribeiro@nortide.com.br")).toBe("AR");
+    expect(initialsFor("marcos-cordeiro@transvale.com.br")).toBe("MC");
+    expect(initialsFor("juliana_serrano@nortide.com.br")).toBe("JS");
+  });
+
+  it("takes two letters from a single-word local part", () => {
+    expect(initialsFor("operacoes@nortide.com.br")).toBe("OP");
+  });
+
+  // The old avatar printed email[0], so every account at one domain collapsed
+  // onto the same letter.
+  it("distinguishes two accounts that share a first letter", () => {
+    expect(initialsFor("ana.ribeiro@x.com")).not.toBe(initialsFor("ana.souza@x.com"));
+  });
+
+  it("stays a fixed-width mark when there is no address yet", () => {
+    expect(initialsFor(undefined)).toBe("?");
+    expect(initialsFor(null)).toBe("?");
+    expect(initialsFor("")).toBe("?");
+  });
+});

services/webmail/src/lib/initials.ts

@@ -0,0 +1,20 @@
+/**
+ * The two letters an avatar shows.
+ *
+ * The interface used to print `email[0]`, so every account at a company shared
+ * one letter and the avatars stopped distinguishing anything. Two letters are
+ * taken from the local part's own word boundaries - `ana.ribeiro@x` gives AR,
+ * `operacoes@x` gives OP - which is what the redesign draws.
+ *
+ * A missing address returns "?" rather than an empty circle: the avatar is a
+ * fixed-size element and collapsing it moves the row.
+ */
+export function initialsFor(address: string | null | undefined): string {
+  const local = (address ?? "").split("@")[0];
+  const words = local.split(/[._\-+\s]+/).filter(Boolean);
+
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+
+  return (words[0][0] + words[1][0]).toUpperCase();
+}