feat: 前端整体重写为 QQ 邮箱风格布局

- base.html: 全新设计系统（顶部导航栏 + 左侧文件夹栏 + 内容区三栏布局，
  蓝/橙主题色），兼容管理后台原有组件类
- inbox/drafts/sent: 邮件列表页重写，支持全选、批量删除、实时搜索过滤、
  未读标记、头像圆标、QQ 式短日期、悬停行内删除、分页
- view: 邮件阅读页重写（返回/回复/删除工具条、发件人卡片、附件区）
- compose: 写信页重写（发送/附件/取消、字段行、附件 chips、配额进度条）
- settings/login/banned: 设置页（账号信息+配额条）、登录页、封禁页重写
- server.go: 新增模板函数 mailName/mailEmail/initial/truncate/shortDate/avatarStyle
- mail.go: 侧栏文件夹计数（收件箱未读红标、草稿/已发送数量）
- 新增 render_test.go 模板渲染回归测试

internal/web/templates/banned.html

@@ -7,17 +7,36 @@
     <title>访问被禁止 - MailGo</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .banned-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 48px; text-align: center; max-width: 480px; width: 100%; }
-        .banned-icon { font-size: 64px; margin-bottom: 16px; }
-        h1 { font-size: 24px; color: #c0392b; margin-bottom: 12px; }
-        p { color: #7f8c8d; line-height: 1.6; margin-bottom: 8px; }
-        .detail { background: #f8f9fa; border-radius: 6px; padding: 16px; margin: 16px 0; text-align: left; }
-        .detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+            background: linear-gradient(165deg, #fdecec 0%, #f6f8fc 55%, #eaf2ff 100%);
+            color: #1f2329; display: flex; justify-content: center; align-items: center; min-height: 100vh;
+        }
+        .banned-card {
+            background: #fff; border-radius: 14px;
+            box-shadow: 0 10px 40px rgba(227, 77, 89, 0.10);
+            padding: 48px; text-align: center; max-width: 480px; width: 100%;
+        }
+        .banned-icon {
+            width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
+            background: #fde8e8; display: flex; align-items: center; justify-content: center;
+            font-size: 34px;
+        }
+        h1 { font-size: 22px; color: #e34d59; margin-bottom: 12px; }
+        p { color: #646a73; line-height: 1.7; margin-bottom: 8px; font-size: 14px; }
+        .detail {
+            background: #f8f9fb; border-radius: 10px; padding: 16px 18px;
+            margin: 18px 0; text-align: left;
+        }
+        .detail-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f1f3; }
         .detail-row:last-child { border-bottom: none; }
-        .detail-label { color: #7f8c8d; font-size: 13px; }
-        .detail-value { color: #2c3e50; font-weight: 600; font-size: 13px; }
-        .back-link { display: inline-block; margin-top: 20px; color: #3498db; text-decoration: none; }
+        .detail-label { color: #8f959e; font-size: 13px; }
+        .detail-value { color: #1f2329; font-weight: 600; font-size: 13px; }
+        .back-link {
+            display: inline-block; margin-top: 22px; color: #1677ff;
+            text-decoration: none; font-size: 14px;
+        }
         .back-link:hover { text-decoration: underline; }
     </style>
 </head>