From 8a50f3a40462e83b68c9a100c0e82b8d847dafc8 Mon Sep 17 00:00:00 2001
From: juchechu <maxjerry242@gmail.com>
Date: Tue, 18 Aug 2026 09:47:09 +0100
Subject: [PATCH] plain emails + Supabase-style full-width banners

- Emails: remove all gold left/top borders from headers, cards, fallback
  links, footer; remove stats bar from Best Practices template; bold
  'Jerry Koko' in footer; add padding after fallback link box
- BroadcastBanner: full-width thin strip (Supabase/HeaderBanner style),
  type-colored bg tint + bottom border, inline icon + title + message
- GoogleLinkBanner: matching full-width amber strip
- Tests: 13/13 email tests updated, all pass
---
 frontend/components/BroadcastBanner.tsx  | 177 ++++++++++++++---------
 frontend/components/GoogleLinkBanner.tsx |  51 +++----
 internal/email/email.go                  |  72 +++------
 internal/email/email_test.go             |  21 +--
 internal/email/problem_reminder_test.go  |   2 +-
 5 files changed, 155 insertions(+), 168 deletions(-)

diff --git a/frontend/components/BroadcastBanner.tsx b/frontend/components/BroadcastBanner.tsx
index 264d4ec..64c30bd 100644
--- a/frontend/components/BroadcastBanner.tsx
+++ b/frontend/components/BroadcastBanner.tsx
@@ -1,56 +1,86 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { X, ArrowRight } from "lucide-react";
+import {
+  Info,
+  AlertTriangle,
+  Sparkles,
+  Star,
+  ShieldAlert,
+  Bell,
+  X,
+  ArrowRight,
+} from "lucide-react";
 import { fetchActiveBroadcasts, dismissBroadcast } from "@/lib/api";
 import { useWebSocket } from "@/lib/event";
 import { Broadcast } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
-const TYPE_STYLES: Record<
+const TYPE_CONFIG: Record<
   string,
   {
+    icon: React.ElementType;
+    bg: string;
     border: string;
-    textColor: string;
-    button: string;
-    dismissHover: string;
+    text: string;
+    muted: string;
+    link: string;
+    linkHover: string;
   }
 > = {
   info: {
-    border: "border-l-blue-500",
-    textColor: "text-blue-100/70",
-    button: "bg-blue-500/15 text-blue-300 hover:bg-blue-500/25",
-    dismissHover: "hover:bg-blue-500/10 hover:text-blue-300",
+    icon: Info,
+    bg: "bg-blue-500/10",
+    border: "border-b border-blue-500/20",
+    text: "text-blue-200",
+    muted: "text-blue-300/60",
+    link: "text-blue-300",
+    linkHover: "hover:text-blue-200",
   },
   warning: {
-    border: "border-l-amber-500",
-    textColor: "text-amber-100/70",
-    button: "bg-amber-500/15 text-amber-300 hover:bg-amber-500/25",
-    dismissHover: "hover:bg-amber-500/10 hover:text-amber-300",
+    icon: AlertTriangle,
+    bg: "bg-amber-500/10",
+    border: "border-b border-amber-500/20",
+    text: "text-amber-200",
+    muted: "text-amber-300/60",
+    link: "text-amber-300",
+    linkHover: "hover:text-amber-200",
   },
   update: {
-    border: "border-l-emerald-500",
-    textColor: "text-emerald-100/70",
-    button: "bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25",
-    dismissHover: "hover:bg-emerald-500/10 hover:text-emerald-300",
+    icon: Star,
+    bg: "bg-emerald-500/10",
+    border: "border-b border-emerald-500/20",
+    text: "text-emerald-200",
+    muted: "text-emerald-300/60",
+    link: "text-emerald-300",
+    linkHover: "hover:text-emerald-200",
   },
   new_feature: {
-    border: "border-l-purple-500",
-    textColor: "text-purple-100/70",
-    button: "bg-purple-500/15 text-purple-300 hover:bg-purple-500/25",
-    dismissHover: "hover:bg-purple-500/10 hover:text-purple-300",
+    icon: Sparkles,
+    bg: "bg-violet-500/10",
+    border: "border-b border-violet-500/20",
+    text: "text-violet-200",
+    muted: "text-violet-300/60",
+    link: "text-violet-300",
+    linkHover: "hover:text-violet-200",
   },
   maintenance: {
-    border: "border-l-red-500",
-    textColor: "text-red-100/70",
-    button: "bg-red-500/15 text-red-300 hover:bg-red-500/25",
-    dismissHover: "hover:bg-red-500/10 hover:text-red-300",
+    icon: ShieldAlert,
+    bg: "bg-red-500/10",
+    border: "border-b border-red-500/20",
+    text: "text-red-200",
+    muted: "text-red-300/60",
+    link: "text-red-300",
+    linkHover: "hover:text-red-200",
   },
   announcement: {
-    border: "border-l-sky-500",
-    textColor: "text-sky-100/70",
-    button: "bg-sky-500/15 text-sky-300 hover:bg-sky-500/25",
-    dismissHover: "hover:bg-sky-500/10 hover:text-sky-300",
+    icon: Bell,
+    bg: "bg-sky-500/10",
+    border: "border-b border-sky-500/20",
+    text: "text-sky-200",
+    muted: "text-sky-300/60",
+    link: "text-sky-300",
+    linkHover: "hover:text-sky-200",
   },
 };
 
@@ -98,11 +128,20 @@ export default function BroadcastBanner() {
     };
   }, [fetchBanners]);
 
-  useWebSocket({
-    'broadcast.created': useCallback(() => { fetchBanners(); }, [fetchBanners]),
-    'broadcast.updated': useCallback(() => { fetchBanners(); }, [fetchBanners]),
-    'broadcast.deleted': useCallback(() => { fetchBanners(); }, [fetchBanners]),
-  }, [fetchBanners]);
+  useWebSocket(
+    {
+      "broadcast.created": useCallback(() => {
+        fetchBanners();
+      }, [fetchBanners]),
+      "broadcast.updated": useCallback(() => {
+        fetchBanners();
+      }, [fetchBanners]),
+      "broadcast.deleted": useCallback(() => {
+        fetchBanners();
+      }, [fetchBanners]),
+    },
+    [fetchBanners],
+  );
 
   const handleDismiss = async (id: string) => {
     await dismissBroadcast(id);
@@ -114,58 +153,60 @@ export default function BroadcastBanner() {
   if (visible.length === 0) return null;
 
   return (
-    <div className="space-y-3 mb-5 max-w-3xl mx-auto">
+    <div className="w-full">
       {visible.map((broadcast) => {
-        const style = TYPE_STYLES[broadcast.type] || TYPE_STYLES.info;
-        const hasMessage = broadcast.message && broadcast.message.trim().length > 0;
+        const config = TYPE_CONFIG[broadcast.type] || TYPE_CONFIG.info;
+        const Icon = config.icon;
+        const hasMessage =
+          broadcast.message && broadcast.message.trim().length > 0;
 
         return (
           <div
             key={broadcast.id}
             className={cn(
-              "group relative overflow-hidden rounded-lg border border-l-[3px] bg-[#1A1A1A] transition-colors",
-              "animate-in fade-in slide-in-from-top-2 duration-500",
-              style.border,
-              broadcast.priority === "critical" && "border-l-red-500 ring-1 ring-red-500/20",
+              "relative w-full overflow-hidden",
+              config.bg,
+              config.border,
+              "animate-in fade-in slide-in-from-top-0 duration-300",
             )}
           >
-            <div className="px-4 py-3">
-              <div className="flex items-start justify-between gap-3">
-                <div className="min-w-0 flex-1">
-                  <h4 className="text-sm font-semibold text-foreground leading-snug">
-                    {broadcast.title}
-                  </h4>
-                  {hasMessage && (
-                    <p className={cn("mt-1 text-[13px] leading-relaxed", style.textColor)}>
-                      {broadcast.message}
-                    </p>
-                  )}
-                </div>
-
-                <button
-                  onClick={() => handleDismiss(broadcast.id)}
-                  className={cn(
-                    "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/50 transition-colors",
-                    style.dismissHover,
-                  )}
-                  aria-label="Dismiss"
-                >
-                  <X size={14} />
-                </button>
-              </div>
+            <div className="mx-auto flex max-w-7xl items-center gap-3 px-4 py-2.5">
+              <Icon className={cn("h-4 w-4 shrink-0", config.text)} />
+
+              <p className={cn("min-w-0 flex-1 text-sm", config.text)}>
+                <span className="font-medium">{broadcast.title}</span>
+                {hasMessage && (
+                  <span className={cn(" ml-1.5", config.muted)}>
+                    {broadcast.message}
+                  </span>
+                )}
+              </p>
 
               {broadcast.action_label && broadcast.action_url && (
                 <a
                   href={broadcast.action_url}
                   className={cn(
-                    "mt-3 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition-all",
-                    style.button,
+                    "inline-flex shrink-0 items-center gap-1 text-xs font-medium transition-colors",
+                    config.link,
+                    config.linkHover,
                   )}
                 >
                   {broadcast.action_label}
-                  <ArrowRight size={11} />
+                  <ArrowRight className="h-3 w-3" />
                 </a>
               )}
+
+              <button
+                onClick={() => handleDismiss(broadcast.id)}
+                className={cn(
+                  "ml-1 shrink-0 p-0.5 rounded transition-colors",
+                  config.muted,
+                  "hover:bg-white/5",
+                )}
+                aria-label="Dismiss"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
             </div>
           </div>
         );
diff --git a/frontend/components/GoogleLinkBanner.tsx b/frontend/components/GoogleLinkBanner.tsx
index c021979..aa5a495 100644
--- a/frontend/components/GoogleLinkBanner.tsx
+++ b/frontend/components/GoogleLinkBanner.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { X } from "lucide-react";
+import { Link2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { fetchUser } from "@/lib/api";
 import { User } from "@/lib/types";
@@ -9,7 +9,8 @@ import { User } from "@/lib/types";
 export default function GoogleLinkBanner() {
   const [visible, setVisible] = useState(() => {
     if (typeof window === "undefined") return false;
-    if (localStorage.getItem("google-banner-dismissed") === "true") return false;
+    if (localStorage.getItem("google-banner-dismissed") === "true")
+      return false;
     return true;
   });
   const [user, setUser] = useState<User | null>(null);
@@ -29,41 +30,31 @@ export default function GoogleLinkBanner() {
   if (!visible || !user || user.google_linked) return null;
 
   return (
-    <div
-      className={cn(
-        "group relative overflow-hidden rounded-lg border border-l-[3px] border-l-amber-500 bg-[#1A1A1A] transition-colors",
-        "animate-in fade-in slide-in-from-top-2 duration-500",
-      )}
-    >
-      <div className="px-4 py-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0 flex-1">
-            <h4 className="text-sm font-semibold text-foreground leading-snug">
-              Secure your account
-            </h4>
-            <p className="mt-1 text-[13px] leading-relaxed text-amber-100/70">
-              Link your Google account for seamless sign-in and automatic profile syncing across all your devices.
-            </p>
-          </div>
+    <div className="w-full bg-amber-500/10 border-b border-amber-500/20 animate-in fade-in slide-in-from-top-0 duration-300">
+      <div className="mx-auto flex max-w-7xl items-center gap-3 px-4 py-2.5">
+        <Link2 className="h-4 w-4 shrink-0 text-amber-200" />
 
-          <button
-            onClick={handleDismiss}
-            className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/50 transition-colors hover:bg-amber-500/10 hover:text-amber-300"
-            aria-label="Dismiss"
-          >
-            <X size={14} />
-          </button>
-        </div>
+        <p className="min-w-0 flex-1 text-sm text-amber-200">
+          <span className="font-medium">Secure your account</span>
+          <span className="ml-1.5 text-amber-300/60">
+            Link Google for seamless sign-in and automatic profile syncing.
+          </span>
+        </p>
 
         <a
           href="/settings?tab=security"
-          className={cn(
-            "mt-3 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition-all",
-            "bg-amber-500/15 text-amber-300 hover:bg-amber-500/25",
-          )}
+          className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-amber-300 transition-colors hover:text-amber-200"
         >
           Link Google
         </a>
+
+        <button
+          onClick={handleDismiss}
+          className="ml-1 shrink-0 p-0.5 rounded transition-colors text-amber-300/60 hover:bg-white/5"
+          aria-label="Dismiss"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
       </div>
     </div>
   );
diff --git a/internal/email/email.go b/internal/email/email.go
index b2748ae..9bee86c 100644
--- a/internal/email/email.go
+++ b/internal/email/email.go
@@ -309,7 +309,7 @@ func bestPracticesBody() string {
 
 <!-- Header band -->
 <tr>
-<td style="background-color:` + EmailBackground + `;padding:20px 16px;border-left:4px solid ` + ButtonGold + `;" bgcolor="` + EmailBackground + `">
+<td style="background-color:` + EmailBackground + `;padding:20px 16px;" bgcolor="` + EmailBackground + `">
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="left">
@@ -337,8 +337,6 @@ func bestPracticesBody() string {
 
 <h1 style="margin:0;font-size:30px;line-height:36px;color:` + TextPrimary + `;font-weight:700;letter-spacing:-0.3px;">Discover Best Practices</h1>
 
-<div style="width:40px;height:3px;background-color:` + ButtonGold + `;border-radius:2px;margin:16px auto 0;"></div>
-
 <p style="margin:18px auto 0;max-width:420px;color:` + TextSecondary + `;font-size:16px;line-height:24px;">
 See how top developers solve real problems. Browse community solutions, get AI-powered code analysis, and learn from the best.
 </p>
@@ -346,40 +344,10 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 </td>
 </tr>
 
-<!-- Stats bar -->
-<tr>
-<td style="padding:24px 16px 0 16px;">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
-<tr>
-<td style="padding:16px 6px;text-align:center;width:20%;">
-<div style="font-size:22px;font-weight:700;color:` + TextPrimary + `;">{{.SolutionCount}}</div>
-<div style="font-size:10px;color:` + TextSecondary + `;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;">Solutions</div>
-</td>
-<td style="padding:16px 6px;text-align:center;width:20%;border-left:1px solid ` + BorderColor + `;">
-<div style="font-size:22px;font-weight:700;color:` + TextPrimary + `;">{{.DeveloperCount}}</div>
-<div style="font-size:10px;color:` + TextSecondary + `;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;">Developers</div>
-</td>
-<td style="padding:16px 6px;text-align:center;width:20%;border-left:1px solid ` + BorderColor + `;">
-<div style="font-size:22px;font-weight:700;color:` + TextPrimary + `;">{{.TotalLikes}}</div>
-<div style="font-size:10px;color:` + TextSecondary + `;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;">Likes</div>
-</td>
-<td style="padding:16px 6px;text-align:center;width:20%;border-left:1px solid ` + BorderColor + `;">
-<div style="font-size:22px;font-weight:700;color:` + TextPrimary + `;">{{.GoCount}}</div>
-<div style="font-size:10px;color:` + TextSecondary + `;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;">Go</div>
-</td>
-<td style="padding:16px 6px;text-align:center;width:20%;border-left:1px solid ` + BorderColor + `;">
-<div style="font-size:22px;font-weight:700;color:` + TextPrimary + `;">{{.PythonCount}}</div>
-<div style="font-size:10px;color:` + TextSecondary + `;text-transform:uppercase;letter-spacing:0.08em;margin-top:2px;">Python</div>
-</td>
-</tr>
-</table>
-</td>
-</tr>
-
 <!-- Feature Card 1: Community Solutions -->
 <tr>
-<td style="padding:20px 16px 0 16px;">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;border-left:3px solid ` + ButtonGold + `;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
+<td style="padding:24px 16px 0 16px;">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;">
 <tr>
 <td style="padding:20px;">
 <div style="font-size:16px;font-weight:700;color:` + TextPrimary + `;">Community Solutions</div>
@@ -393,7 +361,7 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 <!-- Feature Card 2: AI Analysis -->
 <tr>
 <td style="padding:12px 16px 0 16px;">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;border-left:3px solid ` + ButtonGold + `;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;">
 <tr>
 <td style="padding:20px;">
 <div style="font-size:16px;font-weight:700;color:` + TextPrimary + `;">AI-Powered Code Analysis</div>
@@ -407,7 +375,7 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 <!-- Feature Card 3: How to Get Featured -->
 <tr>
 <td style="padding:12px 16px 0 16px;">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;border-left:3px solid ` + ButtonGold + `;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;">
 <tr>
 <td style="padding:20px;">
 <div style="font-size:16px;font-weight:700;color:` + TextPrimary + `;">How to Get Featured</div>
@@ -422,7 +390,7 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 {{if .TopSolutions}}
 <tr>
 <td style="padding:24px 16px 0 16px;">
-<div style="display:inline-block;border-left:3px solid ` + ButtonGold + `;padding-left:10px;margin-bottom:12px;"><span style="font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:` + TextSecondary + `;font-weight:600;">Top Rated Solutions</span></div>
+<div style="margin-bottom:12px;"><span style="font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:` + TextSecondary + `;font-weight:600;">Top Rated Solutions</span></div>
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border:1px solid ` + BorderColor + `;border-radius:16px;overflow:hidden;">
 {{range $i, $s := .TopSolutions}}
 <tr{{if $i}} style="border-top:1px solid ` + BorderColor + `;"{{end}}>
@@ -463,8 +431,8 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 
 <!-- Fallback link -->
 <tr>
-<td style="padding:16px 16px 0 16px;">
-<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-left:3px solid ` + ButtonGold + `;border-radius:14px;padding:16px;">
+<td style="padding:20px 16px 0 16px;">
+<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-radius:14px;padding:16px;">
 <div style="font-size:13px;color:` + TextSecondary + `;margin-bottom:8px;font-weight:600;">Button not working?</div>
 <div style="word-break:break-all;font-size:14px;line-height:22px;color:` + TextPrimary + `;"><a href="{{.CTAURL}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.CTAURL}}</a></div>
 </div>
@@ -473,11 +441,11 @@ See how top developers solve real problems. Browse community solutions, get AI-p
 
 <!-- Footer -->
 <tr>
-<td style="padding:24px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:1px solid ` + BorderColor + `;" bgcolor="` + EmailBackground + `">
+<td style="padding:28px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:1px solid ` + BorderColor + `;" bgcolor="` + EmailBackground + `">
 
 <div style="font-size:14px;color:` + TextPrimary + `;font-weight:600;">{{.PlatformName}}</div>
 <div style="margin-top:10px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">{{.Tagline}}</div>
-<div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Sent by Jerry Koko from Koder</div>
+<div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Sent by <strong>Jerry Koko</strong> from Koder</div>
 <div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Need help? <a href="mailto:{{.SupportEmail}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.SupportEmail}}</a></div>
 <div style="margin-top:16px;font-size:12px;line-height:18px;color:` + TextSecondary + `;">&copy; {{.Year}} {{.PlatformName}}. All rights reserved.</div>
 
@@ -494,7 +462,7 @@ func problemReminderBody() string {
 
 <!-- Header band -->
 <tr>
-<td style="background-color:` + EmailBackground + `;padding:20px 16px;border-left:4px solid ` + ButtonGold + `;" bgcolor="` + EmailBackground + `">
+<td style="background-color:` + EmailBackground + `;padding:20px 16px;" bgcolor="` + EmailBackground + `">
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="left">
@@ -533,7 +501,7 @@ Sharpen your skills with this short exercise: <strong style="color:` + TextPrima
 <tr>
 <td style="padding:20px 16px 0 16px;">
 
-<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;border-left:4px solid ` + ButtonGold + `;">
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:` + CardSurface + `;border:1px solid ` + BorderColor + `;border-radius:16px;">
 <tr>
 <td style="padding:20px;color:` + TextPrimary + `;font-size:14px;line-height:22px;">
 <div style="font-size:18px;font-weight:700;color:` + TextPrimary + `;margin-bottom:8px;">{{.ProblemTitle}}</div>
@@ -550,8 +518,8 @@ Sharpen your skills with this short exercise: <strong style="color:` + TextPrima
 
 <!-- Fallback link -->
 <tr>
-<td style="padding:14px 16px 0 16px;">
-<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-left:3px solid ` + ButtonGold + `;border-radius:14px;padding:16px;">
+<td style="padding:20px 16px 0 16px;">
+<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-radius:14px;padding:16px;">
 <div style="font-size:13px;color:` + TextSecondary + `;margin-bottom:8px;font-weight:600;">Button not working?</div>
 <div style="word-break:break-all;font-size:14px;line-height:22px;color:` + TextPrimary + `;"><a href="{{.CTAURL}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.CTAURL}}</a></div>
 </div>
@@ -560,11 +528,11 @@ Sharpen your skills with this short exercise: <strong style="color:` + TextPrima
 
 <!-- Footer -->
 <tr>
-<td style="padding:24px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:2px solid ` + ButtonGold + `;" bgcolor="` + EmailBackground + `">
+<td style="padding:28px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:1px solid ` + BorderColor + `;" bgcolor="` + EmailBackground + `">
 
 <div style="font-size:14px;color:` + TextPrimary + `;font-weight:600;">{{.PlatformName}}</div>
 <div style="margin-top:10px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">{{.Tagline}}</div>
-<div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Sent by Jerry Koko from Koder</div>
+<div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Sent by <strong>Jerry Koko</strong> from Koder</div>
 <div style="margin-top:14px;font-size:13px;line-height:20px;color:` + TextSecondary + `;">Need help? <a href="mailto:{{.SupportEmail}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.SupportEmail}}</a></div>
 <div style="margin-top:16px;font-size:12px;line-height:18px;color:` + TextSecondary + `;">&copy; {{.Year}} {{.PlatformName}}. All rights reserved.</div>
 
@@ -622,7 +590,7 @@ const passwordResetBody = `{{define "content"}}
 
 <!-- Header band -->
 <tr>
-<td style="background-color:` + EmailBackground + `;padding:18px 16px;border-left:4px solid ` + ButtonGold + `;" bgcolor="` + EmailBackground + `">
+<td style="background-color:` + EmailBackground + `;padding:18px 16px;" bgcolor="` + EmailBackground + `">
 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="left">
@@ -708,7 +676,7 @@ This secure link expires in <strong style="color:` + TextPrimary + `;">{{.Expire
 <tr>
 <td style="padding:20px 16px 0 16px;">
 
-<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-left:3px solid ` + ButtonGold + `;border-radius:14px;padding:16px;">
+<div style="background-color:` + EmailBackground + `;border:1px solid ` + BorderColor + `;border-radius:14px;padding:16px;">
 <div style="font-size:13px;color:` + TextSecondary + `;margin-bottom:10px;font-weight:600;">Button not working?</div>
 <div style="word-break:break-all;font-size:14px;line-height:22px;color:` + TextPrimary + `;"><a href="{{.ResetURL}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.ResetURL}}</a></div>
 </div>
@@ -718,11 +686,11 @@ This secure link expires in <strong style="color:` + TextPrimary + `;">{{.Expire
 
 <!-- Footer -->
 <tr>
-<td style="padding:24px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:2px solid ` + ButtonGold + `;" bgcolor="` + EmailBackground + `">
+<td style="padding:28px 16px 32px 16px;background-color:` + EmailBackground + `;border-top:1px solid ` + BorderColor + `;" bgcolor="` + EmailBackground + `">
 
 <div style="font-size:14px;color:` + TextPrimary + `;font-weight:600;">{{.PlatformName}}</div>
 <div style="margin-top:12px;font-size:13px;line-height:22px;color:` + TextSecondary + `;">{{.Tagline}}</div>
-<div style="margin-top:14px;font-size:13px;line-height:22px;color:` + TextSecondary + `;">Sent by Jerry Koko from Koder</div>
+<div style="margin-top:14px;font-size:13px;line-height:22px;color:` + TextSecondary + `;">Sent by <strong>Jerry Koko</strong> from Koder</div>
 <div style="margin-top:18px;font-size:13px;line-height:22px;color:` + TextSecondary + `;">Need help? <a href="mailto:{{.SupportEmail}}" style="color:` + ButtonGold + `;text-decoration:none;">{{.SupportEmail}}</a></div>
 <div style="margin-top:18px;font-size:12px;line-height:20px;color:` + TextSecondary + `;">&copy; {{.Year}} {{.PlatformName}}. All rights reserved.</div>
 
diff --git a/internal/email/email_test.go b/internal/email/email_test.go
index dc4c234..7909d95 100644
--- a/internal/email/email_test.go
+++ b/internal/email/email_test.go
@@ -46,11 +46,10 @@ func TestRenderPasswordReset_ContainsBrandAndStructure(t *testing.T) {
 		"support@koder.sbs",
 		"mailto:support@koder.sbs",
 		"Koder turns every problem into an instant feedback loop.",
-		"Sent by Jerry Koko from Koder",
+		"Sent by <strong>Jerry Koko</strong> from Koder",
 		"&copy; ",
 		"Koder",
-		"border-left:4px solid #D4AF37",
-		"border-top:2px solid #D4AF37",
+		"border-top:1px solid #E5E7EB",
 	}
 	for _, want := range required {
 		if !strings.Contains(out, want) {
@@ -189,11 +188,6 @@ func TestRenderBestPractices_ContainsBrandAndStructure(t *testing.T) {
 		"See top-rated community solutions",
 		"Discover Best Practices",
 		"See how top developers solve real problems",
-		"42",                    // solution count
-		"18",                    // developer count
-		"156",                   // total likes
-		"28",                    // Go count
-		"14",                    // Python count
 		"Community Solutions",
 		"AI-Powered Code Analysis",
 		"How to Get Featured",
@@ -208,10 +202,8 @@ func TestRenderBestPractices_ContainsBrandAndStructure(t *testing.T) {
 		"support@koder.sbs",
 		"mailto:support@koder.sbs",
 		"Koder turns every problem into an instant feedback loop.",
+		"Sent by <strong>Jerry Koko</strong> from Koder",
 		"&copy; ",
-		// Gold accent checks
-		"border-left:4px solid #D4AF37",
-		"border-left:3px solid #D4AF37",
 		"box-shadow:0 4px 14px rgba(212,175,55,0.35)",
 		"border-bottom:2px solid #B8941F",
 	}
@@ -225,11 +217,6 @@ func TestRenderBestPractices_ContainsBrandAndStructure(t *testing.T) {
 	if strings.ContainsAny(out, "😀🔒🤖🚀✨🔥") {
 		t.Errorf("rendered email contains emoji characters")
 	}
-
-	// Stats bar should have separate Go and Python cells, not "Go / Python".
-	if strings.Contains(out, "Go / Python") {
-		t.Errorf("rendered email still has combined 'Go / Python' stat (should be separate cells)")
-	}
 }
 
 func TestRenderBestPractices_FeatureCardsPresent(t *testing.T) {
@@ -346,7 +333,7 @@ func TestRenderProblemReminderString_ContainsLightThemeStyling(t *testing.T) {
 		"support@koder.sbs",
 		"mailto:support@koder.sbs",
 		"Koder turns every problem into an instant feedback loop.",
-		"border-left:4px solid #D4AF37",
+		"Sent by <strong>Jerry Koko</strong> from Koder",
 	} {
 		if !strings.Contains(out, want) {
 			t.Errorf("rendered reminder missing %q", want)
diff --git a/internal/email/problem_reminder_test.go b/internal/email/problem_reminder_test.go
index f0dcc69..69ae510 100644
--- a/internal/email/problem_reminder_test.go
+++ b/internal/email/problem_reminder_test.go
@@ -37,7 +37,7 @@ func TestRenderProblemReminder_ContainsExpectedFields(t *testing.T) {
 		"Open Problem",
 		"https://koder.sbs/logo.png",
 		"support@koder.sbs",
-		"border-left:4px solid #D4AF37",
+		"Sent by <strong>Jerry Koko</strong> from Koder",
 		"border-bottom:2px solid #B8941F",
 		"box-shadow:0 4px 14px rgba(212,175,55,0.35)",
 	}